Lesson 9

Lesson 9 - Flash continue

Symbols
- A symbol is a graphic, button, or movie clip that can be reuse throughout your documents or in other documents.

- A symbol can include artwork that you import from another application eg. Illustrator, photoshop & etc.

An instance is a copy of a symbol located on the Stage or nested inside another symbol.

- Editing the symbol updates all its instances, but apply effects to an instance of a symbol updates only that instance.

- Using symbols in your documents dramatically reduces file size, speed SWF file playback, because a symbol needs to be downloaded to Flash player only once.

Types of symbols

- Use graphic symbols for static images & to create reuseable pieces of animation that are tied to the main Timeline.

- Use button symbols to create interactive buttons that respond to mouse clicks, rollovers.

  Eg. Play button, stop button

- Use movie clip symbol to create reusable pieces of animation. Moive clips have their own multiframe Timeline that is independent from the main Timeline – think of them as nested inside a main Timeline.Movie clips are scriptable with ActionScript.
(Movie clip symbol tutorial-http://tv.adobe.com/watch/learn-flash-professional-cs5/gs06-understanding-movie-clips/)
Types of animation

Motion tween

Shape tween

A motion tween is an animation that is created by specifying different values for an object property in different frames. Flash Pro calculates the values for that property in between those two frames. The term tween comes from the words “in between”.

In shape tweening, you draw a shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Pro then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.

- In shape tweening, you draw a vector shape at one specific frame in the Timeline, and change that shape or draw another shape at another specific frame. Flash Professional then interpolates the intermediate shapes for the frames in between, creating the animation of one shape morphing into another.

- To apply shape tweening to groups, instances, or bitmap images, break these elements apart. To apply shape tweening to text, break the text apart twice to convert the text to object

Identifying animations in the Timeline

z

Project 2 brief

Lesson 8

Introduce Flash

Sample of flash sites vs non-flash sites

Comparing between flash & gif

Flash interface

Flash tools – drawing

Brief on Porject 2

Flash Tutorial sites

http://www.kirupa.com/developer/flash/index.htm

1. Introduce Flash

Flash is the industry standard tool for creating rich media content. Flash project can include flash animation, flash video, flash website, flash photograpy slide and mobile device.

Show examples

http://www.marcecko.com/#/

http://www.lendyourleg.org

http://www.louisvuitton.eu/front/#/eng_E1/Louis-Vuitton-Homepage

http://www.wrangler-europe.com

http://www.valentino.com/en/home/

http://www.boatechnology.com

File type – Fla & swf

Fla file is flash working file

  

SWF is an output file, you see in web.

The SWF format is extremely well suited for delivery over the web because SWF files are very small & take little time to download.

Flash project often include extensive use of Vector graphics. Vector graphics require ignificantly less memory & storage space than bitmap graphics.

Flash allows you to select graphic elements & convert to symbols (making it easier to resus)

Adobe ActionScript ( a scripting language) you create functions to specify how the objects in the application behave.

Flash interface

The stage, Timeline, Tools panel, Property inspector & Library panel.

Create a simple fla file

Launch Flash application. Choose File > New.

In the New Document dialog box, the ActionScript 3.0 file type is selected by default. If it is not selected, select it now. Click OK.

*ActionScript 3.0 in Flash Professional: Reading and solving errors through the Compiler Errors window. The debugging capabilities of the Flash authoring environment have greatly improved.

Click the Properties tab in the upper right side of the user interface to view Property inspector. Change stage size to 600 x 200px

Choose File > Save and name it SimpleFlash.fla.

http://www.adobe.com/devnet/flash/articles/flash_cs5_createfla.html

Drawing Tool

Select the Oval tool from the Tools panel

Select a color of your choice from the Fill color picker, located directly below the Stroke color picker.

Whenever you draw a vector shape, you have the option of selecting two drawing modes: Merge drawing mode and Object drawing mode. For the purposes of this tutorial, click the drawing mode button to select the Object drawing mode at the very bottom of the Tools panel. When the Object drawing mode is selected, the button will apprear darker and selected.

http://tv.adobe.com/watch/learn-flash-professional-cs4/getting-started-06-object-and-merge-drawing/

After drawing some artwork, you can turn it into a reusable asset by converting it to a symbol. A symbol is a media asset that can be reused anywhere in your document without the need to re-create it. Symbols can contain bitmap and vector images and animations, along with other types of content.

Symbol

Convert graphic elements to symbol. Select the element > Right click mouse > Select Convert to symbol. Name the symbol, under Type, select Graphic > OK.

Symbol will store in Library. 

Importing images or vectors artwork to Flash. File > Import > Import to stage or Import to library.

Timeline /Frame

Black dot on the frame is called keyframe.

Red marker also known as the playhead

Hollow circle is blank keyfram.

Diamond-shaped dot known as a property keyframe

While the playhead is still on Frame 24 of the Timeline, select the graphic element instance on the Stage and drag it to the right, just past the Stage area. This step of relocating the instance creates a tweened animation.

Choose Control > Test Movie to test the FLA file and watch the animation play back in Flash Player.