1

Flash 1

Flash Concepts Reviewed

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.

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)

Starting Flash CS4

Find Application icon available on dock in lab computers, looks like Fl, double click on icon

When Flash CS4 Pro opensFile>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

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

The Document Window Interface

Timeline

Stage

Stage pasteboard

Tools

Property inspector

Panels/Windows

etc.

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:ToolsPropertiesTimelineLibraryActions

Minimum windows:

TimelineToolsProperties inspector

Additional panels available:

Library, Align, Color, Swatches, Info, Scene, Transform, Actions, Behaviors, Components, Component Inspector, Debug, Output, etc

Most commonly used windows

1. Timeline2. Tools3. Properties inspector4. Library5. Actions

Additional panels available:Align, Color, Swatches, Info, Scene, Transform, Components, Component Inspector, Debug, Output, etc

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

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.

Toolbar Contains drawing and editing tools for creating and modifying objects

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.

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

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 Tweening in 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 like a Hollow Circle.

24

Insert shortcuts

Frames F5 Adds frames

Keyframes F6 Adds a keyframe

Blank Keyframes F7 Adds blank keyframe

Clear Keyframe Shift F6 Removes a Keyframe,must be a keyframe in

that current frame

Remove Frames Shift 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 CS4 continued

•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 beginning shape 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 sound demo 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

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.

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.

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.

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.

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.