MacroMedia Flash 5 Session 2
Thursday, September 27, 2001 6-8
Beyond the tween: Some examples of flash action script interaction
Just because it looks complicated doesn’t mean it has a lot of stuff in it; sometimes it’s a matter of thoroughly thinking about where you’re going and knowing how to program it. That doesn’t mean this is easy. Programming is a process. Save often, and save incrementally. And with programming, practice TMTOWTDI
Take a look at any of the swf files verses the fla files
- Circular motion: fla | swf
- Dice: fla | swf
- Duplicate Movie Clip fla | swf
- Eggplant: fla | swf
- Mosquito Killer: fla | swf
- Pan Zoom: fla | swf
Use the Movie Inspector tool to get an idea of the actions involved
So what is action script? Action script is an object oriented programming language (not unlike javascript). What is object-oriented mean?
Like all things, your projects will require specific actions based on your desired outcome. I’ve chosen five things to make that seem to be more common than others. If you have some basic oop programming skills, you’ll be able to take this much further than where I’m going today.
What else is Flash action script capable of doing?
Macromedia would have you believe In two words (or one word, if you want to misspell it): a lot. Some examples include:
- Setting and retrieving cookies
- Perfm simple ecommerce
- webchat
- xml integration
- database login (simple)
- interactive games (from puzzle and pound to narrative mazes)
... and the list goes on
But why would you want to use flash to do this stuff? If it’s the best tool for your project, use it, otherwise be careful you don’t fall into the trap of owning a hammer and turning everything into a nail.
Getting started:
Where are the files? <http://actlab.us/tutorials/flash/f2/>
Where is the program? Left apple menu / applications / Flash 5
Remember: Red button if you get cold, Green button if you get hot.
What we’ll be making:
- Preloaders (using Smart Clips):
- DHTML Flash layers
- Something to do with sound
- Morphed and randomized animation
- Video-to-vector animation
1. Preloaders and Smart clips:
(back to the top)
Smart Clips are a special kind of movie clip. They contain Action script parameters, which you can customize without having to look at the Action script code. The Clip Parameters panel sets custom values for the clip.
Download:
Directions:
Before you start to work on creating the preloader Smart Clip, examine a completed
version of the tutorial to get an idea of what you'll create.
1 In Flash, choose File > Open. Navigate to the Preloader_tutorial folder and
open Finished/MovieFinished.fla.
The movie consists of a short, looping animation and a preloader clip. The
preloader resides in Frame 1 of the Preloader layer. The main movie begins on
Frame 2; its components reside on the Birds and Sky layers.
2 If the Library window is not already open, choose Window > Library.
Websites:
http://www.kirupa.com/developer/actionscript/preloader.asp
http://www.enetserve.com/tutorials/detecttemplate.html
2. DHTML Flash layers
(back to the top)
Demo:
Download:
Directions:
Websites:
http://www.actionscripts.org/tutorials/beginner/Controlling_Different_TimeLines/index.shtml
3. Topic three (to do with sound looping? Mp3 files?)
Demo:
Download:
Directions:
Websites: http://www.doremedia.com/tutorials.asp
4. Morphing and randomizing animation
(back to the top)
Using the Random function and the Set Variable and Tell Target actions, create a lava lamp.
Random:
Set Variable:
Tell Target:
Demo: lavalamp.swf
Download: lavalamp.fla
Directions:
A. Getting started
- Begin with a new movie.
- Load lavalamp.fla as a Library
- Create four layers, naming them on/off, mask, blobs, background
B. Setting up the stage and laying down your layers
- Set your movie to the following: 24fps, 150 x 300, bgcolor=black
- Center a background instance from the library to the stage
- Center a lamp mask instance from the library to the stage
C. Setting up the blob
- Select three instances of the blob symbol and name them blob 1, blob 2 and blob3
- Position the three blobs at x 77, y 230
- Edit the blob symbol to have two layers (control action / blob 1)
D. Tweening the symbol
- Select the blob 1 layer, and in keyframe 2 set a distributive shape tween with 0 easing
- Repeat for each of the remaining keyframes
E. Randomizing the animation
- While still in the symbol, select the Control Actions Layer, and set assign an action script to the frame.
- Label keyframe 2 "Play"
- Assign Tell Target action script to frame 305
F. Creating user interface
- Drag an instance of the switch button to the stage
- Set the position of the instance to x 70.0, 7 260.0
- Assign the following action script to the button
On (Release)
Begin Tell Target ("/Blob" & (Random(3) + 1))
Go to and Play ("Play")
End Tell Target
End On
Websites:
- <http://www.moock.org/webdesign/flash/actionscript/move/>
- <http://www.kirupa.com/developer/flash5/randomlettercycling.asp>
- <http://www.kirupa.com/developer/flash5/randomcolor.asp>
- Also check out: Flash 4 Magic (demo origination)
5. Video-to-vector animation
(back to the top)
Demo: This is a pretty easy process that takes a lot of time and a little bit of understanding of movie composing software and a vector translator program to pull off. This isn’t really "advanced," but I thought it was kind of neat.
Download: esme.fla
Directions:
What you’re not seeing: (making the source file)
- When shooting footage, keep the camera stable and the object on an unchanging background (one solid color if possible).
- In your movie composing software (after effects, final cut pro, premiere, etc.), hand-cut your sequence, modify the frame rate (such as 12/fps), and export the sequence as TIFF (why tiffs? Tagged Image File Format: supports multiple file compression types, including lossless. Tiffs take up a lot of space, but that huge file problem will be drastically reduced when the vectored stills are animated in flash) files.
I used Final Cut Pro to capture my footage and edit my in and out points. It would probably be easiest to create a separate flash file for each sequence in your movie to track your project easier. Logical naming conventions come in handy, as well as maintaining shooting and file logs. Don’t forget the power of the storyboard!
I then exported my sequence out using the Export to QuickTime function to save out to a movie file and an image sequence. Tiff resolution and compression can be set using the options feature. Be sure to disable the sound and internet express buttons
- Adobe Streamline has a batch action import feature that will make converting tiffs to vector files rather painlessly. Set your preferences before batch importing.
- Importing into Flash is also easy, as it supports batch import (if you maintained your file export in a semi-logical sequence). Unfortunately, even with a large amount of memory allocated to the file, it still froze. Smaller batches work better, depending on your original image size. The painful boring part: optimize all frames in flash by ungroup all objects in all frames. If you know how, write a Flash Macro. Ungrouping allows you to remove unnecessary objects, work with color manipulation and optimize curves. Choosing adequate constant of smoothing curves you receive more optimize .swf movie or object more complicated with bigger size of .swf file
Start from vectored file and optimize the last of the frames in flash
Ungroup the graphics
Delete the background grey
Export to the format of your choosing
Websites:
http://www.actionscripts.org/tutorials/intermediate/Video_to_Vector_Animation/index.shtml
S’more sites:
(back to the top)
- <http://www.brittle-bones.com> What part of this might be recreated using flash (if any of it)?
- <http://janet-jackson.com/>
- <http://www.flashcan.com> (drag-n-drop & modify the size and alpha channel of a flash-based epostcard)
- <http://www.moock.org> He wrote the book (the o’reilly book)
- <http://www.moock.org/actionscript/> the funniest 404 error message I’ve seen in a while
- <http://www.kirupa.com/developer/flash5/ > kirupa.com tutorials
- <http://www.actionscripts.org/tutorials.shtml> actionscripts.org tutorials
- <http://www.the-stickman.com/tutorials/> stickman tutorials
- <http://www.enetserve.com/tutorials/> flash academy tutorials