Adobe flash cs3 Angelina Quansah
Introduction • Adobe Flash previously known as Macromedia Flash has become a popular method for adding animation and interactivity to web pages; creating amazing effects for advertisements, integrating video into web pages and more recently developing rich Internet applications.
Samples of Flash Websites • Examples • Examples • Examples • Examples
Objectives • Basic Flash Drawing Tools • Develop Flash Movies • Creating buttons • Add interactivity to buttons • Import graphics and create slide show • Add sound to Flash Movies • Create special effects
Flash layout layers timeline tool bar Stage panel stage documentwindow property inspector
Document window • The white square called stage is the working space. • This is the visible area when movie is viewed • It can be customized to suit user
Tool bar • The first four tools are the selecting and modifying objects • The next six tools are for creating and drawing in Flash. • The next four tools are for modifying strokes and shapes. - stroke is an outline of a shape fill is the inner color • The next two tools are for viewing the art work • The next two tools sets the stroke and fill color of your shape • The bottom area is the option tools and changes depending on the tool selected
Divisions in the tool bar selection tools Drawing tools modifying tools viewing tools setting colors option tools
Timeline • The timeline is above the document window • It shows an animation or movie divided into frames. • Drag play head to preview animation Frames represented in numbers help you navigate through the time line frame rate is the speed at which the movie is playing • Layers are created here to control individual frames of the animation • Onion skin allows you to view multiple frames at a time
Layout of Timeline frames key frames play head layers to create frames Frame rate length of movie played Current frame onion skin
Panel • This is where the open panels are kept • The default panel has the color panel and the library panels • The list of all the panels are in the window menu. • Its possible to collapse and add new panels • Panels can be saved for future use.
Property inspector • This area is below the document window • It displays the attributes of the elements you are working with.
New features • Rectangle and Oval primitive tools. • This allows creative modification of ovals and rectangle. • The integration of Photoshop and Illustrator • Programming language – ActionScript 3.0
Flash file types • An flash file with the extension fla is the main document to create all the flash contents. • A movie created in Flash on the web is a swf file. • Videos with Flash interface on the web are known as flv files.
Creating a shape • Flash uses vector graphics – a drawing with lines and shapes and mathematical formulas. • Scaling vector graphics does not affect the shape • Vector graphics give a small file size
Animating shapes Morphing a square shape into an oval shape • Open new document from file • Use the rectangle tool to create a square • Click on frame 10 • Choose Insect - timeline – blank key frame • Create an oval with the oval tool on the stage. • Click in between the two key frames on the timeline. • In the property inspector, click tween - shape • Flash morphs the rectangle into a star
Animating shapes (cont.) shape tween Frame 10 Frame 1 property inspector
Using onion skin • Onion Skin allows you to view multiple frames at a time • It serves as a guide in moving objects when animating • Manipulating the small circle on the play head determines the numbers of frames for the preview
Previous frames in focus to guide the animation onion skin markers indicating the view range
Symbols • Multiple shapes add to file size • Converting to symbols produces multiple instances of the object without affecting file size • Symbols can be edited independently • Create a shape – click Convert to Symbol in the Modify menu • Set the variable name to gfcBall, type is Graphic and Registration to top left. • The symbol registers in the library panel
Symbols (cont.) Naming Conventions • Graphic symbols names begin with a lowercase letter normally then uppercase letter. (eg. gfcBucket) • No spaces required • Its an error to begin with numbers • btn for buttons and mc for movies
Symbols (cont.) Animating a ball • Drag an instance of the ball on stage • Create key frames on frame 12 and frames 20 • On frame 12, move ball down • Click in between frames 1 and 12 • In the property inspector, click tween- motion • Motion tweening are for symbols and shape tweening for shapes • Key frames represent a transition on the time line
Creating buttons • Buttons have four states Up State – when the button has not been clicked on Over State – when the mouse is over the button Down State – when the mouse is off the button Hit State – the area of the button that reacts when mouse is over
Creating button (cont.) • The four states of the button
Creating button (cont.) • Create a button and convert to symbol • Assign variable name (eg. btnButton), type button and registration top left. • Double click button symbol in the library to enter symbol editing mode • Create a key frame in the Over State • Modify the button • Drag the Up key frame to the Down State and press the Alt key to copy • Create an ordinary frame on the hit state
Creating button (cont.) Up State Over State
Movie Clips • Movies clips is self contained and plays independently. • It is not linked to the timeline • Movie clips act as a flash movie in a flash movie. • An animation in a movie clip can be re-used
Adding interactivity Brief introduction to ActionScript - - action Script is the scripting language use in Flash - adds interactivity to Flash movies - script assist helps you write the script
Adding interactivity (cont.) Code hints in actionScript Script assist
Adding interactivity (cont.) How to Create a stop and play button for an animation • Create two button for stop and play • Create layer for each • Create a layer for action script - Preferably the top player • Assign instance name to buttons (eg. btn_stop and btn_play). Instance names differentiate instances of symbols on stage. • Click on the first key frame of the action script layer • Open action script and write code
actionScript play stop
Creating a slide show Using Bitmap graphics Bitmap graphics can be compresses to reduced file size • File – import –import to stage - flash imports all images at once if they have the same prefix and are in order • Images are loaded into the timeline • Click on the document window and in the property inspector, change the frame rate. • Preview animation by pressing Ctrl-Enter
Add sound to slide show Some of the sound files flash supports are • WAV file • System 7 sound • Mp3 files
Add sound to slide show (cont.) • Import sound to Library from file • Create a new layer with name sound • Select the first key frame of the sound layer • Drag the sound icon from library to stage • The timeline is automatically updated • Preview slide show
Stopping an animation Flash loops an animation by default • Create a new layer fro actionScript • Click on the frame that you want the animation to stop and open action script • Write - stop(); and close the script to stop the animation
Working with text Three different type of text Static – a simple graphic as title, headlines etc. It can converted to button or movie clips for animation. Dynamic - changes by outside variable through actionScript Input - user input (actionScript can be used)
Working with text (cont.) Create movie clip with static text • Add text • Modify – Break Apart • Modify timeline –Distribute to Layers • Add frames to layers as desired • Alter the text at the first keyframe • Separate the frames for each letter on the timeline • Playback animation.
Importing Video Some files that flash support are avi files dv files mov mpeg Its better to encode video as an flv files than to embed videos into swf unless files are very small. (Flash video encoder is required) • Video clips can be embedded into movie clips or graphics
Flash on the web • Embedding Flash swf file into an XHTML document enables web browsers to display Flash content. • Flash can either be used for a complete website or part of a website
Flash on the web (cont.) • The following code tells the browser to play the Flash movie and where to locate the Flash player plug in if not already installed <object width="425" height="350"> <param name="movie" value=“animation.swf"> </param> <param name="wmode" value="transparent"> </param> <embed src=“animation.swf" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"> </embed> </object> (where animation.swf is the name of the flash movie)
Additional recourses for flash tutorials • www.tutvid.com • www.adobe.com/downloads