The procedure to get this done is by
- Creating an XML file with the image path and the link data in it.
- Then calling this xml data into flash.
- Placing the images in a 3D circle
- Providing the circular movement for the same
- Functions for 'on click' and 'on rollover'
| version="1.0" encoding="utf-8"?> > > > > > > > > > > |
| const IMAGE_WIDTH:uint = 70; const IMAGE_HEIGHT:uint = 70; var imgurl:URLRequest = new URLRequest(); var loadedimgs:uint = 0; var images_num = 0; var imageHolders:Array = new Array(); //Set the focal length var focalLength:Number = 500; //Set the vanishing point var vanishingPointX:Number = stage.stageWidth / 2; var vanishingPointY:Number = stage.stageHeight / 4; //The 3D floor for the images var floor:Number = 40; //We calculate the angleSpeed in the ENTER_FRAME listener var angleSpeed:Number = 0; //Radius of the circle var radius:Number = 150; var xmlLoader:URLLoader = new URLLoader(); var xmlData:XML = new XML(); xmlLoader.load(new URLRequest("carousel.xml")); xmlLoader.addEventListener(Event.COMPLETE, LoadXML); function LoadXML(e:Event):void { xmlData = new XML(e.target.data); trace(xmlData); Parseimage(xmlData); } function Parseimage(imageinput:XML):void { var imageurl:XMLList = imageinput.image.iurl; var imagelink:XMLList = imageinput.image.ilink; images_num = imageurl.length(); for (var i:int = 0; i < images_num; i++) { var urlElement:XML = imageurl[i]; var linkElement:XML = imagelink[i]; var imageHolder:MovieClip = new MovieClip(); var imageLoader = new Loader(); imageHolder.addChild(imageLoader); imageHolder.mouseChildren = false; imageLoader.x = - (IMAGE_WIDTH / 2); imageLoader.y = - (IMAGE_HEIGHT / 2); imageHolder.link = imagelink[i]; imageHolders.push(imageHolder); imgurl.url = imageurl[i]; imageLoader.load(imgurl); imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); } } function imageLoaded(e:Event):void { loadedimgs++; trace("loadedimgs: " + loadedimgs); e.target.content.smoothing = true; if (loadedimgs == images_num) { initializeCarousel(); } } //This function is to create 3D carousel. function initializeCarousel():void { //Calculate the angle difference between the images (in radians) var angleDifference:Number = Math.PI * (360 / images_num) / 180; //Loop through the images for (var i:uint = 0; i < imageHolders.length; i++) { //Assign the imageHolder to a local variable var imageHolder:MovieClip = (MovieClip)(imageHolders[i]); //Get the angle position for the image var startingAngle:Number = angleDifference * i; //Position the imageHolder imageHolder.xpos3D = radius * Math.cos(startingAngle); imageHolder.zpos3D = radius * Math.sin(startingAngle); imageHolder.ypos3D = floor; //Set a "currentAngle" attribute for the imageHolder imageHolder.currentAngle = startingAngle; //Calculate the scale ratio for the imageHolder (the further the image -> the smaller the scale) var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D); //Scale the imageHolder according to the scale ratio imageHolder.scaleX = imageHolder.scaleY = scaleRatio; //Set the alpha for the imageHolder imageHolder.alpha = .5; //We want to know when the mouse is over and out of the imageHolder imageHolder.addEventListener(MouseEvent.MOUSE_OVER, mouseOverImage); imageHolder.addEventListener(MouseEvent.MOUSE_OUT, mouseOutImage); //We also want to listen for the clicks imageHolder.addEventListener(MouseEvent.CLICK, imageClicked); //Position the imageHolder to the stage (from 3D to 2D coordinates) imageHolder.x = vanishingPointX + imageHolder.xpos3D * scaleRatio; imageHolder.y = vanishingPointY + imageHolder.ypos3D * scaleRatio; //Add the imageHolder to the stage addChild(imageHolder); } //Add an ENTER_FRAME for the rotation addEventListener(Event.ENTER_FRAME, rotateCarousel); } function rotateCarousel(e:Event):void { //Calculate the angleSpeed according to mouse position angleSpeed = (mouseX - vanishingPointX) / 4096; //Loop through the images for (var i:uint = 0; i < imageHolders.length; i++) { //Assigning imageHolder to a local variable var imageHolder:MovieClip = (MovieClip)(imageHolders[i]); //Update the imageHolder's current angle imageHolder.currentAngle += angleSpeed; //Set a new 3D position for the imageHolder imageHolder.xpos3D=radius*Math.cos(imageHolder.currentAngle); imageHolder.zpos3D=radius*Math.sin(imageHolder.currentAngle); //Calculate a scale ratio var scaleRatio = focalLength/(focalLength + imageHolder.zpos3D); //Scale the imageHolder according to the scale ratio imageHolder.scaleX=imageHolder.scaleY=scaleRatio; //Update the imageHolder's coordinates imageHolder.x=vanishingPointX+imageHolder.xpos3D*scaleRatio; imageHolder.y=vanishingPointY+imageHolder.ypos3D*scaleRatio; } //Call the function that sorts the images so they overlap each others correctly sortZ(); } //for sorting and overlaping images on each others correctly function sortZ():void { //Sort the array so that the image which has the highest //z position (= furthest away) is first in the array imageHolders.sortOn("zpos3D", Array.NUMERIC | Array.DESCENDING); //Set new child indexes for the images for (var i:uint = 0; i < imageHolders.length; i++) { setChildIndex(imageHolders[i], i); } } //for mouse over event function mouseOverImage(e:Event):void { //Set alpha to 1 e.target.alpha=1; } //for mouse out event function mouseOutImage(e:Event):void { e.target.alpha=.5; } //for onclick event function imageClicked(e:Event):void { //Navigate to the URL that is in the "linkTo" variable navigateToURL(new URLRequest(e.target.link)); } |
and click here to download source file
Source : http://www.tutorialized.com/view/tutorial/Horizontal-3D-Carousel-in-Flash-CS3/53124
Get this widget [ Here ]
No comments:
Post a Comment