Utah Education Network Web Animation Flash MX. Jessica Anderson (801)

Transcription

1 Web Animation Flash MX

2 12/30/03 2

3 Utah Education Network Web Animation Flash MX Jessica Anderson (801) Flash, a powerful vector graphics program, allows you to assemble dynamic animated and interactive content. Using graphics, animation, sound and interactivity, Flash can excite, teach, and provide practical information. Flash can help you bring excitement and creativity to your lessons and collaborative projects in the classroom. Because this is such a powerful program, participants should be experienced computer users to benefit the most from this course. Class Objectives q q q q q q q q Understand the different uses of flash in the classroom. Understand how to navigate in the Flash environment. Use Flash's drawing tools to create simple and complex objects. Add text and manipulate its behavior and appearance. Create frame-by-frame, shape tweened, and motion tweened animation. Build layers and use them to create effects. Manipulate objects, experiment with shape interaction, and import artwork. Publish a Flash movie. Course Outline Section 1: Introduction to Flash 5 q What is Flash q Vectors and Bitmaps q The Flash Environment Section2: Getting Started 9 q Movie Properties q Drawing with Flash Section3: Creating Animation 13 q Shape Tweening q Motion Tweening q Motion along a Path Section 4: Saving and Publishing 21 Section 5: Masking 23 Section 6 Buttons 25 q Simple q Sounds q Actions q Embedded Movies Tutorial 29 Homework 45 Evaluations 47 12/30/03 3

4 12/30/03 4

5 Section 1: Introduction to Flash What is Flash? Flash functions primarily as an authoring application for web developers, enabling them to create high-impact, fully interactive web sites. Previous to Flash, creating animated web sites (complete with sound) involved large files, which required equally robust bandwidth. Flash files, in contrast, can be very small, making bandwidth less of a concern. Furthermore, Flash has brought a level of advanced animation and interactivity previously unavailable using traditional Internet technology. Though Flash is predominantly used for the Internet, it can be used to create stand-alone applications that can be used in a presentation or put on to a CD-ROM. Flash is successful for a number of reasons, and one of the primary reasons is the core of its image technology: vector graphics. Digital Image Types: Vectors and Bitmaps There are two digital image types: bitmaps and vectors. Bitmap images are the most common type of image file outside the professional print world. Bitmap files map out or plot the image on a pixel-bypixel basis. Computer displays are made up of a collection of individual points or dots, called pixels, organized in columns and rows (similar to a table or a grid) where each cell represents each pixel in the image. The bitmap image file basically plots each pixel, such as pixel 300 wide by 250 high is red. Pixel 301 wide by 250 high is also red. Pixel 302 wide by 250 high is yellow and so on. Because bandwidth is a major concern when developing web sites, keeping the size of images to a minimum is very important. The main benefit of bitmap images is photographic color, tone, and texture is accurately produced. If you were to plot a bitmap on a grid, each pixel is detailed. Essentially, this is what your computer does when it displays bitmaps. Bitmap Pixel by Pixel Approximation (Reduced Scale) Vector images do not plot images on a pixel-by-pixel basis. Instead, vector files contain a description of the image expressed mathematically. Essentially, the file tells the computer about the image and the computer draws it. For instance, the image of a circle in vector format, written in plain English, might look something like this: Circle (200px) Fill Color: Gradient Gradient Type: Radial Colors: White, Black Line Color: None 12/30/03 5

6 One of the benefits of vector images is file size, particularly relative to the file size of bitmap images. The same circle as a bitmap file, at a resolution of 320x200, might look something like this in English: Row 1 Row 2 Pixel 1x1 is white Pixel 2x1 is white Pixel 3x1 is white Pixel 4x1 is white, etc. until we reach Pixel 320x1 Pixel 1x2 is white Pixel 2x2 is white, etc. Describing the circle (and the color surrounding it) on a pixel-by-pixel basis is a much more lengthy process than telling the computer to draw the circle itself. Another major benefit of vector graphics is scalability. Because the computer effectively draws the image for us, vector graphics are also scalable, meaning the size of the image can be increased or decreased without degradation. Because the file is an equation, placing different numbers into the equation results in the computer rendering the image correctly, but if you only modify the scale, the file size remains the same. Scaling vectors results in perfectly rendered images. The image on the left is the ball in its original size. The image on the right is the same ball with an increase in scale. The file size is the same. Bitmaps can be scaled, but an increase in scale degrades the image because the computer does not have enough information to create the new image. The computer merely takes the existing pixel information and translates one pixel into multiple pixels. For example, if we scale a 45x45 image to 90x90, each individual pixel in the image in its original state becomes four (4) pixels in its scaled state. This results in jagged edges that appear fuzzy on screen. 12/30/03 6

7 The Interface The Flash Workspace The Flash workspace consists of five main components: the Stage, the Toolbox, the Timeline, the Panels and the Property Inspector. The Stage The Stage is the work area. On the stage is where you draw or import artwork, add sound and text and create a navigation system. The Stage is basically where you create your movie. There are two areas of the stage, on stage and off stage. Anything that is on stage will appear in your movie. The off stage is a nice place to put items until it is their turn to come on stage. The Toolbox The Toolbox contains a collection of tools for creating, selecting, and manipulating content in the Timeline and on the Stage. The Toolbox is divided into four parts: Tools, View, Colors, and Options. 12/30/03 7

8 The Timeline The Timeline organizes and controls the movie s content over time. Flash divides lengths of time into Frames. Each frame can have it s own content or it can use the content from a previous frame. To help organize the content the timeline is also divided into layers. Layers are similar to transparencies stacked on top of each other. Each layer can contain an item for example the background layer may be visible though out the entire movie while a single object on a different layer may only appear in a couple frames of the animation. The Timeline consists of a number of controls that you will use to create artwork and animate it. As you progress through the next chapters you ll be using each of these controls. The Panels The Panels assist you when working with an object on the stage. There are several panels available. To see a list of panels go to the Windows Menu. You will learn more about the panels as we use them in our movie. The Property Inspector The Property Inspector displays the most frequently used setting for a tool or object on the stage. The properties displayed depend on what you have selected in you movie. The Library The Library stores reusable items called symbols. The library helps you work efficiently by storing objects that you don t have to recreate and can quickly update. The library is the main reason Flash can create such small file sized movies. 12/30/03 8

9 Section 2: Getting Started Set Document Properties Select Modify > Document from the main menu. The Document Properties dialog box appears. It s essential to set up the parameters of your Flash movie before you create your animations. By default, Flash movies are set on a Stage with a white background, at 550 pixels wide by 400 pixels high, 12 frames per second. If you want your Flash movie to be a different size or have a different background color, those properties must be set here. Drawing in Flash The drawing tools in Flash let you create and modify shapes for the objects in your movie. Before creating object in Flash, it is important to understand how the drawing tools work and how multiple shapes on the same layer affect each other. Fill vs. Stroke When you draw a shape in Flash the Fill and the Stroke of that object are separate items. If you use the pointer tool to select the object you may get only the fill or stroke. To select both double click on the shape. 12/30/03 9

10 Overlapping Shapes When you use the drawing tools to create a line across another line or shape, the overlapping lines are divided into segments at the intersection points. You can use the Arrow tool to select, move, and reshape each segment individually. When you overlap shapes of different colors the shapes will interact with each other by cutting out part of the underlying shape. When you overlap object of the same color with no stroke the two object will connect into one object. Drawing with the Pencil tool To draw lines and shapes, you can use the Pencil tool, just like you would use a real pencil to draw. To apply smoothing or straightening to the lines and shapes as you draw, you can select a drawing mode for the Pencil tool in the option portion of the toolbox. 12/30/03 10

11 Reshaping - Arrow tool To reshape a line or shape s outline, you can drag at any point on a line using the Arrow tool. The pointer changes to indicate what type of reshaping it can perform on the line or fill. The Key is not to select the object first, just move your curser over the area on the object you want to reshape. At endpoints you can make a line longer, shorter or move to a new location. On a sideline you can curve or straighten the line. If you need to add an end or intersecting point hold down the Control-drag (Windows) or Option-drag (Macintosh). 12/30/03 11

12 12/30/03 12

13 Section 3: Creating Animation With Flash you create animation by changing the content of successive frames similar to a flipbook. By doing this you can make an object move across the Stage, increase or decrease its size, rotate, change color, fade in or out, or change shape. Changes can occur independently of, or in concert with, other changes. For example, you can make an object rotate and fade in as it moves across the Stage. There are two basic methods for creating an animation sequence in Flash: frame-by-frame animation and tweened animation. In frame-by-frame animation you create the image in every frame. In tweened animation, you create starting and ending frames and let Flash create the frames in between. Flash varies the object's size, rotation, color, or other attributes evenly between the starting and ending frames to create the appearance of movement. We will look at two ways to animate in flash: motion tweening and shape tweening. Before you animate there are a few basics you need to know. Keyframes A keyframe is a frame where you define changes in the animation. When you create frame-by-frame animation, every frame is a keyframe. In tweened animation, you define keyframes at important points in the animation and let Flash create the content of frames in between. Flash displays the interpolated frames of a tweened animation as light blue or green with an arrow drawn between keyframes. Flash redraws shapes in each keyframe. You should create keyframes only at those points in the artwork where something changes. Keyframes are indicated in the Timeline two different ways, a keyframe with content is represented by a solid circle, and an empty keyframe is represented by a empty circle. Subsequent frames that you add to the same layer will have the same content as the keyframe. To create a keyframe, do one of the following: Select a frame in the Timeline and choose Insert > Keyframe. Right-click (Windows) or Control-click (Macintosh) a frame in the Timeline and choose Insert Keyframe. Shape Tweening By tweening shapes, you can create an effect similar to morphing, making one shape appear to change into another shape over time. Flash can also tween the location, size, and color of a shapes. Tweening one shape at a time usually yields the best results, unless the items are on separate layers. Flash cannot tween the shape of groups, symbols, text blocks, or bitmap images. To shape tween on of the mention items select it then use Modify > Break Apart. If you are shape tweening a word, you will need to use the Modify > Break Apart twice, once to break apart the word and then the second time to break apart the letters. 12/30/03 13

14 To Tween a shape: 1. Click a layer name to make it the current layer and select a keyframe where you want the animation to start. 2. Create the image for the first frame of the sequence. Use any of the drawing tools to create a shape. 3. Create a second keyframe the desired number of frames after the first frame. a. Select frame: Insert>Blank Keyframe b. The Timeline should look like this: 12/30/03 14

15 4. Create the image for the last frame of the sequence. (You can tween the shape, color, or position of the image created in step 2.) 5. Select a frame anywhere between the two keyframes and in the Property Inspector select Shape from the Tween pull down box. 6. The Timeline should now show the animation, Press Enter to start the animation. 7. To edit the animation just change anything in either Keyframe and Flash will update the inbetween frames. Motion Tweening Flash can tween position, size, rotation, and skew of objects and text. Additionally, Flash can tween the color of objects and text, creating gradual color shifts or making an object fade in or out. *To tween an object or text, you must make them into a symbol. Before you Animate: Creating Symbols You can create a symbol from selected objects on the Stage, or you can create an empty symbol and make or import the content in symbol-editing mode. Symbols can have all the functionality that you can create with Flash, including animation. 12/30/03 15

16 By using symbols that contain animation, you can create movies with a lot of movement while minimizing file size. Consider creating animation in a symbol when there is a repetitive or cyclic action the up-and-down motion of a bird's wings, for example. To create a new symbol with selected elements: 1. Select an element or several elements on the Stage and choose Insert > Convert to Symbol. 2. In the Symbol Properties dialog box, type the name of the symbol and choose the behavior Graphic, Button, or Movie Clip. 3. Click OK. *Flash adds the symbol to the library. The selected object on the Stage becomes an instance of the symbol. You can no longer edit the object directly on the Stage you must open it in symbol-editing mode. To create a new empty symbol: 1. Make sure that nothing is selected on the Stage and do one of the following: Choose Insert > New Symbol Click the New Symbol button at the bottom left of the Library window. Choose New Symbol from the Library Options menu in the upper right corner of the Library window. 2. In the Symbol Properties dialog box, type the name of the symbol and choose the behavior Graphic, Button, or Movie Clip. 3. Click OK. Flash adds the symbol to the library and switches to symbol-editing mode. *In symbol-editing mode, the name of the symbol appears above the top left corner of the stage window, below the Timeline, and a cross hair indicates the symbol's registration point. 4. To create the symbol content, use the Timeline, draw with the drawing tools, import media, or create instances of other symbols. 5. When you have finished creating the symbol content, do one of the following to return to movie-editing mode: Choose Edit > Edit Movie. Click the Scene button in the upper left corner of the stage window. To create a motion tween: 1. Create then convert the object or text you would like to tween to a symbol. Choose Graphic, name it, and click OK. 12/30/03 16

17 2. An instance of the symbol will be in the first Keyframe or drag and instance from the library panel into the first Keyframe. 3. Insert a second Keyframe where you want the animation to end. Notice all the in-between frames as well as the end Keyframe now have the instance copied into them. 4. Change the location, size, rotation and/or skew of the symbols in the appropriate keyframe. 5. Select the a frame in-between the two keyframes and add the motion tween by doing one of the following: Choose Insert > Create Motion Tween Choose Motion from the Tween pull down box in the Property Inspector. 6. Press enter to play the animation. You can make changes to either keyframe and Flash will update all the in-between frames. Tweening motion along a path Motion guide layers let you draw paths along which objects can be animated. 12/30/03 17

18 To create a motion path for a tweened animation: 1. Create a motion-tweened animation sequence as described above. 2. Do one of the following: Select the layer containing the animation and choose Insert > Motion Guide. Click the Add Motion Guide button in the lower portion of the timeline. 3. Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name. 4. Select the motion guide layer and use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path. 5. Snap the center of the symbol to the beginning of the line in the first frame, and to the end of the line in the last frame. *Drag the symbol by its registration point for best snapping results. 12/30/03 18

19 6. To hide the motion guide layer and the line so that only the object's movement is visible while you work, click in the Eye column on the motion guide layer. *The symbol follows the motion path when you play the animation. 12/30/03 19

20 12/30/03 20

21 Section 4: Saving and Publishing Saving a Flash Movie You can save a Flash FLA movie file using its current name and location, or save the document using a different name or location. You can revert to the last saved version of a file. Save a document: 1. Do one of the following: To overwrite the current version, choose File > Save. To save the file in a different location or with a different name, choose File > Save As. 2. If you choose the Save As command, or if the file has never been saved before, enter the file name and location. 3. Click Save. Revert to the last saved version: 1. Choose File > Revert. Publishing Flash movies Publishing a Flash movie on the Web is a two-step process. First, you prepare all required files for the complete Flash application with the Publish Settings command. The Publish Settings command lets you choose formats and specify settings for the individual files included in the movie including GIF, JPEG, or PNG and then store these settings with the movie file. Depending on what you specified in the Publish Settings dialog box, the Publish command then creates the following files: The Flash movie for the Web (the SWF file). Alternate images in a variety of formats that appear automatically if the Flash Player is not available (GIF, JPEG, PNG, and QuickTime). The supporting HTML document required to display a movie (or an alternate image) in a browser and control browser settings. Stand-alone projectors for both Windows and Macintosh systems and QuickTime videos from Flash movies (EXE, HQX, or MOV files, respectively). Publishing options for a Flash movie's files: 1. Specify where you will publish the Flash movie files: Create the folder where you want to save the published files, and save your Flash movie file. Browse to and open an existing folder, and save your Flash movie file. 12/30/03 21

22 2. Choose File > Publish Settings. 3. Select the option for each file format you want to create. 4. For Filename, choose from the following options: Use the default file names. Deselect Use Default Name. Then enter your own file name. You can browse to where you will publish the files and publish each file in a different location (for example, if you want to save the SWF file in one location and the HTML file in another location). On Windows, use backslashes to specify the directory/folder/file hierarchy; on the Macintosh, use colons (:). For a relative path, use \to indicate the path to the hard drive; for an absolute path, specify the drive name. For example: For example, in Windows, specify an absolute path as C:\Folder\filename.swf where C: is the drive name, \Folder specifies the folder name, and filename.swf is the name of the file. On the Macintosh, specify an absolute path as HardDrive name:folder:filename.swf. 5. Enter a unique name for Filename, or select Use Default Name to create each file using the Flash file's name with the extension appropriate for that format. 6. Click the tab for the format options you want to change. Specify publish settings for each format, as described in the following sections. 7. When you have finished setting options, do one of the following: Click Okay to save the settings for future publishing. Click Publish to go ahead and publish the files as specified by the settings Publish a Flash movie: 1. If necessary, set the publishing options for the files, as described in the previous procedure. 2. Choose File > Publish to create the files in the formats and location specified in the Publish Settings dialog box. 12/30/03 22

23 Section 5: Masking For spotlight effects and transitions, you can use a mask layer to create a hole through which the contents of one or more underlying layers are visible. You can group multiple layers together under a single mask layer to create sophisticated effects. You can also use any type of animation, except motion paths, to make the mask move. You cannot mask layers inside of buttons. To create a mask layer, you place a filled shape on the layer. The mask layer reveals the area that lie beneath the filled shape, and it conceals all other areas. Mask layers can contain only a single shape, instance, or type object. Create a Mask Layer: 1. Select or create a layer containing the content that will be visible through the holes in the mask. 2. With the layer selected, choose Insert > Layer to create a new layer above it. A mask layer always masks the layer immediately below it, so be sure to create the mask layer in the proper place. 3. Draw a filled shape, place type, or create an instance of a symbol on the mask layer. Flash ignores bitmaps, gradients, transparency, colors, and line styles in a mask layer. Any filled area will be completely transparent in the mask; any non-filled area will be opaque. 12/30/03 23

24 4. Right-click (Windows) or Control-click (Macintosh) the mask layer's name in the Timeline and choose Mask from the context menu. A mask layer always masks the layer immediately below it, so be sure to create the mask layer in the proper place. To display the mask effect in Flash, lock the mask layer and the masked layer. For a colored background change the background color. Modify>Document>Background color. For a spot light effect add a white rectangle to the Masked layer under the text. Once created the Mask or the Masked object can be animated. In the example above the oval that is the mask object moves across the screen appearing like a searching spotlight. 12/30/03 24

25 Section 6: Creating Buttons Buttons are actually four-frame interactive movie clips. When you select the button behavior for a symbol, Flash 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 cusor movement and actions by jumping to the appropriate frame. To make a button interactive in a movie, you place an instance of the button symbol on the Stage and assign actions to the instance. The actions must be assigned to the instance of the button in the movie, not to frames in the button's Timeline. Each frame in the Timeline of a button symbol has a specific function: The first frame is the Up state, representing the button whenever the cursor is not over the button. The second frame is the Over state, representing the button's appearance when the cursor is over it. The third frame is the Down state, representing the button's appearance as it is clicked. The fourth frame is the Hit state, defining the area that will respond to the mouse click. This area is invisible in the movie. Create a button: 1. Choose Edit > Deselect All to ensure that nothing is selected on the Stage. 2. Choose Insert > New Symbol. 3. In the Symbol Properties dialog box, enter a name for the new button symbol, and for Behavior choose Button. Flash switches to symbol-editing mode. The Timeline changes to display four consecutive frames labeled, Up, Over, Down, and Hit. The first frame, Up, is a blank keyframe. 12/30/03 25

26 4. To create the Up state button image, use the drawing tools, import a graphic, or place an instance of another symbol on the Stage. You can use a graphic or movie clip symbol in a button, but you cannot use another button in a button. Use a movie clip symbol if you want the button to be animated. 5. Click the second frame, labeled Over, and choose Insert > Keyframe. Flash inserts a keyframe that duplicates the contents of the Up frame. 6. Change the button image for the Over state. 7. Repeat steps 5 and 6 for the Down frame and the Hit frame. The Hit frame is not visible on the Stage, but it defines the area of the button that responds when clicked. Make sure that the graphic for the Hit frame is a solid area large enough to encompass all the graphic elements of the Up, Down, and Over frames. It can also be larger than the visible button. If you do not specify a Hit frame, the image for the Up state is used as the Hit frame. 12/30/03 26

27 Adding sounds to buttons You can associate sounds with the different states of a button symbol. Because the sounds are stored with the symbol, they work for all instances of the symbol. 1. Select the button in the library. 2. Choose Edit from the Library Options menu. 3. In the button's Timeline, add a layer for sound. 4. In the sound layer, create a regular or blank keyframe to correspond to the button state to which you want to add a sound. For example, to add a sound that plays when the button is clicked, create a keyframe in the frame labeled Down. 5. Click the keyframe you have just created. 6. Open the Sound Library: Window > Common Library > Sounds. 7. Drag a sound clip onto the canvas. Be sure to select the layer and frame you want the sound to be in before you drag it onto the canvas. 8. If the sound extended into more than one frame in the timeline just drag it back it just the frame you want it in. 9. Choose Event from the Property Inspector s Sync pull-down menu. To associate a different sound with each of the button's keyframes, create a blank keyframe and add another sound file for each keyframe. You can also use the same sound file and apply a different sound effect for each button keyframe. Assigning Actions to objects (Buttons) You can assign an action to a button to make an action execute when the user clicks a button or rolls the pointer over it. You assign the action to an instance of the button; other instances of the symbol aren't affected. Events are actions that occur while a movie is playing for example, a movie clip loading, the playhead entering a frame, or the user pressing a key on the keyboard. You can specify the mouse event or keyboard key that triggers the action. 12/30/03 27

28 Once you've assigned an action, it's recommended that you test whether it works. Only simple frame actions such as Go To and Play work in editing mode. To assign an action to a button: 1. Select a button and choose Window > Actions. If the selection is not a button instance, a movie clip instance, or a frame, or if the selection includes multiple objects, the Actions panel will be dimmed. 2. To assign an action, do one of the following: Click a folder in the Actions Toolbox. Navigate to the action you want and doubleclick the action to add it to the Script pane. Drag an action from the Actions Toolbox to the Script pane. Click the Add (+) button and chose the an action from the pop-up menu. If you selected a button, Flash automatically inserts the On Mouse Event code to trigger any selected action. 3. In the Parameters boxes at the top of the panel, enter the parameters needed. Using basic actions for navigation and interaction The basic actions in the Actions panel let you control navigation and user interaction in a movie by selecting actions and having Flash write the ActionScript for you. The basic actions include the following: The Go To action jumps to a frame or scene. The Play and Stop actions play and stop movies. The Toggle High Quality action adjusts a movie's display quality. The Stop All Sounds action stops all sounds in the movie. The Get URL action jumps to a different URL. The Tell Target action controls other movies and movie clips. The If Frame Is Loaded action checks whether a frame is loaded. The On Mouse Event action assigns a mouse event or keyboard key that triggers an action. 12/30/03 28

29 Section 7: Sample Project Tutorial Let s Learn The Alphabet Sample Project Building all the Pieces ( A ) The first steps will involve setting up the movie and then building all these pieces in the library. Once we have all the stuff in the library it s easy to put the animation together. Scene 1 Graphic symbol Graphic symbol Button symbol Graphic symbol Movie Clip symbol Scene 2 Library Apple Core jpeg Apple Core Symbol Graphic Symbol Button Symbol Graphic symbol -rectangle- 12/30/03 29

30 Movie Set-up 1. Open a new movie 2. Set the Background color: Modify > Document Adding Symbols to the Library The first step is creating all the graphic symbols. In this project there are five Graphic Symbols. Once these are made they can be used as building blocks for the Buttons and Movie Clips. Graphic Symbols Graphic Title 1. Insert > New Symbol: Give the symbol a name and select Graphic from the list of behaviors. Click the OK button when finished. 2. The symbol canvas will open. Using the text tool type the title Let s Learn the Alphabet on the canvas. Set font properties, and align it to the center. 12/30/03 30

31 Graphic Letter A 1. Insert > New Symbol: Give the symbol a name and select Graphic from the list of behaviors. Click the OK button when finished. 2. The symbol canvas will open. Using the text tool type the letter A on the canvas. Set font properties, and align it to the center Graphic Apple text 1. Insert > New Symbol: Give the symbol a name and select Graphic from the list of behaviors. Click the OK button when finished. 2. The symbol canvas will open. Using the text tool type the word Apple on the canvas. Set font properties, and align it to the center 12/30/03 31

32 Graphic Apple Core This one is a little different. First the Apple core jpg must be imported and then converted to a Graphic symbol. 1. File > Import: Navigate to the image, apple_core.jpg, and click open. 2. Once imported it ends up on the canvas and in the library as a jpg. To use it in an animation it must be converted to a symbol. a. Select the jpg by clicking on it. b. To convert it to a symbol: Insert > Convert to symbol. Give the symbol a name and choose Graphic, click OK. c. Once in the library delete it off the main canvas. Graphic Rectangle Create a Graphic Symbol and draw a small rectangle. The actual size and color don t matter. Movie Clip Symbols Movie clip symbols are short animations that sit in the library and can be used to show movement separate from the main timeline. We need to build the Movie clip that will play when the mouse rolls over the A button. Apple Movie Clip 1. Insert > New Symbol: Name it MC Apple and select Movie Clip from behaviors. Click OK. 12/30/03 32

33 2. On apple movie clip, add new layer. Name it letter A. Drag letter A from the library to the letter A layer into frame one. 2.1 Create another layer. Name it text. Drag the Apple text symbol into frame one. Line the Letter A with the the A in the Apple text. 3. In the movie clip, create a motion animation of your choice. The one in the sample fades in, slides to the right and compresses. 3.1 Go to frame 15 in the Text layer and insert a keyframe. Move the apple text with the free transform tool to compress and move it to the right. 3.2 Select the 1 st keyframe in the text layer and change the Apple text to an alpha of 10%. 3.3 Extend the Letter A layer to match the other layer by inserting frames or using the (F5) key. 4. Close the Symbol by clicking the main scene link under the timeline. 12/30/03 33

34 Buttons Symbols Back to Start Button 1. Insert > New Symbol: This time name it Button Back and choose the Button behavior. 2. This symbol canvas will have 4 pre made frames with each of the button states. Type Back tostart into the up frame. Insert a keyframe into all of the other frames. The Back to Start text will now appear in each frame. 3. Click the over frame and select the Back to Start text. To create the roll over, click once to select the text, change the color of the text using the Property Inspector color option. 4. In the Hit state draw a rectangle over the letter. (color doesn t matter) This defines the trigger or active area for the button. 5. Close the Symbol A Button Now build the A Button. 1. Insert > New Symbol: This time name the symbols Button A and choose Button. 12/30/03 34

35 2. Drag the A symbol from the library on to the stage in the first frame and insert a keyframe into the rest of the frames. 3. In the Hit state draw a rectangle over the letter. (color doesn t matter) This defines the trigger or active area for the button. Embedding a Movie Clip In the Sample movie when the mouse rolled over the button the word Apple animated out to the side. This little animation is the Movie clip that we already made. The mouse going over the button is the trigger so let s embed the clip in the A Button Symbol. 1. In the A button symbol add another layer and name it text animation. 2. Insert a keyframe in the Over frame on the text animation Layer. 3. Drag the MC Apple Movie clip into this frame. Align it where you want it to start. The button is now set up to play the mc apple movie clip when ever the over frame plays and this happens when the mouse rolls over the button. 5. Close the A Button symbol. 12/30/03 35

36 To test the buttons drag them from the library to the main canvas and then preview the movie in a browser by pressing F12 or File > Publish Preview > HTML or to preview in the Flash player press Ctrl and Enter at the same time. Building Scene One We now have all pieces needed to build the two scenes in this movie. Remember scenes can be used like separate pages. Lets start with scene one. Title Animation 1. You should have already made the Title symbol. If you haven t already do so now. Rename layer one title and drag the Title symbol from the Library into frame one. 2. Create a Motion Tween over 20 frames. In the Sample the instance start small and transparent so it appears to grow and fade in. Button Animation Next we want the A button to move into the scene and, to make it look nicer, let s have it follow a path. 12/30/03 36

37 1. Add another layer and rename it A button. 2. Insert a keyframe into the frame you want the animation to start. In this case it is frame Drag the Button A Symbol on to the stage. 4. Create a Motion Tween for the button. 3. Add a Guide Layer. By clicking the Add Motion Guide button under the timeline. 4. On the Guide layer draw the path for the button to follow using the pencil tool. 5. In the First and last Keyframes of the button tween attach the button to the path by dragging it near the path. When it s close, it will snap on. Note: It is best to drag the symbol by the cross-hairs. Remember to preview the movie. F12 or Ctrl-Enter. Building Scene Two Scene two acts like another page but is still part of the same movie. First let s build what we want scene two to look like and then we ll add the actions that provide the navigation or links between the two scenes. Scene two is what the user will see when the letter A is clicked. To add a scene: Insert > Scene Scene 2 will show up with one layer and one frame. In this scene we want the word Apple to animate onto the canvas, the apple core image to uncover and a button to get back to scene one. 12/30/03 37

38 1. Add two more layers for a total of three and rename them, text, apple, and back to start. 2. On the text layer, create a motion tween to bring the Apple text onto the canvas. The sample drops down from the top and flips horizontally from frame (Use Modify/Transform to make it flip from backward text to forward text.) 3. Insert a Keyframe at frame 10 in the apple layer and drag in the apple-core symbol. 4. Extend each layer out to 20 frames by inserting a frame at frame 20 in each layer. 5. In frame 20 of the back to home Layer add a keyframe and drag in the back to home Button. Position it where you want it to show. 12/30/03 38

39 Creating the uncovering effect for the Apple Core We will use the rectangle symbol in the library as the mask for the Apple core. 1. Add a layer directly above the Apple core layer and name it mask. 2. In frame 10 add a key frame and drag the rectangle symbol into it. 3. Create a motion tween from frame 10 to 20 for the rectangle that starts out small and to the right, on top of the apple and enlarges until completely covering the apple core. 4. Select the mask layer, right click on it and select Mask from the menu. Notice how the two layers changed. 6. Test/Preview 12/30/03 39

40 Adding Actions If you test the movie now it should play from frame one of Scene One to the last frame of Scene Two. Actions are a way to control when and in what order the frames play. For this Movie the first scene should play through until its last frame. This will get the title and button loaded, but it should stop on the last frame (30) and wait for further instructions. We also should be able to click on the A button and go to Scene Two. Scene two should play and then stop on frame 20 and wait for further instructions. We should also be able to click on the Back to Home button and go back to Scene One. Stopping The Stop Action is placed in a key frame so that when the movie gets to that frame it will stop. We need the Stop action in the last frame of each scene. Actions that are in frames like to have their own layer so the first step is adding another layer just for the actions. 1. Add another layer to Scene One and rename it Actions. 2. Add a Keyframe to frame 30 of the Action layer. 3. Open the Actions Panel Window > Actions 4. Select Frame 30 of the Actions layer and double click on the Stop action in the Actions panel. (Actions/Movie Control/Stop) Move the Actions layer to the top of the layers. 12/30/03 40

41 When you click back on the canvas there should be a lower case a in frame 30 of the Action layer. 5. Go to Scene 2 and do the same. Now that the movie is stopping where wanted, the button must get some action to make it move again. When the A button is clicked in scene One, the movie should go to Frame 1 of Scene 2 and begin to play. Adding Actions To Buttons When adding actions to buttons remember the action is added to the button when it is on the canvas and not while it is in the library. 1. Select the A Button in frame 30 of Scene One and open the Actions Panel. Note that the action panel says Action - Button and not Frame. 2. Double click on the Go To Action. This attaches the action to the button. 12/30/03 41

42 3. Change the parameters to Scene Two and Frame one. This tells the button when the mouse is clicked and released to go to Scene 2 frame 1 and play. 4. Repeat this process to add the Go To action to the Back to Home Button in Scene Two. It should go to Scene Oneframe one. Or frame 30 if you don t want to watch the scene one animations. 5. Click back on the canvas to set and the test/preview to see if the button works. What About the B and C Scenes Now that the Main Scene (Scene 1) and the A Scene (Scene 2) are done, building the B and C Scenes entail repeating the process of building the A scene. There are two time-saving techniques that can save time recreating the scene and all the library items. First, rename Scene 1 to Title (window/scene) and double click. Change Scene 2 to Apple. Next, duplicate the Apple scene (Window/scene and choose the symbol that shows 2 rectangles with a +). Rename the scene Butterfly. To further help, we duplicate all the A assets in the library, put them in their own folder, change their names (B) and letters, then swap out the instances. It will be clearer when we do it. Organizing the Library 1. Create an asset folder in the library for each letter by clicking on the brown folder like button on the bottom of the Library panel. Name it A assets 12/30/03 42

43 2. Drag all the A stuff into this folder. When a symbol is inside a folder it becomes indented. 3. Create another folder named B assets. 4. Duplicate each symbol in the A folder, change the names to the B names as you duplicate, and drag them into the B folder. (ie. Change Apple text to Butterfly text.) Don t do the apple core symbols. Duplicate by right clicking on the symbol and choosing Duplicate off the menu. You can rename them as you go. Just don t change the type of symbol they are. 5. Open up the Graphic symbol that has the word Apple on it. Delete Apple and Replace it with Butterfly. 6. Open up the Graphic symbol that has the letter A on it. Delete A and Replace it with B. 7. Now instead of completely rebuilding the Button and Movie Clip symbol we will just swap out the A symbols for the B symbols that we just modified. (Bring movie clip or button to stage, CLICK ONCE ONLY, swap w/ butterfly text and letter B.) 12/30/03 43

44 8. Double click on the butterfly movie clip to open it. In each key frame is a symbol from the A assets. We need to swap that a asset with a B asset. The Swap button on the Property Inspector will do this for us. 9. Select the First Key frame, which will select the symbol with in. This is the Apple text graphic. We want to swap this for the Butterfly text graphic. 10. Clip the swap symbol button. And select from the menu the Butterfly text symbol. Then click OK. Repeat the Process for Each keyframe/symbol. 11. Do the same for each symbol within the Button Symbol. Now we are ready to add the B button to Scene one and build Scene 3 (B). Good luck and work hard. Notes: Scene C is a circle shape. To add sound: click on the A button in the title scene. Create a new layer. Name it sound. Click on the Hit frame, insert blank keyframe. Open the common library (window/common libraries), choose the sound you want and drag it to the canvas. Click on the Hit frame and watch for the sound symbol to show. You may need to click once on the sound frame. At the end, you must publish your movie by clicking File/Publish so you will have the.fla, the.swf and the.html files as well. 12/30/03 44

45 Utah Education Network Professional Development Credit Request Form Apr Date Crs # Letter Grade: Select ONE credit or points option and complete the information below. Submit with your assignment as directed by the course instructor. Technology Integration Academy Credit No Cost For information about the Technology Integration Academy, visit Individual workshop credit tracked by UEN. USOE credit awarded upon completion of workshop series. 5 credits for Technology Pedagogy series 3 credits for Enhanced Hardware and Software Skills series Re-licensure Points Certificate - No Cost You are responsible for tracking re-licensure points No assignment required 1 point = 1 contact hour Name: Home Address (for mailing): Social Security Number: Phone (optional): (optional): School: District: Course Title: Dates: Instructor: Is your Utah license current? Yes / No Return to: UEN Professional Development Fax: Campus Center Drive, 205 MBH Or to janderson@media.utah.edu Salt Lake City, UT Attention: Jessica Anderson 12/30/03 45

46 Assignment: Create a Flash movie that you can use in your classroom, or create a sample of the product you expect your students to produce as part of a project for which they create a Flash movie. It can be used in a web page or as a stand-alone movie. The movie must include at least: 3 different motion or shape tweens, 2 buttons, 2 scenes, and 2 actions. Include with your project: q A copy of the rubric used to evaluate student work, or the rubric provided for assessing your presentation. q A paper in which you evaluate your project and describe the process you followed in selecting the topic and activity. Include a description of how this project will enhance your student s learning. Homework must be completed within 30 days. Mail, fax or the credit request form to us along with your assignment. 12/30/03 46

47 Utah Education Network Professional Development Evaluation Form Course Title: Web Animation - Flash Date(s): Instructor(s): Jessica Anderson Location: University of Utah, Milton Bennion Hall Dear Participant: Please complete and return this form to your instructor. Your feedback is very important to us! The UEN Professional Development office uses your comments and suggestions in planning future offerings. If you wish to return this form via mail or fax: Attention: Vickie Arnold Via fax: (801) or Via mail: University of Utah 1705 E. Campus Center Dr. MBH 205 Salt Lake City, UT Thank you for your help. Please circle the response that reflects your experience with this course using the following key: 4 = Strongly Agree, 3 = Agree 2 = Disagree, 1 = Strongly Disagree, NA = Not Applicable. COURSE Objectives were clearly stated and met NA Materials were useful NA Activities were appropriate NA Overall, the course was effective NA INSTRUCTOR Presented the subject in an understandable way NA Demonstrated knowledge of content NA Treated me with respect as a fellow professional NA Overall, provided an effective presentation NA MY PARTICIPATION I will use what I learned immediately in my classroom or work NA What I learned may lead to changes in my teaching practice NA I will recommend this class to others NA Continue on Back 12/30/03 47

48 Questions: What did you like about the course? What suggestions do you have to improve this course? Was the course taught at an appropriate level for your experience? What did you learn today that will help you improve your practice? Was the location convenient and the classroom environment acceptable? What classes would you like to see offered in the future? Additional comments: 12/30/03 48