1 Lecture 9 Flash Introduction Demonstration Timeline Layers Keyframe Tweened AnimationsDemonstrationCreating Tweened AnimationsShape TweeningMotion TweeningWorking with TextAdding & Editing TextAnimating TextAnimating Individual LettersMorphing TextAnimating BitmapsImport BitmapAnimate and Distort BitmapBitmap SymbolModify Color and Transparency of BitmapAnimating along Motion PathCreating Mask Effect
2 Develop Rich Internet Content and Applications FlashDevelop Rich Internet Content and ApplicationsDesign motion graphics or build data-driven applicationsFlash Movies = Graphics, Text, Animation,Mostly compact vector graphicsCan contain imported video, bitmap graphics, and sounds.Incorporate interactivityCreate nonlinear movies that can interact with other Web appsCreate navigation controlsAnimated logosLong-form animations with synchronized soundComplete, sensory-rich Web sitesFlash Document = “.fla” filename extensionFile > Save / Save AsPublish Flash Document (.FLA) Flash Movie (.SWF)Macromedia Flash file format (SWF) is the format for deploying Flash content
3 Layers to organize content Stage WorkspaceTimelineControls movie’s content over timeConsists of frames and keyframesLayers to organize contentStageDraw or import artwork, add text or mediaCompose content for individual framesProperty InspectorToolboxPanelsLibraryStores reusable elements called SymbolsActionScriptBuilt-in programming language
4 Document Properties and Grid, Rulers & Guides Create Document and set its PropertiesFile > NewModify > DocumentFrame RateDimensionsBackground colorUsing Grid, Rulers and GuidesLike in FireworksGridView > Grid > Show Grid / Snap to GridRulersView > RulersGuidesDrag horizontal and vertical guides from rulers onto StageView > Guides > Show Guides / Snap to Guides
6 Layers = Stack of “transparent sheets of acetate” Insert > Layer or Click “Insert Layer” icon in TimelineDrag & Drop Layer to change its position in stackName (double-click text), Hide, Lock FolderLayer Folder = Organize LayersInsert > Layer Folder or Click “Insert Layer Folder” icon in TimelineModify LayerSelect layer to make it active (only one layer can be active)Pencil icon = Layer is activeGuide Layers Make drawing and editing easierMask Layers Help to create sophisticated effects
7 Copying Layer & Layer Folder Copy LayerClick layer name to select the entire layer.Edit > Copy Frames.Click Add Layer button to create new layer.Select new layer and choose Edit > Paste Frames.Copy Contents of Layer FolderClick triangle to left of folder name to collapse it, if necessary.Click folder name to select the entire folder.Insert > Layer Folder to create new folder.Select new folder and choose Edit > Paste Frames.
8 Tools Arrow (Selection) tool and Modifiers: snap to, smooth, straight Reshaping lines and shapes Reshaping pointerFree Transform tool and its modifiers: scale, rotate, skew etc.Transform dialog panel: Modify > TransformLasso tool and its modifiers = polygon etc.Text toolCircle and Square tools and Modifiers: Object Drawing on / offStroke and Fill properties of graphic in Property InspectorPencil tool and Modifiers = straight, smooth etc.Paint Bucket tool and Modifiers = fill large gaps etc.Apply Gradient and use Fill Transform toolEraser toolZoom tool and Modifiers: zoom in, zoom outLine ColorFill ColorTool Options
9 Graphic Objects = Items on Stage Move, copy, delete, transform, stack, align, and group graphic objects.Link graphic object to a URL.Keep in mind: modifying lines and shapes can alter other lines and shapes on the same layer if Object Drawing is not selectedMust first Select Object to Modify it
10 Overlapping Shapes in Flash – if shapes were created Object Drawing off Use Pencil, Line, Oval, Rectangle, or Brush tool to draw line across another line or painted shape, overlapping lines are divided into segments at the intersection points.Use Arrow tool to select, move, and reshape each segment individually.To avoid inadvertently altering shapes and lines by overlapping them, group shapes or use layers to separate themOverlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.
11 Grouping Objects Stacking Objects Transforming Objects Object ManipulationsGrouping ObjectsSelect objects on Stage to groupModify > GroupStacking ObjectsWithin a layer, objects stacked based on the order of creationModify > Arrange > Bring to Front or Send to Back Modify > Arrange > Bring Forward or Send BackwardTransforming ObjectsFree Transform tool in ToolsModify > Transform > … free transform, rotate, skew, scale, or distortModify > Transform > Remove Transform
12 Property Inspector to change text properties Static Text type Text tool in ToolboxProperty Inspector to change text propertiesStatic Text typeAppearance determined when you author movie.Dynamic Text typeUpdated text, such as sports scores or stock quotes.Input Text fields typeUsers enter text for forms, surveys, or other purposes.Transform TextRotating, scaling, skewing, and flipping it - and still edit charactersText Object & GroupedHorizontal Text Linked to URLsSelect text and enter URL in Property Inspector
13 Text Transform Text Horizontal Text Linked to URLs Text tool in ToolboxProperty Inspector to change text propertiesStatic Text typeAppearance determined when you author movie.Dynamic Text typeUpdated text, such as sports scores or stock quotes.Input Text fields typeUsers enter text for forms, surveys, or other purposes.Transform TextRotating, scaling, skewing, and flipping it - and still edit charactersHorizontal Text Linked to URLsSelect text and enter URL in Property Inspector
14 Reshaping Text into its individual letter shapes Select text with Arrow toolModify > Break ApartDistribute Text Letters to LayersSelect all lettersModify > Timeline > Distribute to LayersOrganize letters in Layer FolderInsert > Timeline > Layer FolderSelect layers containing lettersDrag & drop in Layer Folder Static TextMorph TextSelect Text and apply “Modify > Break Apart” TWICEApply Shape Tween !
15 Keyframe = Define Change in Animation KeyframesKeyframe = Define Change in AnimationFlash can tween, or fill in, frames between keyframesChange length of tweened animation by dragging keyframe in Timeline.Create KeyframeSelect a frame in TimelineInsert > Timeline > KeyframeOnly Keyframes are EditableFrame ManagementDelete a frame, keyframe, or frame sequence,Select and Edit > Timeline > Remove Frame or Right-Click (Windows)Extend duration of KeyframeSelect, hold and then drag keyframe to new final frameChange length of a tweened sequence, drag the beginning or ending keyframe left or right.
16 Frame-by-frame Animation Animate ObjectsChange object’s position, shape, size, color, opacity, rotation and other properties.Frame-by-frame AnimationCreate a separate image for each keyframe.Tweened AnimationCreate first and last keyframes of animationFlash creates frames in betweenMotion TweeningShape TweeningFrame Labels useful for identifying KeyframesUse instead of frame numbers (which can change) when targeting frames in actions such as Go To.
17 Motion Tweening Shape Tweening Tweened Animation Change Position, Size, and RotationShape TweeningChange ShapeSelect Keyframe and in Property Inspector select “Tween” optionIf you want Flash to tween the movement of more than one graphic, each must be on a separate layer.To quickly prepare elements in document for tweened animationSelect elementsUse Modify > Timeline > Distribute to Layers
18 Animations – Representations in Timeline Motion TweensBlack dot at beginning keyframe; intermediate tweened frames have black arrow with a light-blue background.Shape TweensBlack dot at beginning keyframe; intermediate frames have a black arrow with a light-green background.Dashed line =Tween is broken or incompleteCause?Final keyframe missingMotion Tween: does NOT contain symbol, groups or typeShape Tween: contains symbol, groups or type
19 Position, Size, Rotation, and Skew Motion TweeningUsed for tweening:Instances of SymbolGroupsType = TextBitmapInstances, groups, and type tween:Position, Size, Rotation, and SkewInstances and type tween:Color shifts and Fade in / out (= Alpha) Bitmap needs to be converted into SymbolTo tween the color of groups or type, you must make them into symbols.Animate individual text characters separatelyBreak text apartPlace letters on separate layers
20 Create Motion Tween Motion Tweening Use Symbols or Groups or Type to Tween MotionsCreate Motion TweenCreate first keyframeInsert > Timeline > Create Motion Tween Automatically turns graphic into symbolIn last frame create keyframe and move object to new locationCreate starting and ending keyframesSelect two keyframes and frames in betweenInsert > Timeline > Create Motion Tween Automatically turns graphic into symbol
21 Use Ungrouped Graphics to Tween Shapes Shape TweeningSimilar to MorphingOne shape appears to change into another shape over timeUse Ungrouped Graphics to Tween ShapesCreate or select first keyframeCreate or place artwork in first keyframeCreate second keyframe and select itSelect artwork in second keyframeModify shape, color, or position of artwork (e.g. use “Free Transform” tool)Select first keyframe in TimelineIn Properties InspectorSelect “Shape” from “Tween” menuSelect option from “Blend” menu:Distributive: intermediate shapes smoother and more irregular.Angular: preserves apparent corners and straight lines.
22 Moving Entire Animation Animation – MiscMoving Entire AnimationLock or hide all the layers don't want to moveClick “Edit Multiple Frames” button in Timeline“Onion skin” markers appear in Frame view of TimelineDrag onion skin markers to enclose all the frames to selectEdit > Select AllDrag entire animation to new location on StageExtending Still ImagesCreate image in first keyframe of sequence.Select frame to the right, marking the end of the span of frames that you want to add.Insert > Frame.Distributing Objects to Layers for Tweened AnimationSelect ObjectsModify > Distribute to Layers
23 Imported Artwork and Video BitmapCan apply compression and anti-aliasingPlace directly in Flash documentUse as a fillConvert to vector artworkVideoImport video in MOV, AVI, or MPEG formatImporting video clips as embedded filesVideo clip becomes part of the movie, like an imported bitmap or vector artwork file. You can publish a movie with embedded video as a Flash movie.Fireworks PNGCan import files as editable objects that you can modify in Flash, or as flattened files that you can edit and update in Fireworks.File > Import Fireworks PNG Import Settings dialog boxIf you import a PNG file from Fireworks by cutting and pasting, the file is converted to a bitmap.
24 Authoring environment Previewing MoviesAuthoring environmentControl > PlayWindow > Toolbars > Controller and click PlayTest Movie commandControl > Test Movie or Control > Test SceneWeb BrowserFile > Publish Preview > HTML
25 File > Export Movie or File > Export Image Flash Movie ExportingFile > Export Movie or File > Export ImageFlash MovieExport entire document as a Flash movie, to place the movie in another application, such as Dreamweaver.Windows AVI (Windows)Exports a movie as Windows video, but discards any interactivityExport a movie directly into a single format: GIF, JPEG, PNG, AVIAnimated GIF, GIF Sequence, and GIF Image
26 Flash Document (FLA file) Flash Movie (SWF file) PublishingFlash Document (FLA file) Flash Movie (SWF file)By default, creates Flash SWF file and HTML document with inserted movie.If you don’t want HTML, deselect it.Choose Publishing File Formats: SWF or GIF, JPEG, PNG, and QuickTimeFile > PublishTest Before PublishingTest Movie and Test Scene commandsUnicode Text EncodingExporting vs. Publishing FLA filesExporting similar to publishing FLA files in alternative file formats, except that settings for each file format are not stored with FLA file.
27 Step 0 – Download files, Launch Flash, Create Document Create folder “mp9” in “My Documents” folderDownload Files (select zip file & extract into “mp9”)Launch FlashStart > Macromedia > FlashCreate Flash Document and Set its PropertiesFile > NewModify > Document or use Property InspectorFrame Rate = Dimensions = 600 x Background color = WhiteUsing Grid, Rulers and GuidesRulersView > RulersGuidesView > Guides > Show GuidesDrag horizontal (200) and vertical (300) guides from rulers onto Stage
28 Step 1 – Keyframes and Create Shapes Select Layer 1 and name it “Shape Tween”Select first keyframe in TimelineSelect Circle Tool and Draw Circle in the center of StageSelect Arrow Tool to select Circle (both Line and Fill!)In Property Inspector, set Width = 50 and Height = 50In Property Inspector, set Stroke and Fill properties of circleCreate second keyframe at frame = 30Select frame = 30 and use Insert > Timeline > KeyframeSelect circle using the Arrow tool in second keyframeModify position by moving circleModify size by using Free TransformSelect Arrow tool and deselect circleModify shape by using “Arrow” tool to change contour (notice how cursor changes)
29 Step 2a – Shape & Motion Tween and Create Layer with Text Select first keyframe in TimelineSpecify Shape Tween for first keyframeSelect “Shape” from “Tween” menu in Properties InspectorSelect option from “Blend” menu: DistributivePlay Movie so farControl > Play or Display Controls: Window > Toolbars > ControlsCreate New Layer and Name = TextInsert > Timeline > Layer and select itCreate Text = “Hello”Select first frame and Select Text tool and type “Hello”Create second keyframe at frame = 30Select frame = 30 and use Insert > Timeline > KeyframeSelect text using the Arrow tool in second keyframeModify position by moving textModify size, angle and distort by using Free TransformSpecify Motion Tween for first keyframe of Text Layer
30 Step 2b – Animating Individual Letters Create and Select Text in “text” layer at keyframe = 1Break Text into Individual Letters using Modify > Break ApartDistribute Individual Letters to Separate LayersModify > Timeline > Distribute to LayersCreate keyframe at frame = 30 for all the created text layersShift Select the column of frames = 30 and apply Insert > Timeline > Keyframe or right click and select Insert KeyframeSelect first keyframe for the different letters and move each letter to desired location.Select all the keyframes that contain a letter at frame = 1 and apply Motion Tween.
31 Step 2c – Morphing TextCreate and Select Text in “text” layer at keyframe = 1Break Text into Individual Shapes by applying Modify > Break Apart twice!Create Blank Keyframe at frame = 30Create and Select Text in “text” layer at keyframe = 30Select first keyframe and Shape Tween
32 Step 3a – Animating Bitmap Select first KeyframeFile > Import to Stage “bilbaodog” (creates record in Library)Create Keyframe = 30 and Select itDistort Bitmap using Free Transform toolApply Motion Tween at first keyframePlay AnimationControl > PlayControl > Test Movie
33 Step 3b – Modify Color and Transparency of Bitmap Bitmap needs to be part of Symbol so that color and transparency can be changedInsert > New Symbol and select “Movie Clip”Flash opens a new symbol for editing in symbol-editing mode.2. On the Timeline, click Frame 1 on Layer 13. Drag “bilbaodog” bitmap from Library or use “File > Import”When finished creating symbol content, do one of the following to return to movie-editing mode:Click the Back button at the left side of the information bar above the Stage.Choose Edit > Edit Document.Click the scene name in the information bar above the Stage.
34 Step 3c – Modify Color and Transparency of Bitmap Drag Symbol with Bitmap onto StageCreates instance of symbol.Select first keyframe, then Select Instance on StageIn Property Inspector, select Color pull-downSelect “Advanced”, modify “Alpha” & “Color Channels”Select next keyframe, then select instance on StageIn Property Inspector, select Color pull-down and Select “Advanced”, modify “Alpha” & “Color Channels”Apply Motion Tween (if not done already)
35 Step 4a – Motion Tweening along Path Tweening Motion along PathSelect layer containing motion-tweened animationInsert > Timeline > Motion Guide or Right-click layer and choose “Add Motion Guide”Use Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw desired pathLock Motion Guide layerSnap center of graphic to beginning of line in the first frame, and to end of the line in the last frameLink Layer to Motion Guide LayerDrag existing layer below motion guide layer. All objects on this layer automatically snap to motion path.Create new layer under motion guide layer Objects tweened on this layer are automatically tweened along motion path.Select layer below motion guide layer. Choose Modify > Timeline > Layer Properties and select Guided.
36 Step 4b – Creating Mask Layer Select or create layer objects that appear inside maskWith layer selected, choose Insert > Timeline > LayerMask layer always masks layer(s) immediately below itPlace a filled shape or symbol instance on mask layerRight-click (Windows) mask layer's name in Timeline, and choose Mask from the context menu.Display mask effect in Flash, LOCK mask layer and masked layer(s)
37 Authoring environment Previewing MoviesAuthoring environmentControl > PlayWindow > Toolbars > Controller and click PlayTest Movie commandControl > Test Movie or Control > Test SceneWeb BrowserFile > Publish Preview > HTML