Using this thoroughly explained, detailed flash lesson, you will see how to create trendy and advanced blur photo banner with sound. You don't have to use action script code to make this banner. This banner, you can use for any presentation or flash animation. Using this lesson, you will also learn how to import any photos into a flash library, how to move any photo from the flash library on the flash stage using the Selection Tool (V) and drag and drop technique, how to convert any photo into a flash stage, how to apply blur filter on it and much much more!
Example:
Step 1
First, download photos that we will use for this photo banner.
Step 2
Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 250 pixels and the height to 188 pixels. Select white as background color. Set your Flash movie's frame rate to 434 and click ok.
Step 3
Call the current layer photo 1. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!
Step 4
Choose File > Import > Import to Library. In the file explorer window that appears, find a five photos and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see five photos that you just imported.
Step 5
Select the Selection Tool (V) and using the drag and drop technique, move the first photo from the Library on the stage!
Step 6
While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:
1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.
Step 7
After that, while the photo is still selected, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 8
Click now on frame 10,50 and 60 and hit F6 key on the keyboard.
Step 9
While you're still on frame 60, place photo on the position like it is shown on the picture below!
Step 10
After that, select the Selection Tool (V) and click once on the photo to select it. Then, go to the Properties Panel (Ctrl+F3) below the stage. After that, select FIlters tab on the left side, click on plus icon and choose Blur. Then, choose the following options:
Step 11
Go back now on the first frame, and place the photo on the position like it is shown on the picture below!
Then, repeat step 10.
Step 12
Right-click anywhere on the gray area between frame 1 and 10 and frame 50 and 60 on the timeline and choose Create Motion Tween from the menu that appears.
Step 13
It's time for sound, so create a new layer above the layer photo 1 and name it sound 1!
Step 14
Download now my example file (fla) at the end of tutorial and open it into a flash. After that, open my flash library (Ctrl+L), find my sound file, select it and press Ctrl+C key (Copy). After that, go back on the flash stage of lesson, select library and press Ctrl+V key (Paste). See the picture below!
Step 15
Select the first frame of layer sound 1 and move sound file from the flash library on the flash stage using the Selection Tool (V) and drag and drop technique.
Step 16
After that, select frame 50 of layer sound 1 and hit F6 key again. Then, move again sound file from the flash library on the flash stage. See the picture below!
Step 17
Create now a new layer above the layer sound 1 and name it photo 2.
Step 18
Click now on frame 60 of layer photo 2 and hit F6 key. While you're still on frame 60, move the second photo from the flash library on the flash stage.
Step 19
While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.
Step 20
Click now on frame 70, 110 and 120 and press F6 key.
Step 21
While you're still on frame 120, repeat steps 9 and 10.
Step 22
Go back now on frame 60 and repeat steps 11 and 10.
Step 23
Right-click anywhere on the gray area between frame 60 and 70 and frame 110 and 120 on the timeline and choose Create Motion Tween from the menu that appears.
Step 24
Create a new layer above the layer photo 2 and name it sound 2. After that, click on frame 60 of layer sound 2 and hit F6 key. While you're still on frame 60, move the sound file from the Flash Library on the flash stage again.
Step 25
Click now on frame 110 and hit F6 key. While you're still on frame 110, repeat the previos step.
We're done now with the first two photos.
Repeat this process also for every other photos
Have a nice day!
Download example
Apr 19, 2009
Blur photo banner with sound
Apr 17, 2009
Infinite Gallery / Menu
In this new and interesting Flash and ActionScript 3 tutorial I will teach you how to create an infinite gallery. This will also work perfectly for menus and so on. Let’s get started straight away!
Note: You need TweenMax in order to fully complete this tutorial.
Getting the images
Download six images (100×100) that you want to use in this tutorial. I downloaded the images from FreeDigitalPhotos.net.
Creating the Flash document
Create a new Flash (ActionScript 3) document of size 500×200. Make the background black.
Importing the Images to Flash
From the menu select File -> Import -> Import to Stage. Select the images that you have decided to use in this tutorial.
The images should now be on the stage.
Positioning the Images
Position the images vertically to the center of the stage. Space them evenly horizontally (leave some space between the images). You can use the align buttons to help you out.
Converting the Images to Movie Clips
Convert the leftmost image to a movie clip. Name it “My Image 1″ and set the registration point to the left edge.
Repeat this step to the rest of the images. Name them “My Image 2″, “My Image 3″ and so on…
Your library should now look like the following.
Adding ActionScript 3
Double click the “My Image 1″ movie clip. You should now be “inside” the movie clip. Go ahead and create a new layer called “actions”.
In the actions layer type the following code.
//Import TweenMax
import gs.*;
//Set the initial state for this movie clip
TweenMax.to(this, 0.5, {alpha: 0.4});
//Add mouse over & out event listeners
this.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
this.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
//This function is called when mouse is over this movie clip
function mouseOverHandler(e:Event):void {
//Tween the alpha
TweenMax.to(this, 0.5, {alpha: 1});
}
//This function is called when mouse is out of this movie clip
function mouseOutHandler(e:Event):void {
//Tween the alpha
TweenMax.to(this, 0.5, {alpha: 0.4});
}
Repeat this step to the rest of the images! We simply add some functionality when the user hovers over an image…
More Movie Clips
Now that we have the individual images all set up, we can start building the infinite gallery. In the main timeline, select all six image movie clips. Convert them to a single movie clip named “Gallery Images”.
and Still More Movie Clips …
In order to have the illusion of an endless loop of images, we need another instance of “Gallery Images” movie clip on the stage. So drag another “Gallery Images” movie clip on the stage and position it behind the first instance so that they are horizontally aligned.
The Last Movie Clip
Select both instances of the “Gallery Images” movie clips that are on the stage. Convert them to a single movie clip named “Infinite Gallery” and set the registration point to the left edge.
Give this movie clip an instance name of “infiniteGallery”.
Adding Final ActionScript 3
In the main timeline, create a new layer called “actions”. Type the following code.
//Import TweenMax
import gs.*;
//Save the horizontal center
var centerX:Number = stage.stageWidth / 2;
//Save the width of the whole gallery
var galleryWidth:Number = infiniteGallery.width;
//Speed of the movement (calculated by the mouse position in the moveGallery() function)
var speed:Number = 0;
//Add an ENTER_FRAME listener for the animation
addEventListener(Event.ENTER_FRAME, moveGallery);
function moveGallery(e:Event):void {
//Calculate the new speed
speed = -(0.05 * (mouseX - centerX));
//Update the x coordinate
infiniteGallery.x+=speed;
//Check if we are too far on the right (no more stuff on the left edge)
if (infiniteGallery.x>0) {
//Update the gallery's coordinates
infiniteGallery.x= (-galleryWidth/2);
}
//Check if we are too far on the left (no more stuff on the right edge)
if (infiniteGallery.x<(-galleryWidth/2)) {
//Update the gallery's coordinates
infiniteGallery.x=0;
}
}
This code is responsible for the illusion of an infinite loop. We simply check when we are too far on the left or the right side and repostion the “infiniteGallery” movie clip accordingly.
Final words
That’s it for this tutorial. I hoped you enjoyed it and learned some new ways of working with Flash and ActionScript 3. Feel free to download the .fla file to have a closer look. Comments are always welcome!
Movie Clip Follower
This tutorial will teach you how to create a cool animated mouse follower. It’s very easy to change to looks of the follower to fit for your needs!
Note: You need TweenMax in order to complete this tutorial.
Creating the Document
First, create a new Flash ActionScript 3 document.
Document Settings
Set the stage options to the following.
Creating the Background
With the rectangle tool, create a 400×300 sized rectangle without any stroke. Align it to the center of the stage.
Add a radial fill for the rectangle (left color: #00CCFF, right color: #000000)
New Layer for the Follower Movie Clip
Create a new layer named “follower”.
Create the Follower Movie Clip
In the “follower” layer, draw a white cirle without any stroke. Make it size 25×25. Convert the circle to a movie clip with the following settings.
Instance Name
Give the follower movie clip an instance name of “follower”.
Time for the ActionScript 3
Now that we have everything set up on the stage, let’s add some ActionScript to actually make the follower to follow our cursor! Create a new layer called “actions” and type the following.
//Import TweenMax
import gs.*;
//Listen when the mouse moves
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoves);
//This function is called when the mouse moves
function mouseMoves(e:Event):void {
//Tween the follower movie clip to the cursor's coordinates
TweenMax.to(follower, 0.5 ,{x :mouseX, y: mouseY});
}
Here we just listen when the mouse moves and when it does, we tween the follower to the cursor’s coordinates. We use TweenMax to make our lives a little easier 
//Call the function which tween various properties of the follower
up();
//This function adds more blur and scales the follower
function up():void {
//Tween the blur
TweenMax.to(follower, 0.5, {blurFilter:{blurX:15, blurY:15}});
//Tween the scale and call the function down() when finished
TweenMax.to(follower, 0.5, {scaleX: 1.5, scaleY:1.5, onComplete: down});
}
//This function removes blur and scales the follower
function down():void {
//Tween the blur
TweenMax.to(follower, 0.5, {blurFilter:{blurX:10, blurY:10}});
//Tween the scale and call the function up() when finished
TweenMax.to(follower, 0.5, {scaleX: 0.5, scaleY:0.5, onComplete: up});
}
As you can see, all the animation is done in the down() and up() functions. We simply go back and forth between the functions…
Final Words
That’s the end of this tutorial. I hope you enjoyed it and find it useful. Check out the .fla file if you’re still wondering how this works. And you have any questions or trouble, pls post them in the new forum!
Apr 6, 2009
Modern Preloader with ActionScript 3
In this tutorial I will show you how you can create a modern preloader with ActionScript 3. It is really easy to change the look of the preloader to fit for your needs!
Note: You need TweenMax to fully complete this tutorial.
Setting up the environment
1. Download an image that you want to load with the preloader.
2. Create a new Flash document that is the same size with your image.
3. Draw a circle without any stroke. Make it size 10×10. I used a grey fill color.
4. Convert the circle to a movie clip. Name it “PreloaderCircle” and set the registration point to the center.
5. Linkage the movie clip to a class named “PreloaderCircle“. If you are unfamiliar with movie clip linkage, please see the “ActionScript 3 External Classes” tutorial.
6. Remove the circle from the stage. We will create and position them with ActionScript 3.
Moving to ActionScript 3
7. Create a new layer for ActionScript and type the following.
//Impor TweenMax
import gs.*;
//We will add all the preloader circles to a holder movie clip
var holder:MovieClip = new MovieClip();
//This array will contain all the preloader circles
var circles:Array = new Array();
//This for loop creates and positions 5 preloader circles horizontally
for (var i:uint=0; i < 5; i++) {
//Create a new preloader circle
var circle:PreloaderCircle = new PreloaderCircle();
//Set the x position for the circle
circle.x = i * 20;
//Set the "tweened" property to false since we haven't tweened the circle yet
circle.tweened = false;
//Add the circle to the circles array
circles.push(circle);
//Add the circle to the holder
holder.addChild(circle);
}
//Add the holder to the stage
addChild(holder);
//Position the holder to the center of the stage
var holderWidth:Number = holder.width;
var holderHeight:Number = holder.height;
holder.x = stage.stageWidth / 2 - holderWidth / 2;
holder.y = stage.stageHeight / 2 - holderHeight / 2;
//Create a loader which loads the image
var loader = new Loader();
//Let's load the image.
//You can use your own URL here...
loader.load(new URLRequest("my_image.png"));
//Listen for the loading progress
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);
//This function is called as the loading progresses
function progressHandler(e:ProgressEvent):void {
//Check how much has been loaded (in percentages)
var loadedPercentage:Number = (e.bytesLoaded / e.bytesTotal) * 100;
//If over 20% is loaded, tween the first circle if it hasn't been tweened yet.
if (loadedPercentage > 20 && ! circles[0].tweened) {
//Tween the circle
TweenMax.to(circles[0], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}});
}
//If over 40% is loaded, tween the second circle if it hasn't been tweened yet.
if (loadedPercentage > 40 && ! circles[1].tweened) {
//Tween the circle
TweenMax.to(circles[1], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}});
}
//If over 60% is loaded, tween the third circle if it hasn't been tweened yet.
if (loadedPercentage > 60 && ! circles[2].tweened) {
//Tween the circle
TweenMax.to(circles[2], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}});
}
//If over 80% is loaded, tween the fourth circle if it hasn't been tweened yet.
if (loadedPercentage > 80 && ! circles[3].tweened) {
//Tween the circle
TweenMax.to(circles[3], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}});
}
//If 100% is loaded, tween the fifth circle if it hasnn't been tweened yet.
if (loadedPercentage == 100 && ! circles[4].tweened) {
//Tween the circle and call the function circlesTweened() when the tween is complete (this is the last circle).
TweenMax.to(circles[4], 1, {tint:0xff8800, glowFilter:{color:0xff8800, alpha:1, blurX:10, blurY:10}, onComplete: circlesTweened});
}
}
//This function is called when the cirlces have been tweened (the image is loaded)
function circlesTweened():void {
//Loop through the circles
for (var i = 0; i < circles.length; i++) {
//Tween the circles to the left side of the stage.
//Call the function circleLeft() when the tween is finished
TweenMax.to(circles[i], 0.5, {delay: i * 0.1, x: -200, alpha: 0, onComplete: circleLeft, onCompleteParams: [circles[i]]});
}
}
//This function is called when a circle is animated to the left side.
function circleLeft(circle:PreloaderCircle):void {
//Remove the circle from the stage
holder.removeChild(circle);
//Check if the circle is the last one (most right)
if (circle == circles[4]) {
//Remove the holder from the stage
removeChild(holder);
//Get the bitmap from the loader
var bm:Bitmap = (Bitmap)(loader.content);
//Add the bitmap to a movie clip holder
var bmHolder:MovieClip = new MovieClip();
bmHolder.addChild(bm);
//Add the bitmap holder to the stage
addChild(bmHolder);
//Animate the bitmap holder
TweenMax.from(bmHolder, 1, {alpha: 0});
}
}
8. You are done, test your movie! I hope you enjoyed this tutorial and learned something new from it 
Flash Bubbles with ActionScript 3
Learn how to randomly generate bubbles that interact with the mouse movement! We use ActionScript 3 as you may have guessed.
Setting up the environment
1. Create a new Flash document of size 400×300.
2. Draw a circle on the stage without any stroke. Make it of size 32×32.
3. Apply a radial fill for the circle. Use the following settings.
4. You should now have a similar looking circle.
5. Convert the circle to a movie clip. Name it Bubble and set the registration point to the center.
6. Linkage the movie clip to a class named “Bubble” (right click the movie clip in the library and select “Linkage” (CS3) or “Properties” (CS4)).
7. Remove the movie clip from the stage.
Moving to ActionScript 3
8. In the first frame of your Flash movie, type the following.
//The number of bubbles we will have on the stage
const NUMBER_OF_BUBBLES:uint = 60;
//Save the stage width and height
var stageWidth:Number = stage.stageWidth;
var stageHeight:Number = stage.stageHeight;
//This array will contain all the bubbles
var bubbles:Array = new Array();
//This loop creates and positions the bubbles to random locations
for (var i:uint = 0; i < NUMBER_OF_BUBBLES; i++) {
//Create a new bubble
var bubble:Bubble = new Bubble();
//Assign a random y coordinate (from 0 to 300)
bubble.y = Math.random() * stageHeight;
//Calculate the horizontal distance from the mouse cursor to the center of the stage
var distanceFromCenter:Number = mouseX - stageWidth / 2;
//Calculate the x coordinate (from -400 to 800)
bubble.x = Math.random()*stageWidth-Math.random()*distanceFromCenter*2;
//Assign a random scale
bubble.scaleX = bubble.scaleY = Math.random() + 0.3;
//Assign a random alpha
bubble.alpha = Math.random() + 0.5;
//Assign a random current angle for the bubble
bubble.currentAngle = Math.random() * Math.PI * 2;
//Assign a random angle speed
bubble.angleSpeed = Math.random() * 0.1;
//Assign a random radius for the bubble
bubble.radius = Math.random() * 5;
//Assign a random y speed
bubble.ySpeed = - Math.random() * 0.5;
//Assign a random y acceleration speed
bubble.acceleration = - Math.random() * 0.2;
//Add the bubble to the bubbles array
bubbles.push(bubble);
//Add the bubble to the stage
addChild(bubble);
}
//Add ENTER_FRAME listener for animating the bubbles
addEventListener(Event.ENTER_FRAME, moveBubbles);
//This function is called in each frame
function moveBubbles(e:Event):void {
//Calculate the horizontal distance from the mouse cursor to the center of the stage
var distanceFromCenter:Number = mouseX - stageWidth / 2;
//Calculate a new x speed for the bubbles
var xSpeed:Number = distanceFromCenter / 32;
//Loop through the bubbles array
for (var i:uint = 0; i < bubbles.length; i++) {
//Save the bubble to a local variable
var bubble:Bubble = (Bubble)(bubbles[i]);
//Update the ySpeed of the bubble (accelerate)
bubble.ySpeed += bubble.acceleration;
//Update the y coorinate
bubble.y+=bubble.ySpeed;
//Update the current angle of the bubble
bubble.currentAngle+=bubble.angleSpeed;
//Update the x coordinate
bubble.x+=Math.sin(bubble.currentAngle)*bubble.radius+xSpeed;
//Check if the bubble is over the top of the stage
if (bubble.y<0) {
//Assign a new random x coordinate
bubble.y=stageHeight;
bubble.x=Math.random()*stageWidth-Math.random()*distanceFromCenter*2;
//Assign a new random current angle
bubble.currentAngle=Math.random()*Math.PI*2;
//Assign a new random ySpeed
bubble.ySpeed= -Math.random()*0.5;
}
}
}
9. You are done, test your movie! Hope you enjoyed this tutorial and found it useful.
Apr 4, 2009
Flash 3D Carousel with XML and ActionScript 3
This tutorial is an interesting one. We’ll be creating a Flash 3D carousel using XML and ActionScript 3. You can easily change the number of images seen in the carousel to fit for your needs!
Making the XML file
Let’s start by creating the XML file. In the XML file we specify three important things,
- how many images we are using in the 3D carousel menu,
- the URLs where the images can be found and
- the URLs where the images should link to.
1. In your favorite text editor, type the following.
<?xml version="1.0" encoding="utf-8"?>
<carousel>
<number_of_images>10</number_of_images>
<images>
<image>
<url>http://flashmymind.com/3D_carousel/image1.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image2.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image3.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image4.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image5.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image6.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image7.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image8.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image9.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
<image>
<url>http://flashmymind.com/3D_carousel/image10.png</url>
<link_to>http://tutorials.flashmymind.com</link_to>
</image>
</images>
</carousel>
2. Save the file as “3D-carousel-settings.xml”.
Now we have our XML all ready! You are free to use your own images, just remember to make them all the same size and set the URLs to match your settings. I have used the following images (70×70).
Moving to Flash
3. Create a new Flash document of size 550×250.
4. In the first frame of your Flash movie, type the following.
//We use 70x70 sized images (change this if different for your images)
const IMAGE_WIDTH:uint = 70;
const IMAGE_HEIGHT:uint = 70;
//Set the focal length
var focalLength:Number = 500;
//Set the vanishing point
var vanishingPointX:Number = stage.stageWidth / 2;
var vanishingPointY:Number = stage.stageHeight / 2;
//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 = 200;
//Specify the path to the XML file.
//You can use my path or your own.
var xmlFilePath:String = "http://flashmymind.com/xml/3D-carousel-settings.xml";
//We save the loaded XML to a variable
var xml:XML;
//This array will contain all the imageHolders
var imageHolders:Array = new Array();
//We want to know how many images have been loaded
var numberOfLoadedImages:uint = 0;
//The total number of images according to XML file
var numberOfImages:uint = 0;
//Load the XML file.
var loader = new URLLoader();
loader.load(new URLRequest(xmlFilePath));
//We call the function xmlLoaded() when the loading is complete.
loader.addEventListener(Event.COMPLETE, xmlLoaded);
//This function is called when the XML file is loaded
function xmlLoaded(e:Event):void {
//Create a new XML object from the loaded XML data
xml = new XML(loader.data);
xml.ignoreWhitespace = true;
//Call the function that loads the images
loadImages();
}
//This function loads and creates holders for the images specified in the 3D-carousel-settings.xml
function loadImages():void {
//Get the total number of images from the XML file
numberOfImages = xml.number_of_images;
//Loop through the images found in the XML file
for each (var image:XML in xml.images.image) {
//Create a new image holder for an image
var imageHolder:MovieClip = new MovieClip();
//Create a loader that will load an image
var imageLoader = new Loader();
//Add the imageLoader to the imageHolder
imageHolder.addChild(imageLoader);
//We don't want to catch any mouse events from the loader
imageHolder.mouseChildren = false;
//Position the imageLoader so that the registration point of the holder is centered
imageLoader.x = - (IMAGE_WIDTH / 2);
imageLoader.y = - (IMAGE_HEIGHT / 2);
//Save where the imageHolder should link to
imageHolder.linkTo = image.link_to;
//Add the imageHolder to the imageHolders array
imageHolders.push(imageHolder);
//Load the image
imageLoader.load(new URLRequest(image.url));
//Listen when the image is loaded
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
}
//This function is called when an image is loaded
function imageLoaded(e:Event):void {
//Update the number of loaded images
numberOfLoadedImages++;
//Set the bitmap smoothing to true for the image (we know that the loader's content is a bitmap).
e.target.content.smoothing = true;
//Check to see if this is the last image loaded
if (numberOfLoadedImages == numberOfImages) {
//Set up the carousel
initializeCarousel();
}
}
As you can see we first create all the variables we are going to use in this Flash movie. Then we load the XML file. Once the XML file is loaded, we load all the images that are specified in the XML file. Finally, we call the function initializeCarousel(), which is responsible for creating the 3D carousel. Here is the function.
//This function is called when all the images have been loaded.
//Now we are ready to create the 3D carousel.
function initializeCarousel():void {
//Calculate the angle difference between the images (in radians)
var angleDifference:Number = Math.PI * (360 / numberOfImages) / 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 for the image (we space the images evenly)
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 = 0.3;
//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);
}
Now we have our carousel on the stage! You should have a similar looking Flash movie now.
Finally, let’s add the rotation function! Type the following.
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++) {
//Assign the 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();
}
//This function sorts the images so they overlap 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);
}
}
//This function is called when the mouse is over an imageHolder
function mouseOverImage(e:Event):void {
//Set alpha to 1
e.target.alpha=1;
}
//This function is called when the mouse is out of an imageHolder
function mouseOutImage(e:Event):void {
//Set alpha to 0.3
e.target.alpha=0.3;
}
//This function is called when an imageHolder is clicked
function imageClicked(e:Event):void {
//Navigate to the URL that is in the "linkTo" variable
navigateToURL(new URLRequest(e.target.linkTo));
}
You are done, test your movie! Hope you enjoyed this Flash ActionScript 3 tutorial