1 / 44

Adobe flash cs3

Adobe flash cs3. Angelina Quansah. Introduction.

kinsey
Download Presentation

Adobe flash cs3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Adobe flash cs3 Angelina Quansah

  2. 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.

  3. Samples of Flash Websites • Examples • Examples • Examples • Examples

  4. 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

  5. Flash layout layers timeline tool bar Stage panel stage documentwindow property inspector

  6. 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

  7. 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

  8. Divisions in the tool bar selection tools Drawing tools modifying tools viewing tools setting colors option tools

  9. 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

  10. Layout of Timeline frames key frames play head layers to create frames Frame rate length of movie played Current frame onion skin

  11. 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.

  12. Property inspector • This area is below the document window • It displays the attributes of the elements you are working with.

  13. 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

  14. 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.

  15. 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

  16. 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

  17. Animating shapes (cont.) shape tween Frame 10 Frame 1 property inspector

  18. 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

  19. Previous frames in focus to guide the animation onion skin markers indicating the view range

  20. 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

  21. 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

  22. 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

  23. 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

  24. Creating button (cont.) • The four states of the button

  25. 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

  26. Creating button (cont.) Up State Over State

  27. 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

  28. 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

  29. Adding interactivity (cont.) Code hints in actionScript Script assist

  30. 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

  31. Adding interactivity (cont.)

  32. actionScript play stop

  33. 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

  34. Add sound to slide show Some of the sound files flash supports are • WAV file • System 7 sound • Mp3 files

  35. 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

  36. 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

  37. 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)

  38. 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.

  39. 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

  40. Importing Video

  41. 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

  42. 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)

  43. Additional recourses for flash tutorials • www.tutvid.com • www.adobe.com/downloads

More Related