intro to adobe flash cs3 welcome & course outline (2010)

Adobe FlashFlash CS3 CS3web animation essentialsweb animation essentials

your instructor: matteo wyllyamz

[email protected]

http://mouselink.info

http://mouselink.biz

Adobe Flash CS3 22

getting startedgetting started

quick introductions -- customizing this coursequick introductions -- customizing this courseadministriviaadministriviamaking this a better workshop …making this a better workshop …menu of possible class topicsmenu of possible class topics

Adobe Flash CS3 33

quick introductionsquick introductionscustomizing this course

who are you and what do you do?who are you and what do you do?

what is your experience with computers, the Internet, and the what is your experience with computers, the Internet, and the World Wide Web?World Wide Web?

what is your experience with vector and raster graphics, what is your experience with vector and raster graphics, Macromedia Flash, and ActionScript?Macromedia Flash, and ActionScript?

what are your goals today?what are your goals today?what do you hope to get from this class?what do you hope to get from this class?

what is something interesting about you?what is something interesting about you?

Adobe Flash CS3 44

quick introductionsquick introductions

» matthew wyllyamzsoftware instructor since 1993, with an emphasis on multimedia, graphics,software instructor since 1993, with an emphasis on multimedia, graphics,

and internet development. and internet development.

have created courses for Jefferson County Adult Ed, CCU in Lakewood, have created courses for Jefferson County Adult Ed, CCU in Lakewood, Productivity Point, and the DOD (at Rocky Flats).Productivity Point, and the DOD (at Rocky Flats).

taught Apple Macintosh classes exclusively for five years, taught Apple Macintosh classes exclusively for five years, and have been using the Internet since 1995. and have been using the Internet since 1995.

started working with Flash in 1999 (version 4), recently completedstarted working with Flash in 1999 (version 4), recently completedan intensive seven-course program in Flash 8. currently pursuing an intensive seven-course program in Flash 8. currently pursuing certification in Flash CS3certification in Flash CS3

corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05)corporate webmaster for two years ('97-'99), blogmaster for seven years. ('99-'05)

TODAY: independent contractor, technical & creative consultant, artist, amateur TODAY: independent contractor, technical & creative consultant, artist, amateur photographer, and author. BA in English writing, and have sold three books.photographer, and author. BA in English writing, and have sold three books.

Adobe Flash CS3 55

administriviaadministrivia

Workshop scheduleWorkshop scheduleSix DaysSix Days

1pm – 4pm1pm – 4pm

Two sessions per afternoon Two sessions per afternoon

Short break (15 mins) around 2:30pmShort break (15 mins) around 2:30pm

Facilities …Facilities …Bathrooms, vending, Starbucks …Bathrooms, vending, Starbucks …

Adobe Flash CS3 66

making this a better workshop …making this a better workshop …

please set pagers and cell phones to silent or turn off.understand "concentrated computer training":

class is part discussion, part lecture, part hands-on.watch the screen, then try it yourself.PARTICIPATE! ask questions. answer questions. take notes.be mindful of the ability level of others.this is a cooperative learning environment:

We are here to learn from each other.

so have a buddy, and please don’t sit by yourself.

keep in mind that this course was designed for aparticular level of student:

Adobe Flash CS3 77


keep in mind that this course was designed fora particular level of student:

Created for- the beginning Flash user with a elementary knowledge ofcomputer-based animation.- the beginning or intermediate-level web/Internet developer.

NOT created for- the beginning computer user.- the intermediate or advanced Flash user.

most importantly …most importantly …

Adobe Flash CS3 88

Make it fun! Make it fun!


most importantly …most importantly …

Adobe Flash CS3 99

menu of possible workshop topicsmenu of possible workshop topics

What is Flash?What can be done with Flash?The basic Flash interfaceDocument propertiesFrame-by-frame animationThe importance of library symbolsThree different types of symbols Nesting symbols within symbolsFrames & keyframes“Tweening"Motion tweensThe trick to working in Flash

… and a word about your materials

Vector vs. raster graphicsDrawing & painting toolsUnique graphic behaviorsShape tweening (morphing)Creating & managing layersTypes of layersLooping an animation seamlesslyWorking with audioWorking with blocks of textFlash-based site designsResources for Flash developersPublishing your Flash projectConclusions …

Moving on …Moving on …

DAY1

Adobe Flash CS3 1111

What is Flash?What is Flash?

"Adobe Flash (formerly Macromedia Flash), or simply Flash, refers to both the Adobe Flash Player and to a multimedia authoring program used to create content for web applications, games, and movies. The Flash Player, currently distributed by Adobe Systems (which acquired Macromedia in 2005), is a client application available in most dominant web browsers (97%). It features support for vector and raster graphics, a scripting language called ActionScript and streaming of audio and video.

"'Flash' can refer to the authoring environment, the player, or the application files.

"The Flash files, traditionally called 'Flash movies' or 'Flash games,' have a .swf file extension and may be an object of a web page, strictly 'played' in a standalone Flash Player, or incorporated into a Projector, a self-executing Flash movie."

http://en.wikipedia.org/wiki/.fla

http://en.wikipedia.org/wiki/Adobe_Flash_Player

http://en.wikipedia.org/wiki/Adobe_Systems

http://en.wikipedia.org/wiki/Macromedia

http://en.wikipedia.org/wiki/Vector_graphics

http://en.wikipedia.org/wiki/Raster_graphics

http://en.wikipedia.org/wiki/Scripting_language

http://en.wikipedia.org/wiki/ActionScript

http://en.wikipedia.org/wiki/SWF

http://en.wikipedia.org/wiki/File_extension




What can be done with Flash?What can be done with Flash?

"Since its introduction in 1996, Flash technology has become a popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation, advertisements, various web-page components, to integrate video into web pages, and more recently, to develop Rich Internet Applications."

Create …Static vector-based graphics for websites

Stand-alone animated movies

Animated elements for web pagesLogos, mouse-overs, buttons, drop-downs …

Ads, sidebars, banners …

Animated .GIFs

Completely Flash-based web interfaces

Flash-based games

http://en.wikipedia.org/wiki/Animation

http://en.wikipedia.org/wiki/Interactivity

http://en.wikipedia.org/wiki/Rich_Internet_application


But exercise self-discipline over …But exercise self-discipline over …

"Flashturbation"

"Flashturbation is a term used to refer to the inappropriate use of Macromedia Flash software on Internet sites resulting in the creation of unnecessary animation or other annoying features.

"Flashturbation is often typified by an option to "skip intro", which allows users to avoid having to wait for the animation either to load or play. The intention of this term is to emphasize a self-absorbed approach in the use of Flash technology."

http://en.wikipedia.org/wiki/Flashturbation

http://www.goddoesntshootcraps.com


The basic Flash interfaceThe basic Flash interface

Flash developer (.fla) vs. Flash player (.swf)

The opening screen

Menus & help

The stage & work area

Timeline & layers grid

The toolbox w/ options (in four sections)

The (contextual) properties inspector

Working with other panelsLibrary, history, scene, behaviors, etc.

View optionsCustomizing the interface layout

Magnification, rulers, guides, grids, etc.

Standard Adobe keyboard shortcuts


When creating an animation from scratch …

Always begin with document propertiesAlways begin with document properties

It is often important to make decisions regarding properties before you begin work on your Flash project, however, remember that you can come back and change these settings at any time.

DimensionsThe default document size is 550 x 400 pixels.

The minimum size is 1 x 1 pixels; the maximum is 2880 x 2880 pixels.

Meta dataImproving the ability of web-based search engines to return meaningful

search results for Flash content, not a feature of Flash MX 2004 <.

Frame rateThe number of animation frames to appear every second.

Background color

Ruler units


Simple frame-by-frame animationSimple frame-by-frame animation

“Stop motion (or frame-by-frame) animation is a general

term for an animation technique which makes a physically

manipulated object appear to move on its own. The object is

moved by extremely small amounts between individual film

frames, creating the illusion of movement when the series of

frames are played back as a continuous sequence.”

http://en.wikipedia.org/wiki/Stop_motion


DAY2

HOMEWORK DUE

ILT workbook Unit 1: “Getting Started” Time: 30 minutes.


The importance of library symbolsThe importance of library symbols"A symbol is a graphic, button, or movie clip that you create only once, but then can be reused throughout your project or in other Flash documents. A symbol can include artwork imported from another application. Any symbol that you create automatically becomes part of the library for the current document."

To save yourself trouble, virtually every graphic you create in Flash should be saved into the library as a symbol.

Each time you use a symbol in your presentation, it is calledan "instance."

Editing a symbol automatically updates any and all instances.

Editing an instance does not affect the original symbol.

Each symbol can have its own layers and timeline!

You can nest symbols inside of other symbols.

It is possible to convert existing graphics on the stage into symbols.


Three different types of library symbolsThree different types of library symbols

GraphicsOften a single frame, locked to timelineOptionally loopedFirst frame can be variedInstances can be named uniquely

Movie clips (not video clips)Usually multiple frames, independent

timelineAlways loopsScriptable & nameableResults in a smaller file size

ButtonsFour different states (frames)

Up, over, down, hit

Easy interactivity


Working with frames & keyframes Working with frames & keyframes Understanding the layers & timeline grid

"The Timeline organizes and controls a document's content over time in layers and frames. Like films, Flash documents divide lengths of time into frames. Layers are like multiple film strips stacked on top of one another, each containing a different image that appears on the Stage. The major components of the Timeline are layers, frames, and the playhead. The playhead indicates the current frame displayed on the Stage. As a Flash document plays, the playhead moves from left to right through the Timeline."

Keyboardshortcuts

F6insert keyframe

F5insert frame


Working with frames & keyframes Working with frames & keyframes CRITICAL CONCEPTS of manipulating your timeline

Keyframes provide the primary transformations for symbols in your animation, while frames fill in the in-between states between keyframes.

So, what’s the difference between a frame and a keyframe?

When you insert a keyframe, Flash automatically copies all symbolsfrom all (selected) layers into the new frame(s).

However, you can also insert blank (or empty) keyframes.

Adding or removing frames between keyframes increases or decreases the amount of time perceived between those keyframe states.

Keyboardshortcuts

F6insert keyframe

F5insert frame


Methods of inserting keyframesMethods of inserting keyframes

Note: You can add keyframes across multiple layers …and you may need to!

Menu: Insert: Timeline:

Right click on the timeline

F6 Keyframe F5 frame

By simply moving the symbol …when you have a non-keyframe frame selected in the timeline

Pay careful attention to:

The type of frame you are adding:

Frame, Keyframe, or Blank Keyframe

Why would you want to add blank (empty) keyframes?

The layer(s) and/or frame(s) you have selected in the timeline.


Traditional frame-by-frame animation vs.

“Tweening”“Tweening”

"Short for in-betweening, tweening is the process of

generating intermediate frames between two images to

give the appearance that the first image evolves smoothly

into the second image. Inbetweens are the drawings

between the keyframes which help to create the illusion of

motion. Tweening is a key process in all types of

animation, including computer animation, in which the

software enables you to identify specific objects in an

image and define how they should move and change

during the tweening process.“

http://en.wikipedia.org/wiki/Tweening




What all can be done with motion tweens?What all can be done with motion tweens?

"You create a motion tween by defining properties for an instance, a grouped object, or text in a starting keyframe, and then changing the object's properties in a subsequent keyframe. Flash creates the animation from one keyframe to the next in the frames between the keyframes.“

Remember, only symbol instances (or groups)can be motion tweened.

Use motion tweens to …Create movement (including "easing")

Rotate, skew, and resize.

Alter color, tint, brightness/contrast, and alpha (transparency)

Utilize the assistance of onion skins (with markers)


Easing your tweensEasing your tweens

Ease in - minus

Affects the speed of the tween as your symbol begins its animation

Ease out + plus

Affects the speed of the tween as your symbolends its animation

“By default, tweened frames play at a constant speed.With easing, you can create a more realistic rate of acceleration and deceleration. Positive values begin the tween rapidly and decelerate the tween toward the end of the animation. Negative values begin the tween slowly and accelerate the tween toward the end of the animation.”


The trick to working in FlashThe trick to working in Flash

Always pay close attention to …

WHERE YOU ARE.

What layer are you in?

What is your location (frame) in the timeline?

What object or symbol do you have selected?

(Check the properties inspector)

Are you editing a library symbol or a group?

What tool do you have selected?

What scene are you working on?


DAY3

HOMEWORK DUE

ILT workbook Unit 3: “The Timeline” Time: 45 minutes.


The trick to working in FlashThe trick to working in Flash

Always pay close attention to …

WHERE YOU ARE.

What layer are you in?

What is your location (frame) in the timeline?

What object or symbol do you have selected?

(Check the properties inspector)

Are you editing a library symbol or a group?

What tool do you have selected?

What scene are you working on?


Understanding vector vs. raster graphicsUnderstanding vector vs. raster graphics

"Basically there are two types of computer graphics, bitmaps and vectors. Bitmap files such as jpegs or gifs contain information on each and every individual pixel, while a vector file is "object-oriented" and mathematically contains information on individual objects as to their shape, position, color, etc. Raster images scale poorly, while vector-based images can be scaled indefinitely without degradation."

Raster graphics, aka bitmaps

"Raster graphics, or bitmapped graphics, are digital images stored as arrays of pixels for display and modification. In raster data there are no lines, circles, or polygons, only pixels that are grouped to give the appearance of these elements."

Vector graphics, aka line art

"Graphics in which an image is stored as a series of numbers defining size, position, and shape."


Raster or pixel-based graphics vs.Raster or pixel-based graphics vs.Vector or object-oriented graphicsVector or object-oriented graphics


Flash drawing & painting toolsFlash drawing & painting tools

Always pay attention to your tool options.

Pencil, pen, and brush

Shape toolsStroke & fill properties

The web-safe color palette's 216 colors

Paint bucket, ink bottle, and eye dropper

Eraser

Selection toolsArrow, subselection, lasso, free transform


Unique graphic behaviors in FlashUnique graphic behaviors in Flash

Making selectionsA single click only selects a fill or line (not both)

You must double-click to select an entire object

Object interactions: The “Merge Drawing” ModelStacking order (as opposed to working in layers)

Objects on the same layer "eat away" at each other

The “Object Drawing” Model

Transforming, grouping, and breaking apart objects

Easily adjusting alignment

Using the trace bitmap command


Custom colors, gradients, and line stylesCustom colors, gradients, and line styles

The color mixer panel

RGB or hexadecimal and alpha

Custom color swatches

Gradients

Line styles


Nesting symbols within symbolsNesting symbols within symbols

"Nesting symbol instances inside other symbols is a common technique of Flash authoring. A symbol nested inside another symbol is called a child of that symbol. The parent instance contains the child instance."

You can animate individual (and separate) elements of your Flash animation by nesting them.

Individual nested symbols have their own timeline and their own set of layers.

Movie clip symbols may not animate when you scrub, but should be fully functional when you test the movie.



DAY4

HOMEWORK DUE

ILT workbook Unit 5: “Timeline Animation” Time: 75 minutes.


Creating & managing layersCreating & managing layers

To tween different symbols, you must place each one on a different layer.

Creating, naming, renaming, and deleting layers

Changing layer order

Visibility & layer outlines

Locking down layers

Utilizing layer folders for complex projects


Additional types of layersAdditional types of layersGuide layer

Never published

Can be used for notes, designer's visual aids …

Or can be created as a "motion guide"

Mask layerUsed to obscure elements in a "masked layer" beneath itself

Button layerCan provide an invisible "hit state," especially useful to turn an

entire animation into a clickable hyperlink

Sound layerPlacing your sound files in their own layer enables you to see a

guide "wave form" to synchronize animation to sound.

Actions layerFor the sake of organization it is often useful to place all your

scripting in a separate layer.


Vectorization of bitmapsVectorization of bitmaps

File > Import > Import to Stage

Modify > Bitmap > Trace Bitmap

Add to library


Shape tweening (morphing)Shape tweening (morphing)

“With shape tweening, you specify attributes for a shape in one keyframe, and then modify the shape or draw another shape in a subsequent keyframe.

As with motion tweening, Flash creates the animation in the frames between the keyframes.”

Shape tweening can only be applied to objects drawn directly on the stage and not to library symbol instances.

http://www.entheosweb.com/Flash/shape_tween.asp


Working with blocks of textWorking with blocks of text

In object-based graphics programs, text is usually two different things at the same time:

A graphic object

A block of editable text

Understanding variable vs. fixed text blocks

All standard text formatting tools apply via the properties inspector.

Breaking apart text into shapes



DAY5

HOMEWORK DUE

ILT workbook Unit 2: “Basic Objects” Time: 120 minutes.


Review exercises from last weekReview exercises from last week» Choose your animation assignment

Average time to complete: up to two hours.

Utilizes essential skills sets: Creating a new Flash document, working with library symbols, understanding the timeline, adding keyframes and frames, tweening.

Choose your animation style and content:

Frame-by-frame: Rain or sparkles

Motion-tweened animation: Bouncing balls

Combination: Galloping horse with moving background

If you find yourself stuck, ask a neighbor for help or flag down your instructor. If you are getting ahead (or finish) take a short break and ask other students if you can help.


Review: frame-by-frame animationReview: frame-by-frame animation » Back to exercise choices

Rain or Sparkles

This animation is created simply by drawing raindrops or streaks in one frame, and then varying that same image in one or more additional frames. Sparkles can be created by using the exact same technique.

You may reuse your simple rain animation from last week or create a new Flash document from scratch.

In frame one of your timeline draw your initial rain or sparkle images directly onto the stage.

Add a new keyframe to frame two. This will copy whatever images you have on the stage from frame one. With frame two selected in the timeline, vary the image by moving it or flipping it.

Test your animation by looping playback.

In your My Saved Files folder, save your file as an .FLA and then publish your animation as a .SWF

EXTRA CHALLENGE: Utilize layers to include your rain or sparkle effect as part of a larger picture, such as a rainy landscape or a sparkly treasure.


Review: motion-tweened animationReview: motion-tweened animation » Back to exercise choices

Bouncing balls

This animation is created by a series of simple motion tweens.

Create a new Flash document with all the default settings.

Create a new library symbol, and draw your ball of choice. Note: you will get the best results if your ball is not perfectly symmetrical. Then exit out of edit symbol mode, and return to the primary timeline.

In frame one of your timeline, drag the ball symbol onto the stage and position it against the left “wall” of the stage.

Add a new keyframe into a future point of the timeline. The number of frames in between the keyframes will create the amount of time elapsed.

Position the ball in your new keyframe against the right “wall” of the stage.

Repeat steps 4 & 5 until you have an appropriate number of bounces.

Continually test your animation by looping playback.

In your My Saved Files folder, save your file as an .FLA and then publish your animation as a .SWF

EXTRA CHALLENGES: Add rotation. Squish the ball as it hits. “Pop” the ball at the end. Create more than one bouncing ball.


ReviewReview: combination animation: combination animation » Back to exercise choices

Galloping horse with a moving background

This project is a frame-by-frame animation of a galloping horse inside a library symbol with its own nested timeline. Once that symbol is created, it is motion-tweened on the stage. Then a moving background is also motion-tweened on a separate, underlying layer. You may also use a running chicken or flapping bird.

In a new document, import to library the frame-by-frame images for your character.

Create a new library symbol for your nested animation. Then make a keyframe for each frame-by-frame drawing in your animation. Each image will need to be trace-bitmapped so that the white background can be removed.

Finally, exit out of edit symbol mode, and return to the primary timeline.

In your primary timeline, drag your symbol onto the stage. Then add additional keyframes into future points of the timeline to simulate the travel of your character from one side of the stage to the other. Motion-tween this series of keyframes.

For the background, draw directly on the stage into a separate layer scenery which is two or three times as long as the stage is wide. Group or convert to symbol.

Motion-tween the background in the opposite direction that your character moves.In your My Saved Files folder, save your file as an .FLA and then publish your animation

as a .SWF

EXTRA CHALLENGE: Make the background loop seamlessly.



DAY6

HOMEWORK DUE

ILT workbook Unit 7: “Publishing” Time: 40 minutes.


Working with simple audioWorking with simple audio

"Macromedia Flash Basic 8 and Flash Professional 8 offer several ways to use sound. You can make sounds that play continuously, independent of the Timeline, or you can synchronize animation to a sound track. You can add sounds to buttons to make them more interactive and make sounds fade in and out for a more polished sound track.

"There are two types of sounds in Flash: event sounds and stream sounds. An event sound must download completely before it begins playing, and it continues playing until explicitly stopped. Stream sounds begin playing as soon as enough data for the first few frames has been downloaded; stream sounds are synchronized to the Timeline for playing on a website.

"To add a sound to a document from the library, you assign the sound to a layer and set options in the Sound controls in the Property inspector. It is recommended that you place each sound on a separate layer. You can import the following sound file formats into Flash: .WAV, AIFF, .MP3."


Working with simple audioWorking with simple audio

Importing

Types of sounds

Adding sounds to a layer

Effects and editing sounds

Sync settings

Repeating

http://www.soundsnap.com

http://www.hotcoding.com/flashc...


Publishing your Flash projectPublishing your Flash projectand understanding Flash file types

.FLA The developer file

.SWF Final publication for web, uneditable

.GIF The only bitmap image format that supports animation

.HTML Web containers for .SWF files

Export Movie … As Sequence (et al)

Other additional formats …

http://en.wikipedia.org/wiki/Swf


Buttons and essential scriptingButtons and essential scriptinghttp://www.video-animation.com/flash8_007.shtml


Flash-based website designsFlash-based website designsAs you view the below web pages, ask yourself the following questions:As you view the below web pages, ask yourself the following questions:

What is the site about?What do you like about the site? What don't you like about it?Does the Flash-based interface complement or detract from site content?

kindnessandhumility.com

pulsethemovie.net

articleonemusic.com

spiderman 3 site

da vinci code site

womenandguns.vcu.edu

xenao.com

carlosmarcelo.com

KPF.com

thanea.com

parque.nl

bio-bak.nl

playgroundsfestival.nl

okaydave.com

creaktif.com

cubamoon.com

hybridworks.jp

sonjamueller.org


Resources for Flash developersResources for Flash developers

actionscript.orgflashadvisor.comnewgrounds.comworldbest.com/flash.htmbestflashanimationsite.comatomfilms.com/af/animation/flashsaveflash.comflashblock.commacromedia.com/software/flash/flashpro/productinfo/faqlodestone.com/_pdf/manuals/Whats_New_In_Flash_8.pdf


Conclusions …Conclusions …You cannot learn the violin in a day or two.

Flash animation is a skill – like any other – that requires gradual & continual practice & improvement.

Approach everything on a need-to-know basis, and don't worry about that which you do not yet understand.

Stay upbeat!… but if you get frustrated, remember:

You can always turn off the machine and walk away. :)

Good luck. Best wishes.And get in touch if you need more help!

[email protected]

intro to adobe flash cs3 welcome & course outline (2010)

Technology

adobe flash cs3

macromedia flash

flash developers

flash cs3certification

adobe flash player

beginning flash user

advanced flash user

flash cs3 corporate