Introduction to Multimedia. Adobe Animate CC. Lab Manual

Transcription

1 Introduction to Multimedia Adobe Animate CC Lab Manual Semester 1

2 Table of Contents A. Introduction p. 1 About Animate Understanding the Workspace of Animate B. Getting Started with Animate.... p. 7 Animate Document Setup Create Animation Publishing Basic drawing C. Play with Text..... p. 19 Text Tool Transforming Text Skew, Break Apart and Color Text Vertical Text, Rotate Text and Zoom Text D. Symbols and Interactivity.. p. 26 Graphic symbol Buttons symbol ActionScript Movie clip symbol E. Special Effects p.41 Shape Tween Mask Spotlight Motion Guides Motion Tween Motion Presets

3 F. Combine Animate Movies p.53 Add Scenes Load Movies G. Play with Graphic.. p.64 Brightness Tint Alpha Remove background H. Play with Sound.... p.71 Add background music Add sound effect I. Video... p.76 Steps for importing video ALL RIGHTS RESERVED. This lab manual is only for use in the course Introduction to Multimedia in HKU SPACE Community College.

4 A. Introduction About Animate What is Animate? Animate is a development tool that allows you to create interactive animations with cutting-edge drawing tools and publish them to multiple platforms. Animate can be used for Web sites Web-based applications Interactive applications Video Where can you obtain Animate? You can download a 7 days Free Trial version of Animate from Download page: SD&mv=other p. 1

5 Understanding the Workspace of Animate Menu Bar Stage Pasteboard Properties Panel (Properties inspector) Tools Panel Playhead Timeline p. 2

6 The followings are the important parts of the workspace: 1) Timeline, 2) Stage, 3) Panels and 4) Tools Panel. 1). Timeline The timeline is used to organize and control the movie s content by specifying when each object appears on the stage. The timeline has separate layers. Like transparent sheets of content stacked on top of one another. They allow users draw or place images on different layers without affecting other items on other layers. There is no limitation to the number of the layers. A well-categorized system of layers allows users to manage objects more efficiently. Adding a layer causes it to be placed on top of the other layers. Can be re-ordered by dragging up or down. The Front and Behind position of the object on the stage is related to sequence of the layers. Layer Show/Hide / Lock/Unlock / Show all Layer All Layers All Layers as Outline Insert layer Delete Layer Try to: 1. Insert / rename / delete layers 2. Show/Hide All Layers ( ) / Lock/Unlock ( ) All Layers / Show all Layer as Outline ( ) Note: When you choose any of the layers, a pen icon will be displayed on the layer. The timeline has a playhead. The playhead indicates which frame is playing. You can manually move the playhead by dragging it left or right. Dragging the playhead also allows you to do a quick check of the movie without having to play it. p. 3

7 Playhead Frames Current Frame The timeline is made up of individual units called frames. Content is displayed in frames as the playhead moves over them when the movie plays. The status bar indicates the current frame the playhead is on. 2). Stage Contains all objects that are seen by the viewer in the final movie. You can draw objects on, or import objects to the stage. 3). Panels Help you view, organize, and change elements or object in a file. The options available on panels control the characteristics of symbols, instances, colors, type, frames, and other elements. You can use panels to customize the Animate interface. Panels include Properties Panel, Library Panel, Tools Panel, Actions Panel, Color Panel, Swatches Panel, and etc. 4). Tools Panel Contains a set of tools used to draw and edit graphics and text. p. 4

8 Selection Free Transform Subselection 3D Rotation Lasso Pen Line Text Rectangle Pencil Brush Bone Eraser Hand Paint Bucket Eyedropper Zoom Stroke Color Fill Color p. 5

9 The followings are the tools and their functions: Tool Name Selection Function Selects objects on the work area; an object must be selected before it can be modified. Subselection Selects objects or parts of objects by dragging a rectangular selection marquee. Modifies specific anchor points in a line or curve. Free Transform Moves, scales, rotates, skews, or distorts objects. Lasso Pen Text Line Rectangle Oval Pencil Brush Ink Bottle Paint Bucket Eyedropper Eraser Hand Zoom Selects objects or parts of objects by dragging a free-form selection marquee. Draws lines or curves by creating a series of dots (anchor points technically) that are automatically connected. Creates and edits text. Draws straight lines (strokes) of varying lengths, widths and colors. Draws rectangles of different sizes and colors. Press and hold [Shift] to draw a perfect square. Draws oval shapes. Press and hold [Shift] to draw a perfect circle. Draws freehand lines and shapes. Draws / paints with brush-like strokes. Applies color, thickness and styles to lines. Fills enclosed areas of a drawing with color. Picks up styles of existing lines, fills, and text and applies them to other objects. Erases lines and fills. Moves the view of the Stage and Work Area. Increases or reduces the view of the Stage and Work Area. p. 6

10 B. Getting Started with Animate Animate Document Setup Animate document s size and speed setup Size: default pixels Speed: default 24 fps (frame per second) Try to do the setup as follows: 1. Click on pixels button in the Properties Panel to change the document size 2. Enter a value in the FPS edit box to change the speed. 3. Click on the Stage s swatch to choose background color. p. 7

11 Create Animation Starting Keyframe Ending Keyframe Basic animation requires two keyframes: the starting keyframe and the ending keyframe. A keyframe is a frame in which you define a change to an object s properties for an animation or include ActionScript code to control some aspect of your document. The number of frames between two keyframes determines the length of the animation. In Animate CC, there are 3 methods for creating an animation sequence: classic tweening, shape tweening and motion tweening. In this course, we focus on classic tweening and shape tweening. In classic tweening, you define properties such as position, size, and rotation for an instance (editable copies of symbols that are placed on the stage), group, or text block at one point in time, and then you change those properties at another point in time. In shape tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. p. 8

12 Basic steps to create a classic tweening in Animate: 1. Create a starting keyframe with object(s). 2. Select the starting keyframe on the layer of the timeline if it is not selected. 3. Insert on the menu bar > Choose Classic Tween. 4. Click the ending keyframe on the layer of the timeline, and then insert keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or by right-click Insert Keyframe). 5. Modify the content in the ending keyframe. Basic steps to create a shape tweening in Animate: 1. Create a starting keyframe with object(s). 2. Select the starting keyframe on the layer of the timeline if it is not selected. 3. Insert on the menu bar > Choose Shape Tween. 4. Click the ending keyframe on the layer of the timeline, and then insert keyframe (Insert on the menu bar > Choose Timeline > Click Keyframe or right-click Insert Keyframe). 5. Modify the content in the ending keyframe. p. 9

13 Tutorial B1 Creating a Animate Movie (Classic Tween) Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Click File and Save it as tween-motion.fla. 3. Click Fill Color Tool ( ) to choose any color you like. 4. Choose the Oval Tool ( ). 5. Use Oval Tool to draw a circle on the left hand side of the stage. 6. Select Frame 1 on Layer 1 of the timeline. 7. Click Insert on menu bar > Choose Classic Tween. p. 10

14 8. Click Frame 40 on Layer 1 of the timeline. 9. Click Insert on the menu bar > Choose Timeline > Click Keyframe. 10. Click Selection Tool ( ) from Tools Panel. 11. Use the Selection Tool to drag the circle to the right hand side of the stage, as shown in the above picture. 12. Click Control on the menu bar > Choose Test Movie > Choose In Animate to play the movie. 13. Save your work. Playback Animate movies are viewable through a browser. The browser must have the Flash Player plug-in. Web users must download ( and install the player in order to view and interact with Animate content. Animate movies can be saved as executable files, called projector, which can be viewed without the need of Flash Player. Publishing Output File Formats Save: Publish: *.fla Animate documents, which have the.fla filename extension, contain all the information required to develop, design, and test interactive content. It can be modified. *.swf The Shockwave file, in order to view your Flash/Animate movies on the Web, you must change the movie to a Shockwave file (.swf) format. *. html It is an HTML Wrapper. Flash/Animate generates the HTML code that references to its Shockwave file. p. 11

15 For example, *.exe It is a stand-alone projector file for Windows. It cannot be modified. *.app It is a stand-alone projector file for Mac. It cannot be modified. File > Publish to export movies out of Animate By default, it will export to.swf format, and Will generate the HTML codes that reference the Shockwave file. e.g. Code specifying the Shockwave movie that the browser will play Tutorial B1 (cont d) Publish a movie Steps: 14. Find and Open the Animate file tween-motion.fla if you have closed it. 15. Click File on the menu bar > Click Publish. 16. Locate and open (by double-click) the tween-motion.html which you have just published. p. 12

16 (Note: tween-motion.fla - the Animate movie file which you can modify tween-motion.swf - the Flash Player file tween-motion.html - the HTML document) Create a projector (executable file) Steps: 17. Open Animate program tween-motion.fla if you have closed it. 18. Click File on the menu bar > Publish Settings > Click Win Projector check box > Click OK. 19. Click File on the menu bar > Click Publish. p. 13

17 20. Locate and Open (or double-click) the tween-motion.exe which you have just published. Exercise B1 Requirements: 1. Open tween-motion.fla. 2. Insert a new layer and rename it to square. 3. Draw a square (any color) on the square layer. 4. Create a classic tween on the square layer and make the square move from the top to bottom of the stage. 5. Save the movie. p. 14

18 Basic Drawing Selection Subselection Free Transform Lasso Pen Line Oval tool Rectangle tool PolyStar tool Paint Bucket Tutorial B2 Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Click File and Save it as tools.fla. 3. Click View on the menu bar > Grid > Show Grid 4. Use different tools such as Rectangle Tool, Oval Tool, Polystar Tool and Line Tool to draw the followings: p. 15

19 (Tips to draw stars: ) 5. Click Selection Tool ( ) to select objects as the following samples 6. Click Lasso Tool ( ) to select irregular objects just like the followings, p. 16

20 7. Click Free Transform Tool ( ) > Click the Rotate and Skew option in the Option section of the Tools panel. 8. Insert a new layer > Click Frame 5 and insert a keyframe in this new layer > Use Pen Tool to draw an arrow like the followings: p. 17

21 (Try to use Paint Bucket Tool to fill any color and use Ink Bottle Tool to change the stroke color and style.) 9. Click Subselection Tool ( ) to distort the arrow. (Hint: click the boundary of the arrow to display the handles, and then distort the arrow by dragging the handle at the tip of the arrow.) p. 18

22 C. Play with Text Text Tool Animate acts similar to a word processor. It provides a lot of flexibility when formatting text. The Properties panel allows you to change the font, size, style and color of a single character or an entire text block. You can use the Properties panel to set margins, indents and line spacing. You can also align paragraphs such as left, right, center and justified. Transforming Text Text is also an object, and can therefore be transformed like other objects in Animate. The entire block gets transformed. Use Break Apart command to transform individual letters. Break apart is a process of making each area of color in a bitmap image into a discrete element you can manipulate separately from the rest of the image. Also, the process of breaking apart text to place each character in a separate text block. Skewing a text block Reshaping a letter after the text block has been broken apart. p. 19

23 Skew, Break Apart, and Color Text Tutorial C1 Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Click File > Save it as text.fla. 3. Type a word Cat on the stage, you may change the font size (please choose a bigger size), font type and font color. 4. Skew the text like the above picture by selecting the word Cat and click Free Transform Tool ( ). 5. Type another CAT on the stage, and fill each letter with different colors (Tip: use the Properties panel) p. 20

24 6. Save your work. 7. Change the shape of the letter C into a cat shape like the picture below. (Tip: Use Selection Tool to select the text > Right-click Break Apart twice, then you will find that the letters become a dot pattern. It indicates that they can now be edited > Click the Subselection Tool > Click the edge of the letter C and reshape the letter to cat shape.) p. 21

25 8. Change the word CAT with gradient color or multiple colors like picture below. Color Panel (Tip: Select each letter > Use Fill Color Tool ( ) > Choose gradient color or use Color Panel to change color) 9. Save your work. Vertical Text, Rotate Text and Zoom Text Tutorial C2 Before After Create Classic Tween for the vertical word Hello so that it can fly from the right to the left hand side of the stage starting from Frame 1 to Frame 10. Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Click File and Save it as TextVnR.fla. 3. Click File > Import to stage / Import to Library > Choose any picture such as Jellyfish.jpg. 4. Use Free Transform Tools to resize picture to make it the same size as the stage. 5. Rename Layer 1 as Background. p. 22

26 6. Insert Frame in Frame 45 of Background layer. 7. Insert another new layer ( ) and rename it to V-Hello. 8. Use Text Tool to type a vertical Hello on the right hand side of pasteboard like the picture below. (Tip: Use the Properties Panel to set the text attributes: font size = 50, color = yellow, Text Direction button = Vertical.) 9. Right-click in Frame 1 and select Create Classic Tween 10. Insert Keyframe in Frame 10 > Drag the vertical word Hello to the left side on the stage. 11. Right-click in Frame 10 on Layer V-Hello > Select Remove Tween. This action will remove the tweening effect from Frame 10 to Frame 45) p. 23

27 Create Classic Tween for the word Hello so that it can fly and rotate from the top to the center of the stage starting from Frame 1 to Frame 20 of R-Hello layer like the picture below. Steps: 12. Insert a new layer and rename it as R-Hello. 13. In Frame 1 of the R-Hello layer, use Text Tool to type Hello on top of the picture like the following: 14. Right-click in Frame 1 on Layer R-Hello > Select Create Classic Tween. 15. Under the Properties window, select CW in the Rotate dropdown list and type 2 in the times input box. 16. Insert Keyframe in Frame 20 on Layer R-Hello. 17. Drag the word Hello to the center. 18. Right-click in Frame 20 on Layer R-Hello > Select Remove Tween. (This will remove the tweening effect from Frame 20 to Frame 45) 19. Save your work and test the movie. p. 24

28 Create Classic Tween for the word Welcome which can zoom from large to small on the stage starting from Frame 21 to Frame 30 of the Welcome layer. Steps: 20. Insert a new layer and rename it as Welcome. 21. Insert Keyframe in Frame 21 on Layer Welcome. 22. Type a BIG word Welcome (such as size = 95) on the stage. 23. Right-click in Frame 21 on Layer Welcome > Select Create Classic Tween. 24. Insert Keyframe in Frame 30 on Layer Welcome > Click Free Transform Tool and drag the edge of the word Welcome to make it smaller. 25. Right-click in Frame 30 on Layer Welcome > Select Remove Tween. (This will remove the tweening effect from Frame 30 to Frame 45) 26. Save your work and test the movie. p. 25

29 D. Symbols and Interactivity What is symbol? In order to create a smaller file size, Animate allows you to create symbol (including graphic, button and movie clip) that can be re-used without adding file size. Symbols reside in the Library. Dragging a symbol from the Library to the stage creates an instance. Animate calls the original a symbol and the copies instances. Three types of symbols: 1) Graphic Graphic symbols are effective for re-usable single images. Can be static images or animated images. Can be changed in each instance of the image. Are tied to the main Timeline of the movie. 2) Button Animate can create interactive buttons that respond to mouse clicks, rollovers, or other actions. Each button has its own four-frame Timeline. When you select the button behavior for a symbol, Animate creates a Timeline with four frames. The first three frames display the button's three possible states; the fourth frame defines the active area of the button. The Timeline doesn't actually play; it simply reacts to pointer movement and actions by jumping to the appropriate frame. There are 4 states of buttons, they are: Up: A visual state representing how the button appears when the mouse pointer is not over it. Over: A visual state representing how the button appears when the mouse pointer is over it. Down: A visual state representing how the button appears after the user clicks the mouse. p. 26

30 Hit: A special, non-visual state that determines the area of the screen which the mouse sees as the interactive or hot area. ActionScript After you have created the button, you may need to add different actions to this button. Actions can be implemented by ActionScript. ActionScript is the scripting language of Adobe Animate. It allows you to create a movie that behaves exactly as you want. It has its own rules of syntax, reserves keywords, provides operators, and allows you to use variables to store and retrieve information. To add ActionScript, you can: Click Window on menu bar > Choose Actions to display Actions panel. Script pane Code Snippets 3) Movie Clip A movie within a movie. Retains independent timeline when you insert an instance of symbol into a movie. Keeps going even if the main timeline stops. Advantages to create a movie clip symbol Maintain its own independent timeline. Require only one layer and one frame in the main movie. Sound and associated ActionScript statement can be added. Can be used to animate a button. p. 27

31 Tutorial D1 Create Graphic Symbol 1. Open a new Animate document (with ActionScript 3.0). 2. Click File and Save it as ball.fla. 3. Draw a ball on the stage as shown in the picture: 4. Select the ball on the stage. 5. Click Modify on menu bar > Click Convert to Symbol (or right-click to choose Convert to Symbol). 6. Type ball in the name box and select Graphic. 7. Open the Library Panel (if necessary) and find the ball graphic symbol in the library. (To open the library panel, click Window > Choose Library). 8. Drag the ball symbol from the library to the stage so that your stage can have another copy of the ball. The original is called symbol and the copy is called instance. p. 28

32 9. Double-click a ball symbol (any one ball) to enter symbol-editing mode. The symbol indicates that you are in the edit symbol mode 10. Change the color of the ball from red to green (select the red part of the ball, and change the fill color of the ball from the Properties panel) 11. Click Scene 1 to exit the editing mode. You will find that the ball color of the instance on the stage reflects the color changes you made to the symbol. Break Apart an Instance 12. Use the Selection tool to select a ball (any ball you like) on the stage. 13. Click Modify on the menu bar > Click Break Apart. Now, the object is no longer linked to the symbol in the library. 14. Click a blank area of the stage to deselect the object. 15. Change the color of the ball from green to blue. 16. Check and compare the ball on the stage and the ball symbol in the library. p. 29

33 (The color of the ball of the original symbol remains unchanged, but the one which you applied the Break Apart command is different from the original symbol in the library. It is because you used the Break Apart command to break the link of the instance to its symbol so it won t follow the original.) Create Movie Clip Symbol 17. Select the blue ball. 18. Click Modify on the menu bar > Convert to Symbol (or right-click to choose Convert to Symbol). 19. Type the name ball movie, then select Movie Clip and click OK. 20. Enter symbol-editing mode to edit the ball movie (you can double-click ball movie icon in the library to enter the editing mode or double-click the blue ball on the stage.) 21. Add Classic Tween to make the ball turning (Hit: use Free Transform tool.) p. 30

34 22. Click Scene 1 to exit the editing mode and return to normal mode. 23. Save your work and test the movie. Tutorial D2 Create Buttons 1. Open the Animate document namely TextVnR.fla. 2. Lock all layers in order to protect them from being modified unintentionally. 3. Insert a new layer > Rename the layer as buttons. 4. Draw two red (any red) buttons like the following picture. One button is for play and another is for stop. p. 31

35 5. Select the Play button on the stage > Modify on the menu bar > Convert to Symbol > Name the button as Playbutton > Choose the type Button > Click OK to confirm and exit. 6. Click Edit on the menu bar > Choose Edit Symbols. After entering into editing mode, you will see the button timeline like the following: 7. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps for Frame Down and Frame Hit. p. 32

36 Change the color of different button states: Up: No change Over: Green Down: Blue Hit: Draw a rectangle Select Frame Hit and draw a rectangle (any color, same size or a little bit bigger than the original graphic) to cover it. 8. Click Scene 1 to quit the edit mode. 9. Click Control in menu bar > Click Test Movie to play the movie. p. 33

37 10. Select the Stop button on the stage > Click Modify on the menu bar > Convert to Symbol > Name button as Stopbutton > Choose the type Button > Click OK to confirm and exit. 11. Click Edit on the menu bar > Choose Edit Symbols. After entering into editing mode, you will see the button timeline like the following: 12. Select Frame Over > Right-click to Insert Keyframe. Repeat the same steps for Frame Down, and Frame Hit. Change the color of different button states: 13. Select Frame Over and change color to green. 14. Select Frame Down and change color to blue. 15. Click Scene 1 to exit the editing mode. 16. Click Control on the menu bar > Click Test Movie. 17. Save your work. Add ActionScript to a frame - Stop Actions 18. In the same file TextVnR.fla, select Frame 1 on the buttons layer. 19. Click Window on menu bar > Choose Actions in order to open the Actions Panel. p. 34

38 20. Click the Code Snippets button. 21. On the Code Snippets Panel, expand ActionScript and Timeline Navigation. 22. Double-click Stop at this Frame. Then, the corresponding ActionScript will appear in the Script pane. p. 35

39 23. Save and test the movie. The movie stops playing, because we assigned a stop action to the first frame of the timeline, so the playhead stops playing. (Note: The piece of ActionScript has been added to Frame 1 of the automatically-created Actions layer.) p. 36

40 Add ActionScript to buttons Play and Stop buttons 24. Single click to select Playbutton on the stage. On the Properties Panel, type btn_play as the instance name. 25. Open the Actions Panel. Select Playbutton, and then click Code Snippets. 26. On the Code Snippets Panel, expand ActionScript, Time Navigation, and then double-click Click to Go to Frame and Play. p. 37

41 27. Modify the ActionScript from gotoandplay(5); to gotoandplay(1); 28. Save and test the movie. p. 38

42 Note: When Playbutton has been clicked and released, the playhead will move to Frame 1 and the movie will start playing. 29. Single-click to select Stopbutton. On the Properties Panel, type btn_stop as the instance name. 30. Open the Actions Panel. Select Stopbutton, and then click Code Snippets. 31. On the Code Snippets Panel, expand ActionScript, Time Navigation, and then double-click Click to Go to Frame and Stop. p. 39

43 32. Modify the ActionScript from gotoandstop(5); to gotoandstop(1); 33. Save all the work and test the movie. Note: When Stopbutton has been clicked and released, the playhead will move to Frame 1 and the movie will stop there. p. 40

44 E. Special Effects Shape Tween In classic tweening, we cannot change the shape of an object. But we can use a shape tween to change a shape into another one over time. Layer Layers are located on the Timeline. They are used to organize and control the movie s content by specifying when each object appears on the stage. Layer types: 1. Normal It is the default layer type. All objects on these layers appear in the movie. 2. Mask A layer that contains mask item(s) through which underlying masked layer(s) are visible. 3. Masked A layer that contains the objects that are hidden and revealed by a mask layer. 4. Folder A folder helps to organize layers. 5. Guide Guide layers are used to create a path for animated objects to follow. p. 41

45 Shape Tween Tutorial E1 - circle becomes square, number 1 becomes 2 before after Steps: 1. Open a new Animate document. 2. Click File > Save it as ShapeTween.fla. 3. Rename Layer 1 to shape. 4. Use Oval Tool ( ) to draw a circle (any color) on the lower left corner of the stage. 5. Click Frame 1 on shape layer > Right-click to choose Create Shape Tween. 6. Click Frame 20 on the shape layer > Right-click to choose Insert Keyframe. 7. Delete the circle and draw a square on the upper right corner of the stage. 8. Test the movie and save your work. 9. Insert a new layer and rename it as number. 10. Click Frame 1 on the number layer. 11. Use Text tool to type a number 1 in the middle of the stage. 12. Click Frame 20 on the number layer > Right-click to choose Insert Keyframe. 13. Delete the number 1 and type a number Select the number 2 > Right-click to choose Break Apart. 15. Select the number 1 > Right-click to choose Break Apart. (So that both 1 and 2 are broken apart.) 16. Click Frame 1 on number layer > Right-click to choose Create Shape Tween. 17. Test the movie and save your work. p. 42

46 Mask Tutorial E2 Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. File > Save it as Mask.fla. 3. Double-click Layer 1 on the Timeline panel and rename it to Photo, and then click File > Import to stage (import any picture). 4. Insert a new layer and rename it to Text, and then type your name on the stage. 5. Create mask: Right-click Layer Text on the Timeline > Choose Mask. 6. Test and Save the movie. p. 43

47 Mask Spotlight Tutorial E3 1. Open a new Animate document (with ActionScript 3.0). 2. File > Save it as Spotlight.fla. 3. Rename Layer 1 to Text, and then type Catch me if you can! on the stage. 4. Set background color to black and the text to yellow. 5. Insert Frame in Frame 40 on Text layer. 6. Insert a new layer and rename it to Mask. 7. Click Oval tool on the toolbox to draw an oval (position at the beginning of the sentence) on the stage. 8. Right-click Frame 1 on Mask layer > Choose Create Classic Tween > Click Frame 40 on the same layer > Drag the oval to the end of the sentence. 9. Select the Mask layer > Right-click to choose Mask. 10. Test and save the movie. p. 44

48 Motion Guides Tutorial E4 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as Motion.fla. 3. Rename Layer 1 as Bean. 4. Right-click Layer Bean to choose Add Classic Motion Guide. (After that you will find that there are 2 layers). 5. Click Pencil tool > Click Pencil Mode (the lower part of the Tools panel) > Click Smooth option. 6. Click Frame 1 on the Guide layer > Draw a big S on the stage. 7. On the Guide layer, click Frame 40 > Right-click to choose Insert Frame. 8. On Layer Bean, draw an oval. Then, drag the oval over the beginning of the path (big S ) like the picture below. (The oval s registration point must intersect with the path). p. 45

49 9. On Layer Bean, click Frame 1 > Right-click to choose Create Classic Tween > Click Frame 40 on the same layer > Right-click and Insert Keyframe > Drag the oval to the end of the path (make sure that the registration point intersects with the path). 10. Test and save the movie. p. 46

50 Motion Tween Tutorial E5 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as MT.fla. 3. Rename Layer 1 as face. 4. Import the file face.png to Frame 1 of the face layer. 5. Right-click Frame 1 of the face layer, and choose Create Motion Tween. p. 47

51 6. Convert the image into a symbol by clicking Ok in the Convert selection to symbol for tween dialog. 7. Right-click Frame 10, choose Insert Keyframe, and then Position. p. 48

52 8. Move the image to another position of the stage (e.g. the top right corner). 9. Right-click Frame 20, choose Insert Keyframe, and then Scale. 10. Move the image to another position of the stage (e.g. the bottom right corner). 11. Use the Free Transform Tool to scale down the image. 12. Right-click Frame 30, choose Insert Keyframe, and then Rotation. p. 49

53 13. Move the image to another position of the stage (e.g. the top left corner). 14. Use the Free Transform Tool to rotate the image. 15. Right-click Frame 40, choose Insert Keyframe, and then Rotation. 16. Move the image to another position of the stage (e.g. the bottom left corner). 17. Use the 3D Rotation Tool to rotate the image. 18. Test and save the movie. p. 50

54 Motion Presets Tutorial E6 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as MP.fla. 3. Rename Layer 1 as ball. 4. Import the file ball.png to Frame 1 of the ball layer. 5. Move the image to the top left corner of the stage. 6. Use the Free Transform Tool to scale down the image. 7. Select the image. 8. On the menu, choose Window, and then Motion Presets. p. 51

55 9. On the Moton Presets Panel, choose Default Presets, and then bounce-out- 3D. 10. Convert the image into a movie clip by clicking Ok on the Convert selection to symbol for tween dialog. 11. Test and save the movie. p. 52

56 F. Combine Animate Movies Scenes Scenes provide a way to break up a long or complex document into smaller and more manageable sections. Each scene has its own Timeline. Open the Scene Panel: Window > Scene To add a Scene, choose Insert on the menu bar > Scene, or use the Scene Panel. Scene Panel allows you to manage and name your scenes Rename a scene Duplicate a scene Add a scene Delete a scene Reorder scenes New scenes can be created with new content. Existing content can be split into multiple scenes by copying and pasting frames from one scene s timeline to another. By default, Animate plays scenes in order. Buttons can cause a movie to jump from one scene to another. p. 53

57 Scenes Tutorial F1 - Click a button jumps to a scene 1. Open an Animate document Scenes.fla. 2. Create a classic tween for the title Main Menu (above and outside the stage) so that it can fly from the top to the upper middle of the stage like the picture below. (Before) (After) 3. Click Window on the menu bar > Select Scene to open the Scene panel. 4. Double-click Scene 1 to rename it to Menu. 5. Click the Add scene icon > Double-click Scene 2 to rename it to Ch1. 6. Click Menu in the Scene panel and notice that the timeline has changed to the Menu scene. p. 54

58 7. Click Ch1 in the Scene panel and notice that the timeline has changed to the Ch1 scene, which is blank. 8. Type a heading Chapter One in scene Ch1. 9. Save and test movie. There is no content or stop ActionScript in the Ch1 scene, so the movie just jumps from one scene to another. p. 55

59 Add interactivity to scenes 10. Make sure that the Menu scene is displayed. 11. Double-click Layer 1, and rename it to Title. 12. Insert a new layer and rename it to Chapter Create a button and name it as Chapter 1 in Frame 30 on Layer Chapter Select Frame 30 on Chapter 1 layer, right-click to choose Actions > Assign a stop statement to Frame 30. (The statement will then be added on the Actions layer.) p. 56

60 Add ActionScript on Chapter 1 button 15. Select the Chapter 1 button in the Menu scene. On the Properties Panel, type btn_toch1 as the instance name. 16. Right-click Frame 30 on Chapter 1 layer to open the Actions Panel. 17. Select the Chapter 1 button > Click Code Snippets > Expand ActionScript, Timeline Navigation on the Code Snippets Panel > Double-click Click to Go to Frame and Play. p. 57

61 18. Change the ActionScript statement from gotoandplay(5); to gotoandplay(1, Ch1 ); 19. Save and test the movie. Create a back button in Chapter One and add actions to this button 20. Click the Scene list ( ) > Click Ch1 to go to Scene Ch Right-click Frame 1 on Layer 1 to choose Actions > Assign a stop function to Frame 1. (The stop statement will then be added to the Actions layer.) p. 58

62 22. Insert a new layer and rename it to Menu. 23. On Layer Menu, create a button called Home. Select the Home button. On the Properties Panel, type btn_tomenu as the instance name. 24. Select the Home button. Right-click Frame 1 on Actions layer to open the Actions Panel. 25. Select Code Snippets. On the Code Snippets Panel, expand ActionScript, Timeline Navigation, and then double-click Click to Go to Frame and Play. p. 59

63 26. Change the ActionScript statement from gotoandplay(5); to gotoandplay(1, Menu ); 27. Save and test movie. p. 60

64 Load Movies Load Movie action can be used to load a movie. You can split a single movie into a number of different movies and use ActionScript to load movies as needed. You must know the name and location of the movie file you want to load. Tutorial F2 - Use a button to a load movie 1. Open an Animate document called loadmovie.fla. 2. Select Chan s Project 1 button. On the Properties Panel, type btn_proj1 as the instance name. 3. Open the Actions Panel. 4. Select the Chan s Project 1 button, and then click Code Snippets. On the Code Snippets Panel, expand ActionScript, Load and Unload, and then double-click Click to Load/Unload SWF or Image. p. 61

65 5. Specify the target movie file by replacing the filename placeholder with Scenes.swf. p. 62

66 6. To remove the original movie from the screen before loading the target movie, the following piece of ActionScript needs to be inserted. 7. Save and test the movie. p. 63

67 G. Play with Graphics Understanding the Format 1. Vector graphics Vector graphics describe images using lines and curves, called vectors, which also include color and position properties. Vector graphics are usually based on mathematical formulas. For example, the image of a leaf is described by points through which lines pass, creating the shape of the leaf's outline. The color of the leaf is determined by the color of the outline and the color of the area enclosed by the outline. Animate is a vector-based application. All images and motion within the application are calculated according to mathematical formulas. This vector-based format results in smaller file size. 2. Bitmap graphics Bitmap graphics describe images using colored dots, called pixels. Bitmap image is based on pixels, not on a mathematical formula. For example, the image of a leaf is described by the specific location and color value of each pixel in the grid, creating an image in much the same manner as a mosaic. p. 64

68 Working with Graphics In Animate, graphic objects are items on the Stage. Animate lets you move, copy, delete, transform, stack, align, and group graphic objects. You can also link a graphic object to a URL. Keep in mind that modifying lines and shapes can alter other lines and shapes on the same layer. Basically, there are two ways to work with graphics. You can draw (graphics create by you) or import images / photos. Drawing You draw graphics by using tools in Animate. Image / Photo Import images or photo into your Animate. Changing the properties You can change the brightness, tint, and alpha of the graphics; redefine how the graphic behaves. For example, changing the color and transparency of a graphic p. 65

69 Brightness, Tint and Alpha Tutorial G1 Change photo brightness Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as Photos.fla. 3. Rename Layer 1 to Photo1. 4. File > Import any photo and resize if necessary. 5. In Frame 1, Create Classic Tween > In Frame 10, Insert Keyframe. 6. Click Frame 1 > Select the photo > In the Properties Panel, choose Brightness in the Style dropdownlist and set the Bright parameter to 100%. 7. Insert Keyframe in Frame 20 > Insert Keyframe in Frame In Frame 30, select the photo > In the Properties Panel, choose Brightness in the Style dropdownlist and set the Bright parameter to 100%. 9. Save and test the movie. p. 66

70 Change photo colors - tint Green Red Blue Steps: 1. Use the same file. 2. Insert a new Layer and rename to Photo2. 3. In Frame 30 on Layer Photo2, Insert Keyframe > File > Import any photo and resize if necessary. 4. Right-click the photo > Choose Convert to Symbol > Choose Graphic > OK. 5. Insert Frame in Frame 60 on the same layer. 6. Insert Keyframe in Frame 40 and Frame 50 of the same Layer. 7. Click Frame 30 on Layer Photo2 > Select the photo. 8. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color to green and the percentage to 50%. 9. Click Frame 40 on Layer Photo2 > Select the photo. 10. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color to red and the percentage to 50%. 11. Click Frame 50 on Layer Photo2 > Select the photo. 12. In the Properties Panel, choose Tint in the Style dropdownlist. Set the color to blue and the percentage to 50%. 13. Save and test the movie. p. 67

71 Change photo transparency - Alpha 1. Use the same file. 2. Add Layer 3 and rename to Photo3. 3. In Frame 65 on Layer Photo3, Insert Keyframe > File > Import any photo and resize if necessary. 4. In Frame 65, Create Classic Tween. 5. In Frame 75, Insert Keyframe. 6. In Frame 85, Insert Keyframe. 7. In Frame 95, Insert Keyframe. 8. Click Frame 65 > Select the photo > In the Properties Panel, choose Alpha in the Style dropdownlist and set the percentage to 10%. p. 68

72 9. Click Frame 95, select the photo > In the Properties Panel, choose Alpha in the Style dropdownlist and set the percentage to 10%. 10. Remove Tween from Frame 75 to Frame Save and test the movie. p. 69

73 Remove Background Tutorial G2 1. Open the Animate document RemoveBg.fla. 2. Rename Layer 1 to Background. 3. File > Import any photo and paste it to the stage. 4. Select the imported photo > Right-click to Break Apart the photo. 5. Click Lasso button ( ) > Click Magic Wand ( ) in Option. 6. Pick any point in a particular region using the Magic Wand > Right-click to select cut or Press the Delete button on the keyboard to remove that region. 7. Save your work after you have finished. p. 70

74 H. Play with Sound Importing sounds You can place sound files into Animate by importing them into the Library for the current document. To import a sound to an Animate document: 1. Choose File > Import to Library. 2. In the Import dialog box, locate and open the desired sound file. To add a sound to a movie: 1. Import the sound into the Library if it has not already been imported. 2. Choose Insert > Layer to create a layer for the sound. (When placing a sound on the Timeline, it is recommended that you place it on a separate layer.) 3. With the new sound layer selected, drag the sound from the Library panel onto the Stage. Then, the sound is added to the current layer. Note: You can place multiple sounds on one layer, or on layers containing other objects. However, it is recommended that each sound be placed on a separate layer. Each layer acts like a separate sound channel. The sounds on all layers are combined when you play back the movie. p. 71

75 Sound Tutorial H1 Add background music Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as Sound.fla. 3. Rename Layer 1 to Bg. 4. File > Import a photo to the Library. 5. Drag the photo to the stage. 6. File > Import a music file to the Library. 7. Insert a new layer > Rename Layer 2 to music. 8. Click Frame 1 on Layer music. 9. Go to the Library panel > Click to select the desired sound file > Drag it to the stage. 10. Save and test the movie. 11. Insert Frame in Frame 40 for both Layer photo and Layer music (to ensure that the whole movie lasts for 40 frames). 12. You may repeat the background music several times or loop the background music. p. 72

76 13. To avoid the background music from overlapping, Event should be changed to Start in Sync. p. 73

77 Tutorial H2 Use buttons to Play and Stop sound Steps: 1. Open a new Animate document (with ActionScript 3.0). 2. Save file as controlsound.fla. 3. Create a play button and stop button. 4. Double-click the play button to enter editing mode. 5. Insert a new layer in play button > Rename the layer to play sound. 6. Insert Keyframe at Down frame on that layer. 7. Import any sound file to the library. 8. Drag the sound file from library to the stage. (make sure you have selected down frame) 9. Save and test movie. 10. Use Selection tool to select the Stop button. On the Properties Panel, type btn_stop as the instance name. p. 74

78 11. Open the Actions Panel. 12. On the Actions Panel, click Code Snippets. On the Code Snippets Panel, expand ActionScript, Audio and Video, and double-click Click to Stop All Sounds. 13. Save and test movie. p. 75

79 I. Video To import video into Animate you must use video encoded in the FLV or H.264 format. The Video Import Wizard (File > Import > Import Video) checks video files that you select for import, and alerts you if the video might not be in a format that Animate can play. In the event that the video is not in either the FLV or F4V format, you can use Adobe Media Encoder to encode the video in the appropriate format. Adobe Media Encoder Adobe Media Encoder is a stand-alone encoding application employed by programs such as Adobe Premiere Pro, Adobe Soundbooth, and Animate for output to certain media formats. Depending on the program, the Adobe Media Encoder provides a specialized Export Settings dialog box that accommodates the numerous settings associated with certain export formats, such as Adobe Flash Video and H.264. For each format, the Export Settings dialog box includes a number of presets that are tailored for particular delivery media. You can also save custom presets, which you can share with others or reload as needed. Import video file Tutorial I1 1. Open a new Animate program. 2. Save file as video.fla. 3. Click File on menu bar > Choose Import > Choose Import Video. 4. Browse to select any video file. p. 76

80 In case the video is not in a format that Animate can play, Adobe Media Encoder should be used to encode the video in the appropriate format. Adobe Media Encoder can be started by clicking the Convert Video button. p. 77

81 p. 78

82 Next, the new video file should be selected by clicking the Browse button again. Then, you may follow the steps in the Video Import Wizard. p. 79

83 The Skinning panel allows you to choose the playback controls used to play the video. Then, it will start importing the video. p. 80

84 5. Save and test movie. p. 81