Rich Shupe, FMAFlash MX FundamentalsJuly 7, 200410:15 am - 11:15 am; 11:30 am - 12:30 pmCrystal BallroomThis two-hour workshop gets any novice up and running with Flash. The session,designed for those new to Flash, starts with drawing basics, program interoperability,and import and export formats. It then surveys animation techniques, opacity, andcolor effects, as well as the use of masks, audio, and video in Flash projects. Finally,attendees learn how to use buttons and a bit of ActionScript to cover simplenavigation and control basic Movie Clips. No programming experience is required. Bythe end of this workshop, participants will have enough confidence to create theportfolio animation or site introduction they desire. After completing FlashFundamentals, they will be ready to move on to scripting, and to continue in theafternoon with the two-hour ActionScript Fundamentals.

Seven Basic Overviews:

What are Vectors and Bitmaps?Using Flash it helps to understand the differences between vectors and bitmaps.NOTE: For compatibility, these notes and screenshots will be based on MX, withselect 2004 references. However, we'll use MX 2004 Pro during the workshop.

Vector Technology• sharp points and curves, sometimes Bezier, created in illustration programs

like Adobe Illustrator, Macromedia Freehand, Corel Draw, etc.• EPS (Encapsulated PostScript) is a common non-native format for vector art,

but bitmaps can also be saved in EPS format• Pros: crisp details; very scalable; fonts can be system, machine, and platform

independent if prepared correctly (converted to outlines/paths, or handledsimilarly inside Flash); can be altered programmatically

• Cons: if not prepared efficiently, can be large; can't achieve many specialeffects that can be achieved with bitmaps, not typically photorealistic; canresult in slow performance if heavy animation is desired

Bitmap Technology• pixel-based art created in programs such as Adobe Photoshop, Macromedia

Fireworks, etc.• JPEG and GIF are the most common file formats. Platform formats, such as

BMP (Win) and PICT (Mac) are less common, and PNG is gaining popularityfor preserving high-quality transparency. Flash supports all of these formats.

• Pros: best for photorealism, font independence is assured, wide variety ofcompression formats mean files smaller than vector art, if prepared properly.

• Cons: large images can be much larger in file size than simple vectorequivalents; not very scalable--when scaled down, appearance is usually fine(sometimes even better) but file size is not efficient... when scaled up,enlarged pixel look (pixilation) occurs; cannot easily be alteredprogrammatically with Flash.

When should we use Flash (vs. Director, for example)?One of the most frequently asked Flash questions, at the beginner level, is whenshould Flash be the preferred tool, over other tools, such as Director? Here are somesimple differences and similarities between the two.

Flash Characteristics• most reliable and widely used plug-in for complex interactivity• primarily vector based, so file size and appearance scalability are typically

optimal. can import both bitmaps and video as well• very limited extensibility• cannot write to user's hard drive in any form other than "cookies"• improving programmable options, but still somewhat marginal (compared to

Director) especially in application- (projector) based environments

Director Characteristics• second-most reliable and widely used plug-in for complex interactivity• primarily bitmap-based but, if desired, can be designed using only vectors,

including full support for Flash files• most extensible authoring tool• can heavily manipulate user's hard drive from projectors, can write minimally

to hard drive within browser, mostly limited to cookies, preloading, etc.• Extensive programmable options

What types of files can we use in Flash?It helps to know what kind of assets we can use in Flash, before we embark on aproject. If a project requires something Flash can't support, for example, we mayhave to chose another tool. This is a select list covering the basic file formats for fourgeneral categories of file types. Consult the Flash manual, or online resources, formore detailed information.

Select Import Formats• Graphics

o EPS, AIo AI 10, PDF (2004)o JPEG, GIFo PICT, BMPo PSDo TGAo TIFF

• Audioo AIFF (Mac)o WAV (Win)o MP3

• Videoo QuickTimeo DVo MPEGo AVI

• Othero SWFo DXFo ToonBoom

What types of files can we create with Flash?It also helps to know that Flash can export formats other than SWF. For example,Flash can be used to create animated GIFs or image maps, or even custom videocontrollers for QuickTime movies. This is a select list covering the basic file formatsfor movies and still images. Consult the Flash manual, or online resources, for moredetailed information.

Select Export Formats• Movie

o Flasho QuickTime Media Layero Rendered QuickTime Videoo Animated GIFo Image Sequence (PICT, EPS, Illustrator, DXF, JPEG, GIF, PNG)

• Imageo JPEGo GIFo PNGo Illustratoro PICTo DXFo EPS

What other programs will we use with Flash?It's best to think of Flash as an integration tool of sorts. You will often originateassets within Flash, but you're just as likely to import from, or export to, some of thefile formats we listed above. For this reason, it helps to know what other programswork well with Flash.

Program Interoperability• Vector Tools (many vector creators, but optimized for)

o Adobe Illustrator EPS or v6 and earliero Freehand EPS or v8 or latero Fireworks SWF and PNG exports

• Bitmap tools (many bitmap creators... Adobe Photoshop, MacromediaFireworks)

• Video Tools (many video creators... Apple iMovie or FinalCut, Adobe Premieror AfterEffects)

• Audio Tools (many audio creators... Bias Peak, Sonic Foundry Sound Forge)• Text Editors (many text, html, xml creators... BareBones BBEdit, Macromedia

HomeSite, Microsoft Word)

What are the basic building blocks, of the average beginnerFlash file, that we'll be discussing today?This is little more than a preview of upcoming segments, but it's useful here, in aquick overview, to help define some of the vocabulary we'll be using.

Select Flash Objects• Shapes (morphable, "destructible" vector shapes)• Groups (protected vector shapes)• Buttons (art with optional up, over, down, and "hit" states, that can trigger

actions)• Movie Clips (like a Flash file inside your Flash file--complete with timeline,

actions, etc.)• Sound (internal or external audio files, like mp3s)• Video (internal or external video files, like QuickTime movies)• Other Flash Movies (external SWF movies that we can load or share

information with)• Text (text, html, or xml that we can use internally, or load from external

sources)• Components (pre-built ActionScript-enabled widgets)

What is ActionScript?ActionScript is Flash's internal scripting language. We won't have time to focus onActionScript in this session, but we'll take a quick peak at just enough todemonstrate what lies ahead. In the meantime, this overview may give you an ideaof what ActionScript is like.

ActionScript• Similar to JavaScript (based on the ECMA-262 specification.)

o browser-, plug-in-, window-, (etc.) specific objects omittedo Flash-only objects added (color, key, movieClip, etc.)

• Normal or Expert modes available for editing scripts. Normal is menu driven,Expert is free form. In both cases, code hints are available.

• Dot syntax, DOM (Document Object Model) approach, sometimes called FOM(Flash Object Model)

o syntax for a given instruction moves from largest item to smallestitem. Example: to change the x-coordinate (property) of a nestedmovieClip, the syntax might start from the master document, thenmove on to the first movieClip, then the next internal (nested)movieClip, then the next, until arriving at the desired clip, and theninclude the x-coordinate property: _root.clip1.clip2.clip3._x

• Average learning curve (cumulative, and varies with scripting experience)o beginner: 2 8-hour dayso intermediate: 2-4 8-hour dayso advanced: 2-4 8-hour days

• Reusableo external scriptso external authoring and runtime librarieso components

Basic InterfaceA spotlight review of some of our class discussions of interface elements. In theinterest of time, we won't go over every option in detail. Some of the more atypicalitems have been highlighted for some of the elements.

Tool Palette

1. Arrow (Selection)2. Subselection -- select parts of selections, such as a

single point3. Line -- Can be constrained4. Lasso -- Magic Wand and Polygon mode5. Pen -- draw with Bezier curves6. Text -- properties pane used for detailed context-

sensitive info7. Oval -- can be constrained8. Rectangle (Polygon added in 2004) --can be

constrained and can have rounded corners9. Pencil -- Pencil Mode (Auto Shape)10. Brush -- Pressure sensitivity (tablets); Paint Modes:

fills, behind, selection, inside11. Free Transform -- rotate, scale, distort, perspective12. Fill Transform -- location, rotation, size of fills13. Ink Bottle -- applies line attributes only14. Paint Bucket -- applies fill only; can close gap sizes15. Eyedropper -- inherits line and fill attributes16. Eraser -- normal, fills, lines, selected fills, inside; Faucet

mode17. Hand (Move)18. Zoom19. Line Color20. Fill Color21. Color Management

o Default Black and Whiteo No coloro Swap colors

22. Context sensitive paneI've highlighted this area first because it changes, incontext, based on which tool you've selected. We willdemonstrate this further in the workshop. In thisexample, the three options for the Arrow tool are visible:Snap to Objects, Smooth, and Straighten.

• Properties Panel as secondary context sensitive input

Select Panelso

Info• Width/Height and X/Y,

RELATIVE to user-definedRegistration Point

• RGB and alpha• X/Y relative to stage

Align• Vertical and horizontal align

based on edges and centers• Vertical and horizontal

distribution based on edges andcenters

• Match size of multiple elements• Equidistantly space elements• All of which can include the

stage as an additionalparameter

Color Mixer• Mix new colors in solids, linear

gradients, radial gradients, etc.• Can include in Alpha data

Swatches• Colors can be selected from this

palette• Also, new solids and gradients

can be added to this palettefrom the Color Mixer.

• New colors are saved with thefile in which they were created,but can be exported for loadinginto other files.

Components• Components, including those

distributed by Macromedia, aswell as those installed by theExtensions Manager, can bedragged to the stage from thispanel.

• Component sets can beorganized by their creators intogroups selectable by the pull-down menu.

Components Parameters• Allows you to customize

component settings.

Select Properties

• Context sensitive window that changes based on stage selection, as well asother inputs such as tool selection.

• This may be the most oft-used palette.• This is where you apply instance names to differentiate one button or

movieClip from another.• This is also where you apply: frame labels; color effects; tween types; sounds• You can also: swap symbols; open help, actions, or accessibility palettes• Width, Height, and X- and Y-Coordinates are also available here, as well as in

the aforementioned Info panel.

Library

• stores symbols, bitmaps, sounds, videos. does not store shapes, groups, text• can be organized with folders• you can duplicate library items• you can play library items to preview animations• you can optimize files by checking the use count of library items and deleting

unused• with ActionScript, you can share library items, or control them with scripting

Timeline

The timeline is the linear, frame-based layout tool for animating your movies.

• Horizontally, the timeline is comprised of individual frames. An empty framecan be created to hold content. A keyframe can be created to allow specialproperties for that frame or an element in that frame. Or, the computer can'tween' frames, or interpolate all the frames for you, in-between two keyframes. Frame two, for example, has a keyframe in Layer 3. The "motion"and "shape" layers have both been 'tweened'.

• Vertically, the timeline uses layers to allow you to position one element on topof another. Layer "motion", for example, is above layer "shape"

• Within layers, elements of like kind (shapes, groups/symbols) can also bepositioned in front of, or behind, one another by using Arrange (send to back,move to front, etc.)

• Each layer can be displayed (or hidden), locked (to prevent editing), orviewed in full, or outline mode (for clear views of what is on which later). The"Mask" and "shape" layers, for example, are locked.

• Layers can be converted into special kinds of layers, such as the "Guide" and"Mask" layers shown. These will be explained in a moment.

• While working in a timeline, you can use Onion Skinning to show (throughvarying degrees of opacity) previous and upcoming frames, all at once. This isuseful for editing animations that have been created frame-by-frame.

• The timeline also shows the requested frame rate, and the position of theplayback head at any given time.

Special Layer Types• Guide: A motion guide is a vector path, along which, a 'guided' symbol can

follow. You create a motion guide by modifying the layer properties to be aguide. You then modify an underlying layer to be guided, and position thesymbol to the start, and end, of the guide, in the first and last keyframe,respectively. When you apply a 'motion tween', the symbol will follow thepath. You can even orient the object to the path during the animation. Thecomputer will take care of the rest. You can see a symbol and it's visiblemotion guide in the illustration. At runtime, the motion guide will be invisible.

• Similarly, you can mask a layer(s) using the same technique. By identifyinglayers as mask/masked, any visible pixels in the mask layer will expose whatis being masked. You can see that part of the "shape" layer (the top mostgreen circle) is visible because the right half is under a box in the Mask layer.

• You can even organize layers into "folders" for convenience or clarity.

Scenes• In addition to the linear structure of the timeline, there is also another way to

organize a Flash file. You can divide the entire file up into Scenes. These are,effectively, a way of having multiple timelines in a main file.

• Scenes can be inserted and removed, using the Insert menu, and viewed byusing the Scene Tool. It is the first button under the timeline, on the right. Itis a menu button and resembles a movie scene clapper.

• When using ActionScript, it is easiest when you give each navigation frame aunique frame label and use the frame label with goto.

New to MX 2004

Timeline Effects make it easy to create tweens and apply effects to Movie Clips.

The History palette allows you toidentify and access multipleundos/redos easily.

Behaviors allow you to apply pre-scripted behaviors without knowingActionScript

The Project palette (Pro only)allows you manage a project ata time, rather than a documentat a time. It allows you tocollect external files, will notifyyou if files are missing, and willpublish all included FLA files atonce. This feature is not just forthose with experience. Userswith limited experience, withthe help of components and/orbehaviors, may still loadmovies or use external FLVvideo files.

Similarly, the new SpellChecker (below) allowscomprehensive spell checkingthroughout most, if not all,parts of a document.

The new Find and Replace feature (above) offers much more than simple textreplace within ActionScript panes. It can now replace text, fonts, colors, symbols,sounds, videos, and bitmaps. This will be a huge timesaver!

DrawingDrawing in Flash can be counter-intuitive, in some ways, to those who are used totraditional tools such as Adobe Illustrator or Macromedia Freehand. In other ways, itcan be liberating. Here are some of the things to watch out for.

Drawing Shapes• Oval, Rectangle, Line

o In all cases, you can use these tools to draw freely drawn shapes, butyou can also enable "shape recognition". In this case, more accurateovals, rectangles, and line-based shapes will be created

• Drawing Metaphorso Unlike most vector tools, Flash allows you to grab hold of lines

anywhere, and push or pull naturally. The line, and corresponding fill,will come with the line. Corners can also be grabbed and moved. Thistakes a bit of getting used to, for those accustomed to traditionalvector tools like Adobe Illustrator or Macromedia Freehand.

o Fortunately, a Pen Tool was added in Flash 5 that allows fans of Beziercurve tools to edit shapes in a more familiar way. By selecting a line,vertices become visible. These can be moved, added, or deleted.Handles (when available) on each vertex can also be moved.

• Shape Relationshipso Lines and fills can be manipulated independentlyo Overlapping ungrouped shapes of different fill attributes, or crossing

lines, will allow you to subdivide the result. After deselecting theoverlapping item, reselect and move or delete.

Stage-bound Element TypesFlash elements are unique in their properties and interaction. This should help clarifysome of the bigger issues.

Shapes• Can be morphed• "Destroy" each other when overlapped• Lines and fills behave independently

Groups• Can serve as "traditional" grouping of multiple objects• Can also "protect" shapes from destruction

Symbols• Unlike shapes and groups, symbols become library items and can be reused

efficiently.• Editing a symbol will affect all occurrences• Symbols can be instantiated for scripting• Instances of symbols can be altered with effects without altering other

versions

• Typeso Button

• Up, Over, Down, Hit states• Sound can be added to frames• Animations can be added to frames

o

Button Stateso Graphic

• the weaker cousin of MovieClip, cannot be programmed• however, can loop, play once, or show one frame, with

ActionScripto MovieClip

• instantiable for scripting• can apply color/alpha effects• can serve as targets

Text• Static (like artwork)

o Use system fontso Linko Alignment/Formatting

• Dynamic (programmable)o Embed Fontso HTMLo Border

• Input (programmable and user editable)o Dynamic properties, plus user-editable

Timeline Animation TechniquesUsing the Timeline, you can apply a few important animation techniques to your filewithout any scripting required. See the previously included timeline image forreference.

Frame by Frame• Create multiple keyframes, positioning elements within each• Use Onion Skinning to see multiple frames, previewing art in surrounding

frames as you go• Use Edit Multiple Frames to edit, move, scale, etc., multiple frames at once

Shape Tweening• Used to morph one shape into another• Does not work with symbols or groups• Only one shape can reside in a shape-tweened layer• Can use Shape Hints to improve morph with matching start and end points.

Motion Tweening• Altering certain symbol properties from one key frame to another, such as x-

and y-coordinates, size, rotation, color effects, alpha, etc.• cannot be applied to shapes• Only one symbol can reside in a motion-tweened layer

Motion Guides• vector guides along which a guided element will move between keyframes• orient to path will cause object to follow path, tangentially, based on initial

orientation

Masks• Mask layers REVEAL masked layers beneath. Opaque pixels are like windows,

through which underlying layers can be seen• Masks may move• Multiple layers can be masked

Imported Element TypesAn overview of some of the non-native Flash element types:

Bitmaps• Can be:

o broken apart (can be used as fill and tiled)o traced

• are automatically added to Library, somewhat like a symbol to keep file small

Audio• Event

o must be preloadedo good for button sound effects

• Streamingo can stream with start of fileo good for background/ambient sounds

• Effects (pan, volume, etc.)• Internal (WAV, AIFF, MP3)• External (MP3)• automatically gets added to Library, behaving somewhat like a symbol to

keep file efficient

Video• Internal

o Spark codec (internal Sorenson compression algorithm)o files need not be linked

• Externalo Any compatible codec

• must resolve legal pathnames to use

Previewing and PublishingMovies can be tested during development, and published in a variety of formats.

Preview• Files can be previewed, to some degree, within the authoring environment,

using the following in the Control menu:o Enable Simple Frame Actions

• Allows actions in frames, such as goto, etc., to work inauthoring mode

o Enable Simple Buttons• Shows the various states of buttons in authoring mode

o Enable Live Preview• Shows simple previews of Components authored for live

preview

• The best way to preview files, however, is to use Test Movie. This will createan SWF file that is exactly like a final movie. The main difference is that it willplay in the authoring player, rather than within a browser or projector.

Publishing• Certain parameters, such as which Flash version the exported movie uses,

when testing, can be set in the Publish Settings.• This dialog also allow you to:

o set HTML parameters for the Flash plug-ino choose what happens when the plug-in isn't foundo publish stand-alone projector applications for Mac and Windows

DistributingMovies are typically distributed in one of two ways: within a browser as an SWF file,or as a standalone application in the form of a projector. Both of these methods areoffered in the Publish Settings.

However, there are other ways Flash files can be distributed. They can be assetsinside Apple QuickTime movies or Macromedia Director files. They can be integratedinto your desktop, or they can be the basis of a screen saver.

At the end of this session, whether or not we were able to cover all of the subjectmatter herein (hopefully we'll have a lot of stimulating questions!), we will havetaken a look at how simple it can be to make a Flash screen saver.

We'll be using the great screen saver software, ScreenTime for Flash, fromScreenTime Media (http://www.screentime.com) to demonstrate how professionalproducts can be created with Flash, even without scripting.

If you're ready to move on to scripting, try to attend my workshop on ActionScript. Ihope you enjoy FlashForward! –Rich

FMAhttp://www.fmaonline.com