Introduction to macromedia flash
Download
1 / 42

KM 2007 the University of Greenwich - PowerPoint PPT Presentation


  • 354 Views
  • Uploaded on

Introduction to Macromedia Flash Adobe Kevin McManus We are going to look at What is Flash an IDE to create shockwave media Animation timelines, symbols, tweening Programming with ActionScript Sound Publishing on the Web Morphing Fonts Forms Shockwave

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'KM 2007 the University of Greenwich' - Gabriel


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Introduction to macromedia flash l.jpg

Introduction toMacromedia Flash

Adobe

Kevin McManus

the University of Greenwich


We are going to look at l.jpg
We are going to look at

  • What is Flash

    • an IDE to create shockwave media

  • Animation

    • timelines, symbols, tweening

  • Programming with ActionScript

  • Sound

  • Publishing on the Web

  • Morphing

  • Fonts

  • Forms

the University of Greenwich


Shockwave l.jpg
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

the University of Greenwich


Shockwave4 l.jpg
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

the University of Greenwich


Animation l.jpg
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

the University of Greenwich


Flash l.jpg
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

the University of Greenwich


Flash7 l.jpg
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

the University of Greenwich


Symbols l.jpg
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

the University of Greenwich


Symbols9 l.jpg
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.

the University of Greenwich


Bouncing ball l.jpg
Bouncing Ball

  • Exercise to animate a bouncing ball

    • Make the ball

    • Turn it into a symbol

    • Create a motion tween

    • Modifying the tween

    • Guide lines

    • Easing

    • Buttons

the University of Greenwich


Make the ball l.jpg
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

the University of Greenwich


Keyframes l.jpg
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

the University of Greenwich


Motion tween l.jpg
Motion Tween

  • You can animate by creating intermediate keyframes that modify the ball’s path

the University of Greenwich


Motion tween14 l.jpg
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

the University of Greenwich


Guide layer l.jpg
Guide Layer

  • They’re still jagged -let’s smooth them and curve them

the University of Greenwich


Guide layer16 l.jpg
Guide Layer

the University of Greenwich


Easing l.jpg
Easing

  • Easing is a way of controlling the frame rate to…

    • accelerate into a scene

    • decelerate out of a scene

note orient to path

the University of Greenwich


Buttons l.jpg
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

the University of Greenwich


Buttons19 l.jpg
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

the University of Greenwich


Buttons20 l.jpg
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


Buttons21 l.jpg
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.

the University of Greenwich


Actionscript l.jpg
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.

the University of Greenwich


Actionscript23 l.jpg
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.

the University of Greenwich


Actionscript24 l.jpg
ActionScript

  • Add ActionScript to stop the movie in the last frame

select the last frame

expert view

add script


Actionscript25 l.jpg
ActionScript

  • Add ActionScript to handle events for buttons

or find the button in this menu

select the button

add script to replay the movie


Sound l.jpg
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.

the University of Greenwich


Sound27 l.jpg
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.

the University of Greenwich


Sound28 l.jpg
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.

the University of Greenwich


Sound29 l.jpg
Sound

  • Create a layer to carry the sound

    • insert keyframes into the sound layer

    • drag sounds from the library onto the stage

the University of Greenwich


Publishing l.jpg
Publishing

  • Movies are usually published as shockwave files

    • embedded into HTML pages

      File > Publish Settings…

  • Can also publish in other formats - GIF, QuickTime, etc.

the University of Greenwich


Html embedding l.jpg
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.cab#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>

</html>

Flash creates an HTML template using <embed> nested inside <object> for browser compatibility

the University of Greenwich


Xhtml strict l.jpg
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

the University of Greenwich


Shape tweening l.jpg
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

the University of Greenwich


Shape tweening34 l.jpg
Shape Tweening

onion skin control

shape hints


Fonts l.jpg
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

the University of Greenwich



Forms l.jpg
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

the University of Greenwich


Forms38 l.jpg
Forms

more GUI components

add code to the button

the University of Greenwich


Forms39 l.jpg
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.

sender.user = name_txt.text;

sender.pass = passwd_txt.text;

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

}

}

function validateForm() {

// test input data

return true;

}

submitForm();

}

get the text from the text boxes

send data to a URL

the University of Greenwich


We have not looked at l.jpg
We have not looked at...

  • Sophisticated ActionScript

  • Remoting

  • AJAX like applications

    • see teaching material for example

  • XML and web services

  • Video

  • Flex

the University of Greenwich


Why not to flash l.jpg
Why not to Flash

  • Flash is evil

  • Clearly there are accessibility issues associated with Flash but does that make Flash intrinsically 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

the University of Greenwich


Conclusions l.jpg
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

the University of Greenwich


ad