Flash in-class exercise 1
syllabus | schedule | assignments | Web Resources | ARTC courses
1) Download clouds.jpg to your account by right-clicking on the image:


(clouds.jpg is a tilable image - horizontally, meaning that the right and left ends match up when looped)

2) In Flash, open a new file and save it as: username_inclass1.FLA (substituting username for your own name).

3) In Flash, File > Import clouds.jpg onto your STAGE (canvas area).

4) Set the dimensions of your STAGE to the dimensions of the cloud image by:

a) Clicking the SIZE button in the property inspector
b) DIMENSIONS: 426 (width) by 118 (height)
c) Change the BACKGOUND color to something other than white

5) Rename layer 1: SKY by double clicking on the layer name to highlight it.

6) Convert clouds to a Symbol by clicking on the clouds once and pressing the F8 key.

Name: grp_sky
Type: GRAPHIC

This is an example of making the symbol after you create the object.

SAVE.

7) Double click the clouds (on stage) to go into symbol edit mode. While there, duplicate the clouds so there are two (EDIT > COPY then EDIT > PASTE), place side by side with no gap inbetween. Like so:

8) Select both (hold shift while clicking) and GROUP them together (MODIFY > GROUP).

9) Click back to the main timeline, out of symbol edit mode.

HINT: click on SCENE 1 in upper left of EDIT BAR above TIMELINE.

10) At FRAME 1, line up the left edge of the CLOUDS with the left edge of the stage.

11) At frame 60, add a KEYFRAME by clicking in the timeline (under the # 60) and then press key F6.

SAVE.

12) Now, line up the right edge of the CLOUDS with the right edge of the stage by using your move tool (make sure the keyframe at frame 60 is still highlighted).

13) Click on the timeline between the two keyframes (frames 1 and 60) and add a MOTION tween in the property inspector.

14) SAVE and TEST MOVIE (CONTROL > TEST MOVIE). Close test window when finished viewing.

15) ADD a new layer called: FLYING OBJECT.

16) Create (with drawing tools, on STAGE) an object that you would see moving through the sky, i.e., bird, plane, UFO, etc.

17) Convert to symbol by selecting the FLYING OBJECT and press the F8 key:

Name: mc_flyingObject
Type: MOVIE CLIP

SAVE.

18) Double click your FLYING OBJECT and edit within the symbol edit mode:

a) Give your object some type of movement, such as, bird wings flapping, plane/UFO tilting, etc by using a frame by frame technique.

Do not use TWEEN here.
Do NOT animate it moving across screen.

19) Click back to main timeline and at FRAME 1, move your FLYING OBJECT off stage to the left.

20) Click on frame 60, add a keyframe and move your movie clip off stage on the right.

SAVE.

21) Click on the timeline between the two keyframes and add a MOTION tween in the property inspector.

22) Next, right click on flying object LAYER and choose ADD MOTION GUIDE.

23) On the motion guide layer, draw a WAVY LINE across the entire stage with the PENCIL tool.

SAVE.

24) Click on FRAME 1 of the flying object LAYER and drag it to start of path.

25) Next, click on last frame of the flying object LAYER and move it to the end of the path. Your object should now follow the guide you drew with the pencil.

Turn the visibilty of the MOTION GUIDE LAYER off by clicking on the layer's dot underneath the EYE.

26) SAVE and TEST MOVIE.

27) ADD a new layer called: PLANT. Place the plant LAYER below the flying object layer.

28) Create a BLANK SYMBOL by pressing the APPLE - F8 keys at the same time:

Name: mc_plant
Type: MOVIE CLIP

29) The timeline should be empty and say mc_plant at the top of the timeline -- you are in the plant's edit mode, but you still need to create the plant.

This is an example of making the symbol before the you make the actual object.

30) Create a simple animation of a tree, plant or flower growing from seedling to full size.

HINT: animating the plant is similar to animating the clouds except in a different direction -- going up the screen.

SAVE.

31) Click back to main timeline and drag multiples of your plant movie clip from the LIBRARY to the STAGE on the PLANT LAYER.

32) Make the different instances of your plant a variety of sizes using the TRANSFORM tool.

SAVE.

33) Select ALL and move your entire animation down one frame. This should leave a BLANK keyframe in FRAME 1 of every layer.

34) ADD a new layer called: BUTTON.

35) Create a BLANK SYMBOL by pressing the APPLE - F8 keys at the same time:

Name: btn_start
Type: BUTTON

SAVE.

36) Create the various STATES for a button of any shape, like so:

a) Draw a shape in the UP frame
b) Press F6 - this will add a keyframe to the OVER frame - change shape's color
c) Press F6 - this will add a keyframe to the DOWN frame - change shape's color
d) Press F6 - this will add a keyframe to the HIT frame - NO change's necessary: this state of the button is invisible to the person clicking on the button.

SAVE.

37) Click to main timeline and drag a BUTTON from the LIBRARY to the STAGE in FRAME 1 of the button LAYER.

38) Click in FRAME 2 of the button LAYER, and press F7 (adding a blank keyframe). The BUTTON should only appear in FRAME 1 and then disappear.

SAVE.

39) ADD a layer called ACTIONS and click in frame 1 of this layer.

40) While FRAME 1 is highlighted, open the actions panel: WINDOWS > Actions.

41) In the ACTIONS menu:

a) Click on Global Functions > Timeline Controls and double click on STOP.

This: stop(); should appear in the empty space to the right. You should see an "a" appear in FRAME 1 of the actions layer.

stop(); pauses the movie until the button is clicked.

SAVE.

42) With the ACTIONS menu still open, click ONCE on the BUTTON on STAGE to highlight it.

43) In the ACTIONS menu, in the blank white area to the right type:

on(release) {
gotoAndPlay(2);
}

Make sure what you typed matches exactly above!

on(release) - means the button is waiting for the user to click it. When clicked--user releases button and the animation starts to play.

44) Close the ACTIONS panel.

45) SAVE and TEST MOVIE.

46) ADD a new layer called: TITLE.

47) On FRAME 1 of the title layer, use the TEXT tool to type the title of your animation.

a) Select text and MODIFY > BREAK APART (do this twice) or click ONCE on your title (on frame 1) to highlight it and press APPLE - B TWICE!!!

b) Manipulate the letters using the Transform tool

SAVE.

48) Click on FRAME 2 of the title LAYER and press F7.

This is so your title doesn't appear for the entire movie.

49) One more thing, in the Control Menu, turn on Enable Simple Frame Actions and Enable Simple Buttons

50) SAVE and TEST MOVIE.