Transcript Introduction to Macromedia Flash

Adobe Flash
Introduction to
Macromedia Flash
Adobe
Kevin McManus
KM © 2007
the University of Greenwich
1
Adobe Flash
We are going to look at
• What is Flash
• an IDE to create shockwave media
• Animation
• timelines, symbols, tweening
•
•
•
•
•
•
KM © 2007
Programming with ActionScript
Sound
Publishing on the Web
Morphing
Fonts
Forms
the University of Greenwich
2
Adobe Flash
Shockwave
• Binary file format for Flash web pages
• small download sizes
• open standard
• requires a browser to have a shockwave plug-in
• only from macromedia
• currently at version 8 in Adobe Flash CS3
• Supports all features found in DHTML
• plus so much more
• extensive animation support
• vector and bitmap graphics
• guaranteed pixel perfect on all browsers
• providing they have a shockwave plug-in
• no more browser compatibility issues
KM © 2007
the University of Greenwich
3
Adobe Flash
Shockwave
• Created using the Flash environment
• sophisticated IDE
• work with .fla files and compile to .swf files to publish
• graphics + animation toolkit
• part of Adobe Creative Suite 3
• Dreamweaver, Contribute, Fireworks, Illustrator, PhotoShop
• not ColdFusion
• Other shockwave tools
• Swish and many others
• Sophisticated applications
• ActionScript programming in the client
• Flash remoting to access server side scripts
• XML and web service interfaces
KM © 2007
the University of Greenwich
4
Adobe Flash
Animation
• Cell based (frame) animation
• key frames
• motion tweening
• shape tweening - morphing
• Path based (vector) animation
• follows an object’s transition over a vector
• Combination of cell and path based animation
• Computational animation
• object moves by calculating its x and y coordinates
• Program or script based animation
• ActionScript - Flash’s scripting language
• ECMA script
• flexible, powerful, interactive
• not as powerful as Lingo - Director’s scripting language
KM © 2007
the University of Greenwich
5
Adobe Flash
Flash
Animation IDE with the ability to support
• Scripted behaviors
• ActionScript
• User interaction
• events
• forms
• Key Frames
• timeline
• Tweening
• motion
• shape
• Layers
• Symbols, buttons and movie clips
KM © 2007
the University of Greenwich
6
Adobe Flash
Flash
• IDE with lots of training support in built
• A set of lessons implemented as interactive Flash movies
complete with template files
•
•
•
•
•
•
•
Getting started with Flash
Illustrating in Flash
Adding and editing text
Creating and editing symbols
Understanding layers
Creating tweened animation
Creating buttons
• Comprehensive set of HTML tutorials
• Conventional HTML help system
• It is a good idea to complete the lessons before
attempting to do anything with Flash
KM © 2007
the University of Greenwich
7
Adobe Flash
Symbols
• Each symbol has a unique timeline and stage, complete
with layers
• When you create a symbol you choose the symbol type,
depending on how you want to use the symbol in the
movie
• graphic symbols
• button symbols
• movie clip symbols
• Use graphic symbols for static images
• to create reusable pieces of animation that are tied to the
timeline of the main movie
• graphic symbols operate in sync with the movie's timeline
• Interactive controls and sounds won't work in a graphic
symbol's animation sequence
KM © 2007
the University of Greenwich
8
Adobe Flash
Symbols
• Use button symbols to create interactive buttons in the
movie that respond to events
• onRollOver, onPress, onRelease, etc
• Define the graphics associated with various button states
• assign actions to a button instance.
• Use movie clips symbols to create reusable pieces of
animation.
• Movie clips have their own multi-frame timeline that
plays independent of the main movie's timeline
• movies inside movies
• can contain interactive controls, sounds
• even other movie clip instances.
• Place movie clip instances inside the timeline of a button
symbol to create animated buttons.
KM © 2007
the University of Greenwich
9
Adobe Flash
Bouncing Ball
• Exercise to animate a bouncing ball
•
•
•
•
•
•
•
KM © 2007
Make the ball
Turn it into a symbol
Create a motion tween
Modifying the tween
Guide lines
Easing
Buttons
the University of Greenwich
10
Adobe Flash
Make the Ball
• Draw with the oval tool
• Fill with a texture to give a “3D” effect
• Save it as a symbol in the library
• why?
• can’t use it until it is in the library
• motion tweens work with symbols
• Before a shape is a symbol in the library it is a graphic
on the stage consisting of strokes and fills
KM © 2007
the University of Greenwich
11
Adobe Flash
Keyframes
• The symbol exists in a keyframe (1) in a layer on the timeline
• insert another keyframe in the layer
• right click in a blank frame (30)
• set a motion tween between them
• right click between the two key frames
• In the new key frame move the symbol to a different position
• Flash interpolates
• move the play head to see the effect
KM © 2007
the University of Greenwich
12
Adobe Flash
Motion Tween
• You can animate by creating intermediate
keyframes that modify the ball’s path
KM © 2007
the University of Greenwich
13
Adobe Flash
Motion Tween
• But this is clumsy
• the interpolation is not effective
• Add guide lines using a guide layer to effectively
control motion
• force the symbol to follow a path
KM © 2007
the University of Greenwich
14
Adobe Flash
Guide Layer
• They’re still jagged -let’s smooth them and curve them
KM © 2007
the University of Greenwich
15
Adobe Flash
Guide Layer
KM © 2007
the University of Greenwich
16
Adobe Flash
Easing
• Easing is a way of controlling the frame rate to…
• accelerate into a scene
• decelerate out of a scene
note orient to path
KM © 2007
the University of Greenwich
17
Adobe Flash
Buttons
• There is an internal timeline (state-line)
associated with each button
• When the user interacts with the button (a
mouse event) the button references its internal
timeline and performs the action set for it
• There are four button states:
• Up (first frame) dormant no interaction with mouse
• Over (second frame) rollover by mouse
• Down (third frame) mouse button down and over
button
• Hit (fourth frame) not seen by user, defines the area
that responds to the mouse
KM © 2007
the University of Greenwich
18
Adobe Flash
Buttons
• Insert another layer and create a button symbol
• Double click the symbol to see it’s timeline
• Up must have some content
• visual element for user interaction
KM © 2007
the University of Greenwich
19
Adobe Flash
Buttons
• Over and Down
• a keyframe must be inserted (or copied from the Up state)
• behaviours can then be associated using ActionScript
• appearance of the button should be modified to show the state
change
• test the movie to see the button behaviour
Adobe Flash
Buttons
• Hit
• inserting a blank keyframe here stops the
button working
• defining the hit area is then necessary, this
supercedes previous hit area definitions
• why do this?
• If you are using text as a button only the stroke of
each character is considered a hit area. A hit area
allows all of the box space of the text to respond to
the mouse.
KM © 2007
the University of Greenwich
21
Adobe Flash
ActionScript
• ActionScript provides elements, such as actions,
operators, and objects, that you combine with
scripts that tell your movie what to do
• events, such as mouse overs, button clicks and key
presses trigger these scripts.
• e.g. use ActionScript to create navigation buttons for
your movie
• You can write simple scripts without a full
understanding of ActionScript.
• to begin working with ActionScript use the built-in
tutorial resource
Help > Tutorials > Introduction to ActionScript.
KM © 2007
the University of Greenwich
22
Adobe Flash
ActionScript
• In Flash, you use the Actions panel to write
ActionScript.
• Attach scripts to buttons, movie clips or frames
to create the required interactivity
• In normal editing mode the Actions panel helps
you to build scripts by choosing options from
menus and lists.
• In expert editing mode you enter text directly into
the Script pane.
• In both modes code hints help you complete
actions and insert properties and events.
KM © 2007
the University of Greenwich
23
Adobe Flash
ActionScript
• Add ActionScript to stop the movie in the last frame
select the
last frame
expert view
add script
Adobe Flash
ActionScript
• Add ActionScript to handle events for buttons
or find the button
in this menu
select the button
add script to replay
the movie
Adobe Flash
Sound
• Flash offers a number of ways to handle
sounds.
• Make sounds that play continuously
independent of the timeline
• (sound has it’s own timeline)
• Synchronize animation to a sound track
• Add sounds to buttons to make them more
interactive
• make sounds fade in and out for a more
polished sound track.
KM © 2007
the University of Greenwich
26
Adobe Flash
Sound
• There are two types of sounds in Flash:
• event sounds
• an event sound must download completely before
it begins playing, and it continues playing until
explicitly stopped.
• stream sounds.
• stream sounds begin playing as soon as enough
data for the first few frames has been downloaded
• stream sounds can be synchronized to the timeline
for playing on a web site.
KM © 2007
the University of Greenwich
27
Adobe Flash
Sound
• Use Adobe Soundbooth to create audio files
• or a wave editor such as GoldWave or CoolEdit
• Import the sound into a movie
File > Import to Library…
• Select compression options for individual sounds
• using the Sound Properties dialog box
• define settings for all sounds in the movie in the Publish Settings
dialog box.
• Use sounds in shared libraries, to link a sound from one
library to multiple movies.
• Use the ActionScript onSoundComplete event to trigger
an event based on the completion of a sound.
KM © 2007
the University of Greenwich
28
Adobe Flash
Sound
• Create a layer to carry the sound
• insert keyframes into the sound layer
• drag sounds from the library onto the stage
KM © 2007
the University of Greenwich
29
Adobe Flash
Publishing
• Movies are usually published as shockwave files
• embedded into HTML pages
File > Publish Settings…
• Can also publish in other formats - GIF, QuickTime, etc.
KM © 2007
the University of Greenwich
30
Adobe Flash
HTML Embedding
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Arrow</title>
</head>
<body bgcolor="#ffffff">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.c
ab#version=6,0,0,0" width="550" height="400" id="Arrow" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Arrow.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="Arrow.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="Arrow" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</body>
Flash creates an HTML template using <embed>
</html>
nested inside <object> for browser compatibility
KM © 2007
the University of Greenwich
31
Adobe Flash
XHTML Strict
• Strictly speaking there is no <embed> element in
XHTML
• Could simply not include the <embed> element
in the web page containing the shockwave
• but then some browsers may not work
• A workaround is to nest two <object> elements
• use CSS to hide one of the objects
• exploit some IE CSS quirks
• see the XHTML 1.1 example in the teaching material
KM © 2007
the University of Greenwich
32
Adobe Flash
Shape Tweening
• Flash can transform one shape into another over a
sequence of frames
• shape tweening (morphing)
• Insert two keyframes into the timeline
• Insert graphics into the keyframes
• Click on the timeline between the two keyframes and
select Shape from the Tweening menu in the properties
panel
• the frames are coloured pale green with an arrow between them
• Use the onion skin control to see the intermediate stages
• Add shape hints to control the tweening
Modify > Shape > Add Shape Hints
KM © 2007
the University of Greenwich
33
Adobe Flash
Shape Tweening
onion skin control
shape hints
Adobe Flash
Fonts
• Flash provides an extensive font library
• Insert some text onto the stage using the
Text tool from the toolbox
• Modify it’s properties
• size, colour, font, style, justification, kerning
• Text is created in symbolic form
• Break the text apart (Modify) to
• decompose strings into characters
• decompose characters into stroke and fill graphics
• allow shape tweening
KM © 2007
the University of Greenwich
35
Adobe Flash
Fonts
Adobe Flash
Forms
• Use text fields as input devices
• select type Input Text from the properties
• give the text fields a name
• Other input devices can be found in the
Components window
• checkboxes, menus, etc
• set their Properties
• Create Button symbols
• Add ActionScript to submit the form
KM © 2007
the University of Greenwich
37
Adobe Flash
Forms
more GUI
components
add code to
the button
KM © 2007
the University of Greenwich
38
Adobe Flash
Forms
on (release) {
// Prepare the data transfer object.
var sender = new LoadVars();
// Custom form-submission function.
function submitForm () {
if (validateForm()) {
// Assemble text field values into our LoadVars object.
get the text from
sender.user = name_txt.text;
sender.pass = passwd_txt.text;
the text boxes
// Hidden field
sender.foo = "bar";
// Transfer the data to the server-side script.
sender.send("http://staffweb.cms.gre.ac.uk/~mk05/cgi-bin/form.pl", this, "GET");
} else {
//respond to user
}
}
send data
function validateForm() {
// test input data
return true;
}
to a URL
submitForm();
}
KM © 2007
the University of Greenwich
39
Adobe Flash
We have not looked at...
• Sophisticated ActionScript
• Remoting
• AJAX like applications
• see teaching material for example
• XML and web services
• Video
• Flex
KM © 2007
the University of Greenwich
40
Adobe Flash
Why not to Flash
• Flash is evil
Macromedia says Flash is "the solution for
producing and delivering high-impact web
sites." It's also a solution for making your site
highly annoying and downright unusable.
dack.com
• Clearly there are accessibility issues
associated with Flash but does that make
Flash intrinsically evil?
KM © 2007
the University of Greenwich
41
Adobe Flash
Conclusions
• Pixel perfect applications
• no browser compatibility problems
• An IDE that really helps
• no more mucking around with markup
• Fast downloads
• compressed binary instead of flatulent markup
• Fast response
• easy partial page updates
• Not cheap
• but hardly expensive
KM © 2007
the University of Greenwich
42