Transcript Flash JLMC315 Eva Tao [email protected] October 22, 2007 Source: http://rex.public.iastate.edu http://Stumble.com http://youtube.com http://www.xdude.com/thedough/ http://css.ait.iastate.edu/ Joe Struss About Flash • Multimedia Web authoring application – Authoring file format: .fla • Playback Requirements – Playable.

Flash
JLMC315
Eva Tao
[email protected]
October 22, 2007
Source: http://rex.public.iastate.edu
http://Stumble.com
http://youtube.com
http://www.xdude.com/thedough/
http://css.ait.iastate.edu/ Joe Struss
About Flash
• Multimedia Web authoring application
– Authoring file format: .fla
• Playback Requirements
– Playable file format: .swf
– Viewable inside of Flash, with Flash player, or in
Browser with Flash plugin
– Flash player or plugin is installed on more than 97%
of Internet-enabled desktops worldwide—as well as
on mobile phones and PDAs.
2
Important Flash Features
• Streaming capability
– Flash movie starts playing before it is
downloaded entirely
• Interactivity
– Action (s) occurs at the press of a button or
key, or when certain criteria are met.
– Flash uses ActionScript (Flash programming
language).
• Multimedia
– Multiple forms of media (animation, sounds,
video) in an integrated system
3
Starting Flash
• On a Macintosh, click on the Finder on the left
bottom of the screen.
• Click on Applications then click on Adobe
Flash CS3.
• On a Windows system, click under the Start
icon then Select Programs, Adobe
Applications, then Adobe Flash CS3.
• From the Flash starting screen— press Flash
File (Actionscript 2.0) under Type of New
Document.
• Pull down menu bar under Window to
Workplace layout then over to Default.
4
Flash Interface
5
Toolbar
• Four distinct areas
(Similar to the Photoshop):
–
–
–
–
Tools sections
View sections
Color sections
Options sections
• White Arrow/
Sub-selection: a unique
tool for Flash to view and
modify anchor points.
6
Menubar
• Modify option:
– Modify Document/Movie to have a particular
frame rate, size or background color.
• Control option:
– Test a particular Flash movie or scene
7
Timeline - Layers (1)
8
Timeline - Layers (2)
• Use layers to organize everything on the
stage.
• Keep frame scripts on one layer.
• When layer on the top of layer list, layer
content will be in the front on the stage .
• Layer order can be changed by
dragging layer up or down in the list.
9
Timeline – Definitions
• Frame (a unit/column on the Timeline)
• Keyframe
– a point on the Timeline where the contents of a layer change
– indicated by a black dot in the cell
• Blank Keyframe
– indicates the beginning point for which there is no content on the
layer
• End of Content Sequence
– indicates the end point for which there is the same (or no)
content on the layer
• Animation
– illusion of motion by creating a change over time (changing the
contents of successive frames)
• Frame Rate (in Property Inspector—
per second
frames
10
Stage
• This white area is the OnStage area that people can
see
• Background of the stage is
gray. It is the Off-Stage
area where items waiting to
move or spin onto the
Stage. Off-Stage items are
not seen until they move
onto the Stage.
11
Panels
• Movable Panels.
• Most often used are
– Properties
(object/tool
information),
– Color (color mixer),
– Behaviors (Simple
Scripts) and
– Components
(specialized tools).
12
Hands-on Exercise
•
•
•
•
•
•
•
Tweened Animation
Shape Tween
Motion Tween
Movie inside the Movie
ActionScript Button
Sound Effects
Upload Flash to the Web Site
13
Tweened Animation
1. File> New> Flash File Actionscript 2.0> click
OK to create a new file
2. File> Save> click desktop> name the file
tweenedanimation.fla
3. Click on frame 1
4. Practice using drawing tools to draw a face
- Use the pointer to select and move the shapes, and see how
they clip each other.
- Change to the arrow tool ( ) to change the color.
5. Intert> Keyframe to make next frame a
keyframe
6. Add in a new item from previous draw
7. Hit ‘Enter’ to see the animation after create 1020 keyframes
14
Shape Tweening
• Only shapes (& their colors) can be
shape tweened.
• Groups, symbols, or editable text,
CANNOT be shape tweened.
• Can tween multiple shapes on a layer.
• Put each shape on its own layer for
organization .
• Tweening is the act of filling in between
Keyframes to create a morphing type of
effect.
15
Shape Tweening (1)
1. Adding a 2nd Layer by right click on the Layer 1
then click on Insert layer Click on frame one.
2. Choose the Brush icon from the Toolbar,
3. Select an brush size/shape and make a cloud on
the the stage.
4. Right click on the 5th frame on the Timeline then
click on Insert a Blank Keyframe.
5. Make another bigger cloud with your brush in
different spot from your previous one.
6. Right click on the 10th frame and repeat step 4
until you reach Frame 25 to make total 5 clouds
with different shape and color.
16
Shape Tweening (2)
• Right click on Frame 1 and click on Create
Shape Tween option. Do this for all your
keyframes.
• Hit Enter to run the movie.
• Hit Ctrl+Enter to Test Movie or by
scrubbing the Timeline with the Playhead.
• Easing in and out in the Properties
window.
• Hit Ctrl+z to undo, or Shift+F5 to delete a
frame.
17
Shape Tweening (3)
• Overlapping Layer
– On Layers that overlap items, the topmost
Layer will be seen.
– Drag ‘Layer 2’ down below Layer 1 so Layer
1 should overlap Layer 2
• Invisible Layers
– Hiding one or more Layers temporarily by
clicking under the Eyeball icon next to the
layer name. This will hide that Layer on the
Stage. Click it again to reveal the Layer.
18
Shape Tweening (4)
• Adding a Name for the layer
– Right click on Layer 2 to Insert Layer
– Change the name of the new layer by double
clicking on the Layer 3 name, then typing in
duck and pressing Enter.
19
Publishing and Uploading (1)
• Save your Movie by pulling down under
File on the menubar to Save as a .fla file.
A .swf file is automatically created when
you hit Ctrl+Enter after save.
• To Publish your Flash Movie for use on
the Web, pull down under File to Publish
Settings. By default, you will create a
Flash file (.swf) and an HTML file (.html)
when you publish. You will need to upload
both of these files and use the .html file to
20
view the .swf file.
Publishing and Uploading (2)
• Click the Flash tab and click the Protect
from Import checkbox. This will protect
your Flash file from being borrowed by
other people on the Web. JPEG quality
setting is also available here.
• Click the Publish button and click OK to
create your .swf and .html files.
• Go to your desktop and Double-click the
tweenedanimation.html file to view your
work.
21
Motion Tweening
• Only symbols can be motion tweened.
– Tweened element must be the only element
on its layer.
– Multiple parameters of the element can be
motion tweened at the same time, e.g. size,
location, rotation, skew, brightness, alpha,
tint.
22
Motion Tweening (1)
1. File> Open> FlappingBird.fla to open the
pre-created animation.
2. Right click on the duck, then paste on the
stage of duck layer of the
tweenedanimation.fla file.
3. Right click on the frame1 of the duck
layer, then click Create Motion Tween
4. Close the motion tween by right clicking on
the 25th frame to Inserting Keyframe
23
Motion Tweening (2)
• Ease in and out
• Motion Guide
24
Motion Tweening (3)
1. Right click on the duck layer then click Add
Motion Guide
2. Click on guide layer, use Pencil tool to draw the
path pass by the main stage
3. Click frame 1 on duck layer and snap the bird to
the beginning of the path
4. Click frame 25 on duck layer and snap the bird
to the end of the path
5. Orient the symbol to the path then hit ‘Enter.’.
6. Hit “Ctrl + Enter” to see the SWF
7. This is the Tweened Animation + Movie inside
Movie
25
Movie inside Movie (1)
1. File> New> Flash File Actionscript 2.0> click
OK to create a new file
2. Import the pre-created animation movie (File>
Import> Import Video)
3. Browse the mu.mov click choose button then
continue button> click continue button to resize
the video screen and play length> click continue
button to change the skin> click Finish> type
movie.fla to save the video as a flv file
4. Save the fla file then hit “Ctrl + Enter” to play the
movie.
5. Play with the embedded bar inside the movie to
start from any point of the movie
26
Movie inside Movie (2)
1. To add a skin to a flv or change to a swf file
2. File> New> Flash File Actionscript 2.0>
click OK to create a new file
3. Import the pre-created animation movie (File>
Import> Import Video)
4. Browse the cat.flv click choose button then
continue button> click continue button 2
times then change the skin> click Finish>
type cat.fla to save the video as a fla file
5. Save the fla file then hit “Ctrl + Enter” to
publish the swf file and play the movie.
Three Types of Symbols
28
Definitions
• Symbol
– An object that is defined once and can be used in
multiple instances
• Instance
– A copy of a symbol on the stage
– Advantage: keeps file size small
• Library
– Stores (and organizes) symbols, bitmaps, sounds,
etc.
– Library (Window>Libraries) contains all symbols and
bitmaps used in a movie.
– Common Libraries (Window>Common Libraries)
provides pre-defined symbols, buttons, sounds, etc.
– Shared Libraries allow use of assets from a source
movie in multiple destination movies.
29
ActionScript Button (1)
• Right click on the movie layer then click
on Insert layer and name it button.
• Import play ( ) and stop ( )buttons from
the library
• Click on the play button.
• Go to the Behaviors Panel under
Window menubar and click on the Plus
sign then drag down to Movieclip and
over to Goto and Play at the frame or
lable. Take the default options and click
on OK.
30
ActionScript Button (2)
• Click on the stop button.
• Go to the Behaviors Panel under
Window menubar and click on the Plus
sign then drag down to Movieclip and
over to Goto and Stop at the frame or
lable. Take the default options and click
on OK.
31
ActionScript Button (3)
• Select the Right
Arrow then click on
the Edit Actions
button in the
Properties Panel.
• Click on the stop
button.
• In the Action Script,
change “1” in
parentheses to
nextFrame()
32
ActionScript Button (4)
• Click on the play
button.
• In the Action Script,
click on Global
functions then
Timeline control then
Play on the left panel
to change
• Hit “Ctrl + Enter” to
play the movie.
//Movieclip GotoAndStop Behavior
this.gotoAndStop("1");
//End Behavior
to play();
33
Sound Effects (1)
•
Import formats
–
•
Streaming sounds
–
–
•
Begins to play as soon as beginning of sound file
has downloaded
Use for continuous background sounds
Event sounds
–
–
•
MP3; WAV (Windows); AIFF (Mac); and more (if
QuickTime 4 installed).
Must download completely and load into RAM
before playing
Use for buttons
Compression
–
Can be controlled at movie level (in publish
settings), or as individual sound property
34
Sound Effects (2)
1. Import sound file wicky.wav to the
library (file> Import> import to the
library)
2. Right click on the button layer to create
a New Layer and name it sounds
3. Click on the 1st frame of sounds layer
4. Click on the drop down menu of the
“sound” in the properties in the bottom
of the page and click on wicky.wav
5. Save and test movie.
35
Free Download Sound Web Sites
•
•
•
•
http://www.flashkit.com/soundfx/
http://freeaudioclips.com/
http://www.fws.gov/video/sound.htm
http://sounddogs.com/
36
Upload Flash to the Web Site
1. Insert Flash files in the location you
would like to load the movie in Dream
Weaver (Insert> Media> Flash > Insert
Swf, or Insert> Media> Flash Video>
Insert Flv ). In Front Page (Insert>
File> Insert HTML file)
2. Save in Dreamweaver or Frontpage
3. Go to your Web site and Refresh
37
Creative Flash
•
•
•
•
•
•
•
•
2advanced
Red box
Safety at Work
Stickman
Halo
Illusion
Red
The chosen One
38
Happy Flash!!
39