FLASH I. In this tutorial you will learn how to:

Transcription

1 FLASH I In this tutorial you will learn how to: Import Images Create a Motion Tween Preview an Animation Ease in and Ease out an Animation Stopping an Animation Step 1 We begin by choosing ActionScript 3.0 in the Create New section which will create a new document

2 Step 2 - Once the document is created, you will notice a STAGE which is where you place graphic content. Step 3 - Next we have a TIMELINE which organizes and controls a document s content over time in layers and frames 2 P a g e

3 Step 4 - The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the view of the STAGE. Step 5 Now we'll import images to our STAGE by going first to FILE menu 3 P a g e

4 Step 6 From the FILE menu hover over IMPORT and Click on IMPORT TO LIBRARY Step 7 - A dialog box will appear. Here you will Select your desired images 4 P a g e

5 Step 8 Click Open Step 9 - Click and Drag the car from the LIBRARY and place somewhere on the STAGE 5 P a g e

6 Step 10 - Right-click on the image and choose SELECT MOTION TWEEN Step 11 - A dialog box will appear prompting you to convert the image to a symbol. You will just click OK 6 P a g e

7 Step 12 - Click and drag the image and place it on the other side of the STAGE Step 13 - Notice how the image has a trajectory. This is the path that the image will take 7 P a g e

8 Step 14 - You will notice that the frames has been extended Step 15 Once you click and drag on the red playhead, you will see that the image moves from one side to the other 8 P a g e

9 Step 16 - We will now test the CONTROL animation by going to our menu and Clicking on Step 17 From the CONTROL menu, hover over TEST MOVIE and Click on TEST 9 P a g e

10 Step 18 A new window will appear which will show you the animation you have created so far. Notice how the animation is looping. Once you finished previewing your animation, just Close the window to continue editing Step 19 Next Click and Drag the playhead to the first frame 10 P a g e

11 Step 20 - Next, we will go to our PROPERTIES panel by Clicking on the tab Step 21 Go over to the ease section 11 P a g e

12 Step 22 - Click and drag the cursor to the RIGHT towards "100 OUT" This will make our animation start out quickly and then slow down as it comes towards the end Step 23 - We will preview our animation. From the CONTROL menu, hover over TEST MOVIE and Select on TEST. Also, you can press CTRL+ENTER on our keyboard to preview our animation 12 P a g e

13 Step 24 - The preview window open, notice how our animation starts out quickly and then slows down as it comes towards the end Step 25 - Once you finished previewing your animation, just Close the window to continue editing 13 P a g e

14 Step 26 Click and drag the cursor to the LEFT towards "-100 IN" This will make our animation start out slow and then speed up as it comes towards the end Step 27 As mentioned earlier, Press CTRL+ENTER on the keyboard to preview our animation 14 P a g e

15 Step 28 - Notice how the animation starts out Slow and then speed up as it comes towards the end. Again, once you finished previewing your animation, just close the window to continue editing Step 29 For now, place the ease option back to "0" so we keep our speed at default 15 P a g e

16 Step 30 Take the playhead to the LAST FRAME and see how to stop an animation from looping Step 31 - With the cursor we will next head to our image and drag it to the left a little to be able to see more clearly how the animation stops in a particular frame 16 P a g e

17 Step 32 Click on the CODE SNIPPETS section Step 33 Click to open the TIMELINE NAVIGATION folder 17 P a g e

18 Step 34 Click on STOP AT THIS FRAME to get the code options Step 35 Next click on SHOW CODE 18 P a g e

19 Step 36 Click on INSERT Step 37 You will now see that the code used to stop the animation is being implemented on a new layer on the TIMELINE 19 P a g e

20 Step 38 To verify that our animation will actually stop, we will preview it by using the keyboard command CTRL+ENTER. Notice now the image has stopped at the last frame of the animation and it's no longer looping. Step 39 Continue to make our animation by Closing our preview window 20 P a g e

21 Step 40 For now we'll undo the changes we created by first going to our TIMELINE and Clicking on the DELETE icon Step 41 Next drag the image to the left where it was previously located 21 P a g e

22 Step 42 Go back to the TIMELINE and Click on the NEW LAYER icon Step 43 Place the playhead towards the first frame 22 P a g e

23 Step 44 Go to the LIBRARY in order to use the next image Step 45 Click and drag the icon image and place it on the left side of the STAGE 23 P a g e

24 Step 46 Drag the playhead to the last frame Step 47 Right-click the image 24 P a g e

25 Step 48 Select CREATE MOTION TWEEN Step 49 A dialog box will appear prompting you to convert the image to a symbol. You will just Click OK 25 P a g e

26 Step 50 Click and drag the image and place it on the other side of the stage Step 51 Notice how the image has a trajectory. This is the path that the image will take 26 P a g e

27 Step 52 Now test the animation by pressing CTRL+ENTER in your keyboard. You can now see the animation you have created. Notice how both cars are moving to opposite sides of the STAGE Step 53 - Close the window and insert a few more images. 27 P a g e

28 Step 54 Click on FILE menu hover over IMPORT and choose IMPORT TO LIBRARY Step 55 A dialog box will appear. Here you will Select your desired image 28 P a g e

29 Step 56 Click Open Step 57 Your image should now be located in the LIBRARY 29 P a g e

30 Step 58 Head over to the TIMELINE and click on the NEW LAYER icon Step 59 go back to our library and click and drag our image to the center of the STAGE 30 P a g e

31 Step 60 Click on the FILE menu, hovering over IMPORT and choosing IMPORT TO STAGE Step 61 Once the dialog box appears, Select your desired image 31 P a g e

32 Step 62 Click Open Step 63 When you see the image on the STAGE, click and drag it to your desired location 32 P a g e

33 Step 64 - Now test the animation by pressing CTRL+ENTER in your keyboard Step 65 You can now see how with a few simple steps, you can create a basic animation using Flash CS5 33 P a g e

34 34 P a g e