Toxiclab.org

Photo gallery plus mouse control using the AS3

8.6.2009, 11:39
Submited in: Flash | Total Views: 18774

In this thoroughly explained, detailed flash lesson, I will show you how to create advanced photo gallery with full control using the mouse cursor and AS3. You can use this action script animation for any flash presentation, flash banner... 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, how to convert any photo into a flash movie and much much more! Let's start!

Example:



Step 1

First, download photos that we will use for this action script lesson.



Step 2


Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the width of your document to 300 pixels and the height to 225 pixels. Select white as background color. Set your Flash movie's frame rate to 32 and click ok.



Step 3

Call the current layer photos. 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 three photos and Shift-click to select them all. Then click open. If you now open your flash library (Ctrl+L key) you will see three photos that you just imported. See the picture below.



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, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 8

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip photos. See the picture below!



Step 9

Double-click on the movie clip on stage with the Selection tool(V). You should now be inside the Movie Clip.



Step 10

While the photo is still selected, hit again F8 key (Convert to Symbol) to convert it again into a Movie Clip Symbol.



Step 11

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 12

Click now on frame 80 and 140 and hit F6 key. While you're still on frame 140, 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. On the right, you will see the Color menu. Select Alpha in it and put it down to 0%.



Step 13

Right-click anywhere on the gray area between frame 80 and 140 on the timeline and choose Create Motion Tween from the menu that appears.



Step 14

Create a new layer above the layer photo 1 and name it photo 2. After that, Click on frame 80 and hit F6 key. While you're still on frame 80, move the second photo from the library on the flash stage.

Step 15

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 16

Click now on frame 140 and 220 and hit F6 key.

Step 17

Go back now on frame 80, select the Selection Tool (V) and repeat step 12.

Step 18

Right-click anywhere on the gray area between frame 80 and 140 on the timeline and choose Create Motion Tween from the menu that appears.



Step 19

Now, we're done with the first two photos. Repeat this process also for photo 3. It's time for action script, so go to the mani stage (Scene 1).

Step 20

Create a new layer above the layer photos and name it action script.

Step 21

Select the first frame of layer action script and go to the Action Script panel (F9). After that, enter this code inside the actions panel:

function stopFade(event:MouseEvent) {
 
 photos.stop();
 
}

function resumeFade(event:MouseEvent) {
 
 photos.play();
 
}

photos.addEventListener(MouseEvent.MOUSE_OVER, stopFade);
photos.addEventListener(MouseEvent.MOUSE_OUT, resumeFade);

We're done now!

Test your movie and enjoy!

Download example

Are you a website owner?
Click here to register and submit your tutorials!

Browse by category


Most popular tutorials