Outline notes for class

Week 1: Introduction

Text: Ch 1: The Flash Authoring Tool / Ch 2: Creating Simple Graphics

Introductions
- Who am I, who are you.
  - Name
    Email
    Occupation
    Do you have any experience with Flash?
    What is your motivation for taking this class?
What is Flash?
- Perception from class
- Flash is a vector drawing tool that allows you to create animations and applications quickly and easily.
- What is a vector?
  - Vector images are images that are represented by collections of independent line and shape objects which are typically defined by mathematical formulas. This makes these images easier to modify than raster images.
  - Raster definition: Also referred to as bitmap images, these are images that are represented by a sequence of pixels (picture elements) or points, which when taken together, describe the display of an image on an output device. There are many different raster image formats in use, among them GIF, JPEG, PCX, and TIFF.
    www.dclab.com/glossary.asp
- Advantages of Flash as a vector tool:
  - Vector images don't take much to download, versus raster images, which has to describe each dot's color and position.
  - Processing happens on individual machines
  - Compare: image.swf, image.gif, image.jpg
  - Myth: You need to have a broadband connection to deploy Flash movies
Tools
- Brush tool
  - Options: paint normal, fills, behind, selection, inside (depends on where you start the brush stroke)
  - smoothness - draw something, person, flower. See BrushSmoothness.fla
  - Option: lock fill
- Pencil tool
  - smooth and straighten options
    - smooth (can adjust in preferences) - draw curve. See PencilSmoothness.fla
    - straighten - draw square (draw box)
  - preferences
- Rectangle Tool
  - rounded corners
- Oval Tool
- Selection Tool
  - modifying strokes and fills - change shape
  - selecting multiple items with shift
  - creating new corners using CTRL+click (win) or Option+click (mac)
    1. draw line
    2. mouse over the middle of the line using the selection tool.
    3. hit the ctrl (win) or option (mac) key, click and drag. A new angle is created.
Graphics on a single layer

Stroke cuts fill cuts stroke...
- Depending on which you draw first, once it's no longer selected, it will cut the stroke or fill underneath it.
  1. Draw rectangle
  2. Draw thick stroke over rectangle
  3. Draw smaller rectangle over stroke.
Fills of the same color will form a new shape when combined
Fills of different color become separate shapes when combined
Grouping - used to prevent shapes from interacting and to keep shapes together
- Grouped shapes stack on top of ungroup shapes
  1. Draw big oval and group it
  2. Draw a smaller oval on top of the bigger oval. Smaller oval disappears. It's actually behind the grouped oval.
- Newly grouped shapes stack on top of older grouped objects.
- You can control stacking by going to Modify > Arrange
- You cannot directly modify grouped objects. Must do one of the following:
  - Double-click on grouped image
  - Edit > Edit Selected
  - Edit > Edit in Place (same as Edit Selected when working with grouped objects. This is different when working with symbols)
- To go back to the stage after done editing grouped object
  - Edit > Edit All
  - Double-click the stage
  - Click the current scene in the Edit Bar
  - Click the back button in the edit bar.
  - Pop-up menu

Keyframes and frames
- Glossary
  - keyframes - historically, they are "key frames" that are crucial in defining a movement of the animation. Top animators drew these "key frames" while the in-between frames were drawn by lesser-paid artists.
    - Example:
      - Bugs Bunny facing audience and turning sideways.
      - 25 frames
      - 2 keyframes
      - 23 in-between frames
  - in-between frames (frames) - the in-betweens, or "tweens" of key frames. Lesser artists that drew the in-between scenes were called tweeners. In Flash, the in-between frames (or frames) are tied to the keyframe preceding it.
  - blank keyframes - in Flash, a keyframe with no content. A placeholder.
  - protoframes - the area in the timeline where there are no frames defined.
- to add keyframes: Insert > Timeline > Blank Keyframe or Keyframe
- adding a keyframe to a keyframe that is at the end of the timeline will add a new frame (a keyframe at that).
- adding a keyframe will duplicate the preceding keyframe's contents, empty or not.
  1. draw something on frame 1.
  2. add 9 more frames. F5
  3. add a blank keyframe at 5. F7. No new frames are added. It converts the frame to a keyframe.
  4. add a keyframe at 3. F6. This will duplicate the keyframe with the drawing.
  5. add a keyframe at 8. F6. This will duplicate the empty keyframe.
- if you have two keyframes next to each other and try to add a blank keyframe in the middle, nothing happens. You have to add a frame when you select the first keyframe. This will add a frame in between the two keyframes.
- Modify > Timeline > Convert to Keyframes (F6)
  - This is when you have several frames selected and want to convert them all to keyframe
Frame by Frame Animation
- Simple example
  1. Create a ball at the top of stage on frame 1
  2. Add a keyframe to frame 2. This will duplicate the ball in frame 2.
  3. Move the ball in frame 2 to the bottom of the stage.
  4. Add a keyframe to frame 3.
  5. Move the ball in frame 3 to the middle of the stage.
- Selecting the timeline and hitting the enter key will move the timeline sequentially to the end of the movie.
- Selecting the timeline and hitting the "," and "." keys will move the timeline one frame to the left or right.
- Selecting the timeline and dragging left or right will scrub the timeline.
- See the Control menu for more options.
- Smoothing the animation by adding keyframes
  - Continue Example
    1. Frame View Popup > Preview In Context
    2. Add two frames after frame 1. Select frame 1 and F5 twice.
    3. Select frame 2 and F6 twice to convert them to keyframes.
    4. Using the Preview in Context mode in the timeline, move the ball with the arrow keys so that there is a smooth line frome frame 1 to frame 4.
    5. Preview
- Manipulating frames
  - Copy and paste a single frame
    - Can't just do Command+C, because that will copy the contents of the stage.
    - Edit > Timeline > Copy Frames or right-click > Copy Frames
    - This will copy whatever frame you have selected, be it blank keyframe, keyframe, or in-between frame
    - Copying a frame that belongs to a keyframe and then pasting in a separate frame or protoframe will create a new keyframe with the contents of that copied frame.
    - Pasting over a keyframe with another keyframe will replace that keyframe with the pasted one.
      1. Create two keyframes
      2. Add different shapes in each.
      3. Copy the first keyframe and paste into second keyframe. It will be replaced.
    - Pasting over a frame with a keyframe will convert that frame to a keyframe.
    - Pasting into a protoframe will extend the previous keyframe and add a keyframe where the protoframe was.
  - Drag and drop frames
    - Double-click to select a span and move to the right.
      - Drag and dropping selected spans will move keyframes.
        
        Any keyframes that they squash will be removed.
        
        They place they left unoccupied will be taken by the keyframe preceding i
  - Increasing keyframe spans
    - F5!
- Removing frames
  - Decreasing keyframe spans
    - Select frames to remove and right-click > Remove Frames
  - Removing keyframes
    - Do not hit delete. This will merely delete the contents of the stage. You will still have a blank keyframe.
    - Can't just select the keyframe (if there is a span) and do right-click > Remove Frames
    - Select keyframe to remove and right-click > Clear Keyframe
Using Onion Skinning
- Onion skin button
  - Cannot edit dimmed forms. Only current frame.
- Onion skin outlines button.
- Modify Onion Markers button
  - Onion 2 - two frames on either side of current frame.
  - Onion 5 - five frames on either side of current frame.
  - Onion All - all frames.
  - Move onion skin markers manually - Move in or out around current frame
  - Anchor Onion - stops the markers from moving when you move around the timeline.
- Edit Multiple Frames button - Selects the content of the frames within the onion skin markers. In case you want to move a whole bunch of frames to a different location altogether.
  1. Click on Multiple frames button.
  2. With all frames selected in the markers, move the ball to the right-side of the stage.
Understanding Frame Rate
- Movies - 24 fps
- Web - 12 fps is good
- UI
  - next to Modify Onion Markers button, ther eare three numbers
  - first is current frame that you are on
  - second is how fast the movie will play at.
  - third is, at the current frame, the equivalent number of seconds that will have elapsed.
- To modify frame rate:
  - double-click on frame-rate number.
  - click on stage to reveal Document PI. Change frame rate from the PI.
- Slow down animation
- Add in-between frames to ball falling

Week 6: Whish-bang!

Text: Ch 12: Basic Interactivity Using Behaviors / Ch 15: Adding Sound

Behaviors: BehaviorsTemplate.fla
- Buttons
  - GotoAndStop(10);
  - Change onRelease and add onRollOut and onDragOut
  - Double click on the Action column to modify the dialog.
  - On keyPress
- MovieClips
  - Duplicate MovieClip
- Use reference
Sound
- Frame PI
- Importing Sound: File > Import
  - The sound will be placed in the Library
  - You can preview the sound in the Library
- Place sounds in their own layers
- You can play 8 sounds at a time.
- If you want to see the waveform better, Modify > Timeline > Layer Properties... and increase the height.
- Sound on frames: PingPongSound.fla, PingPongSoundFinished.fla, sounds.fla
  1. create a new layer called sounds.
  2. create keyframes where the ball hits the paddles
  3. open sounds.fla as an external library and drag "Plastic Click" to the library of PingPongSounds.fla
  4. With keyframe 5 selected, drag the sound from the library to the stage.
  5. For the other keyframes, look at the Frames PI. You don't actually have to drag the sound. Once it's in the library, you can access it from the frames PI, under Sound.
  6. Turn on the sound for all the appropriate places in the animation.
  7. test
- Sound on buttons: sounds.fla
  1. Grab a button from the Common Libraries and drag to stage.
  2. Edit the button
  3. add a new layer called sound
  4. in the sound layer, select the over and down frames and create blank keyframes
  5. assign a sound to over and a different one to down.
- Event Sounds: LatexSalesman.fla
  - Sync: Event, Start, Stop, Stream
  - Event sounds keep playing until it's done. Independent of timeline
  - Reserve event sounds for short clips, as Flash will pause until all is download before it starts playing.
  - Repeat option.
- Start Sound: LatexSalesman.fla
  - Start sounds differ from event in that if there's already an instance of that sound playing, it will not play. Change the second keyframe of the latexsalesman movie to start and test.
- Stream Sound: LatexSalesmanStream.fla
  - stream sounds follow the timeline.
  - good for lip synching
  - when the are no more frames, no more sound
  - stream sounds start playing as soon as there is enough of the sound to play.
  - you can scrub streaming sounds
- Stop Sounds: LatexSalesmanStop.fla
  - stops event sounds.
- Loading Sound from a button via behaviors: BehaviorLoadSoundFromLibrary.fla, LatexSalesman.fla
  1. add button to stage. call it _btn
  2. place latex.mp3 in library
  3. ctrl-click > Linkage... > Export for ActionScript
  4. add identifier "latex"
  5. ok
  6. select button
  7. Open behaviors panel
  8. add Sound > Load Sound From Library
  9. put in latex and _btn
  10. test
  11. Extra: create another button and stop all sounds with behaviors > Sound > Stop All Sounds
- Editing Sounds: EditSounds.fla
  - Trim sounds using the Frame PI Edit button for sounds
  - the lines are for the sound volume, left and right ear. You can set to fade in or out, only left or right ear, fade from right to left and vice versa. You can also customize. You get up to 8 handles

Manipulating movieclips and text

Movieclip properties:
- _x and _y
- _width and _height
- _rotation
- _alpha
- _visible
- _xscale
- _yscale
Movieclip methods:
- play() and stop()
- gotoAndPlay() and gotoAndStop()
- getURL()
- nextFrame() and prevFrame()
- swapDepths()
- loadMovie()
- attachMovie()
Adding text to textfields via ActionScript
- Create a dynamic textfield on stage and have it dynamically filled with text via ActionScript
  1. Create dynamic textfield called dynamic_txt and put on stage
  2. Make it a multiline textfield via the PI
  3. Expand the dimensions of it when you double-click onto the textfield so that you can see at least 5 lines worth.
  4. Add this frame script on main timeline:
  - dynamic_txt.text = "Named in honor of the legendary Orgrim Doomhammer, Orgrimmar was founded to be the capital city of the Orcs' new homeland. Built within a huge, winding canyon in the harsh land of Durotar, Orgrimmar stands as one of the mightiest Warrior cities in the world. Behind Orgrimmar's immense walls, elderly Shamans patiently share their knowledge with the Horde's newest generation of leaders, while Warriors spar in the gladiatorial arena, honing their skills in preparation for the trials that await them in this dangerous land.";
  - test movie
- LAB: Create two textfield, one input and one dynamic, with a button that replaces whatever you put in the input textfield to the dynamic textfield.
Create a button that moves a movieclip randomly
1. Create button called _btn
2. Create star mc called star_mc
3. Add this frame script:
- _btn.onRelease = function() {
  star_mc._x = Math.random()*250;
  star_mc._y = Math.random()*250;
  }
- test movie
Create a square mc and have it rotate using onEnterFrame

Create a square mc called square_mc
Create a frame script that says:
this.onEnterFrame = function() {
square_mc._rotation += 10;
}
test movie

LAB: Create a movieclip and make it move randomly using onEnterFrame

Create a square mc called square_mc
Create a frame script that says:
this.onEnterFrame = function() {
square_mc._rotation += 10;
}
test movie

Create a movie that makes a movieclip's animation start and stop

Create a movie that has a button and a movieclip with a 10-frame shape tween.
Call the buttons "controlMC_btn" and the movieclip "_mc"
Create this frame script:
controlMC_btn.onPress = function() {
_mc.stop();
}
controlMC_btn.onRelease = function() {
_mc.play();
}
test movie

Create a movie that does a loadMovie of a SWF

Create a movie that does a tween. Call the FLA "tween"
test movie
Create a new document called "loader"
Add a button and a movieclip with a shape in it. Place the button to the left of movieclip.
Call the button "getMovie_btn" and call the movieclip "holder_mc"
Add this frame script:
getMovie_btn.onRelease = function() {
holder_mc.loadMovie("tween.swf");
}
Test movie.

LAB: Create a movie that does a loadMovie of a JPEG image (download an image from the web). Do not use a button.
trace();

outputs to Output window

Week 5: Interactivity

Text: Ch 11: Building Buttons for Interactivity

Buttons
- only 4 frames: up, over, down, hit
- create a button
  1. Insert > New Symbol...
  2. Choose button
  3. In up state, draw arrow sideways
  4. In over state, F6
  5. With over contents selected, Modify > Shape > Expand Fill...
  6. add 2 pixels and expand
  7. add back the stroke with ink bottle
  8. In down state, F6
  9. Change color of down state fill.
- hit is unnecessary in this case. however, you would use it if the button is text or a graphic with no fill: hitExample.fla
  - make your hit state fill a weird color to remind you that hit is invisible when published.
- Control > Enable Simple Buttons...to preview in the authoring tool. However, you can't work on the buttons until you disable it again.
- Up, Over, Down with various shapes
  1. Create button
  2. Create empty keyframe for all states
  3. In up, draw circle
  4. In over, draw star
  5. In down, draw arrow
  6. test
  7. In hit...you have to draw a shape that's large enough to cover all.
    1. Turn on onion skinning, make sure you can see all hit states.
    2. Copy each shape from each of the first three states and paste in place in the hit frame.
    3. Modify > Shape > Expand Fill to make sure it's easy to use button
  8. test
- Animated button symbols: animatedButton.fla
  1. Create mc called "up"
  2. Create 10 frame rotating pentagon with motion tween.
  3. In the Library, duplicate "up" mc and call it "over"
  4. Editing "over", create a 10 frame shape tween by making the pentagon a star.
  5. Duplicate "over" and call it "down"
  6. Editiing "down," create a 10 frame shape tween by making the star explode.
  7. Create button and call it "animatedButton"
  8. Create empty keyfames in all four states
  9. Place each movieclip in the appropriate keyframe
  10. With onionskinning on, draw the hit state.
  11. Go to scene 1 and place button on stage.
  12. test
- Invisible button - use it for instances when you want the end-user to click anywhere on stage.
Basic ActionScript
- Actions Panel UI
  - Actions Toolbox
    - double clicking an action will add it. You can also drag.
  - Script Pane
  - Script Navigator
  - Two types of actions
    - frame-based scripts
      - attached to a keyframe
      - better to use frame-based scripts because code is centralized, ideally just in one frame.
      - _btn.onRelease = function() {
        _mc._visible = false;
        }
    - object-based scripts
      - attached to a movieclip or a button
      - on(release) {
        _root._mc._visible = false;
        }
  - Code hints and suffixes
    - In order to get code hinting to work, you must use the proper flash suffixes
      - _btn
      - _mc
      - _array
      - _txt
  - Adding comments with //
  - Adding blocks of comments with /* */
  - Viewing line numbers
  - Word wrap
  - Use of the dot
    - as a link between objects and properties and methods
      - _mc._x
      - _mc.gotoAndPlay(2);
    - as indicator of object heirarchy
      - earth.USA.CA.sanFrancisco
- Create a button that adds text with ActionScript: buttonActions.fla
  1. Add button. Call it myButton_btn
  2. Add dynamic textfield. Call it myText_txt
  3. Add this frame script:
    
    myButton_btn.onRelease = function() {
    myText_txt.text = "Release called!";
    }
    myButton_btn.onPress = function() {
    myText_txt.text = "Press called!";
    }
  - Test Movie
  - function literal versus named function: namedFunction.fla and functionLiteral.fla
- Methods versus properties
  - Person symbol
  - Alvin is an instance of Person
  - Alvin.hair = black;
  - Alvin.age = 30;
  - Alvin.footSize = 10;
  - Alvin.dance();
  - Alvin.eat(pizza);
  - Alvin.walk(5)
  - In the same way, buttons have particular methods and properties:
    - button symbol
    - myButton_btn is an instance of button symbol
    - myButton_btn._height = 50;
    - myButton_btn._x = 300;
    - myButton_btn._visible = false;
    - myButton_btn.onRelease();
    - myButton_btn.onPress();
  - Textfield symbol
    - myText_txt is an instance of textfield symbol
    - myText_txt.text = "hello world";
    - myText_txt.html = true;
    - myText_txt.htmlText = "<b>Flash</b> rocks";
    - myText_txt.onChanged();

Week 4: Text, Masks and Complex Movieclips

Text

Static, Dynamic, Input

Break apart text

Device fonts

no download cost

_sans, _serif, _typewriter

no guarantee which font it will use

Distribute to Layers

Create text

Break Apart text

Modify > Timeline > Distribute to Layers

Frames View > Preview

In-class lab: Create text with shadow

Create text - "Hello World", change font to a fancy font and size to 80, color red

Create new layer

Copy text

Paste in place in new layer

Hide top layer

Select text and change color to black

Break apart text until it becomes shape

With text shapes still selected, Modify > Shape > Soften Fill Edges...

Distance: 2; Number of steps: 4; Direction: Inset

Using the arrow keys on your keyboard, move the selected text shape two to the right and two down.

Unhide first layer.

Example: see TextShadowFinished.fla

Using Non-Flash Graphics
- You can import these file formats:
  - bitmap:
    - GIF
    - animated GIF
    - PNG
    - JPEG
    - BMP
  - vector
    - Adobe Illustrator
    - FreeHand
    - PDF
    - EPS
    - PICT
    - WMF
    - EMF
- Bitmaps to Vector : ipod.gif
  1. Import bitmap to stage
  2. Select bitmap
  3. Modify > Bitmap > Trace Bitmap...
    - Color Threshold (1 to 500) - higher the threshold, the broader the range of colors Flash lumps together.
    - Minimum Area (1 to 1000) - how many neighbor pixels to include in calculating the color.
    - Curve Fit (Pixels, Very Tight, Tight, Normal, Smooth, Very Smooth) - how smoothly to draw the outlines around the vector shapes it creates.
    - Corner Threshold (Many corners, Normal, Few corners) - tells Flash whether to create sharp corners or smoother, more rounded corners.
  4. Choose 20, 1, Normal, Normal
  5. Click OK
  6. NB: For photographs:
    1. 10 for Color Threshold
    2. 1 for Minimum Area
    3. Pixels for Curve Fit
    4. Many corners for Corner Threshold
- Creating and Editing Editable Bitmaps: RedShirt.jpg
  1. Import bitmap
  2. Select and break apart
  3. Lasso tool > Options > Magic Wand Properties: 50
  4. Lasso tool > Options > Magic Wand
  5. Select shirt (all red parts)
  6. Modify > Convert to Symbol
  7. Graphic PI > Color > Tint
  8. Change tint of shirt
- Bitmap Fills
  1. Two types: bitmaps and editable bitmaps
  2. Bitmaps are tiny
  3. Editable bitmaps are the true size of the image.
- To apply editable bitmap
  1. break apart bitmap
  2. use eyedropper tool and select editable bitmap
  3. click on to-be-filled space to paste editable bitmap fill.
- Resize bitmap fills
  1. apply bitmap fill to shape
  2. fill transform tool
  3. select bitmap fill
  4. zoom in
  5. resize with lower left handle
Timeline Effects
- Create dropshadow effect
  1. Create Text
  2. Select, right-click > Timeline Effects > Effects > DropShadow
  3. Change settings, update preview button
- Right-click > Edit Effect or Select > PI > Edit Effect button
- Right-click > Remove Effect
- Stuff added to library
- Not ordinary graphic. Try double-clicking.
- To modify directly: context Menu > Edit in Place
Mask Layers: Masking.fla
1. Open FLA
2. Right-click on "mask" layer
3. Select Mask
4. Drag "masked 2" layer to the right
5. Show locked layer effect vs not.
6. Show how to remove masked layer
7. Caveat: device fonts will not show up
8. Caveat: only fills work as masks. No bitmaps or strokes.
Animated Masks

example: rainbow.clr , RainbowFinished.fla

create layer

name first layer "Rotating Rectangle" and bottom layer "rainbow"

on rainbow layer, grab rainbow.clr and create half circle

convert to symbol

change first layer to a mask layer

unlock both layers.

draw rectangle below rainbow in rotating rectangle mask layer

convert rectangle to symbol.

with free transform tool, move the transformation circle of rectangle where the center of the oval would have been.

with rainbow seleted create frame at 15

with rectangle, create keyframe at 15.

selecting rectange at 15, rotate bottom left so that the rectangle covers the rainbow

first rectangle keyframe > create motion tween.

add an extra layer called actions and add stop() to last frame.

In-class lab: Create an 20-frame animated mask that wipes across the image. Use MaskPainting.fla

Scenes
Manipulating Frames in multiple layers
- Selecting and copying frames in multiple layers: MultipleFrames.fla
  1. Select frames 1 to 20 on all three layers
  2. Cut Frames
  3. Insert > New Symbol
  4. Right-click on empty keyframe on frame 1
  5. Paste Frames
- Adjusting position of tweened items to create keyframe: PingPongFinished.fla and PingPongStart.fla
  - Create symbols - paddles and ball
  - Create end keyframes - creates smooth loop
  - Create Motion tween on all layers by selecting all layers then right-clicking
  - Click on a middle frame and dragging instance to create keyframe
Animating Shape Tweens in Multiple-Shape Graphics: FlameStart.fla
- Shapes across layers
- Save animation as graphic symbol - to be able to use multiple times
- Once instance placed on stage, Modify > Transform > Flip Horizontal
- Change flame symbol from graphic to mc.
  - difference - mc plays on independent timeline...graphic is parent-timeline dependent.
  - mc doesn't show up when scrubbing
In-class task: Create an animated ant movieclip instance : AntFinished.fla
1. Create new movieclip symbol
2. Create three layers; name them antenna, body, legs
3. The antenna layer will consist of a two-frame movieclip instance.
4. The legs layer will consist of six instances of the same legs movieclip. The legs movieclip should have three frames.
5. The body layer will consist of three oval shapes
6. Upon test movie, you should have a one frame movie consisting of a movieclip instance of an ant with wiggling antenna and moving legs.

Week 3 - Text, Non-Flash Graphics, Masks

Text: Ch 5: Graphics on Muliple Layers / Ch 14: Using Non-Flash Graphics / Ch 10: More-Complex Animation Tasks

Symbols
- use symbols to save on filesize
- converting raw shapes to symbols
  1. create shape
  2. Modify > Convert to Symbol, or F8
  3. Type name, which will go in the Library
  4. Choose graphic symbol
  5. ~~Choose registration point~~
- Registration point versus Transformation point
  - registration point is 0,0. represented by crosshairs
  - transformation point is the point crat which the symbols spins. represented by circle
- creating symbols from scratch
  - Library > New Symbol icon
    - you can center by using align panel
- Modifying symbol instances
  - change and manipulate using tools (free transform)
  - color, alpha modify using PI.
  - using these methods do not change the symbol, just the outward sheen
- Swapping one symbol for another
  1. Create button
  2. Edit button and add text "home" to button
  3. Add another button instance from the library
  4. Change the text for that button to "links"
  5. Duplicate button in Library
  6. Swap symbol
- Editing Master Symbols
  - from Library, from Stage
- Converting Instances back to graphics
Library
- general term for items in Library: assets
- graphics created with authoring tool in the Library: symbols
- Library UI: BigProject.fla
  - Name, Kind, Use Count, Linkage, Date Modified, Preview Window, Options, icons to add symbols and to add folders, wide and narrow window views
- Open Library of other movie.
  1. New document
  2. Import > Open External Library > BigProject.fla
  3. Drag items to stage
  4. Drag items to library
  5. Note difference in color of external library
  6. Note can't add to external library
  7. Note that you can also just open the FLA of the external library
- Common Libraries
  - Window > Other Panels > Common Libraries > Button
Motion Tweening
- Three things needed for a motion tween:
  - beginning keyframe with a group or symbol instance
  - in-between frames
  - end keyframe with a group or the same symbol instance.
- Example
  1. Select frame 1
  2. Draw ball at the top of the stage
  3. Convert to symbol > graphic
  4. Select frame 5 > add keyframe (F6)
  5. Select ball in keyframe 1
  6. In Graphic PI, select Alpha from Color dropdown.
  7. Set Alpha to 0%
  8. right-click on first keyframe span > Create Motion Tween or use Frame PI
  9. scrub timeline
- Motion tweened frames have an arrow and a purplish background
- Strange Motion Tweens: BrokenTween1.fla, BrokenTween2.fla
- Broken tweens have dotted line indicating that there are not symbols in both keyframes
- If there are two symbols at each keyframe, but they don't match, you will get strange behavior.
- Adding keyframes
  - Repositioning (click n drag) a tweened object in a regular frame will create a new keyframe
  - Select regular frame and add keyframe (F6)
- Animating color effects: TweenTemplate.fla
  1. Select instance in frame 10
  2. In PI, modify Color dropdown > Tint and modify color
  3. test
  4. Can also change transparency by modifying alpha
- Animating size changes: TweenTemplate.fla
  1. Turn on onion skinning.
  2. Select frame 10
  3. Select instance in frame 10
  4. Resize the instance with free transform tool.
  5. test
  6. NB: Make sure that the scale checkbox is checked in the Frame PI of the originating keyframe
- Rotating and spinning graphics
  - same deal, but in the frame PI of the originating keyframe, use the Rotate dropdown
  - Options:
    - None
    - Auto - smallest increment of rotation
    - CW
    - CCW
    - x times
  - note that instances rotate around their transformation point, which is editable with the free transform tool (small circle).
  - to spin 360 degrees: TweenTemplatePointyShape.fla
    1. Turn on onion skinning.
    2. select first keyframe
    3. In PI, set Rotate to CW and 1 times
    4. test
- Moving graphics along a path: TweenTemplate.fla
  1. Turn on onion skinning
  2. Move symbol in frame 10 to bottom right of stage
  3. Right-click on layer and choose Add Motion Guide. This will add a new guide layer on top of the old one.
  4. In guilde layer, use pencil tool to draw a path.
  5. Turn on Snap to Objects.
  6. In frame 1 of the symbol instance, select and drag the instance from the center and snap it (the transformation point) to the beginning of the path.
  7. In frame 10 of the symbol instance, select and drag the instand from the center and snap it (the transformation point) to the end of the path.
  8. test
  9. Note: when publishing the SWF, the guide path will not be visible.
  10. Note: you can use fills or strokes to create the guide path.
- Rotating graphics along a motion path: TweenTemplatePointyShape.fla
  1. Turn on onion skinning
  2. Create motion guide layer
  3. Draw path in guide layer
  4. In frame 1 of the symbol instance, select and drag the instance from the center and snap it (the transformation point) to the beginning of the path. Remember to use Snap to Objects
  5. In frame 10 of the symbol instance, select and drag the instance from the center and snap it (the transformation point) to the end of the path.
  6. Using the free transform tool's rotate feature, fix the instances in frames 1 and 10 such that they are both pointing in the right direction.
  7. test
  8. NB: Make sure that the transformation point is at the center of the instance that you are trying to rotate.
- Changing Tween Speed: RotatingOnPath.fla
  1. Turn on onion skinning
  2. Select tween layer's first keyframe
  3. In the Frame PI, change ease to negative. Animation will start slowly and then pick up.
  4. Change to positive. Animation will start quickly and then slow down.
- In-class lab:
  - open EarthSun.fla
  - FPS: 15
  - Make a 4-second animation
  - Convert the Earth and the Moon shapes into one graphic symbol. Call it Earth.
  - Move the transformation point such that it is centered on the Earth.
  - Make the Earth rotate around the sun once. Use the orbit guide layer.
  - Make the Moon orbit around the Earth clockwise 5 times a year. Use rotation tween.

More tools...
- Pen tool
- Lasso Tool
  - Options - polygon mode
    1. turn on mode
    2. click on several areas
    3. double click to end selection
- Ink Bottle Tool
  1. draw shape with brush tool
  2. use ink bottle tool
- Paint Bucket Tool
  - Add radial gradient to fill.
    - center is wherever you click
    - Option: lock fill
  - Spread one gradient across multiple fills:
    1. Make sure lock fill modifier option is off
    2. Open OneGradientMultipleFills.fla
    3. Select all three fills using Shift+click
    4. Select paint bucket
    5. Choose linear gradient
    6. Click on any of the fills to create one gradient spanning across all the fills
- Eraser Tool
  - faucet
- Convert Line to Fill
  - Modify > Shape > Convert Lines to Fills
- Eyedropper Tool
  - create a square and a brush image with solid fill
  - fill the square with a linear gradient
  - using eyedropper tool, click on the square and apply it to the brush.
Manipulating vectors
- strokes
  - ends
  - middle
    - Ctrl to create point
- fills

Publishing SWFs
- Actions Panel
- using the stop(); action at the end of the main timeline;

Week 2: Animation II

Text: Ch 4: Complex Graphics on a Single Layer / Ch 6: Saving and Reusing Graphic Elements / Ch 8: Animations with Motion Tweening / Ch 9: Animation with Shape Tweening

Homework help
Look at websites
Tools
- Color Mixer Panel - more options than colors section of toolbar
  - solid, linear, radial, bitmap
    - Show defaults in palette (no bitmap)
  - ~~Change in Options: Hue/Saturation/Brightness (HSB) versus RGB~~
  - To select a color outside of Flash, select fill or stroke and drag eyedropper to outside color and release.
  - Colors are in hexadecimal, or hex for short. Base 16. RGB. Red is #FF0000
  - All colors in the default swatches are the web safe 216: 00,33,66,99,CC,FF
  - Add color swatch
    - show Color Swatch Panel
  - Add three-color linear color swatch
  - ~~Load Color Set: ProjectMayhem.clr~~
  - ~~Save Color Set from Color Swatch Panel~~
- Fill Transform Tool - only for gradients
  1. create circle and rectangle.
  2. fill circle with radial gradient and rectangle with linear gradient.
  3. use Fill Transform tool on each and modify with UI.
    - circle:
      1. move center point
      2. change gradient shape
      3. change gradient radius
      4. rotate gradient
    - linear
      1. move center point
      2. change gradient width
      3. rotate gradient
- Free Transform Tool
  - resize, rotate, skew
  - options - envelope
  - tranformation point
Drawing Aids
- Snapping
  - snap to objects
    1. draw two objects
    2. turn on snap to objects in selection options
    3. select one object
    4. click on center (or corner or edge) and drag it next to the other object. snap to objects will occur
  - snap to grid
    1. turn on grid,
    2. turn on snap to grid,
    3. select object
    4. click on selected object from: center, edges, corners
  - snap to guides
    1. View > Rulers
    2. Drag from ruler to create guide
    3. Snap object to guide
- Align Panel
Timeline
- Layers
  - Types: Normal, Guide, Guided, Mask, Masked, Fold
  - Group-select hide and lock by clicking and dragging bullets
  - changing stacking order of layers: click and drag
- Folders
  - moving layers in and out of folders - click and drag
  - hiding or locking folders hides/locks everything inside the folders
  - closing and opening folders
- Selection:
  - Selecting an object selects the layer
  - Selecting a layer selects all the objects in that layer
  - Selecting a closed folder selects all the objects in that folder
- Expanding timeline view: BigProject.fla
  - moving timeline down to see more layers
  - moving layers to the right to see layer names
- Guide Layers
  - not part of final SWF
Shape Tweening
- difference between motion and shape
  - motion
    - works on symbols and groups
    - can do automated tasks like going on a path or rotation
  - shape
    - works on raw shapes
    - can change any of the shape's properties
- Example
  1. Draw ball at top of stage
  2. Create keyframe on frame 5
  3. Create keyframe on frame 10
  4. Move ball on frame 5 to bottom of stage
  5. Select anywhere in the first keyframe span and in the PI change to Shape Tween
  6. Use Free Transform tool to flatten ball on frame 5
  7. Negative ease the first keyframe
  8. Positive ease the second keyframe
  9. test bouncing ball.
- Can't have any part of shape tween involve a group or symbols. Warning icon in PI. Dashed line in timeline
- In-class lab:
  - Create a three second shape tween animation:
    - FPS: 10
    - Frame 1: Blue and red radial gradient filled oval
    - Frame 10: Yellow and black linear gradient filled rectangle
    - Frame 20: Red pentagon shape
    - Frame 30: original oval shape from frame 1 in the exact same position
- Can put multiple shapes on one layer and tween them if not crossing paths.
- ~~Shape Hints~~
  - Example of non shape hint: ShapeHints.fla
    - ~~T to L~~
  - ~~Modify > Shape > Add Shape Hint~~
  - ~~Clockwise or counter clockwise~~
  - ~~Use extra keyframes to help~~

Week 9: External Data

LoadVariables
- loadVariablesNum("foo.txt", 0);
- external txt file with name/value pairs;
LoadVars
- more advanced form of loadVariables, with listeners
- myData = new LoadVars();
  myData.onLoad = function() {
  _txt.text = myData.var1;
  }
  myData.load("data.txt");
- external txt file with name/value pairs;
FlashVars
- data in HTML tags:
  <embed flashvars="result=this text was generated in HTML tags.">
  <param name=FlashVars value="result=this text was generated in HTML tags.">
Query String
- data in URL
- must be viewing SWF, not HTML
- movie.swf?foo=happy&bar=day
LoadXML
- data in XML file
- myData = new XML();
  myData.onLoad = function() {
  _txt.text = myData.firstChild.lastChild.firstChild;
  }
  myData.load("data.xml");

Week 8: Video and Components

Text: Ch 16: Adding Video

Video
- Embedding directly on SWF
  1. New document
  2. Import to Library > your video file
  3. Experiment with options
  4. Drag to stage from Library
- Exporting imported video as FLV
  1. With your video file in the library, right-click on it > properties... > Export...
  2. Place somewhere on computer
- Using Media Components to load FLV
  - Media components:
    - MediaDisplay - mediaDisplay.fla
    - MediaPlayback - mediaPlayback.fla
    - MediaController and MediaDisplay - mediaController.fla
      - name the controller "myController"
      - name the display "myDisplay"
      - select the display and open the behaviors panel
      - Add Behavior: Media > Associate Controller and choose myController
      - test movie
Components
- Explain about components
- Extension Manager and 3rd party components
- Flash Exchange
- Common UI for Components
  - All have parameters
  - Can view parameters from two places:
    - Parameters in PI
    - Component Inspector
- ScrollBar and Button - scrollBarExampleFinished.fla [html]
  - Lab: Create a three or four line multiline textfield, name the instance, and add a lot of text to it via ActionScript. Drag a scrollbar over the textfield and make it work.
- Progress Bar - progressBarLoader.fla [html]
- ComboBox - imageLoader.fla [html]
- ListBox - listBoxImageLoader.fla [html]
- Radio Button - radioButtonQuestionnaire.fla [html]
- Bay Area House - example

Week 6: Whish-bang!

Text: Ch 12: Basic Interactivity Using Behaviors / Ch 15: Adding Sound

Behaviors: BehaviorsTemplate.fla
- Buttons
  - GotoAndStop(10);
  - Change onRelease and add onRollOut and onDragOut
  - Double click on the Action column to modify the dialog.
  - On keyPress
- MovieClips
  - Duplicate MovieClip
- Use reference
Sound
- Frame PI
- Importing Sound: File > Import
  - The sound will be placed in the Library
  - You can preview the sound in the Library
- Place sounds in their own layers
- You can play 8 sounds at a time.
- If you want to see the waveform better, Modify > Timeline > Layer Properties... and increase the height.
- Sound on frames: PingPongSound.fla, PingPongSoundFinished.fla, sounds.fla
  1. create a new layer called sounds.
  2. create keyframes where the ball hits the paddles
  3. open sounds.fla as an external library and drag "Plastic Click" to the library of PingPongSounds.fla
  4. With keyframe 5 selected, drag the sound from the library to the stage.
  5. For the other keyframes, look at the Frames PI. You don't actually have to drag the sound. Once it's in the library, you can access it from the frames PI, under Sound.
  6. Turn on the sound for all the appropriate places in the animation.
  7. test
- Sound on buttons: sounds.fla
  1. Grab a button from the Common Libraries and drag to stage.
  2. Edit the button
  3. add a new layer called sound
  4. in the sound layer, select the over and down frames and create blank keyframes
  5. assign a sound to over and a different one to down.
- Event Sounds: LatexSalesman.fla
  - Sync: Event, Start, Stop, Stream
  - Event sounds keep playing until it's done. Independent of timeline
  - Reserve event sounds for short clips, as Flash will pause until all is download before it starts playing.
  - Repeat option.
- Start Sound: LatexSalesman.fla
  - Start sounds differ from event in that if there's already an instance of that sound playing, it will not play. Change the second keyframe of the latexsalesman movie to start and test.
- Stream Sound: LatexSalesmanStream.fla
  - stream sounds follow the timeline.
  - good for lip synching
  - when the are no more frames, no more sound
  - stream sounds start playing as soon as there is enough of the sound to play.
  - you can scrub streaming sounds
- Stop Sounds: LatexSalesmanStop.fla
  - stops event sounds.
- Loading Sound from a button via behaviors: BehaviorLoadSoundFromLibrary.fla, LatexSalesman.fla
  1. add button to stage. call it _btn
  2. place latex.mp3 in library
  3. ctrl-click > Linkage... > Export for ActionScript
  4. add identifier "latex"
  5. ok
  6. select button
  7. Open behaviors panel
  8. add Sound > Load Sound From Library
  9. put in latex and _btn
  10. test
  11. Extra: create another button and stop all sounds with behaviors > Sound > Stop All Sounds
- Editing Sounds: EditSounds.fla
  - Trim sounds using the Frame PI Edit button for sounds
  - the lines are for the sound volume, left and right ear. You can set to fade in or out, only left or right ear, fade from right to left and vice versa. You can also customize. You get up to 8 handles

Manipulating movieclips and text

Movieclip properties:
- _x and _y
- _width and _height
- _rotation
- _alpha
- _visible
- _xscale
- _yscale
Movieclip methods:
- play() and stop()
- gotoAndPlay() and gotoAndStop()
- getURL()
- nextFrame() and prevFrame()
- swapDepths()
- loadMovie()
- attachMovie()
Adding text to textfields via ActionScript
- Create a dynamic textfield on stage and have it dynamically filled with text via ActionScript
  1. Create dynamic textfield called dynamic_txt and put on stage
  2. Make it a multiline textfield via the PI
  3. Expand the dimensions of it when you double-click onto the textfield so that you can see at least 5 lines worth.
  4. Add this frame script on main timeline:
  - dynamic_txt.text = "Named in honor of the legendary Orgrim Doomhammer, Orgrimmar was founded to be the capital city of the Orcs' new homeland. Built within a huge, winding canyon in the harsh land of Durotar, Orgrimmar stands as one of the mightiest Warrior cities in the world. Behind Orgrimmar's immense walls, elderly Shamans patiently share their knowledge with the Horde's newest generation of leaders, while Warriors spar in the gladiatorial arena, honing their skills in preparation for the trials that await them in this dangerous land.";
  - test movie
- LAB: Create two textfield, one input and one dynamic, with a button that replaces whatever you put in the input textfield to the dynamic textfield.
Create a button that moves a movieclip randomly
1. Create button called _btn
2. Create star mc called star_mc
3. Add this frame script:
- _btn.onRelease = function() {
  star_mc._x = Math.random()*250;
  star_mc._y = Math.random()*250;
  }
- test movie
Create a square mc and have it rotate using onEnterFrame

Create a square mc called square_mc
Create a frame script that says:
this.onEnterFrame = function() {
square_mc._rotation += 10;
}
test movie

LAB: Create a movieclip and make it move randomly using onEnterFrame

Create a square mc called square_mc
Create a frame script that says:
this.onEnterFrame = function() {
square_mc._rotation += 10;
}
test movie

Create a movie that makes a movieclip's animation start and stop

Create a movie that has a button and a movieclip with a 10-frame shape tween.
Call the buttons "controlMC_btn" and the movieclip "_mc"
Create this frame script:
controlMC_btn.onPress = function() {
_mc.stop();
}
controlMC_btn.onRelease = function() {
_mc.play();
}
test movie

Create a movie that does a loadMovie of a SWF

Create a movie that does a tween. Call the FLA "tween"
test movie
Create a new document called "loader"
Add a button and a movieclip with a shape in it. Place the button to the left of movieclip.
Call the button "getMovie_btn" and call the movieclip "holder_mc"
Add this frame script:
getMovie_btn.onRelease = function() {
holder_mc.loadMovie("tween.swf");
}
Test movie.

LAB: Create a movie that does a loadMovie of a JPEG image (download an image from the web). Do not use a button.
trace();

outputs to Output window

Shortcuts in Flash:

CTRL (Win) or COMMAND (Mac) - Switch to the selection tool temporarily when you are using a different tool.

SPACEBAR - Switch to the hand tool temporarily when you are using a different tool.

CTRL+2 - Zooms the whole stage to the available viewable space.