Intro to Flash
Getting Started
Learning the Keyboard Shortcuts will save you time !!!
creating a new flash document
(Ctrl + N) / >File > New > Flash File (ActionScript 3.0) >OK
`
setting documents properties
(Ctrl + J) / >Modify > Document -Enter the width and height you want your file to start (even if you want it to be liquid or fullscreen)
-Choose Background Color
- set Frame Rate to at least 24 (flash frame rates are not exact and will vary depend on what your are asking the flash player to render and how well the users CPU performs, the number you set is the maximum Frames Per Second flash will render. The human eye can’t see more than 24 FPS so usually you won’t need to go above 24FPS for flash on the internet. If you do keep in mind that Internet Explorer caps Frame Rates at 60FPS because that is the refresh rate of monitors)
-If you like these settings >Make Default
`
save document
(Ctrl + S) / >File > Save
`
or to save an existing file in a new location
(Ctrl + Shift + S) / >File > Save As
`
`
Do tutorial: -”Understanding the timeline, keyframes, and frame rate”
Drawing In Flash
CS3 Users
`
Do tutorial: -”Using the Drawing Tools”
-Flash Drawing tools create Vector Graphics (graphics that rescale without any loss of quality).
-Flash has 2 Drawing Models:
1.Merge Drawing Model (default): Shapes merge when overlapped and alter each other.
2. Object Drawing Model: Shapes remain individual even when overlapped (similar to being on separate layers)
-to enable Object Drawing Model: -select a drawing tool - then select 
(j toggles object model on and off)
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ > Drawing > Drawing Basics 
for info about: selecting objects, combining objects, and specifying drawing preferences.
`
Do tutorial: -“Drawing With The Pen Tool”
-Pen tool is most precise and adjustable drawing tool
-Use the line and fill color secectors to choose colours / gradients.
-To create more specific colors or gradients: (Shift + F9) / >Window >Color then use options. Note that you can use the Alpha level to reduce the opacity of a solid color or a color in a gradient.
-To change the fill or line color of a shape already on the stage select it first then follow previous step.
-Have a play with the Brush and Pencil tools and try all their different options.
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ for more info on any particular tool or option.
`
`
Importing Art Work into Flash
Most of the time you will want to create your graphic elements outside of Flash in Illustrator, Photoshop, Fireworks and a whole host of other specialist programs because they are a lot better graphics programs than flash. As a Flash Designer you should have a good grasp on one or all of these programs as well. Do the introductory video tutorials for each of these programs on http://www.adobe.com/designcenter/video_workshop/ (even if you already know how to use these programs there’s probably short cuts you don’t know about that will save you a lot of time and frustration). There are special methods for importing files from each of these programs into flash which maintain a lot of the files structure (this has been improved further in CS4).
`
Illustrator
Do tutorial: -“Import Illustrator Files into Flash”
Try to do all the video tutorials here about working with Illustrator and Flash.
`
Fireworks (for those who don’t use it fireworks has really cool gradient presets and tool for creating web 2.0 graphic elements amongst a whole bunch of other features. Fireworks CS4 will can be used to slice up a PSD and save it as a html page with valid, cross browser compatable CSS. Untill now this was one of the most mind numbing parts of my day)
Do tutorial: -“Understanding the Fireworks and Flash Workflow”
`
Photoshop
Do tutorial: -“Designing websites with Photoshop and Flash”
`
InDesign CS4 now exports files for Flash CS4 and can even export SWFs
See tutorial videos on http://tv.adobe.com/
`
`
Importing Bitmaps
I usually import flattened Bitmaps rather than files with many layers from other programs as it reduces the amount of clutter in my flash file and helps keep the file size down. I prefer to render higher quality Bitmap graphics or videos outside of flash and then use flash to add User Interactivity to these elements or to create completely Interactive visual elements. I also prefer the compression options under “Save for Web and Devices” in Photoshop and Illustrator to the ones available in flash.
If you haven’t used “Save for Web and Devices” see: Preparingfilesfortheweb
`
> File > Import > Import to Stage (as long as your on the key frame and layer you want the item imported to)
This will also add the item to the library. You can delete it from the stage and it will remain in the library.
`
Anti-Aliasing (smoothing) of a bitmap is often needed if you want to rotate or scale a bitmap image in an animation, without distorting it. (Flash applies a tiny bit of blur to prevent the distortion which is a bit more CPU intensive for the viewer but won’t become a problem unless you have heaps of Bitmaps being animated at once)
(Ctrl + L) / >Window > Library
-double click on the bitmap (or select it and click the “i” down the bottom)
-check Allow Smoothing
`
Compression
There are compression options in flash available but there not as good as “Save for Web and Devices” in photoshop or Illustrator so I don’t recommend using them.
`
-See http://livedocs.adobe.com/flash/9.0/UsingFlash/ > Using imported artwork for more detailed info on each aspect. Other areas covered in the docs include: Aplly a bitmap as a fill, Break apart a bitmap and Convert Bitmaps to vector graphics.
SYMBOLS / INSTANCES
Do tutorial: -“Creating and using Symbols and Instances”
~
“A symbol is a graphic, button, or movie clip that you create once in the Flash authoring environment or by using the SimpleButton (AS 3.0), and MovieClip classes.
~
An instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be different
from its symbol in color, size, and function. Editing the symbol updates all of its instances, but applying effects to an
instance of a symbol updates only that instance.
~
Using symbols in your documents dramatically reduces file size; saving several instances of a symbol requires less
storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of
your documents by converting static graphics, such as background images, into symbols and then reusing them.Using
symbols can also speed SWF file playback, because a symbol needs to be downloaded to Flash Player only once.”
~
Symbol Types
-Graphics (smallest file size but can’t be interactive or controlled by AS3 so only for animations)
-Buttons (interactive and able to be targeted by AS3, with a default set up for defining Mouse Up, Mouse Over, Mouse Down, Hit)
-Movie Clips (interactive and able to be targeted by AS3. Reusable pieces of animation. Movie clips have their own multiframe Timeline that is independent from the main Timeline.)
`
Creating Symbols
-select the item on the stage you want to turn into a symbol
-(F8) / >Modify > Convert To Symbol
-give the Symbol a recognizable name
-Choose if you want it to be: Movie Clip, Button or Graphic
-Choose the Registration Point
>(ENTER) /> OK
`
Breaking Symbols Apart
(Ctrl + B) / >Modify > Break Apart
~
~
~
Tweening (Animating)
This is one of the main areas where flash CS4 is a major improvement over flash CS3. The animating “engine” in flash CS4 has been completely re-written and is now much more advanced and easier to use (similar to After Effects animation features). Personally I thinj until CS4 flash has been a fairly terrible animation program but it still does the job for simple animations like banners and a lot of web things that are more about the interactivity than the quality of the animation.
~
For those of you already using CS4 if you haven’t done them yet do all or some of these tutorials about animating:
-all the getting started vids about animating here http://tv.adobe.com/#pg+1590
-Flash Downunder - Motion Tweening
-Flash Downunder - Bone Tool and Deco Tool
-Advanced Motion Editor and Presets
~
For now we’re still using CS3 but all the same principles still apply so knowing how to animate in CS3 will make it even easier when you move to CS4. Also alot of the principles used in timeline animation are used when we get into moving things around by AS3 which is way ahead of what can be done in CS4.
~
CS3 users Do Tutorials:
-creating animations using motion tweens
-creating animations using shape tweens
-copying and pasting actionscript from an animation
~
steps for creating motion tweens
-create a symbol out of the object you want to animate (movie clip has most options)
(F8)
-create a second keframe further down the timeline on the layer of your symbol
(F6) > Insert > Time Line > Key Frame
- while the play head is on the second key frame move the position or change another visual aspect of your symbol (e.g. alpha)
-right click on the timeline between the two keyframes and select Create Motion Tween
~
steps for creating shape tweens
-create a vector shape on the stage (do not convert it to a symbol)
-create a second keframe further down the timeline on the layer of your shape
(F6) > Insert > Time Line > Key Frame
- while the play head is on the second key frame change the shape / colour or delete that shape and create a new one
-right click on the timeline between the two keyframes and select Create Shape Tween
~
Create a motion path for a tweened animation
1 Create a motion-tweened animation sequence. If you select Orient To Path, the baseline of the tweened element
orients to themotion path. If you select Snap, the registration point of the tweened element snaps to themotion path.
2 Do one of the following:
• Select the layer containing the animation, and select Insert > Timeline > Motion Guide.
• Right-click (Windows) or Control-click (Macintosh) the layer containing the animation and select Add Motion
Guide.
Flash creates a new layer above the selected layer with a motion guide icon to the left of the layer name.
Motion guide layer above selected layer
3 Use the Pen, Pencil, Line, Circle, Rectangle, or Brush tool to draw the desired path.
4 Snap the center to the beginning of the line in the first frame, and to the end of the line in the last frame.
Note: For best snapping results, drag the symbol by its registration point.
5 To hide the motion guide layer and the line so that only the object’smovement is visible while you work, click in
the Eye column on the motion guide layer.
~
Use the Custom Ease In/Ease Out dialog box
1 Select a layer in the Timeline that has a motion tween applied to it.
2 Click the Edit button next to the Ease slider in the frame Property inspector.
3 (Optional) To display the curve for a property, deselect Use One Setting For All Properties, and select a property
in the menu.
4 To add a control point, Control-click (Windows) or Command-click (Macintosh) the diagonal line.
5 To increase the speed of the object, drag the control point up; to slow down the speed of the object, drag it
downwards.
6 To further adjust the ease curve, and fine tune the ease value of the tween, drag the vertex handles.
7 To view the animation on the Stage, click the play button in the lower-left corner.
8 Adjust the controls until you achieve the desired effect.
~
Move an entire animation
~
Move the graphics in all frames and layers at once to avoid realigning everything.
1 Unlock all layers. To move everything on one ormore layers but nothing on other layers, lock or hide all the layers
you don’t want to move.
2 Click the Edit Multiple Frames button .
3 Drag the onion skin markers so that they enclose all the frames to select, or clickModifyOnionMarkers and select
Onion All.
4 (Ctrl + A)Select Edit > Select All.
5 Drag the entire animation to the new location on the Stage.
~
About filters and Flash Player performance
The type, number, and quality of filters you apply to objects can affect the performance of SWF files as you play them.
Themore filters you apply to an object, the greater the number of calculations Adobe® Flash® Playermust process to
correctly display the visual effects you’ve created. Adobe® recommends that you apply a limited number of filters to
a given object.
Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings
improves performance on slower computers. If you are creating content for playback on a wide range of computers,
or are unsure of the computing power available to your audience, set the quality level to Low to maximize playback
performance.
~
Apply or remove a filter
1 Select a text, button, or movie clip object to apply a filter to or remove a filter from.
2 Select Filters, and do one of the following:
• To add a filter, click the Add Filter (+) button, and select a filter. Experiment with the settings until you get the
desired look.
• To remove a filter, select the filter to remove in the list of applied filters, and click the Remove Filter (-) button.
You can delete or rename any presets.