1 / 46

Flash 1

Flash Concepts Reviewed. Flash 1. Flash CS4 Pro Overview Development environment for creating interactive and multimedia web content that is multi/cross platform. Enables authoring and creating Flash .swf files that are playable through Flash players included with most all browsers.

iona-cleveland
Download Presentation

Flash 1

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flash Concepts Reviewed Flash 1

  2. Flash CS4 Pro Overview Development environment for creating interactive and multimedia web content that is multi/cross platform. Enables authoring and creating Flash .swf files that are playable through Flash players included with most all browsers.

  3. Flash CS4 Capabilites Enables the use of sound, images, video, bitmapped and vector graphics. Flash movies can be embedded into web pages and the .swf movies are streamable. Vector graphic support and built in vector drawing tools make it ideal for creating small file size animations (vector animations enable creating very small file sizes)

  4. Starting Flash CS4 Find Application icon available on dock in lab computers, looks like Fl, double click on icon When Flash CS4 Pro opens File>New …>Flash File (Actionscript 3.0) Actionscript 3.0 vs Actionscript 2.0 Actionscript 3.0 is the latest scripting version, highly recommended you use 3.0 Rare to still dev using 2.0

  5. The Document Window Interface Timeline Stage Stage pasteboard Tools Property inspector Panels etc. Panels such as Tools and the Properties inspector can be closed, moved, resized, docked and undocked

  6. The Document Window Interface Timeline Stage Stage pasteboard Tools Property inspector Panels/Windows etc.

  7. Window Menu Provides access to Windows/panels that contain tools and info that can help when working on your project file. Most commonly used windows: Tools Properties Timeline Library Actions

  8. Minimum windows: Timeline Tools Properties inspector Additional panels available: Library, Align, Color, Swatches, Info, Scene, Transform, Actions, Behaviors, Components, Component Inspector, Debug, Output, etc

  9. Most commonly used windows Timeline Tools Properties inspector Library Actions Additional panels available: Align, Color, Swatches, Info, Scene, Transform, Components, Component Inspector, Debug, Output, etc

  10. Timeline The Timeline controls the static and moving elements (objects) in the Flash movie or project A frame represents a unit of time in the movie, 12fps = 1 second

  11. Stage Where your animation, images, and movies content appear. Represents the visible area of your movie. Gray area is staging area, does not appear when published. The stage has properties such as size, color, and frame rate.

  12. ToolbarContains drawing and editing tools for creating and modifying objects

  13. Layers Ability to add, modify, delete and organize layers using the layer controls. From the layer controls area located under the timeline you can also hide, lock, and control the appearance of the layer contents. Here you can also rename layer names, change the viewing/stacking order, show layer contents as outlines, add folders for storing multiple layers, add motion guides and more.

  14. Layers editing options renaming layer names changing the viewing/stacking order (top most layer=front or top) showing layer contents as outlines adding folders for storing multiple layers adding motion guides

  15. Layers Demo Create three dif layers Draw an object with both a stroke and fill (circle, square, or rectangle) on each layer Rename each layer to the shapes name like circle Changing the viewing/stacking order, top most layer=front or top Show layer contents as outlines Add a folder for storing these layers

  16. Pen Tool Creates Vector Objects Allows you to precisely draw straight and curved lines to create more complex shapes Shapes created with the Pen tool consist of paths, anchor points, and tangent handles Shapes created can have a stroke and/or a fill Adjusting the Pen tool Preferences Edit>Preferences>Drawing

  17. Concept of Keyframes in Flash Keyframes concept comes from traditional Animation Important frames that define what the major motion changes will be are called keyframes

  18. Concept of Tweeningin Flash Borrowed from traditional cel animation terminology, slang for “in-betweening” The “in-betweener” (animator) as they were called would draw all the frames in between the keyframes that the lead animator drew Flash CS4 has three types of tweening: shape tweening motion tweening classic tweeing

  19. How tweening is used in Flash Tweening is used to animate between two keyframes You can animate or morph colors, shapes, gradients, positions, transformation, broken apart text, etc. Differences are automatically interpolated by Flash(frames are created between the two keyframes) Using Animation tools like Flash are a real time saver versus having to create each frame of an animation

  20. Keyframes Clicking F6(or Insert>Timeline>Keyframe) adds a keyframe to the current frame. A keyframe looks like a Solid Circle. A new keyframe allows a new movement, new object, or new tween to occur. A keyframe also enables a change to occur and can represent a change in location, motion, size or animation. Or on a blank frame, as soon as you draw an object a keyframe will appear.

  21. Tweening Two keyframes are required for tweening (animation) to occur. Tween by Insert > (then choose desired tween) or Right+click (Pc) or Ctrl+click (Mac) the selection or current frame and choose Shape, Motion or Classic Tween from the menu. Clicking F5(or Insert>Timeline>Frame) adds frames to wherever playhead is positioned. Extends the time an object will stay on stage or extends an existing tween. Additional keyframes can be added using f6.

  22. Frames Inserts one frame at a time or place playhead where you want frames extended to and then press f5. A frame looks like a Filled Frame A frame with no content will not have a filled frame A frame represents a unit of time on the timeline. FPS (number of frames per second). 12 fps means there will be 12 frames per 1 second of our movie. If our movie is 60 seconds long then there will be 720 frames (60x12=720).

  23. Blank Keyframes Clicking F7(or Insert>Timeline>Blank Keyframe) adds a blank keyframe at desired frame. Clears stage of preexisting objects from that layer only at that frame only. A blank keyframe means there are no objects on stage for that frame, for that layer only A blank keyframe looks likea Hollow Circle.

  24. Insert shortcuts FramesF5 Adds frames KeyframesF6 Adds a keyframe Blank KeyframesF7 Adds blank keyframe Clear Keyframe Shift F6 Removes a Keyframe, must be a keyframe in that current frame Remove FramesShift F5 Deletes frames, can also delete multiple selected frames

  25. Tweening in Flash Three major types of tweening in Flash, Motion Tweening Shape Tweening Classic Tweening Classic Tweening represents the old method (prior to CS4) of Motion Tweening

  26. Tweening in Flash Green solid line arrow (on layer in timeline) signifies an active shape tween Blue solid line arrow (on layer in timeline) signifies an active motion tween Broken line with no arrow signifies that tween is not working (wrong tweening accidentally selected?)

  27. Tweening in Flash Selecting a frame within a tween and then pressing F5 will extend tween/animation by one frame Selecting two or more layers (using shift key) and then pressing F5 will extend a tween to the same length as the current tween. For example if you select two layers who currently have a tween 30 frames long, pressing F5 will extend tween an additional 30 frames

  28. Shape Tweening Use with: Vector-based objects No grouped objects No bitmaps No symbols No type, must be broken apart Examples: Shape of object Color of object Position of object on stage The transformation of object Broken apart text Gradients

  29. Motion/Classic Tweening Use with: Symbols Grouped objects Text Blocks No shapes No broken apart text No multiple items on same layer Examples: Moving a symbol Animating a symbol Reposition symbol Transformation of a symbol Moving Text Animating grouped objects

  30. Shape and Classic Tweening in Flash In order to create a Shape Tween or Classic Tween there must be two keyframes. Tween by placing the play head anywhere in between two keyframes and then Right+click (Pc) or Ctrl+click (Mac), and select Shape tweening for any shape and Classic tween for any object other than a shape. Motion Tweening in Flash CS4 does not require adding the second keyframes. See next slide.

  31. Motion Tweening in Flash CS4 Create a new layer, try drawing a new shape like a star using the PolyStar tool under shapes (Properties/Tool Settings/Options). You will need to convert object into a symbol, select object on stage,  Modify>Convert to symbol (f8) . 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. Extend the frames by pressing f5, extend out approx 20 frames. To add motion to the tween, place the playhead on a frame within the tween and then drag the object on the Stage to a new position. continued

  32. Motion Tweening in Flash CS4continued 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. Property keyframes are added for X and Y in the frame containing the playhead. Property keyframes appear as small diamonds in the tween span. Note: If the object is not a tweenable object type, or if multiple objects are selected on the same layer, a dialog box appears allowing you to convert the selection to a movie clip symbol. Optional, you can adjust motion path so object moves in a curving direction. You can extend the tween by dragging out the edge or adding frames f5. Press Return/Enter key to preview.

  33. Shape Tweening demo Using the type tool, type your name on stage Select the text and then select Modify>Break Apart(Separates into letters) Select Modify>Break Apart a second time (Converts letters into shapes) Insert a blank keyframe(f7) at frame 24 Draw a circle at frame 24 Shape tween text (text is now a shape) by clicking anywhere between two keyframes and Right+click (Pc) or Ctrl+click (Mac), and select Shape tweening

  34. Shape Morphing and Shape Hinting demo Create a shape Add a blank keyframe in frame 20 and then draw a dif shape Click in the first frame of tween and then click Modify>Shape>Add Shape Hint Red circle displays shape hint, move beginningshape hint, to edge of shape Go to the next keyframe, drag red circle(s) (shape hint) to new ending location (to edge of shape) This second shape hint should turn green if accepted You can add multiple shape hints by repeating steps Remove any hints (if desired) by going to first frame of tween where shape hint was added and Ctrl Click to remove

  35. Importing and compressing Bitmaps File>Import>Import to Stage(select a photo/.jpg) Double click on photo in library to modify properties For photos use photo jpeg(compression) Uncheck the “use imported jpeg data” option Set quality to 60% For logos, text, solid colors use Lossless(PNG/GIF) instead Click test to determine new file size Click on OK to save

  36. Sound File Types Supported in Flash Most commonly imported sound files: .WAV Native uncompressed PC format sound, cross platform .AIFF Native uncompressed Mac format sound, Mac platform (rename .aiff to .aif for use on PC computers) .MP3 Cross platform compressed sound, commonly used and supported format, good compression=ideal file size .MOV Apple Codec, cross platform compressed sound and/or video

  37. Importing a sound demo Search for a sound Go to google.com and search for song.aiff or song.wav or song.mp3 (or try flashkit.com and search for a sound file) Download sound file (cntrl+click on mac and download to desktop) Within flash click File>Import>Import to Library Select sound file Open Library(cmd+l) Double click on imported sound to adjust settings Under Compression change to MP3 (will make file size much smaller) Leave Preprocessing(convert stereo to mono) unchecked Modify Bit rate to 24kbps or lower For Quality select Best continued

  38. Importing a sounddemo continued Click Test to preview sound OK to accept settings Create a new layer and name soundtrack Click on the first frame of this layer, drag sound from library onto stage Within the Properties inspector verify that Sync is set to Event for this sound clip (Event for sync will begin to play sound when play head reaches the frame where the sound is, frame 1 of soundtrack layer, and the playing of the sound is independent of the main timeline) Click on Edit if you wish to edit sound clip effects Control>Test Movie

  39. Sync sound options Event will begin to play sound when playhead reaches the frame with sound, independent of the main movie timeline Start same as event, except only one instance of sound can play at a time Stream will begin to play sound (streaming) when playhead reaches the frame with sound, stops the sound when the movie stops Stop stops the indicated sound, place in the frame of where you want sound to stop in order to stop a currently playing sound with this same filename

  40. Modifying Sound Settings demo Create a new layer Insert blank keyframe (f7) where you want sound to start Drag sound from library onto stage (at blank keyframe location) Click on f5 and extend frames until sound wave no longer appears Remember you can always modify the sound quality and file size by double clicking on sound in library and adjusting its settings Within the Properties inspector you can change the sound file by selecting a different sound under the Sound: field (try picking an alternative sound file, must have other sound files in your library though) Select Effect or click on Pencil (Edit) to apply a custom effect such as a channel, fade, or custom

  41. About FLV and F4V video Video encoded for Adobe Flash Player comes in two "container" formats: FLV and F4V (H.264). F4V is the newer format, based on the H.264 codec supported in Flash Player 9.0.115 and later. The FLV format supports the On2 VP6 codec for Flash Player 8 and the Sorenson Spark codec for Flash Player 7. Flash Player 9.0.115 and later can also play back any MPEG-4 compatible format including MP4, M4U, MOV, MP4V, 3GP, and 3G2.

  42. Encoding video options You can now encode FLV files in three ways: through the Video Import Wizard, with the stand-alone Adobe Media Encoder and through the Flash Video QuickTime Export plug-in, which lets you encode audio and video into the FLV file format when exporting from third-party video editing applications that support QuickTime exporter plug-ins.

  43. Adobe Media Encoder This stand-alone utility allows you to encode source video into FLV format. Adobe Media Encoder is installed along with Flash CS4 Professional. When encoding video using Adobe Media Encoder, you can choose from three different video codecs with which to encode your video content for use with Flash Player: H.264, On2 VP6, and Sorenson Spark. A codec is an algorithm that controls how video files are compressed during import and decompressed during playback.

  44. On2 VP6 recommended codec • On2 VP6 video codec, provides superior video quality using the smallest possible file size. The On2 VP6 codec is the default video codec to use when encoding Flash content that uses video and FLV content to use with Flash Player 8 and 9. The On2 VP6 codec provides higher quality video when compared to the Sorenson Spark codec encoded at the same data rate. Sorenson codec is older and no longer recommended.

  45. Video On2 VP6 alpha channel support • On2 VP6 video codec provides support for the use of an alpha channel with composite video • Alpha channel support lets you encode video so the background is removed and saved as a transparency. Allows you to overlay (or composite) the video on top of other Flash content, while the video remains in the foreground.

  46. This concludes our Flash 1 Review Please ask any questions at this time.

More Related