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.