gavin sim logo
 

Basic - week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Week 7

Teaching > Flash notes

Parallax Scrolling

This tutorial was extracted from Flash 3D, Animation, Interactivity and Games (2006), Focal Press.

 

You will need to use the classic tween within flash CS4.

 

Download Parallax.fla (Password required) and open it in Flash.

Create three new layers, background, middleground and foreground.

 

timeline

 

Open the library F11.

Drag each of the graphics to the appropriate layer e.g. Graphic fore is for the foreground layer.

Make sure that the left edge of each of the images is positioned to the left edge of the stage.

 

background image

 

Now Hide all the layers except the foreground. To do this click on the circle underneath the eye icon next to the layer name.

Click on the foreground image and press F8 to convert to symbol. Select movie clip give it an name of foreMC and press OK.

Double click the movie clip to open its time line.

Now insert a keyframe at frame 60 and move the graphic so that the right hand side is aligned to the stage.

background 2

Then select frame 1 and from thr top menu list select insert / classic tween options.

Frame 1 and 60 are the same so this will cause a slight pause in the animation. To resolve this right click frame 59 and insert a keyframe, then select frame 60 and right click choosing remove frame.

time line

Return to Scene 1.

Reveal the middleground layer. Convert this graphic to a movie clip named middleMC. This time insert a keyframe at frame 180 and move the graphic so that it is aligned to the right hand side of the stage.

Again select frame 1 and create a classic tween again.

Right click frame 179 and insert a keyframe, then select frame 180 and right click choosing remove frame.

Return to Scene 1.

Repeat the process of creating the animation for the background this initially needs to be over 360 frames and the sky which needs to be over 540. Don’t forget to alter the last frame of the animation as you did for the first two.

Finally create a new layer naming it cowboy. if it is not the top layer drag this layer to the top.

Open the cowboy folder and drag MC_cowboy to frame 1 of the cowboy layer placing it at the bottom of the screen so that part of it is just off the stage.

Control / Test Movie.

 

Excercise

Go to layers magazine and complete the tutorial on creating a 3D parralax effect in CS4. You can download the source files from the website.