Adobe flash cs3
description
Transcript of Adobe flash cs3
![Page 1: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/1.jpg)
Angelina Quansah
![Page 2: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/2.jpg)
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.
![Page 3: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/3.jpg)
Examples Examples Examples Examples
![Page 4: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/4.jpg)
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
![Page 5: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/5.jpg)
Stage
timeline
stage
property inspector
paneldocumen
twindow
tool bar
layers
![Page 6: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/6.jpg)
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
![Page 7: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/7.jpg)
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
![Page 8: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/8.jpg)
selection tools
Drawing tools
modifying tools
viewing tools
setting colors
option tools
![Page 9: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/9.jpg)
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
![Page 10: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/10.jpg)
layers
key frames
play head
to create frames Frame rate
Current frame
length of movie played
frames
onion skin
![Page 11: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/11.jpg)
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.
![Page 12: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/12.jpg)
This area is below the document window It displays the attributes of the elements
you are working with.
![Page 13: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/13.jpg)
Rectangle and Oval primitive tools. This allows creative modification of ovals
and rectangle. The integration of Photoshop and
Illustrator Programming language – ActionScript 3.0
![Page 14: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/14.jpg)
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.
![Page 15: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/15.jpg)
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
![Page 16: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/16.jpg)
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
![Page 17: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/17.jpg)
tween shape
property inspector
Frame 1Frame 10
![Page 18: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/18.jpg)
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
![Page 19: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/19.jpg)
Previous frames in focus to guide the animation
onion skin markers indicatingthe view range
![Page 20: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/20.jpg)
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
![Page 21: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/21.jpg)
![Page 22: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/22.jpg)
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
![Page 23: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/23.jpg)
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
![Page 24: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/24.jpg)
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
![Page 25: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/25.jpg)
The four states of the button
![Page 26: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/26.jpg)
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
![Page 27: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/27.jpg)
Up State Over State
![Page 28: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/28.jpg)
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
![Page 29: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/29.jpg)
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
![Page 30: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/30.jpg)
Script assist
Code hints in actionScript
![Page 31: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/31.jpg)
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
![Page 32: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/32.jpg)
![Page 33: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/33.jpg)
play stop
actionScript
![Page 34: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/34.jpg)
Using Bitmap graphicsBitmap 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
![Page 35: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/35.jpg)
Some of the sound files flash supports are WAV file System 7 sound Mp3 files
![Page 36: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/36.jpg)
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
![Page 37: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/37.jpg)
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
![Page 38: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/38.jpg)
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)
![Page 39: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/39.jpg)
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.
![Page 40: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/40.jpg)
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
![Page 41: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/41.jpg)
![Page 42: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/42.jpg)
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
![Page 43: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/43.jpg)
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)
![Page 44: Adobe flash cs3](https://reader035.fdocuments.in/reader035/viewer/2022081417/5681512f550346895dbf4927/html5/thumbnails/44.jpg)
Additional recourses for flash tutorials www.tutvid.com www.adobe.com/downloads