Flash tutorials
Home 3D (2) Actionscripting (66) Animation (100) Audio (4) Drawing (7) Full flash sites (4) Getting Started (15) Navigation (25) Special Effects (54) Text Effects (38)

Vertical Photo Scrolling animation

2.2.2010, 14:35    Total views: 15328

In this thoroughly explained, detailed flash lesson, I will show you how to create vertical Photo Scrolling animation using the Action Script code. Using this lesson, you will also learn how to import any photos into a flash stage, how to convert any content into a movie clip symbol, how to create instance name and much more. Let's start!

Example:



Step 1

First, download the photos that we will use for this lesson!



Step 2


Create a new (Action Script 3.0) 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 250 pixels. Select #999999 color as background color. Set your Flash movie's frame rate to 32 and click ok.



Step 3

Call the current layer fashion 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 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. See the picture below!



Step 5

Using the Selection Tool (V) and drag and drop technique, move the photos from flash library on the flash stage and place it on the position like it is shown on the picture below!



Step 6

Select all photos and hit F8 (Convert to Symbol) to convert it into a Movie Clip Symbol. Note! Registration point set to top!



Step 7

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_mc. See the picture below!



Step 8

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

Step 9

Select the first frame of layer action script code and go to the AS panel (F9). Then, enter this code inside the actions panel:

var verticalCenter:Number = stage.stageHeight / 4;
var limit:Number = stage.stageHeight - photos_mc.height; 
var speed:Number = 0.1;
var scrollY:Number = 1;

addEventListener(Event.ENTER_FRAME, scrollphotos);

function scrollphotos(e:Event):void {
 scrollY = - speed * ( mouseY - verticalCenter );
 photos_mc.y+= scrollY;
 if (photos_mc.y>0.8) { photos_mc.y= 0.8;}
  else if (photos_mc.y< limit) { photos_mc.y= limit; }
}

We're done!

Test your movie and enjoy!

Download source file (.fla)

Have questions about this tutorial?
Visit our friendly Community Forums!
Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!

Top tutorials

1. Advanced full flash site - Part 1
Total views: 225776

2. Water effect
Total views: 169742

3. Photo slide show
Total views: 157593

4. High-tech city animation
Total views: 154983

5. Special Picture Effect
Total views: 148813

Related links