MWCC Center for Teaching & Learning

Adobe Flash

Examples:
http://www.macromedia.com/special/inspiration/volvo/
http://www.cinecity.com.au/CinecityWebPage/HomePage/CinecityFrameset.htm
http://moma.org/exhibitions/2004/tallbuildings/index_f.html
http://ambientinteractive.com/
http://www.hiltonjourneys.com/indexFlash.html

What is Flash? A Multimedia graphics program.

What can be done with Flash?
Simple animation to complex interactive applications and movies. (animation, cartoons, games, multimedia presentations, communication, websites, movies)

Where can it be used?
Primarily on the web but also…TV, cd, dvd, cell phones, handhelds.

Advantages:
Vector Graphics.
Interactivity.
Can do a lot without programming.

Disadvantages:
Steep learning curve.
Search engine results- Flash 8 can help you get around it by entering descriptions.
Need to learn Action Script to truly use the power of Flash.
ADA Problems- Newer versions have an Accessibility Panel.
Printing.

Free 30-Day Trial
http://www.macromedia.com/cfusion/tdrc/index.cfm?product=flash

Vector vs. Bitmap:
Bitmap – A collection of dots or pixels (jpg, gif).
Vector – Can be scaled without loosing clarity or quality. Smooth edges when zooming in because it is made up of lines and curves.

Basic Steps Overview
To build a Flash application, you typically perform the following basic steps:

Decide which basic tasks the application will perform.
Create and import media elements, such as images, video, sound, text, and so on.
Arrange the media elements on the Stage and in the Timeline to define when and how they appear in your application.
Apply special effects to media elements as you see fit.
Write ActionScript code to control how the media elements behave, including how the elements respond to user interactions.
Test your application to determine if it is working as planned and find any bugs in its construction. Test your application throughout the creation process.
Publish your FLA file as a SWF file that can be displayed in a web page and played back with Flash Player.

Pixel Standards
Web = 320 x 240
TV/Monitor = 640 x 480
Standard TV/NTSC = 720 x 486
European TV/PAL = 720 x 576
HDTV = 1280 x 720

Write a story – Final Draft Software/Word Templates.

Storyboard – shot by shot drawing of each.

Frames per Second
Film = 24 frames per second
Video = 30 fps

Camera Shot Types
Establishing – City
Medium – Chest to head – shows 1 – few characters
Wide – characters & landscape
Close-Up – head shot
Extreme Close-Up – body part
Bird’s Eye View – crane view – from overhead
Worm/Ant View – from below
Reveal – pans out to reveal a character or something
Transition – fade into shot

Director – job is to figure out the most effective way to show the shot with the dialogue. How every piece of script is going to come alive in the most exciting way.

Acting/Animating:

Study real life.
Pretend you are the character or object being animated.
Get into the role mentally and physically.
Practice your timing.
Ask for feedback from your audience.

Animatic:
Storyboard that is animated.

Scenes:
Maintains control – rearrange, add, delete, instead of one really long time line.

Camera Work:
Using the camera and shots to tell the audience what is going on – make an impact.

Timing & Suspense:
When something appears and disappears or leaves you hanging on the edge of your seat wondering when things will show up or what happens next.

Continuity:
Watching the movie over and over again to ensure characters act the same (behavior) or things remain in the same place/realistic, etc.

File Types:
http://www.macromedia.com/devnet/studio/articles/fl8_basics_02.html

Workspace:
http://www.macromedia.com/devnet/studio/articles/fl8_basics_03.html

Tools:

Panels:

Layers: Creating, Inserting, Renaming

Frames: Adding & Deleting

Naming Conventions:

No spaces or special characters.
Do not start with numbers…start with letters.
Use unique names.
Standardize – mc, txt, gr.
Use descriptive names – grFlower1.
Capitalize all but the first word – mcLeafFalling.
Match case.
Avoid reserved words – goto, date
Use “var” or “set” for variables.
Use a legend – list of names or naming practices.

Symbols & Instances: Creating Symbols & Instances reduces file size.
Symbols - Reusable graphics, buttons, and movie clips.
Instances – The copy of the symbol that is used on the stage. You can change an Instance by using the Transform Panel and the Properties Panel.

Libraries:
The Library panel is where you store and organize symbols created in Flash, as well as imported files, including bitmap graphics, sound files, and video clips. The Library panel lets you organize library items in folders, see how often an item is used in a document, and sort items by type.
There are common libraries in Flash and you can create custom common libraries. You can create a shared library to use with multiple Flash files. You can use a library from another Flash file.

Action Script:
A scripting language that Flash uses to control the movies. Scripts can be attached to Key Frames and/or buttons.

http://www.w3schools.com/flash/default.asp

Creating Animation By Tweening:
To create tweened animation, you create starting and ending frames and let Flash create the animation for the frames in between. Flash varies the object's size, rotation, color, or other attributes between the starting and ending frames to create the appearance of movement.
Tweened animation is an effective way to create movement and changes over time while minimizing file size. In tweened animation, Flash stores only the values for the changes between frames.

Motion Tweening, you define properties such as position, size, and rotation for an instance, group, or text block at one point in time, and then you change those properties at another point in time. You can also add a motion guide layer to tween along a path.

Shape Tweening, you draw a shape at one point in time, and then you change that shape or draw another shape at another point in time. Flash interpolates the values or shapes for the frames in between, creating the animation.

Note: To apply shape tweening to groups, instances, or bitmap images, you must first break these elements apart. To apply shape tweening to text, you must break the text apart twice to convert the text to objects.

Embed Flash into HTML/Web Page:
By Hand:
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>

Above is the minimum code necessary to embed the Flash file. You should include the following:
classid is an attribute to the <object> tag. It tells Internet Explorer to load the ActiveX plug-in if it is not installed.
pluginspage is an attribute to the <embed> tag. It displays a link to the Shockwave download page if Netscape does not have it.
Here is an example:

Using Flash To Publish The Movie Into Its Own Web Page:

Step 1
Choose File > Publish. Flash will now create the <object>, <param>, and <embed> tags for you. It will also create the classid and pluginspage attributes.
Step 2
Open the HTML document that Flash created, view the HTML source and copy the code into your HTML page where you want your Flash movie.
Step 3
Be sure that you have the "somefilename.swf" in your Web folder.
Step 4
Type in the address of the HTML file in your browser and look at your first Flash movie.

Using Your HTML Editor:

Dreamweaver: Insert > Media > Flash
FrontPage: Insert > Picture > Movie in Flash Format

Resources:
http://www.macromedia.com/software/flash/flashpro/
http://www.flashkit.com/index.shtml
http://osflash.org/osflash
http://www.flashvista.com/
http://www.bigwebmaster.com/Flash/
http://www.bestflashanimationsite.com/resources/
http://www.pipey.com/default.asp
http://www.actionscripts.org/
http://www.hotscripts.com/Flash/index.html
http://www.ultrashock.com/
http://www.iwantmyflashtv.com/home/content/
http://www.flashpro.nl/
http://www.flashmagazine.com/
http://www.flashcfm.com/tutorials.cfm

Tutorials:
Adobe TV
http://www.w3schools.com/flash/default.asp
http://www.computer-training-software.com/flash5-t.htm
http://learnflash.com/
http://www.cartoonsmart.com/
http://www.video-animation.com/flash8_001.shtml
http://www.photoshopsupport.com/flash/tutorials.html
http://www.webwasp.co.uk/tutorials/version.php
http://www.kirupa.com/developer/flash8/index.htm
http://www.echoecho.com/flash.htm
http://www.smartwebby.com/Flash/default.asp