Carousel 3D with XML

YokoVnfx

Bài viết mới

Chuyên mục

Các bài viết bổi bật

Trang

Quản trị

Truy cập

Ai từ đâu đến ?

Bước 1:

Bước 2:

Bước 3:

Bước 4:

Bước 6:

* Xem kết quả ở đây!!

_ Tạo FLA Document “Carousel.fla”

_ Vẽ 1 hình chữ vuông kích thướt 70×70 màu trắng cho alpha=0. Convert nó thành movieClip đặt tên là “holder”

_ Tạo 1 textField DynamicText đặt tên là “_txt”. Convert thành movieClip đặt tên là “loader”

_ Tạo 1 movieClip “imageHolder”. Trong movie này tạo 2 layer

Layer1 : kéo movieClip holder trong thư viện vào đặt tên “holder”

Layer2: kéo movieClip loader trong thư viện vào đặt tên “loader”

_ Đặt tên linkage cho movie imageHolder là “ImageHolder”

_ Thoát ra scene ngoài cùng xóa hết tất cả đi

_ Tạo file “carousel.xml” trong thư mục “carouselData”

* Lưu ý: file “carousel.fla” nằm cùng cấp với thư mục “carouselData”

_ Cấu trúc XML

CODE:

<carousel>
<number_of_images>10</number_of_images>
<images>
<image>
<url>carouselData/icon1.png</url>
</image>
<image>
<url>carouselData/icon2.png</url>
</image>
<image>
<url>carouselData/icon3.png</url>
</image>
<image>
<url>carouselData/icon4.png</url>
</image>
<image>
<url>carouselData/icon5.png</url>
</image>
<image>
<url>carouselData/icon6.png</url>
</image>
<image>
<url>carouselData/icon7.png</url>
</image>
<image>
<url>carouselData/icon8.png</url>
</image>
<image>
<url>carouselData/icon9.png</url>
</image>
<image>
<url>carouselData/icon10.png</url>
</image>
</images>
</carousel>

_ Viết class load hình

_ Tạo 1 class đặt tên là “ImagesLoader.as” trong thư mục “loader”

CODE:

package loader {
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.display.MovieClip;
import flash.net.URLRequest;
import flash.display.Loader;

import proxy.Proxy;

import flash.display.Sprite;

/**
* @author yoko
*/
public class ImagesLoader extends Sprite {
private var REQUEST : URLRequest;
private var LOADER : Loader;
private var URL : String;
private var IMG_HOLDER : MovieClip;
public static var MC : MovieClip;

public function ImagesLoader(url : String,img_holder : MovieClip) {
IMG_HOLDER = img_holder;
URL = url;
startLoad();
}

private function startLoad() : void {
LOADER = new Loader();
REQUEST = new URLRequest(URL);
LOADER.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, Proxy.create(onProgressHandler));
LOADER.load(REQUEST);
}

private function onProgressHandler(mProgress : ProgressEvent) : void {
var percent : Number = Math.floor(mProgress.bytesLoaded / mProgress.bytesTotal * 100);
IMG_HOLDER.loader._txt.text = percent;
if(mProgress.bytesLoaded == mProgress.bytesTotal) {
IMG_HOLDER.loader.visible = false;
LOADER.contentLoaderInfo.addEventListener(Event.COMPLETE, Proxy.create(onCompleteHandler));
}
addChild(IMG_HOLDER.loader);
}

private function onCompleteHandler(loadEvent : Event) : void {
loadEvent.target.content.smoothing = true;
IMG_HOLDER.holder.addChild(LOADER);
addChild(IMG_HOLDER.holder);
}
}
// end class
}

_ Tạo class “LoaderXML.as” trong thư mục “com/Carousel”

CODE:

package com.Carousel {
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;

import proxy.Proxy;

/**
* @author yoko
*/
public class LoaderXML {
private static var LOADER : URLLoader;
private static var REQUEST : URLRequest;
public static var XMLDATA : XML;
public static var COMPLETE : Function;

public static function createLoaderXML(_strPath : String) : void {
LOADER = new URLLoader();
REQUEST = new URLRequest(_strPath);
LOADER.load(REQUEST);
LOADER.addEventListener(Event.COMPLETE, Proxy.create(onLoadXmlComplete));
}

private static function onLoadXmlComplete(evt : Event) : void {
if(evt.target as URLLoader != null) {
XMLDATA = new XML(LOADER.data);
COMPLETE();
}else {
trace(“Connect Fail!”);
}
}
}
// end class
}

Bước 5:

_ Tạo class “MainControlCasousel.as” trong thư mục “loader”

CODE:

package com.Carousel {
import flash.display.MovieClip;

import proxy.Proxy;

import loader.ImagesLoader;

import flash.events.Event;
import flash.events.MouseEvent;

import gs.TweenMax;

/**
* @author yoko
*/
public class MainControlCasousel {
private var XMLData : XML;
private var LOADER : ImagesLoader;
private var ROOT : MovieClip;
private var IMG_HOLDER_ARRAY : Array;
private var COUNT : Number = 0;
private var TOTAL : Number;

private var Floor : Number = 40;
private var Radius : Number = 200;
private var FocalLength : Number = 500;
private var AngleSpeed : Number = 0;
private var Angle : Number,StartAngle : Number,ScaleRatio : Number;
private var XCENTER : Number,YCENTER : Number;

public function MainControlCasousel(mainTimeLine : MovieClip) {
ROOT = mainTimeLine;
ROOT.stage.frameRate = 24;
//——
XCENTER = (ROOT.stage.stageWidth / 2) – Floor;
YCENTER = ROOT.stage.stageHeight / 2;
//——
LoaderXML.createLoaderXML(“carouselData/carousel.xml”);
LoaderXML.COMPLETE = Proxy.create(loadImages);
}

private function loadImages() : void {
IMG_HOLDER_ARRAY = new Array();
XMLData = LoaderXML.XMLDATA;
XMLData.ignoreWhitespace = true;
TOTAL = XMLData.number_of_images;
for each(var xml:XML in XMLData.images.image) {
var IMG_HOLDER : MovieClip = new ImageHolder() as MovieClip;

IMG_HOLDER.urlImg = xml.url;

LOADER = new ImagesLoader(IMG_HOLDER.urlImg, IMG_HOLDER);

Angle = Math.PI * (360 / TOTAL) / 180;
StartAngle = Angle * COUNT – 1;

IMG_HOLDER.Xpos3D = Radius * Math.cos(StartAngle);
IMG_HOLDER.Zpos3D = Radius * Math.sin(StartAngle);
IMG_HOLDER.Ypos3D = Floor;
IMG_HOLDER.Angle = StartAngle;
IMG_HOLDER.Loader = LOADER;

ScaleRatio = FocalLength / (FocalLength + IMG_HOLDER.Zpos3D);

IMG_HOLDER.Loader.scaleX = IMG_HOLDER.Loader.scaleY = ScaleRatio;
IMG_HOLDER.Loader.x = XCENTER + IMG_HOLDER.Xpos3D * ScaleRatio;
IMG_HOLDER.Loader.y = YCENTER + IMG_HOLDER.Ypos3D * ScaleRatio;
TweenMax.to(IMG_HOLDER.Loader, 1, {alpha:0.5});

IMG_HOLDER.addChild(LOADER);

IMG_HOLDER.Loader.addEventListener(MouseEvent.MOUSE_OVER, Proxy.create(mouseHoverItem, 2));
IMG_HOLDER.Loader.addEventListener(MouseEvent.MOUSE_OUT, Proxy.create(mouseHoverItem, 0.5));

IMG_HOLDER_ARRAY.push(IMG_HOLDER);

ROOT.addChild(IMG_HOLDER);

COUNT++;
}
if(COUNT == TOTAL) {
IMG_HOLDER.addEventListener(Event.ENTER_FRAME, rotateCarousel);
}
}

private function rotateCarousel(evt : Event) : void {
AngleSpeed = (ROOT.mouseX – XCENTER) / 4096;
for(var i : uint = 0;i < IMG_HOLDER_ARRAY.length;i++) {
var McHolder : MovieClip = (MovieClip)(IMG_HOLDER_ARRAY[i]);
McHolder.Angle += AngleSpeed;
McHolder.Xpos3D = Radius * Math.cos(McHolder.Angle);
McHolder.Zpos3D = Radius * Math.sin(McHolder.Angle);
ScaleRatio = FocalLength / (FocalLength + McHolder.Zpos3D);

McHolder.Loader.scaleX = McHolder.Loader.scaleY = ScaleRatio;
McHolder.Loader.y = YCENTER + (McHolder.Ypos3D * ScaleRatio);
McHolder.Loader.x = XCENTER + (McHolder.Xpos3D * ScaleRatio);
}
sortZ();
}

private function mouseHoverItem(evt : Event,Alpha : Number) : void {
TweenMax.to(evt.target, 0.5, {alpha:Alpha});
}

private function sortZ() : void {
IMG_HOLDER_ARRAY.sortOn(“Zpos3D”, Array.NUMERIC | Array.DESCENDING);
for(var i : uint = 0;i < IMG_HOLDER_ARRAY.length;i++) {
ROOT.setChildIndex(IMG_HOLDER_ARRAY[i], i);
}
}
}
// end class
}

_ Mở file “Carousel.fla” chọn frame 1 code

CODE:

import com.Carousel.MainControlCasousel;
new MainControlCasousel(this);

_ Lưu lại và chạy thử để xem kết quả.

« Tháng 11