Course notes
syllabus | schedule | topics | projects | class notes | resources | students | ARTC courses
 Lectures:
Lecture A: The Flash Interface Lecture 4: User Input
Lecture B: Animation Lecture 5: Extras & Game Design
Lecture 1: Drawing with Code and ActionScripting Lecture 6: Linking up the Nucleus
Lecture 2: Graphics Application Development Lecture 7: Brainstorming Game Types
Lecture 3: Working with Movieclips Lecture 8: Topics for Discussion
  Lecture 9: Preloaders and JavaScript Windows
 
Lecture A: Introduction to Flash CS4 and ActionScript 3.0
Flash Overview

•  Compact because it uses vectors: downloads quickly and the graphics are scalable (resizable) in the browser.

•  Flash is independent of browsers and viewable with a plug-in

•  Vector vs. bitmap: 
     - vectors describe an image using mathematic descriptions of the shapes (lines and curves with attributes); it is resolution-independent, so you never lose quality or increase file size
     - bitmaps use pixels in a grid; they are resolution-dependent, limited to the original number of pixels, so they become jaggy when resized

•  With Flash you can create dazzling graphics and interfaces with animation, sound, video & interactivity

•  Flash has streaming capabilities = download bit by bit instead of all at once

• Flash has a powerful programming language (ActionScript) embedded in it that enables you to control almost anything in Flash.

• You can Export files for web browsers or as a stand-alone flash application

Opening Flash

On the opening screen, select OPEN - CREATE NEW - Flash File (ActionScript 3.0)

NOTE: Right Click with Mouse to get Context Menus

Interface Elements:

Stage:  Movie plays here; animations and interactivity take place here

  • Create objects on the stage of using ActionScript; absolute positioning (0,0 upper left)

Timeline:  Where graphics are animated over time; layers act like acetate cels
            -  Layers on the left, Frames on top; Display at bottom: current frame, rate, etc. (OPT+CMD+T)

WINDOWS - Library:  stores/organizes symbols ( imported files (bitmaps, quicktime movies, sound) and objects you make in Flash); you can sort the contents in many ways (CMD+L)

Work Area: area outside of stage – won’t be visible in final production; but use to organize elements

Dragable / Dockable Panels:  MANY panels; can be moved, drag and remove by tab & attach to top, bottom, sides to dock

Properties Tab:  changes to reflect whatever you currently have selected; use this constantly to alter the parameters

To Show / Hide Grid, Rulers, Guides:  View > Grid  or  Rulers  or  Guides

Flash work files are saved as  .FLA files;  published flash documents are  .SWF files and ActionScript code files are .AS

Set Properties:  Modify > Document…  (or click on the stage with the POINTER to open the properties)

•  dimensions (widthXheight) 550x400=default; min=18x18, max=2880x2880
•  match: printer, contents, default (use default)
•  Background Color: changes background color
•  8-12 fps (frames per second); 12=default
•  Ruler Units: pixels

Symbol:  Reusable graphic (saves download time and file size because no matter how many times the item is reused in the file, Flash only stores it once); You can edit the master symbol and it will change ALL of the times it is used in the file.

Instance
:  each time a symbol is used in a Flash file it is called an instance.

Frames:  For animation (8 or 12 fps for web); 24=film, 29.97/30=video ; our eye sees 15 fine, at 8 fps we beging to see individual frames not animation.

Layers:  Used like cels of acetate; similar to other programs such as Photoshop

•  Can draw, paint, select, and modify objects and change views;  Window > Tools
•  Divided into 4 sections:
-  Tools: drawing, painting, selection tools
-  View: to Zoom and Pan
-  Colors: stroke and fill modifiers
-  Options: the tool modifiers (also use with other panels and property inspector)

•  Can reshape lines and shape outlines in a variety of ways after they’re created; Fill and Stroke are separate objects!! (Stroke=outline of shape (line surrounding), Fill=solid shape inside)

•  How vectors function:  Using the pencil, line, oval, rectangle, or brush divides the object into separate segments when they overlap

•  If painting on top of other objects, the portion below is replaced by what’s on top; Paint of same color merges into one Fill, while different colors become distinct fills; **Group shapes or use layers to keep separate and protec themt!

Zoom In and Out:  Use magnifier tool (OPT to zoom out) or (CMD +) In / (CMD -) Out 

(P) Pen: Creates paths as straight or curved lines;  Acts like pen in other programs: 

For Straight lines:  Click starting point, Click anchor point, etc. SHIFT for 45 degrees; continue to add points
-  For open path: Double click last point
-  For closed path: Click on first anchor when done

For Curved lines: (anchor points display tangent handles; slope & length of handles determine slope and height of curves);  Click and drag (tangent appears); SHIFT+drag for 45 degrees; release; reposition mouse for next point, Click+drag in opposite direction to complete segment, etc.

To Move Anchor: Select Subselection tool; drag with mouse or use < > arrows on keyboard

To Convert Anchors from corners to curves and vice versa:
-  Corner to Curve:  Subselection, Option + drag
-  Curve to Corner:  Pen Tool, Click

To Add Anchors:  Select Pen Tool, Click on line segment (look for the +) or select the pen with the plus by it (+)

To Delete Anchors:  Select the Pen with the minus by it (-)

Tangent Handles: Curve-both sides of point will adjust - carfully select it with the subselection tool

(T) TEXT tool:  Creates blocks of editable text (Horiz or Vert), and has many attributes
Select text tool and either:

  1. place cursor and type for an unlimited box size
  2. draw a box with cursor for fixed width 

ATTRIBUTES: - all the standard text attributes plus change orientation (Vert LR, V RL, Horiz); paragraph margins, indent, etc.
Shift select multiple (arrow tool) and change attributes (font, color, size, etc.)
Use Text menu or Property inspector to change Kerning, spacing, etc.

(N) Line Tool Properties: 
Fill and Stroke color (fill is the inside and stroke is the outside) - There is NO fill on the line
Edit Stroke Style - change the look of the line
Stroke thickness (stroke height)
Style - pull down to choose
hold SHIFT to limit to 45 degrees

(R) Rectangle Tool: 
Fill and Stroke color (use none for empty)
Stroke thickness (stroke height)
Style - pull down to choose

-  To get Rectangle with Rounded corners: use Rectangle Options or while dragging to draw the rectangle, hit the Up or Down ARROW   to adjust radius of the corners before releasing mouse; Hold shift for squares

(O) Oval Tool:
Same as above plus Options:
Start angle and end angle - to make pie charts
Inner radius to cut a piece out of the center
Close path will add the fill or not

Pencil:  creates freeform lines and shapes; Select color, weight, and style; Hold SHIFT to restrain to vertical or horizontal movement 

(B) Brush amd Spray Brush:  creates paint-like brush strokes; choose fill color (uses FILL, not STROKE)
Smoothing - will make it more curvy
The Spray Brush can have its width and height changed
Can change size also (see bottom of tool palette)

(I) Deco Tool:  Can take a symbol from your library and repeat it over and over with alterations to the parameters such as Angle, Scale and Length

(K) Paint Bucket:  Dumps a new fill color on the object; chose fill color

(S) Ink Bottle:  Dumps a new stroke (outline) on the object; choose line color, width, style

(I) Eye Dropper:  Picks up fill or stroke attributes from existing object and applies to another; automatically changes to ink bottle or paint bucket depending on what you select to apply to

(E) Eraser:  Removes strokes and fills; 
•  Double-click to erase all on stage / layer
•  Erase part of a fill or stroke
Eraser Mode:
Normal: effects stroke and fill
Fills: effects only fills
Lines: effects only strokes
Selected Fills: Only selected fills, no effects on strokes, even if selected
Inside: only starting fill, no effect on stroke
•  Faucet removes entire fill OR stroke
Can change size also

•  Can apply to stroke or fill; Use Ink Bottle (stroke), Paint Bucket (fill)
•  Choose color in color box  OR
•  Type hexidecimal color number in value box (pop-up window)  OR
•  Select None for transparent stroke or fill  OR
•  Use the Color Picker  OR
•  Use the Swap Fill & Stroke box  OR
•  Use Default Black & White box  (All of the above are exactly like options in Photoshop)

Window menu - Color:
- Can alter the Alpha (transparency), color, solid or gradient, etc.)

Gradients:
WARNING: HOGS! +50bytes per fill, and slow down processors when play back, so use cautiously!
Use the Windows - Color menu to select Linear or Radial and then select the colors for your gradient
•  Sliding arrow with color can assign color by clicking on start or finish arrows
•  To remove a gradient range marker, drag the arrow of the bar
•  Use Gradient Transform tool to adjust position of the gradiant



Arrow :  Reshape lines and shape outlines
-  Click once to select stroke or fill
-  Click and hold to move end points of a line
-  Double-click to select (stroke and fill) or multiple parts of the stroke
-  Options: smooth - softens curves, reduces bumps and # of segments (= smaller file size)
                           Straighten - adjusts drawn lines to straight lines
- magnet - snap to grid  (turn on View menu -> Grid)
- Select Modify menu -  Shape - Optimize, specify optimization strength to reduce the complexity of the shape;
-  Modify > Advanced Smooth: smooths all or selected curves (reduces file size)
-  Modify > Advanced Straighten: - has shape recognition (converts your drawing to closest shape

Modify - Combine Objects - Union: takes all selected objects and combines then into one object
               
*  ALWAYS optimize before publishing

Selecting and modifying shapes:
-  rollover it and notice shape beside cursor (curve or corner); drag to reshape
-  Select the object and you can move entire shape
-  Add to selection: Shift+Click;
-  Select everything ON A LAYER:  Edit > Select All  (Ctrl+A)
                          
(L) Lasso:  Can switch between freeform and straight-edged modes (at bottom of Tool palette)
-  Polygon Selector (straight lines) - click move, click move, click to select;  double-click to end
- May need to double click to get into the editing mode on the image before selecting the parts of the image
-  lasso can be used with bitmaps

Free Transform Tool:
-  Modify menu- Transform  (select object first) OR use Free transform tool

-  Can apply to a selection or group

-  Envelope: gives you bezier handles to drastically change group of shapes

Cut, Copy, Paste, etc.:  Use for layers so you don't get confused or erase important info
-  Paste - pastes in center of view (CMD+V)
-  Paste in Place - pastes exactly where it was copied from  (Shift+CMD+V)
-  Duplicate - copy/paste and offset  (CMD+D)

Group / Ungroup: Can't change the color or shape of entire group, but you can resize and rotate the group together
- Select Objects,  Modify -> Group    (CMD+G)  or Ungroup  (Shift+CMD+G)
- protects objects and prevents them from being accidently changed

Double click on an object to get into a the editing mode of a grouped object.
Double click on the white (stage) to get out of the editing mode.

Aligning Objects: Enables you to align objects along horizontal or vertical axis  USE ALIGN PANEL
         -  vertically along right edge, center, or left edge of objects
         -  horizontally along top, center or bottom edge or objects (determined by bounding boxes)
         -  Can distribute so centers are evenly spaced
         -  Can resize so that horizontal or vertical dimensions of object match largest

Exercise:

Exercise:  Make 4 graphic elements and group them
•  Create 2 different buttons that are made up of multiple shapes and strokes
•  Create a title with a graphic design behind it or integrated in with it
•  Create a complex graphic element using gradients and/or transparency (alpha)


Flash can import images from Freehand (.fh, .fh10) and Illustrator (.eps, .ai) as well as GIFs, JPGs, Animated GIFs, Quicktime Movies and PNGs. (.dxf, .bmp, .emf, .pct, .pic, .png, .psd, .qtif, .mov, .sai, .tif )

Use the File - Import - Import to Stage (also puts it in your Library)

To convert a bitmap (JPEG or GIF) to a vector-based graphic: (files can be huge)
            Import the object
            Modify - Bitmap - Trace Bitmap...
- Color threshold (1-500) - colors closer than threshold, are combined (higher#=less colors)
            - Min area (1-1000) - how many neighbor pixels to include when assigning colors
            - Curve Fit = smoothness of outlines
            - Corner Threshold = sharp or smooth corners
*For a photographic image a good settings is:
            Threshold = 10, Min Area=1; Curve Fit=Pixels; Many Corners

To make bitmap fills / Break Apart: (separates pixels in image into discrete areas that can be modified)
            Import a bitmap
            Modify - Break Apart - makes it a single vector object with a gradient like fill

To use as a bitmap as a fill: (it will tile the pattern)
            Create a fill object (i.e. rectangle, paintbrush, oval, etc. )
            Open Windows - Color
            With eye dropper, click the broken apart bitmap - notice the TYPE changes to Bitmap in the Color Mixer Panel
            Click the filled shape with the paint bucket
            You can also paint with the bitmap fill using the brush

To reposition the bitmap fill:
            Click paint bucket
            Click Gradient Transform Tool in the Toolbox
            Click on Object and handles appear
            Drag the center or drag corner points or the center edge points to reposition
            Height resizer is on the left and Width is on the bottom to resize, rotate, etc.

Exercise:

Exercise:  Make 2 graphic objects
            - Import an image and Trace the bitmap
            - Import an image and Break Apart then use this image as a fill for another image

** Editing SYMBOL updates all its instances, editing an instance updates itself.

Types of Symbols:

  • Graphic symbols:  static images
  • Button symbols:  interactive
  • Movie Clip symbols:  reusable animation; (has its own timeline) - USE this in most cases

To Create a Symbol from Selected Object(s) on the Stage:
      Select Object(s)

  • Modify - Convert to Symbol

To Create a New EMPTY Symbol:

  • Make sure nothing is selected;
  • Insert > New Symbol  OR  Click New Symbol button in Library 
  • Sends you into Symbol Editing Mode

Edit a Symbol  (Edit in place or on the Stage) - this will edit all instances of the symbol
      Select symbol on Stage; Right-click, Edit   OR  Edit in New Window  OR  Double-click in Library
      Edit menu - Edit Symbols or Double-click it

To return to main stage:

Click the Scene 1 link in the top of the window to get back to the main stage

Edit the Instances:
            Select the instance on the stage and open the Properties tab.
Changes will only occur on that instance of the symbol - the original will remain the same.

Doesn’t increase size of published movie; can contain sound, actions, labels, comments
Double-click the name of the layer in the timeline to change its name  (always name it)

      Click the file to make a new layer (in bottom left corner of timeline)
      Click folder to make a folder
      Click trash to delete the layer

            Eye - visible
            Padlock - locked
            Rect - outline color of items on that layer
            Pencil - active

To Create Frame Labels (They identify important things along the timeline):

  • Make a new layer and call it Labels

  • Select the Frame where you want to put label
  • Put a keyframe there if needed (F6) or F5 then F6
  • Properties tab - Labe;: Name
  • Enter text for a frame label in the box

A button is really a four-frame display object (with 3 states and an active area)

Making a button:
1.            Draw the image
2.            Select it all and Modify - Convert to Symbol  (F8)
3.            Select Button as the Type
4.            CTRL+click - Edit (or double click) the Instance to Edit it

Button States:            Up, Over and Down - also has the Hit area (the hotspot / activation area for the user)
1.            Go to the Button timeline and Insert > Keyframe (F6) to the Over frame and change the image color
2.            Do the same for Down
3.            Make a keyframe for the Hit state make it exactly the same as the Up but fill it with a color.
(hint: You can disjoint a rollover by placing the hit area somewhere else on the stage)

  • Click Scene 1 icon on the Top Left to get to the main timeline OR  Edit menu > Document

To Test buttons or actions: (by default, buttons are NOT enabled so you can easily adjust them)
Control > Enable Simple Buttons / Enable Simple Frame Actions, hit play  OR  Control > Test Movie