Creating a Flash.swf animation

Transcription

1 GRC 119 Assignment 5 Creating a Flash.swf animation 1. How to get started in Flash 2. Creating layers and adding content 3. Tweening or animating between two keyframes 4. How to import multiple images or files 5. Creating a Motion Tween 6. Previewing your swf and publishing to.swf and.html 7. Extra credit, add a theme to your flash movie Assignment Overview: This week you will be introduced to Adobe Flash, the premiere program for creating web animations. Flash enables creating swf files that support vector animations which result in very optimal file sizes that are web friendly. Flash is flexible and customizable so it gives the designer many options in creating their artistic vision. Flash offers more features and smaller file sizes than any other competing program, at least in its price range. Recommended: View Flash intro videos at Adobe TV 1

2 Flash History: Flash has been used extensively for web animations since its introduction. The authoring program is very mature because it has been around +14 years with approximately 10 versions. Flash also enjoys a monopoly since there are no comparable programs in widespread use, it matured as a Macromedia product but was bought out by Adobe. Flash creates publishable files with the.swf file extension. Most flash animations are embedded in a webpage and will require the flash plug-in. Most web browsers include some version of Flash preinstalled, so requiring the flash plug-in has not hindered flash ability to gain widespread adoption. Viewers have become accustomed to updating plug-ins in order to view content on the web. Flash also has multimedia capabilities, meaning users can add audio, video, bitmap graphics, vector graphics, and more. Flash has its own programming language called ActionScript that enables users to create robust web applications, games, advanced animation, fake 3d, dynamically driven web content, and more. Flash s biggest limitation is that it doesn t play on Apple mobile devices. Tweening Explained: An important concept in animation is called keyframing. In Flash, every major change like a new position or new size is represented by a keyframe. Another important concept is called tweening. The animation, movement, or change we see in the animation. Borrowed from traditional cell animation terminology and is slang for in-betweening. In the olden days the in-betweener (animator) drew all the frames in between the keyframes that the lead (keyframe) animator drew. In Flash, tweening creates an animation by drawing all the frames in between two keyframes. Flash automatically interpolates or draws all the in-between frames. Flash has three types of tweening, shape tweening, motion tweening and classic tweening. Basic tweening is created by rt+clicking (pc) or command+clicking (mac) and select shape or classic. There must be two keyframes before you can finish a shape or classic tweening, you manually add a keyframe at a desired frame using f6, then change or move the object on stage for that keyframe. The other type of tweening, motion tweening is a new technique that came with CS4 and requires only one keyframe turn on Motion Tweening. Once motion tweening has been activated you select the new frame where you want the change to occur and you move or change the object on stage, Flash adds a keyframe in that frame and animates between the keyframes. 2

3 Handy Flash shortcuts: Keyframes F6 Inserts a keyframe Blank Keyframes F7 Inserts a blank keyframe Frames F5 Inserts a frame (on some macs you may need to use fn+f7 for the f7 shortcut) How to insert keyframes, blank keyframes, and frames in Flash: Keyframes F6 (shortcut) Adds a keyframe at the desired frame. A keyframe enables a change to occur. Adds a new keyframe allowing a new position, movement, change or animation to occur. Signifies a change in motion, size, color, or position. As soon as you draw an object (on a blank frame) a blank keyframe will appear for that layer. Blank Keyframes F7 Adds a blank keyframe at a desired frame. Clears stage of preexisting objects from that layer and frame only. A blank keyframe means there are no objects on stage for that frame and layer only, represented by a hollow circle Frames F5 Adds frames to the selected frame and layer. Can extend an existing tween or extend the time an object will stay on stage, for that layer only. 3

4 In Flash, tweening creates an animation by drawing all the frames in between two keyframes. Flash automatically interpolates or draws all the in-between frames. Flash has three types of tweening: shape tweening, motion tweening, and classic tweening. Shape Tweening Use to Animate the following: ü Yes, vector-based objects, called Shapes ü Yes, shape of object ü Yes, color of object ü Yes, position of object on stage ü Yes, the transformation of object ü Yes, broken apart text ü Yes, gradients ü Yes, Drawing Objects not used with grouped objects not used with bitmaps not used with symbols not used with type, type must be broken apart into a shape Motion/classic tweening Use to Animate the following:: ü Yes, symbols ü Yes, grouped objects ü Yes, text blocks not used with shapes not used with broken apart text not used with multiple items on same layer 4

5 Step 1 How to get started in Flash Note these instructions are for the most current version of Flash CS5 Find and double click on the Flash program icon (located on the dock in the Mac lab computers looks like Fl) For Windows users you may need to find shortcut in your Programs menu Start>All Programs>Adobe>Flash When Flash opens File>New >Flash File (Actionscript 3.0) Save you document File>Save As> firstname_lastname_a5.fla Save into a new folder inside your 119 folder, name folder a5.fla is the flash project file, an editable flash project, it will only open up in Flash Before we begin creating anything, reset the window workspace, Window>Workspace>Classic Click on the White background in the middle, this is called the Stage Optional, on properties window adjust Size 640px (width) x 240px (height) Background pick a color (optional) Optional, change frame rate: 12fps At 12fps or 12 frames per second, it takes 12 frames to make up 1 second in our movie. Step 2 Creating layers and adding content Next we will create 3 different animations Click on the new layers button 2x The new layer button is located below the layers, looks like a paper icon We now have three blank layers Next, we will draw 3 dif objects with both a stroke and fill on the 3 separate layers Look for the shape tool icon on the tool bar (if tool bar is closed Windows>Tools opens/closes window) Select the rectangle shape tool 5

6 Important verify that the Object Drawing mode is not selected or highlighted (at bottom of tool bar, shortcut to toggle is J) Pick a stroke and fill colors on the property inspector and then try drawing a rectangle, click and drag the mouse cursor to draw. Select shape using the selection tool (black arrow tool, shortcut J) and verify that the property inspector displays the object as a Shape and not a drawing object. If the properties panel doesn t display object as a shape than delete object and recreate as a Shape object, turning off Object Drawing mode You can double click on shape in order to select both stroke and fill Move shape to desired starting location If desired change its stroke and fill on the properties panel. Next, we want to select a new layer. Select one of the other blank layers we previously created. Switch to circle shape tool and draw a circle on the other layer, pick a dif stroke and fill color Repeat step, switch to the other blank layer and draw a triangle, pick a dif stroke and fill In order to create a triangle pick the polystar tool, on the properties panel click on options under Tool settings, pick polygon and make 3 sides Once drawn, switch to the selection tool by pressing J Try selecting fill of triangle and changing to a gradient fill Try selecting the stroke and making bigger Next, make sure each shape is on a separate layer, and each has a dif stroke and fill color Rename each layer to the shapes name like square, circle, triangle Rename a layer by double clicking on the layer name like layer 1 Try changing the viewing/stacking order by dragging the layers around, the top most layer = front or top of stack Seelect the square layer insert a keyframe at approx frame 12 and frame 24 (short cut on most computers is F6). Do this by selecting frame 12 and then press f6, then select frame 24 and press f6, two new keyframes appear on those frames. Alternatively if the shortcuts didn t work you could add a keyframe using the menu, Insert>Timeline>Keyframe 6

7 Select frame 12 and use the free transform tool (shortcut Q) to rotate, skew, or scale the shape Repeat steps adding two keyframes to each of the other two layers, circle and triangle If you want to preview our movie press the enter/return key You should see the playhead move and objects changing at various frames We will tween (animate) in between these keyframes in the next step Step 3 Tweening or animating between two keyframes Next, in order to animate or tween place the mouse in any frame between two keyframes (solid black dots) and rt+click (pc) or command+click (mac) and select shape tweening We choose shape tweening because we are working with shape objects Place mouse between the next two keyframes and repeat steps to add shape tweening You can tween (animate) in between two keyframes by clicking anywhere between two keyframes and rt+click /command+click and selecting shape tweening for any shape You must have two key frames in order to shape tween Tweening animates between the two keyframes If you want to tween the entire layer, make sure there is a keyframe on the last frame in that layer (black dot, f6 adds a keyframe). Select the layer by clicking on the layer name and then select shape tweening by clicking anywhere between two keyframes and rt+click /command+click Return/Enter key to preview our animation You should see a solid line with an arrow appear between all tweened keyframes If your tween has a broken line then you have a bad tween A bad tween means you may not have a shape object or may need a second keyframe or you may have dif or multiple objects between your keyframes Make sure you have tweened all three layers and they tween or animate when previewed, press Return/Enter key to preview 7

8 Step 4 How to import multiple images or files Import some graphics files File>Import to library Pick a common image file like jpg, png, gif You can select multiple files to import using the control key (pc) or command key (mac) Click Open to import all selected files Drag your image from the Library panel onto a new layer (to open or close the library press cntrl+l or cmnd+l) Note: The Library is used to store your assets used in your movie. You can drag objects from the library onto the stage in order to use them. Any object on stage that is a copy of an object from your library is referred to as an instance. If you delete an object from the stage that originated from the library the original will still be in the library. Select image on stage and position as desired Optional, move keyframe (black dot) to the frame where you want image to appear Add additional keyframes using f6 Tween/animate by clicking anywhere between two keyframes and rt+click/command+click and select classic tweening (use classic for objects that are not shapes). Make sure your image animates. Optionally you can insert a blank keyframe (f7) if you desire to remove an object from stage at a particular frame Make sure to rename layer to a descriptive name Press Return/Enter key to preview Step 5 Creating a Motion Tween Create a new layer, select the Text tool and type some text on stage (use Properties panel to modify text style). 8

9 Next, you will need to convert the text into a symbol. First select object (text) on stage using the selection tool. Next convert selection into a symbol Modify>Convert to symbol (shortcut is f8 some macs require fn+f8) Alternatively you can convert an object into a symbol by dragging it into your library Next, we want to create a Motion Tween Make sure object is still selected You do not add a second keyframe in order to begin a motion tween, the second keyframe will be created later. Choose Insert > Motion Tween or Right+click (Pc) or Ctrl+click (Mac) the selection or current frame and choose Create Motion Tween from the menu. Note: If the object is not a tweenable object type motion tween may not be listed. If multiple objects are selected on the same layer and you attempt to tween a dialog box may appear prompting you to convert the selection to a movie clip symbol. Drag either end of the tween in the Timeline to shorten or extend to the desired length To add motion to the tween, place the playhead on the desired frame where you want the change to occur and then drag the object on the Stage to a new position or change the object somehow. A motion path appears on the Stage showing the path from the position in the first frame of the tween span to the new position. Keyframes appear as small diamonds in the tween span. Adjust motion path so object moves in a curving direction Adjust motion path by using the selection tool to select and move its path. Using the selection tool you will see a curved line appear when you get close to its path, when the curve option appear click and drag path to modify to a curve To specify a new position for the object, place the playhead in another frame within the tween span and drag the object on Stage to the new position. Make sure to rename layer to a descriptive name 9

10 Step 6 Previewing your swf and publishing to.swf and.html Preview your movie Control>Test Movie (Cntrl+Enter) Modify any problems or add any desired features before continuing Note, by default Flash movies play and loop or repeat Check publish settings File>Publish Settings Verify that html and swf is selected Click on Publish, then Ok. Verify that a.fla,.swf,.html, were saved into your A5 folder Add a link on your index.html (course management page) to A5, A5 should link to firstname_lastname_a5.html or whatever your file is named Upload using DW,.swf,.html, and the updated index/course management page. Step 7 Extra credit, Add a theme to your flash movie Optional step, add a theme or topic to your flash movie. For example, have your movie incorporate a theme like flowers, dogs, nature, person or thing. The theme can be whatever you want as long as it s suitable for class. Modify all your examples to incorporate this theme. Terms you should now be familiar with: Tweening Keyframes Fps 3 types of tweening in flash Creating shapes in flash Symbols How to publish a swf 10