Foundation FlashFoundation Flash
By : Mohd Faizol Sulaiman
IntroductionIntroduction
Welcome to Flash live. You have seen a lot of the great stuff Flash can do and it is now time for you to get into the game. I also suspect you are here because Flash can be one great big, scary application to those unfamiliar with it.
What we’ll cover in this What we’ll cover in this session:session:Exploring the Flash interfaceUsing the Flash stageWorking with panelsDifference between a frame and a
keyframeUsing frames to arrange content on the
stageUsing layers to manage content on the
stageAdding objects to the libraryTesting your movie
What we are going to do to begin with is take a walk through the authoring environment - called the Flash interface -pointing out the sights and giving you an opportunity to experiment with the features. By the end of the stroll, you should be fairly comfortable with this tool called Flash and have a fairly good idea of what tools you can use and how to use them as you start creating a Flash movie.
The Start page and The Start page and Creating a Flash Creating a Flash documentdocumentThe first thing you see when you launch Flash is the Start page. This interface, common to all of the Adobe CS3 applications, is divided into three areas. The area on the left side shows you a list of documents you have previously opened. Click one of them, and that document, provided it hasn’t been moved to another location on your computer, will open. The Open link at the bottom of the list lets you navigate to a document that isn’t on the list.
The Start Page
The middle area of the page is where you can choose to create a variety of new Flash documents. Your choices include a blank Flash document, a project aimed at a mobile phone or PDA (a mobile document), a series of code-based documents, and a Flash project.
The major change in this panel is the ability to select a new document based upon which version of ActionScript will be used in the document. Flash Professional CS3 marks the latest version of the Flash programming language named ActionScript. The previous version of this language, used in Flash MX 2004 and Flash 8, was ActionScript 2.0.
The right area of the screen is reserved for a variety of templates you can use.
The Extend area at the bottom of the Start Screen contains a link to the Flash Exchange. This is a hyperlink that takes you to a page on the Adobe site where you can download a variety of tools and projects that are available for free or a nominal cost.
What Can a Flash Animation What Can a Flash Animation Include?Include?
Vector-based graphics◦ Has the ability to "tween"
Automatically generates fill-in frames between a beginning and an ending image
Bitmap-based graphics ◦ Can be moved & rotated
Embedded fonts Can be moved, resized, skewed, rotated, recolored
Sound◦ Can synchronize sounds with animation frames
Flash EnvironmentsFlash EnvironmentsFlash authoring environment
◦ Design environment (graphics tools)◦ Scripting environment (create program
code)◦ You can download a free trial version at
http://www.adobe.com/Flash player
◦ Users must have this installed on their workstations
◦ If not present, automatically prompted to install when they start your animation
Flash Files ("Movies")Flash Files ("Movies")Authoring file
◦ .fla extension◦ This file creates the design version of your
animationPublished file
◦ .swf extension ("swiff" file)◦ Can't be edited◦ Can play on most operating systems◦ Fairly small files
Flash CS3 Authoring Flash CS3 Authoring EnvironmentEnvironment
Flash Stage
Tools Panels
Timeline
Menus
Layers
Properties
13
Flash 8 Workspace Flash 8 Workspace Tools panel Timeline
Panels
Property inspector
Stage
Currentscene
Layers
Workspace
Tools
Views
Colour
Options
Tools create the content of a movie.◦ Tools: Draw, paint, create
text, select objects, modify objects, and erase objects
◦ View tools: Zoom and pan◦ Color tools: Set stroke and
fill colors◦ Options: Modify the currently
selected tool
TimelineTimeline
You can organize and control the content of a movie over time.
Layers
FramesPlayhead
Frame rate
PanelsPanels
Panels provide additional tools for creating and editing movies.◦ Click the options menu to
view additional options for the current panel.
◦ You can hide or show panels by using the options on the Window menu.
Document PropertiesDocument Properties
1. Enter the following values into the Document Properties dialog box:
Title: PondDescription: My first Flash exerciseWidth: 400Height: 300Background colour: #0000662. Click OK and the stage will shrink to
the new dimensions and change colour to a dark blue. These changes will also be shown in the Property inspector.
StageStage
Screen ResolutionDisplay Area in Microsoft
Internet Explorer
640 x 480 620 x 318
800 x 600 780 x 438
1024 x 768 1004 x 606
1280 x 1024 1260 x 862
You compose movie content on the Stage.
Set Stage size to match a specific browser size
The Property InspectorThe Property Inspector
Document Size
Access thePublishing Settings
Background Colour
Frame Rate
Movie Name
Zooming the StageZooming the StageThere will be occasions when you will discover that the stage is a pretty crowded place. In these situations, you’ll want to be sure that each item on the stage is in its correct position and is properly sized. Depending on the size of the stage, this could be difficult because the stage may fill the screen area. Fortunately, Flash allows you to reduce or increase the magnification of the stage through a technique called zooming. Zooming the stage has no effect upon the actual stage size.
Select a zoom level using the Magnification dropdown.
Exploring the Panels in Exploring the Panels in the Flash Interfacethe Flash InterfacePanels can be moved around and opened or closed depending upon your workflow needs. We will now take a closer look at the more important panels that you will use every day. They include the following:Timeline LibraryProperty Inspector Actions panelTools panel Help panel
The TimelineThe TimelineThere is a fundamental truth to becoming proficient with Flash: master the timeline and you will master Flash.At its most basic, all animation is movement over time, and all animation has a start point and an end point. The length of your timeline will determine when animations start and end, and the number of frames between those two points will determine the length of the animation. As the author, you control those factors.
25
Frames and Keyframes Frames and Keyframes
Frames: Like films, Flash movies divide lengths of time into frames, which are organized on the Timeline.
Keyframes: Frames that define a change in what is displayed in a movie or include frame actions to modify a movie. When you open a new blank movie document, it contains one layer with one blank keyframe.
26
Frames and Keyframes Frames and Keyframes
Keyframe with content
Blank keyframe
Empty frames
Empty slots for new frames
27
LayersLayers
Layers are like multiple film strips stacked on top of each other, each with a different element that appears on the Stage. ◦ Graphics◦ Animations◦ Text◦ Sounds◦ Buttons◦ Frame actions
28
Symbols and LibrariesSymbols and LibrariesSymbols are elements you reuse within a
movie to reduce file size.Types of symbols include graphics, buttons,
movie clips, sound files, and text.A library is where you store and organize
symbols.When you drag a symbol from a library to
the Stage, you create an instance of the symbol.
SymbolsSymbols
Symbol: reusable object◦ Save an animation image as a symbols ◦ This saves file space because the symbol is only saved
onceTypes of symbols:
◦ Graphics (can't be shape tweened)◦ Movie clips (self-contained animation within a movie)◦ Buttons (Up, Down, Over, OverWhileDown states)
Saving SymbolsSaving SymbolsCreate a graphic in Flash then
convert it to a symbol◦Right-click the graphic – Convert to
symbolImport an existing graphic into a
Flash symbol library◦File – Import – Import to Library
To view your symbol library: Window - Library
31
Advantages of Using Advantages of Using SymbolsSymbolsEasy editing: If you change the
symbol in the library, all instances of the symbol are updated automatically.
Smaller file sizes: Symbols are downloaded only once, regardless of the number of instances you’ve included in the movie. This reduces the size of your published movies and decreases download times.
When you open Flash, your timeline will be empty, but you will see a series of rectangles - these are the frames. You may also notice that these frames are divided into groups. Most frames are white and every fifth frame is gray.
Flash movies can range in length from 1 to 16,000 frames, although a Flash movie that is 16,000 frames in length is highly unusual. The thing you need to keep in mind is that a frame shows you the content that is on the stage at any point in time.
The timeline is nothing more than a series of frames.
The content in a frame can range from one object to hundreds of objects, and a frame can include audio, video, code, images, text, and drawings either singly or in combination with each other. When you first open a new Flash document, you will notice that frame 1 contains a hollow circle. This visual clue tells you that frame 1 is waiting for you to add something to it.
Creating Flash AnimationCreating Flash Animation
Types of animation:◦ Shape: uses shapes you create in Flash
Can change shape position and/or properties Creates straight-line animation between a start position and
an end position Can only be used with vector images
◦ Motion: uses symbols you create or import into Flash (bitmaps) Can create straight-line animation between a start position
and an end position Can change the position or rotation of a symbol Can "kind of" make a symbol morph into a different symbol
Creating a Motion TweenCreating a Motion TweenSame as shape tweening, but
uses a symbol rather than a shape◦Allows you to use bitmaps◦Can be moved, resized, rotated,
morphed to a different symbol
Motion/Classic TweenMotion/Classic Tween
The way motion tweens used to be done
Allows more than one object to be tweened at a time
Allows frame scripts over the tween span
37
Animation with TweeningAnimation with TweeningTweening: A series of frames that change
incrementally to create smooth movement or change over time. ◦ You can set the beginning and ending frames and
have Flash automatically create the frames in between.
◦ Flash has theree types of tweening: shape tweening and motion tweening, guide tweening,
Shape TweenShape Tween
Used for morphing shapes Cannot be applied to symbolsCan be used for broken-apart text
(You have to select the text and do Modify/Break apart twice, or apply Ctrl-B twice).
39
Shape and Motion Shape and Motion TweeningTweening In Flash, a shape is a vector-based object.
You create a shape by using the drawing tools or by importing a vector drawing from another program.
Use shape tweening to animate one shape into another. You cannot shape-tween grouped objects, bitmaps, text that has not been broken apart, or symbols.
Use motion tweening to animate symbols, groups, and text blocks.
Creating a Shape Creating a Shape AnimationAnimation
Create a new layer ◦Draw the shape at the start position
Create a keyframe at the start timeCreate a keyframe at the end time
◦With the end keyframe selected, modify the shape to its end size, position, & properties
Select any frame between the beginning and ending keyframes and then create a "tween"
Create thelayer
Create thekeyframes
Create thetween
Create theinitial shape
With the endingkeyframeselected, create the final shape
42
Shape and Motion TweeningShape and Motion Tweening
Shape Group SymbolText
Block
Broken- apart Text
Shape Tween
yes no no no yes
Motion Tween
no yes yes yes no
Adding SoundsAdding SoundsCreate a sound layerCreate a keyframe when you want the
sound to play◦ With target keyframe selected, drag the
sound onto the stage
44
SoundSound
1. First, import a sound file into the library.
2. Add sound to a movie by dragging an instance of the sound into a frame.
3. To minimize file size, loop shorter sounds (to make them repeat).
45
ActionsActionsActionScript statements instruct a
movie to do something while it is playing.◦Frame action: An action attached to a
frame is triggered when the movie plays that frame.
◦Object action: An action attached to an object is triggered when the viewer interacts with the object, such as moving the pointer over a hotspot or clicking a button.
Stopping an AnimationStopping an AnimationBy default, animations play
continuously when publishedTo configure an animation to play
once:◦Select the frame in which you want
the animation to stop, right-click, click Actions
◦In the ActionScript window, type stop();
Stopping Stopping an an AnimationAnimation
Layer
Frame number
Command
PublishingPublishingSave distribution files
◦ File – Publish Preview – Flash or HTML to preview
◦ File – Publish Settings to view file types .swf, .html, .gif, etc. Select desired settings
◦ File – Publish to actually save files
Use HTML to create a new HTML document
Use Flash (.swf) file to insert into an existing HTML document◦ In Dreamweaver, Insert – Media - Flash
Using Flash to Create Using Flash to Create Embedded MultimediaEmbedded MultimediaYou can embed audio and video
files in Flash documents and then publish them on Web pages◦Advantages:
Most people have a Flash player installed on their computer
Gives you more control over object's appearance
Creating Embedded Flash Creating Embedded Flash AudioAudioImport the audio file to a Flash
documentCreate a timeline to stop the
audioYou can also create buttons to
start and stop it, and add commands so it doesn't automatically play…
Creating Embedded Flash Creating Embedded Flash VideoVideoFile – Import – Import VideoYou can import either a file or a
URL to a streaming serverYou can also create buttons to
start and stop it, and add commands so it doesn't automatically play…