Flash Tutorial - Part - 1

Flash Tutorials
Daniel K. Schneider (ed.)
PDF generated using the open source mwlib toolkit. See http://code.pediapress.com/ for more information.
PDF generated at: Fri, 31 Oct 2014 04:56:08 CET
Contents
Articles
Flash and the CS6 authoring tool 1
Flash 1
Flash CS6 desktop tutorial 7
Basic drawing 18
Flash drawing tutorial 18
Flash layers tutorial 33
Basic animation 37
Flash animation overview 37
Flash frame-by-frame animation tutorial 40
Flash classic motion tweening tutorial 63
Flash CS6 motion tweening tutorial 81
Flash shape tweening tutorial 96
Flash embedded movie clip tutorial 106
Flash animation summary 113
Use of external media 126

Flash video component tutorial 126
Timed Text 133
Flash sound tutorial 138
Clipart 147
Texture 151
Advanced drawing 153

Flash object transform tutorial 153
Flash arranging objects tutorial 169
Flash colors tutorial 174
Flash bitmap tracing tutorial 186
Flash pen tutorial 192
Basic interactivity and use of components 194

Flash button tutorial 194
Flash components overview 212
Flash component button tutorial 223
Flash video component tutorial 237
More animation 245

Flash mask layers tutorial 245
Flash inverse kinematics tutorial 249
Flash CS4 motion tweening with AS3 tutorial 263
More interactivity 268

Flash using embedded movie clips tutorial 268
Flash augmented video tutorial 276
Flash video captions tutorial 294
Flash actions-frame tutorial 300
Flash datagrid component tutorial 303
Flash drag and drop tutorial 316
ActionScript 3 interactive objects tutorial 328
ActionScript 3 event handling tutorial 354
Working with ActionScript libraries 362

Flash ActionScript 3 overview 362
Flash using ActionScript libraries tutorial 368
AS3 tweening platform 373
FliNT particle system 389
Flash Papervision3D tutorial 398
Other Flash articles of interest 409

Flash CS3 keyboard shortcuts 409
Flash formats and objects overview 413
Flash - being organized 416
Flash 3D 418
References
Article Sources and Contributors 422
Image Sources, Licenses and Contributors 423
Article Licenses
License 428
1
Flash and the CS6 authoring tool
Flash
Draft
This page needs to be updated for Flash CS6, but principles remain the same ...
Definition
“Adobe Flash (previously called Macromedia Flash) is a multimedia platform originally acquired by Macromedia
and currently developed and distributed by Adobe Systems. Since its introduction in 1996, Flash has become a
popular method for adding animation and interactivity to web pages. Flash is commonly used to create animation,
advertisements, and various web page components, to integrate video into web pages, and more recently, to develop
rich Internet applications. Flash can manipulate vector and raster graphics and supports bidirectional streaming of
audio and video. It contains a scripting language called ActionScript. Several software products, systems, and
devices are able to create or display Flash content, including Adobe Flash Player, which is available free for most
common web browsers, some mobile phones and for other electronic devices (using Flash Lite).” (Wikipedia,
retrieved May 23 2009).
In addition, Flash is used as a format for desktop applications under the name of "Adobe Integrated Runtime"
(Adobe AIR).
We could distinguish four kinds of Flash authors: (a) People who use simple offline or online tools to generate
applications like slide shows. (b) Multi-media authors who create good looking Flash movies. (c) Multi-media /
light-weight programmers who create interactive Flash applications and (d) "Real programmers" who write so-called
rich internet applications. Today, many tools can produce runnable Flash contents. However, only Adobe's
commercial Flash authoring tools allow non-programmers to exploit the full capabilities of this format.
Programmers, on the other hand, may use Adobe's free Flex software development kit instead of the commercial
Flex builder.
Flash tutorials and articles in EduTech wiki

EduTech Wiki includes introductory Flash and ActionScript 3 (AS3) tutorials for Flash version 11 using mostly
Adobe Flash CS6 Professional and for Flash version 9 using CS3, plus some CS4/CS5 tutorials that introduced new
features not in CS3).
We used these in COAP 2110 (Fall 1 2007, Fall 2008, Spring 2010, Sprint 2013, Webster University), STIC III (Fall
2007, fall 2008, Geneva university), and STIC IV (spring 2010, in french, Geneva university) courses. Some
tutorials better than others and none is top quality so far, but most can serve as lecture notes and for some self-study.
Most tutorials have been upgraded to CS6 in winter 2013. CS4 and CS5 users can read CS6 tutorials, but should take
files from tutorials developed for CS3 and CS4. The interface changes between CS3 and CS4/CS5/CS6 are
substantial but not major. The differences between CS4, CS5 and CS6 are rather minor.
We produced three families of tutorials with some overlaps:
• Flash tutorials (Flash CS6 plus ActionScript 3 for non-programmers, and links to deprecated CS3/4/5 versions)
• Actionscript 3 (Beginner's tutorials for "pure" AS3, i.e. tool independent coding, these should be further
expanded, but are not so far ...)
• Flex tutorials (very few)
Flash 2
All materials (*.fla, *.swf, etc.) are available at http:/ / tecfa. unige. ch/ guides/ flash/ under a CC BY-NC-SA
licence.
1. Flash CS3 keyboard shortcuts
2. Flash ActionScript 3 overview -- a conceptual little overview of AS3
3. Flash formats and objects overview (not ActionScript objects !)
4. Flash - being organized (some advice for beginning Flash CS3 designers)
5. Actionscript 3 -- a complete programming language. An entry page for AS3 tutorials
6. Flash 3D -- overview page of of Flash 3D tools and AS3 libraries
The Flash framework

In the past, Flash was just a web animation/interactive multimedia technology. Today (2008) Flash is a serious
contender for one-stop rich internet application technology as the following picture shows:
Adobe Flash Platform for RIAs. Retrieved nov 2008 from http:/ /
www. adobe. com/ devnet/ actionscript/ articles/ atp_ria_guide. html
Flash 3
Flash versions compared

CS3 was a major break from earlier versions (Flash 8 and earlier) with respect to ActionScript. ActionScript 3 is
much more difficult to learn than ActionScript since it uses a modern typical user interface paradigm. In Flash 8 one
could directly attach scripts to objects. In Flash 9 and later scripts are attached to frames.
Changes/Additions in CS4:
• A completely redesigned interface
• Easier motion tweening (CS 3 motion tweening was renamed "classic tween")
• inverse kinematics
• Support for 3D animation of 2D objects.
CS5 includes:
• Better looping support in motion tweens. E.g. ctrl-select first keyframe, then ALT-drag to right after the tween
span, then inverse keyframes with the right click menu)
• Physic engine additions to inverse kinematics, e.g. spring functions
• Support for IPhone applications (not sure that it works, since Apple doesn't like other's developing environments)
• Much better text support
• Code snippets (helps beginners to write AS3 code).
• XML-based source code: Either compressed *.fla files or *.xfl folders.
• Easier management of cue points in videos (directly in CS5)
• Better deco brushes, e.g. you now can easily draw a tree...
CS6 includes:
• Better support for mobile technology
• and more .... (to document)
Since CS5, Flash includes code snippets. Therefore, these newer versions are better suited for teaching Flash to
beginners. However, for learning modern Flash, it doesn't make a big difference whether you use CS3, CS4 or CS5
or CS6. Some schools simply can't afford upgrading at an 18 month rate ...
Alternative technologies
General formats
• DHTML, i.e. the combination of HTML, CSS, DOM and JavaScript and AJAX, the same combo plus
server-client communication trough JavaScript. There exist various software packages (e.g. hippo [1]) and
libraries (e.g. GSAP [2]).
• SVG, an XML-based vector graphics format sponsored by WC3. SVG is a powerful format, but lacks support
from authoring tool and web browser makers. Adobe, before it acquired Macromedia, used to support SVG. SVG
works well in the Opera browser and increasingly better in Firefox.
• HTML5. It includes SVG and "DHTML"
• SMIL, an XML-based multi-media integration language that supports timing, layout, animations, etc. SMIL is
included in the full SVG profile. SMILE works with several media players (e.g. RealPlayer and Adobe Media
Player). A variant exists for Internet Explorer.
• Microsoft Silverlight [3], a mostly failed attempt by Microsoft attempt to have its own "Flash"
Others
See also multimedia authoring systems and computer games. Some of these have their own format, some can export
to more common formats.
Flash 4
Links for software and media elements
General / Indexes
• OsFlash [4] has a large comprehensive list of links to Open Source Flash projects, both those hosted on OSFlash
and elsewhere. Of particular interest are tools that generate flash in various ways.
Viewers
• Adobe [5] (Flash player download)
• Gnash [6] (Wikipedia article) A project which aims to create a player and browser plugin for the Adobe Flash file
format which is free software.
Authoring tools
• Adobe Flash CS5 Professional [7]. The commercial authoring tool. Students: You can get huge discounts either
through some stores or Adobe's education program [8] (takes some times to fight through this web site and to find
the appropriate page). In both cases you will have to send proof to Adobe before you will get a key. Teachers pay
more, institutions can make deals that are more difficult to get.
Adobe Flash CS3 Professional was released in April 2007, CS4 Professional in October 2008 and CS5 in April 2010.
CS4 adds inverse kinematics, easier motion tweening (i.e. object-based animation finally!) and some basic support
for 3D animations of 2D objects. CS5 adds for example a physics engine.
• SWISH [9]. An alternative set of commercial products to produce Flash. Much cheaper and somewhat easier it
seems, but doesn't export to *.fla files (so you can't import to the Adobe authoring tool). See the Wikipedia [10]
article.
• Salasaga [11]. An free (and OSS) Integrated Development Environment for producing animated swf files, similar
to Adobe Captivate. Goal is to create a free, easy to use GUI authoring environment that helps you create visually
impressive and actually useful learning material. Example swf output here [12].
Decompilers
A decompiler can translate an *.swf to *.fla. Useful if you want to learn (not steal) from examples on the web or if
you lost by mistake your *.fla sources.
• Sothink decompiler: Flash Decompiler [13], SWF Decompiler [14], SWF to FLA [15]
• Flash Decompiler Trillix [16]
• See also Flash Decompiler Trillix [17] (strange website without any documentation)
Translators and common formats

E.g. *.fla to *.html
• Wallaby [18] "Wallaby" is the codename for an experimental technology that converts the artwork and animation
contained in FLA files (retrieved Feb 2011).
• The *.fxp file format is used by Flash Catalyst to create a (compressed/zipped) Flex project archive that is
understandable by Flash Builder. I.e. designers can create a project in Catalyst and then hand it over to a
Flash/Flex programmer who will work with Flash Builder.
• Conversely, *.fxg enables cross communication among Creative Suite, Flash Catalyst and Flash Builder. “The
FXG format is new to Flash Professional CS5. It allows Flash to exchange graphics with other Adobe applications
such as Illustrator, Fireworks, and Photoshop with all of the complex graphic information preserved. Flash allows
you to import FXG files (version 2.0 only) as well as save selections of objects on the Stage or the entire Stage in
FXG format. FXG is based on a subset of MXML, the XML-based programming language used by the Flex
Flash 5
framework.” (Flash glossary: FXG [19], retrieved March 7 2011).
Special purpose authoring tools

There is an increasing variety of tools and for a wide range of people, covering casual users to programmers.
• Adobe Captivate [20]. An authoring environment to create simulations, scenario-based training, and robust
quizzes. Can import/export to Flash *.fla documents.
• Adobe Acrobat Connect [21] (formerly called Breeze) is a flash-based videoconferencing software.
• Adobe Flex [22] is a software development kit and an IDE for a group of technologies to make rich internet
applications with Flash, HTML, JavaScript etc.).
• Toufee [23], an online tool to make Flash presentations (movies). Free in a basic version. Drag and drop pictures
or special elements to a stage, add special effects, buttons, etc. Also saves in other formats.
• OpenOffice Impress (the power point clone) can produce *.swf
• Some capturing tools (see screen capture, photo gallery makers, and video editing software can export to Flash.
Server technology
• Silex [24] is free open-source CMS with a Flash Interface (and AS API). Source Forge project of the month June
2009.
• red 5 [25] is an open source Flash Server. I supports Streaming Audio/Video (FLV and MP3, Recording Client
Streams (FLV only), Shared Objects, Live Stream Publishing and Remoting (AMF) (nov/2008)
• Adobe has a global Flash framework [26] that includes e.g. a Flash Media Server Family.
Generating Flash
• Ming [27] Ming is a C library for generating SWF ("Flash") format movies, plus a set of wrappers for using the
library from C++ and popular scripting languages like PHP, Perl, Python, and Ruby.
• SWFMill [28] xml2swf and swf2xml processor that can be used to create (non interactive) multiframe SWF
animations.
• HaXe [29]. Programming language very similar to actionscript that can compile a SWF file for Flash Players 6 to
9. Free to use.
In addition, you also should know that you can import several vector graphics formats. e.g. Windows Metafile
formats into Flash CS3 (speeds up drawing).
Programming Editors for ActionScript

• Flashdevelop [30]. Free and open source tool that provides syntax support and an interface with the Flex
compilers.
• Some multi-purpose editors (like emacs also may support Actionscript 3 programming
• Adobe Flex Builder [22] - a commercial Eclipse plugin from Adobe, but that is free for education upon request.
Media for building your own scenes

• See clipart
• See texture
Flash 6
Extra Resources
• Flash and AS3 links - general
• Flash and AS3 links - tutorials
• Flash and AS3 links - documentation (Flash and AS3 Books, Reference Manuals and Cheatsheets)
• Flash and AS3 links - toolkits (AS 3 Toolkits, Libraries, Flash reusable components, AS 3 reusable code, etc.)
References
[1] https:/ / www. hippostudios. co/
[2] http:/ / greensock. com/ gsap
[3] http:/ / www. microsoft. com/ silverlight/
[4] http:/ / osflash. org/ projects
[5] http:/ / www. adobe. com/ products/
[6] http:/ / en. wikipedia. org/ wiki/ Gnash
[7] http:/ / www. adobe. com/ products/ flash/
[8] http:/ / www. adobe. com/ education/
[9] http:/ / www. swishzone. com/ index. php
[10] http:/ / en. wikipedia. org/ wiki/ SWiSH_Max
[11] http:/ / www. salasaga. org/
[12] http:/ / www. salasaga. org/ downloads/ alpha3/ projects/ Installing_on_Ubuntu804. html
[13] http:/ / www. sothink. com/ product/ flashdecompiler/ index. htm
[14] http:/ / www. swf-decompiler. com/
[15] http:/ / www. swf-to-fla. com/
[16] http:/ / www. eltima. com/ products/ flashdecompiler/
[17] http:/ / www. flash-decompiler. com/
[18] http:/ / labs. adobe. com/ technologies/ wallaby/
[19] http:/ / www. adobe. com/ devnet/ flash/ articles/ concept_fxg. html
[20] http:/ / www. adobe. com/ products/ captivate/
[21] http:/ / www. adobe. com/ products/ acrobatconnect/
[22] http:/ / www. adobe. com/ products/ flex/
[23] http:/ / www. toufee. com/
[24] http:/ / silex-ria. org
[25] http:/ / osflash. org/ red5
[26] http:/ / www. adobe. com/ flashplatform/
[27] http:/ / ming. sourceforge. net/
[28] http:/ / swfmill. org/
[29] http:/ / haxe. org/
[30] http:/ / www. flashdevelop. org/
Flash CS6 desktop tutorial

Draft
Introduction
Learning goals:
• Learn about various components of the Flash CS6 Desktop
• Learn how to configure the workspace and how to save configurations
• Learn about menu groups and other ways of interaction with Flash CS6
Prerequisites:
• none
Next steps:
• Flash drawing tutorial
• Flash layers tutorial
Alternative:
• Flash CS3 desktop tutorial
• Flash CS4 desktop tutorial
The Flash CS6 desktop works like the CS5 and the CS4 desktops. Differences are minor and mostly cosmetic. See
the Flash CS4 desktop tutorial if you own an older CS4 or CS5 version.
Opening the desktop from the Flash welcome screen

After launching Flash, you will see a welcome panel in the middle of the tool. Most of the CS6 functionality are
disabled at this stage. The welcome panel offers a few options for creating a Flash file.
Flash CS6 Welcome Screen
To start working with a Flash file, you may either use the File Menu or select an item within the welcome panel. The
welcome panel includes three columns
• To the left are predefined templates defining somewhat standard workspace sizes (i.e. x/y dimensions of the flash
clip that the users will see)
• In the middle you can select various types of Flash variants that we will not introduce here
• In the right column, you have links to Adobe's introductory texts from the Flash Dev center. Contents will open in
your default web browser.
If you tick Don't show again on bottom left, you won't see this panel anymore, but the same options are available
through the File Menu. If you want it back: Edit->Preferences; General Category; On launch: select Welcome
screen.
To start learning the Flash desktop, we now suggest to click on ActionScript 3.0. This will open a 550x400 px
workspace and configure Flash for using ActionScript 3 (aka AS3). AS3 is the most recent Flash scripting standard
and works fine since Flash 9, i.e. since summer 2006. Avoid ActionScript 2.0.
Now click on ActionScript 3.0 and enter the tool for real ...
Layout and configuration of the Flash Desktop

Definition: By Flash Desktop (Desktop in short) we mean the whole CS3 authoring environment that you can see
when you work on some Flash animation.
The default desktop(s)

When you first open a the Flash Desktop you will not see all the tools you later will use nor will it be necessarly
adapted to the task you will engage in. You can arrange the Flash Desktop in various ways (see below).
The desktop is arranged in as many columns of panels as you like, but usually about three. We usually keep the
following organization
• the main tool panel and the properties panel to the left,
• the time-line and the drawing area (stage) in the middle column
• some tools panels and libraries in the right column
Selecting the right desktop layout depends on both the task and the size of your screen. Developing Flash with a
small laptop is painstaking.
Play with the provided desktop layouts
On top right, there is pull-down menu that allows you select from several preset configurations. The same menu is
also available through the Window->Workspace menu.
After you added your own configurations, the pull-down menu might look like this:
Flash CS6 workspaces menu
For the kind of stuff you will learn in our Flash tutorials series, the best initial bet is to use the designer layout.
Configuring the desktop layout

Before we introduce the menu items, we suggest that you learn how to arrange your Desktop.
Firstly, we'd like to show how to display additional panels (tools and libraries). Having most tools and resource
libraries at your fingertip is in our opinion always a good idea if your screen is big enough. If you can afford to buy
CS6, it maybe is also possible to invest in a monitor that can display 1900x1200 pixels or more.
Panels are tools providing various editing and object mangement functionalities. Since some of these functionalities
can't be found through the menus (and the other way round), you have to learn what kind of panels exist. All existing
panels can be opened through the Window' menu on top.
CS6 lets you arrange such panels in various ways:
• They can be floating (undocked). Usually you would move them outside the Flash Desktop. This is very practical
if you have a large screen or dual monitor setup.
• They can be docked to the panel areas to the right, the middle or the left. In each of these areas you can dock a
new panel below or above an existing one.
• They can be docked in groups of panels (each one will show as a tab)
If at some point all the panels you put on the desktop did disappear, just hit F4 (or Window->Show Panels). F4
toggles between more space for drawing and more tools.
To dock a panel, simply grab it with the mouse (press the left-mouse
button in a empty area in its top bar) and then drag it to a "place" that
will "light up" in some light blue color.
• If you see a blue line (vertical or horizontal) and then release the
mouse the panel will dock below or to the right of the line as a
"lone" panel
• If a rectancle will light (i.e. the borders of a panel), you will dock
your panel next to the other panel(s), i.e. it will appear in a tab.
If this is not clear, just play moving around panels and pay attention to
lines or rectangles that light up. Don't worry about "breaking the
desktop". You always can re-start with a standard layout as we
described above.
The following three screenshots should illustrate the general principle.
Docking in an empty panel area to the right Docking a swatches panel to the right (creating a
If you want to reproduce this example, close all panels (see below) or new column)
select the "Debug" configuration. Then open the swatches panel: Menu
Window->Swatches or hit CTRL-F9. Now try to dock this panel.
In the sceenshot to the right, the Swatches panel (shown in transparent color) is being dragged to the very right. You
should see a faint blue vertical line on your flash desktop if you move the panel close to the right border.
Panel groups - docking together with an other panel example
Panels can be organized in groups. We usually lump together panels with similar functionality, but professional
Flash designers also probably keep visible the tools they use most. In addition, they might know how to open a panel
with a shortcut and keep some on a second monitor.
Anyhow, in the next example, the (transparent) Color panel is in the process of being docked together with the
swatches panel. The borders of the swatches panel area is blue, i.e. ready for docking
Docking the color panel as a tab
Now the color panel is firmly docked as a "tab" grouped together with the swatches panel. You could add another
panel below this panel group, e.g. the libary panel.
Docking the library panel below the

color/swatches panels
Other panel operations

Frankly, we never use these features, but they may come handy if you want to maximize the drawing area and/or if
you have a small monitor. Also you may accidently do one of these things, so don't be surprised if panel minimizes
as an icon or as a simple bar...
To undock a panel
Drag it to some place that doesn't light blue.
Closing a panel
• On top-right of each panel is a pulldown menu. Click on "close" or "close group". You also can undock a panel
and the click top-right on the "x" icon.
Minimizing / Iconizing panel groups
Panel areas (left and right) can be minimized by double-clicking on its top bar or by using the tiny arrow.
Iconized panels
• This option is only useful if you got a small screen.

• If you just need more space for drawing, hit F4 and F4 again to get the full workspace back.
Adjusting panel size
You can adjust panel width to a certain extent: Just drag the right or bottom borders. Each panel has a minimal size
(width and height) and you can't reduce below it. E.g. if you want a classic vertical main tools panel you can, but you
need to put it into its own column (else the other panels will impose a minimal size).
Saving an environment
To make sure that you can find a configuration again, you may save it under a given name. If you do different kind
of work with Flash, you may save several kinds of working environments.
• Window->Workspace->Save Current ...
If you are happy with what you did, save your configuration now ...
An example configuration
Here is an example configuration Daniel K. Schneider was using for Flash CS4. I like to have most tools at my
fingertips and I have a big enough monitor to allow for this. My real workspace is bigger than the one shown in the
screen capture, which I made smaller in order to fit into this text.
Example configuration of a CS4 Flash desktop
Roughly, the tools are arranged in the following three-column layout:
Drawing tools Time-line Color + Alignment + Transformation

Properties Drawing area Library + Components + Info
Built-in and online Help

There are two sorts of support:
• Built-in help
• Help from Adobe's website
Built-in help is quite good, although contextual help could be better (like being a systematic option on the right-click
menu).
For some stuff you can get context-dependent help, i.e. learn something about certain objects, an item, etc. It will
open a more or less appropriate section in the help tree. Select an item first (e.g. in the Workspace or in a panel), then
either get Help from the Menu / hit F1 / or click on the little help icon in the properties panel. In addition, in the
built-in help menu you can find links to external sites.
Trouble
In some Flash versions and on rainy days, help doesn't work for me. You may have to update help but you also may
have to install / upgrade other software (e.g. Adobe application manager or Adobe Air). Good luck !
• Upgrade CS6 first !
• Removing older versions is also a good idea (if and only if you don't need these anymore). E.g. when I tried to
update CS6 documentation I landed in an updater for CS 5.5. However, uninstalling also can uninstall software
you want to keep. E.g. I lost Acrobat Pro when I removed CS5.5. I never ever had a flawless
installation/uninstallation experience with any Adobe Master Pack. The absolute worst one was with CS3.
• Within the built-in help texts there can be broken links (Adobe reorganized their web site on a regular basis).
Also, you should be aware that updating documentation after a new release can take a few month (or more for
foreign language versions). Therefore you might land in CS5.x documentation (which doesn't matter much since
the interface remains the same).
However there is good stuff on Adobe's website.
Most important Adobe online resources for absolute beginners
• Video tutorials can be useful to beginners:
• tutorials [1] at Adobe
• Flash Help topics
• Flash Professional Help / Help and tutorials [2]
• This page centralizes various resources (but not all) in a single page. I includes Adobe videos (see above),
devnet articles (see below), external resources, Adobe help pages and more
• Flash developer
• Flash Developer center [3]
• You can find thematic introductions to certain topics, e.g. Learn Flash Professional in five steps [4] or
Animation Learning Guide [5]
• Consult Flash and AS3 links - documentation for some navigation aids to Adobe's online documentation.
• The overall Flash Help page
• Flash resources [6]
• In particular, you can find HTML and PDF versions of the built-in help. You may find online HTML pages
more practical than the internal help window since the built-in window can not be detached from the Flash
workspace and will hide your workspace area while your are reading. An good trick is to dock the built-in help
against the Main tool panel (as shown in the screen capture above). Finally, PDF versions of the on-line site
can printed, consider printing in some cases.
Getting ready to work with CS6

In this section we will summarize functionalities of some Flash components. We will introduce more functionalities
in other tutorials. This is just a short overview.
The Work area and the stage

The stage
The stage in the middle (white by default) is the area where you work on your Flash contents. It will display the
default size of your flash clip as the end-user will see it.
The workarea
The stage is part of the work area. The gray part of the work area (also called backstage) can contain graphic
elements on which you are working and that you plan to integrate into the stage sometimes, i.e. make them visible to
the user. In deployed Flash "movies" this area also could hold motion animation objects that later will "walk" into
the scene.
Setting up the size of the stage and other parameters
You can change the size of the stage (i.e. of the flash clip) in two ways.
(1) Use the Modify->Document menu:
• You can redefine the size of the stage. Stage size is the size your final Flash application will have. Therefore,
think twice about the size before you start composing...
• You may change the background color (per default it is white and it will display as white in your animation).
• In the same Document menu, you also should give your work a title and a short description
(2) You also can change size and background color by clicking on an empty spot in the workspace and then modify
its parameters the properties panel that sits to left in the "designer" workspace configuration
Resized stage with different background color
The Menu Bar

Flash lets you use tools and manipulate objects in three different ways:
• Interact through menus
• Use shortcuts
• Use a context menu on object (right-click)
• Interact through panels
On top of the desktop is the menubar (on the Mac it will be on top of the screen). Available operations in menus and
panels are context dependent, i.e. they differ in function of what you are working on in the workspace. They also
adapt to the Flash "Publish Setting" (e.g. ActionScript 2 vs. ActionScript 3).
Here is a short and incomplete summary of the menu groups' functionalities:
File
Opening and creating new files
Import assets (e.g. a picture)
Definition of Publish Settings (you may change settings you initially defined)
Edit
Editing the scene
Editing elements that are active
View
Define zoom level, grids, snapping (i.e. how the workspace displays)
Note: Other important "view" items are in the Windows menu

Insert
Add new layers, frames, symbols etc. into the timeline
Add a new scene
Modify
Modify elements on the workspace, e.g. convert a graphic to a symbol (make it a reusable object) or change
the shape of a drawing
Modify timeline elements
Text
Change text properties
Spell checking
Commands
Run macros
XML export / import
Control
Test animation in various ways (including just sub-elements)
Debug
Tools to find errors in your scripts
Window
Configure the workspace (add/remove panels)
Help
Built-in help and links to useful on-line resources
Now you should be ready to start learning how to create drawings with Flash. Move on to the Flash drawing tutorial.
References
[1] http:/ / tv. adobe. com/ product/ flash/ Video
[2] http:/ / helpx. adobe. com/ flash/ topics. html
[3] http:/ / www. adobe. com/ devnet/ flash. html
[4] http:/ / www. adobe. com/ devnet/ flash/ training. html
[5] http:/ / www. adobe. com/ devnet/ flash/ learning_guide/ animation. html
[6] http:/ / www. adobe. com/ support/ documentation/ en/ flash/
18
Basic drawing
Flash drawing tutorial

Draft
Introduction
Learning goals
Learn about some features of the Flash CS3 drawing environment
Learn painting and drawing simple (!) objects
Prerequisites
Flash CS3 desktop tutorial or Flash CS4 desktop tutorial
Flash layers tutorial (first part)
Related pages
texture and clipart (import media elements)
Materials (*.fla files you can play with)
http://tecfa.unige.ch/guides/flash/ex/drawing-intro/
Quality and level
This text should technical people get going. It's probably not good enough for beginners, but may be used as
handout in "hands-on" class. That is what Daniel K. Schneider made it for. Screen captures were made with
CS3, but the overall logic is the same for CS4 and CS5.
Next steps
• More about drawing: Flash object transform tutorial and Flash arranging objects tutorial
• Any other introductory tutorial indexed in the Flash article.
Alternative
• Flash CS3 drawing tutorial
Setting up the stage

Besides choosing the right settings for publication (Flash version) with which we shall not deal here, you should
select the right size for your your stage, i.e. the size of your future flash document. You can do this either when you
create a new file or later.
Defining document size

Creating a new document
Flash lets you create a new document from various templates: File->New. Then choose from General or Templates.
These templates either just define the size of your stage or load "half-baked" interactive applications that you will
have to clip. Ignore the latter for now ...
• Size of the stage
• Version of Flash (e.g. Actionscript 2 or 3 or AIR for desktop/mobile phone applications)
• The Media Playback templates contain for example tools to make a slideshow.
Anyhow, for learning about Flash's drawing feature, don't worry about the template to choose from. Just make sure
that you have enough space to draw. If an initial size turns out to be too small or too big, you simply can modify the
document's size (see next).
Modification of a document
With Modify->Document (or by clicking on an empty spot in the stage and then changing the properties) you can:
• Redefine the size of the stage.
• Change the background color
• Give it a title and a short description
What size for a Flash document ?

Size of your Flash document depends on its purpose. Since Flash documents (unlike well made HTML pages) have a
fixed size, you must find a good compromise between readability (users should be able to read and distinguish all
elements) and the horizontal/vertical space you flash clip will use.
Larger flash documents
A default documents takes up 550x400px. This makes the document viewable without scrolling on a computer with
a bad screen resolution of 800x600px. Do not forget that a screen also contains a tools bar (in most Operating
systems) and that Flash is usually viewed within a web browser that also contains menu bars, a bottom bar and some
pixels to the left and right.
Anyhow, most people today have bigger screen resolutions so you certainly can go bigger than 550x400.
Banners and other embedded items
Advice depends on their purpose. Think hard about your potential target population (small screens, big screens,
mobile phones, etc.)
Configuration of the drawing environment

Firstly you should know that drawing tools exist in two forms:
1. Drawing tools in the main tools panel (that appears by default on top left of the desktop if you selected the
"designer" configuration)
2. Tools available through various panels
Below is a screenshot I made from a simple drawing using the oval tool and the pencil tool.
• You can see that the properties panel (left) will display properties of the object that is selected or being drawn.
E.g. when you use the pencil, it will display color of the stroke, size of the stroke, type of the line, fill color, etc.
• The same is true for the color panel that we display in the lower right.
The Flash CS6 drawing environment (designer workspace)
Since these panels give you shortcut access to features of objects you are drawing, it's a good idea to keep them open
while you draw.
Some definitions
Strokes vs. fills

• When you draw something with a pencil tool or another drawing tool like the pen or the line tool, then the
lines you draw are called strokes.
• Wen you crate graphics with the rectangle , oval, etc. tools you will by default both get strokes and fills. The
insides of these drawing objects are fills and the outlines are strokes, i.e. both have various forms of color. You
may choose to remove either stroke or fill (using the no color icon in a color selection tool.
• When you use the paint tool , then you create fills (not strokes).
Colors
There are several types of colors:
• None: You may choose to draw without fill or stroke
• Solid: Standard colors
• Linear: Gradient color changes that go from one side to another
• Radial: Gradient color changes that goes from inside out
• Bitmap: You can paint with an imported bitmap. This is particular useful with textures. E.g. to draw floors, walls
or outdoors scenes with repetitive tiles.
To select a color type, there is a pull-down menu in the color panel.
• Read the Flash colors tutorial if you want to know more colors and gradients ...
The main tools panel

The main tools panel contains the major drawing tools. We suggest to leave this panel docked in the upper left side
(since it's frequently used). But depending on your screen size, you can display it either grouped (as shown) or as a
long column (try the "essentials" workspace layout).
The main tools panel organizes tools by different categories:
1. First, selection and transformation tools
2. Next Drawing tools (annotations in red)
3. Next, color manipulation, eraser etc,.
4. Next color selection
5. Finally, options (these change according to the tool that you select)
Flash CS6 drawing tools panel
Options change according to tool that is selected. E.g. in the screen capture to the left you can see how the tools
panels shows with the selection tool (left) and the brush tool (right).
Some tools are piled on top of each other, i.e. there are variants of a similar kind. In this case you can see a little
down arrow in the icon. To see variants you must press the left mouse for a while or Shift-click. E.g. instead of the
Oval tool you could for example display/access the Rectangle tool.
Merge (shape) vs. object drawing

Flash has two drawing models:
• The merge model will erase shapes below something you draw (but not graphic objects as defined next)
• The object drawing model draws shapes as separate objects (that you later can manipulate like in a typical vector
graphics program).
Usually, you rather should work with the object model since the shape of each object can be easily modified later
on. However the merge model can be used to draw complex shapes, e.g. you can draw a circle and then carve off
things by drawing over it. The merge mode is also useful when you "paint" things (as opposed to drawing). You later
can convert "paintings" to objects of course.
By default, the object model may be turned off, so turn it on by clicking on the Object drawing button. You can find
in the options section of the tools panel after clicking on some drawing tool (e.g. the Pencil). You can see if it's on
when there is a rectangle drawn around the button, like this:
You can see the difference between the 2 kinds of objects created in the Properties Panel:
• Objects are called Drawing Objects
• Simple drawings (from the merge model) are called Shapes.
The behavior of tools changes according to mode used and it's not so obvious to remember what Flash does.
In merge mode
• In merge mode, when you draw a shape over another shape, it erases the shape underneath by default. You can
change this with the control options (see later)
• When you draw another object (line, pencil, etc.) it will draw over the painting, but not erase it.
In object mode
• Shapes drawn in object mode with the brush tool are drawn either within, on top or behind objects depending on
how to set the controls of the brush tool.
• Shapes drawn in object mode with the pencil, the pen tool etc. are drawn on top of other objects. But in the
object mode they can be moved behind with the right-click->Arrange context menu.
If you already tried to draw more complex shapes, you noticed that it is difficult to work with a single layer (e.g. to
select objects), so you now have to learn how to work with layers.
• If you are not familiar with layers, please read the Flash layers tutorial now.
Conversions
• To convert an object (instance) into its original components : Right click->Break apart
• To convert some shapes into a drawing object: Select them first (e.g. with the Lasso), then select Menubar
Modify->Combine Objects->Union
• To convert some shapes into a symbol, Right-click; Convert to Symbol
List of standard tools

Also see the figure "Items of the Flash CS3 tools panel" above in order to identify the corresponding icons in the
tools panel. Some tools are stacked on top of each other. Hold down the mouse button for while to see the hidden
ones.
Selection tool
The selection tool ( ) lets you select elements (shapes, strokes, fills, symbols, bitmaps) in the work area by clicking
on it (simple click). If you wish to select several objects together hold down the SHIFT key or use a the lasso or a
selection box (click then drag the mouse).
Advanced uses:
• Double-clicking would put you into object editing mode for various parts (depending on where you click). To
return from this mode (which we will not explain here), double-click in some empty area in the workspace.
• This tool also can act as a distortion tool ! See the Flash object transform tutorial. If no object is selected (e.g.
click on an empty spot in the workspace), then you can use this tool to distort shapes. Move it close to an edge or
a corner and pull as soon as the cursor changes. Always make sure that you see a big "cross-hair" cursor before
you start moving around anything.
Subselection tool
The subselection tool ( ) allows you to select paths of an object so that you can make more sophisticated
modifications. Click on the outlines of objects. You then can drag around the little squares and dots that will appear,
i.e. modify portions of shapes. See the Flash object transform tutorial for details.
If you want to modify a symbol (in the properties panel you can see something like "Instance-of") you have to break
it apart: Right-click->Break Apart.
Free Transform and Gradient Transform tools

The Free Transform tool ( ) will allow you to make several kinds of transformations. When you select an object
with this tool and then move the mouse over different spots, you will that the mouse cursor changes shapes. Each
one will allow you do different transformations:
• Scale an object: double-ended arrow
• Rotate an object: circle arrow
• Skew (distort an object): double ended double arrow
To do a proportional scale, hold down the SHIFT key and then drag a corner.
There are more options to the free transform tool, e.g. so-called envelope transform, see the Flash object transform
tutorial if your are curious about this.
The Gradient Transform tool ( ) is hidden below the free transform tool (by default) and allows you to change
the ways in which color gradients flow. Hold down the mouse for a while and then change the tool. See the Flash
colors tutorial.
Lasso tool
With the lasso tool ( you can select several objects or parts of a shape.
This tool also includes a "magic wand" mode (see the optional controls) and a polygone lasso ( that allows
selection by clicking on several spots.
If you want to edit parts of a shape, either double-click on the object until it becomes a shape or break it apart
(right-click menu).
Pen tool
The pen tool ( ) allows you to make the most complex drawings, i.e. defining paths using so-called Bezier curves.
Do not confuse this with the more simple pencil tool.
See the Flash pen tutorial (currently unfinished ...)
Text tool
Add text.
In the properties panel you may define various text properties such as fonts, color and positioning, alignment, etc. If
you click on the paragraph symbol, you can define indent, line spacing and margins.
Line tool
The line tool ( ) allows drawing simple lines (no surprise here ...)
Rectangle and other tools

On the same spot of the tools panel you got several tools. By default you will see the rectangle tool. To select
another tool: hold the left mouse button down for while and then select the one you want.
• Rectangle tool (by default): Draw simple rectangles. In the parameter's panel you can define strokes and filling
properties.
• Rectangle primitive tool: Lets you define additional properties like rounded corners
• Oval tool: Draw ovals
• Oval primitive tool: Define in addition other features, such as start/end angle, inner radius etc.
• Polystar tool: Define polygons and stars (there is a small pull-down menu in the properties panel that you should
not overlook !)
Below you can see a few drawings. The screen capture has been taken with the Polystar tool activated.
Various drawings with the rectangle, oval,

polystar tools (CS3, same principle)
Pencil tool
With the Pencil tool you make drawings like with a Pen. However, there is optional support to draw
straight or smooth lines since drawing with a mouse isn't very obvious. You can define various options.
"Line" drawing Options
In the options section you can select different ways of drawing support. I.e. the the straight icon looks like this: .
Below is a screen-dump that demonstrates the difference between straight, freehand and smooth drawing.
The three pencil drawing modes (CS3, same

principle)
Stroke, color and line properties.

In the properties panel you can define various options like stroke (pen) color, fill color, various dashes or not, and
how the end of lines should look.
Brush tool
The paint brush tool lets you paint, i.e. create shapes ( ) made of simple fills. There are several special effects and
several modes.
Object or merge mode
• In merge mode you only can paint fills
• In object mode you can add a stroke to your painting (by default it is off). Look at the properties panel.
The Brush Mode
With the "Brush Mode" in the options section (not the properties panel) you can select the paint mode. Make sure to
understand these and to verify that the wanted mode is on, else you likely run into frustrations ...
• Paint Normal: paints over lines and fills on the same layer. Like painting with a "heavy" paint.
• Paint Fills: Fills empty areas leaving lines unaffected.
• Paint Behind: Paints in blank areas of the Stage on the same layer, leaving lines and fills unaffected (this may be
be default, I am not sure).
• Paint Selection: Applies a new fill to a selection. Therefore, before you start painting select a fill color first, then
select the object with the selection tool, then paint. This is the quickest way to color drawings.
• Paint Inside: Fills the area within a "fill" (i.e. where you start paining) and does not overpaint lines. If you start
painting in an empty area outside a fill, painting will not affect existing filled areas.
Selection of brushes and size
Choose from the options in the options section ....
Ink Bottle tool

This tool allows you to apply color changes to the strokes of drawings.
• Select the ink bottle
• Then select either a Stroke color (and/or a Fill Color if the object is a graphic) from controls in the main tools
panel. If want to make more sophisticated changes (e.g. apply a gradient) do this through the color panel.
• The click on objects you want to change.
You also can change the color of a fill or stroke through the properties panel or the color panels, but make sure to
select the object(s) you want to change first.
Paint bucket tool

The paint bucket tool works like the ink bottle tool. It has two purposes:
• Change colors of simple shapes (primitive drawings). Tip you can change the color of strokes by editing
(double-click)
• Change color of fills (inside of a graphics object)
• Fill in empty areas (insides of drawings made with the pencil for example)
Procedure
• First, deselect everything
• Next, click on the paint bucket tool
• Select fill color (and style)
• Click on shape or fill (inside shape of a graphic object)
Filling a closed graphic with paint
Of course, you also could change paint of shapes and object by first selecting the thing in the stage, and then by
making changes in the properties or the colors panels.
Tips:
• If you can't select a fill color, then try to click on the black and white icon and then set the colors again. I don't
know if that is a bug or a feature ....
• If you want to fill an area that is not entirely closed, you can do so by modifying the gap size by changing the
"Gap size" control in the tool panel options. E.g. choose "Close medium gaps". Then click again on the shape or
inside the area you want to fill
• If the paint bucket "won't work" on the "insides" of a complex drawing then:
• Make sure that the area is closed (no gaps between the enclosing strokes or shapes)
• Also try making the area you want to fill into a single drawing: menu Modify->Combine Objects->Union
Eyedropper tool
You can select a color from some spot on the workarea. The tool will then automatically change to the paint bucket
tool (see above).
Erasor tool
Erase stuff. See the Flash object transform tutorial for details.
Option controls and tools configuration

Some option tools are always displayed, some only for certain tools.
Hand tool
• Move the stage around (useful for big drawings/small screens or with a strong zoom)
Zoom tool
• Zoom in/out
Pen color
• Select the pen (stroke) color
Fill color
• Select the fill color
Swap color
• Change fill color to stroke color
Configuration of the Tools panel

The Tools panel can be configured via Edit->Customize Tools Panel (but for now I suggest not to change anything
there).
Configuration of drawing settings

Select Edit->Preferences and then change parameters in the section Drawing. (no need to do this now). Basically
you can modify how Flash helps you drawing objects (e.g. connected lines, vertical/horizontal) and how it identifies
objects when you click on them.
Painting simple objects

In this chapter we will show how to make a complete (but simple!) drawing. Disclaimer: Daniel K. Schneider doesn't
even remotely feel to be graphics designer. If you are not familiar with layers, you now really should have a look at
the Flash layers tutorial
Firstly, you can find lots of free clipart (drawings) on the Internet. As a principle it is a better idea to search for
vector graphics as opposed to bitmaps and for three reasons:
• Vector graphics are smaller
• They can be re-edited
• They adjust nicely to size. A smaller or bigger version still looks as good as the original.
To find vector objects you can for instance type in Google "free clipart download" or see the links in the clipart
article (finding good and free clipart on the web is not easy).
Most often, clipart is distributed in *.wmf format (Windows Meta File format). Flash can handle this format. It also
can handle Illustrator *.ai format, Enhanced Windows Metafile *.emf, Freehand, Flash *.swf, and Autocad *.dxf. It
can not handle SVG (but you can open SVG files with Illustrater and then copy/paste).
You also can import a series of bitmap formats like the "standard" *.png, *.jpg, *.gif, but also Photoshop *.psd and a
variety of Quicktime formats if it is installed on your computer.
Drawing fuzzy objects

The basic principles for paint-challenged people like me is the
following:
• Create a new layer. It is usually a good policy to create a new
layer for each drawing. Do not worry about size and position at
this stage, since you can later move the drawing around and
resize it.
• Zoom in (like 200%), e.g. with View->Magnification
• Select merge mode from the Object Drawing tool and set the
brush tool to overpaint.
• Keep the painting as simple as possible
• Use large Pencils or brushes for starters, then small ones to An apple tree drawn in merge mode
work on borders if needed.

• Use the eraser to trim off strokes that went too far
• Draw stuff that will go to the background first and then overpaint
E.g. To the right is a simple apple tree with a green snake (I later erased).
Drawing animals and such
A really ugly cat drawn mostly in object mode
• Find a recipe to draw these, e.g. on Google type: "how to draw a cat"
• Then reproduce if you can ;)
• Rather use object mode and disable stroke since these models often ask you to overlay ovals. Without stroke you
may overlay various geometric shapes of the same color.
E.g. here is a cat made as explained in Creature Features [1].
Alternatively you also can first draw the object with the pencil tool (or the pen tool) and then use the Paint Selection
or Paint inside mode of the brush tool to apply colors.
Of course in the same drawings you can mix pencil, pre-built objects like rectangles and paint. E.g. draw the outline
of house with the pencil and then draw the roof with the paint tool.
Save each object as symbol

Once you are happy with a drawing, you should convert it to a (reusable graphic symbol): Right-click->Convert to
Symbol; Graphic. E.g. call it "cat". You then can remove the layer you used to draw this object, since the raw
drawing is no longer needed.
convert a select object to a symbol

Once you have it in the library you can use several times, in various sizes and distortions. You also can copy the
object and e.g. make a new one with different colors ... If you are unhappy with the results (as I ought to be), you can
just break a graphic apart and restart again...
When you insert a library object into stage you can make it smaller. Drag it from your library into the stage (but onto
another layer) and then select the Free Transform tool; Press Shift (proportional reduction) and make it as small (or
big) as you like.
Importing clipart
Flash can handle various vector formats and even better: you can modify these within Flash. However, most free clip
art is in the SVG format and that cannot be directly imported to Flash (Shame on adobe !)
To import:
• File->Import->Import to Stage or alternatively Import to Library
• If you import it to the stage and like it, then save it to the library with Right-click->Convert to Symbol; Graphic as
explained above.
A cat from www.free-clip-art.com. Copyright: Personal and educational use
E.g. here is a cat I imported from Free Clip Art [2]. This site has free clipart images for personal use. You can use
them for school, fun, non-profit Web sites, and other personal needs.
Using SVG Clipart
• Get one from http://www.openclipart.org/
• Display the SVG image in your browser, then just File->Save As the SVG page
• Open the SVG in Adobe Illustrator
• Select All
• Copy
• Paste to Flash (using default settings)
• Use directly ALT-CTL-S to resize.
Read more in Clipart
Adding background and Sky

I suggest to draw background stuff with a new layer You can do this beforehand or after. In order to see either
background or objects you can put all other layers in "outline mode". Click on rectangles near each layer or on the
rectangle on top.
Making use of the "Layer Outline Mode"
• First of all you can change the background of the stage: Modify->Document; then change the background color.
• If the layer with your background drawings (e.g. sky) is drawn over the objects instead of the other way round,
just move this layer (either to the top or to the bottom depending on your settings).
A result (sort of)

Here is the result of a three times two trees, two of my cats, an imported cat and a little house.
A flash document with trees and cats
Using textures
Of course, you may find the grass to be too ugly. A good solution might be to replace a background color with
textures. Search on the web for "free textures grass" and save the file (usually a *.jpg).
You should be aware that there are textures and textures meant to be tiled. Simple pictures (if smaller than the stage)
will produce tiles that you can see (not exactly what you want). So instead you can search for something "free
tileable grass textures". If you can't find good tiles, you may learn how to do this with this Photoshop [3] from
DadyyCool.
• You then can resize the image if it is too big and/or crop it.
• After that, deselect all objects (click in the gray area) or select the object you want to paint.
• Then open the color panel and select type: Bitmap from the pulldown menu. Import the bitmap and select it (you
also will find a copy of the bitmap in your library).
• Then paint the outline of your textured area with the brush tool (in the "Paint behind mode" (see brush tool above)
• Then fill the rest with the paint bucket.
• You can change the way textures are applied with the free transform tool (see Flash colors tutorial).
A flash document with trees and cats
This result is not exactly better, but it's different and you can see that you can draw with bitmaps :). Of course one
now also should repaint the house and the trees. I also rotated the gradient for the sky by the way.
Of course, one can do better graphics and colors. See more advanced Flash tutorials on drawing, e.g. the Flash object
transform tutorial, the Flash arranging objects tutorial or the Flash colors tutorial
Files to download
You can download the *.fla files here:
• http://tecfa.unige.ch/guides/flash/ex/drawing-intro/
• flash-cs3-drawing-trees.fla is the one with a simple background
• flash-cs3-drawing-trees3.fla uses gradients and drawings outside the stage are clipped away (so it's a clean
version of the above and I will use this one in the Flash motion tweening tutorial).
• flash-cs3-drawing-trees2.fla is the one with the textures.
References
[1] http:/ / www. abc. net. au/ creaturefeatures/ draw/ draw_a_cat. htm
[2] http:/ / www. free-clip-art. com/ members/ content/ cgi-bin/ imageFolio. cgi?direct=Animal_Clip_Art
[3] http:/ / www. learn2photoshop. com/ tilabletex. htm
Flash layers tutorial

Draft
This entry is part of the Flash tutorials.
Introduction
Learning goals
Learn how to use layers
Flash/CS level
Flash CS3 - CS6
Prerequisites
Flash CS3 desktop tutorial or Flash CS4 desktop tutorial or Flash CS6 desktop tutorial. It's probably a good
idea to use a layout similar to the ones I suggest there.
You also may first look at the first part of the Flash drawing tutorial.
Next steps
• One of the basic animation tutorials
Quality and level
Screen captures were made with CS3, but the overall logic is the same for CS4 to CS6.
handout in "hands-on" class. That is what Daniel K. Schneider made it for...
It aims at beginners. More advanced features and tricks are not explained here.
Introduction
Layers help you deal with more complex Flash projects. Working with layers has several advantages:
• You can draw and edit objects in one layer without affecting objects in another layer.
• You can lock layers (to protect their embedded objects from unwanted editing)
• You can hide layers, make them visible (i.e. you can see their objects in the workspace), or you can display just
the outlines of their objects.
The layers tool is part of the Timeline panel.
Overview picture
The layers tool is in the left part of the timeline. Annotations in the following screen capture highlight a few
functionality we will further explain below.
The Flash CS3 Layers tool
Drawing in a layer
To draw, paint, or otherwise modify a layer simple click on the the layer name in the Timeline to make it active. A
pencil icon next to it indicates that the layer is active.
Creating new layers and deleting layers

When you create a Flash document, it only contains a single layer, i.e. less than you need.
To create a new layer, either:
• Insert->Timeline->Layer
• Click on layer icon (left most item in the Edit bar just below the timeline)
• Right-click on an existing layer, then Insert Layer
Inserting a new layer
As soon as you create a new layer, you should give it meaningful name. Right-click on its name (something like
Layer 2) select Properties and change the name. Alternatively, to display this properties panel, just double-click on
the layer name.
To delete a layer and its contents: Right-click->Delete Layer. You also can lock/hide other layers with this menu.
Before you delete a layer make sure that you save its objects if you plan to keep them. You can insert them in the
library as symbols or copy them to another layer.
Show only outlines of a layer

• Click on the rectangle next to the layer name. If this rectangle turns empty then you only should see outlines of its
objects.
• You also can change the outline color by double-clicking on the rectangle. E.g. if your background is green (like
the grassy hills in our example), the outline should be of a different color.
Lock and hide layers

Click on the dots below the appropriate hide/lock/display icons in the panel to apply locking/hiding/displaying to a
single layer, or on the icons themselves to apply an operation to all layers (e.g. lock them all).
TIP: Always lock all layers and then just unlock the layer on which you are working. This way you can prevent
yourself from making mistakes.
Moving layers
To move a layer in the stack simply grab it with the mouse and drag it up or down. Position of the layer has an
influence on the order objects are drawn. E.g. if a moving object should pass in from of a tree and it doesn't, then
drag the animation layer up or down.
Drawing order depends on the load order defined in the Publish Settings (File menu)
Example
The following screen capture shows hidden and locked layers:
• The painting layer is active (the pencil is shown)
• The objects layer only shows outlines and in addition it is locked (the lock sign is on and the rectangle is empty.
Its objects are drawn in light green, i.e. the color of the rectangle)
• The Sky layer is hidden (The red "X" sign is on).
The Flash CS3 Layers tool, shown with outlines

of layer and a hidden layers
Layer folders
Once your documents get really complex, you can organize layers into folders, e.g. one folder per task: Static
objects, animations, background etc.
To create layer folders, either:
• click on the folder icon in the Edit bar (third item)
• or use Insert->Timeline->Layer Folder
You then can drag around layers. Hiding, locking etc. works more or less like with folders (try it out ...)
However, at some point you also will have to decide whether you really want to work with an "everything is in the
main time line model". Consider organizing and planning your project with embedded movie clip objects (see the
Flash embedded movie clip tutorial). Putting everything in the main time line is like programming with "goto's"...
Scenes
Once your animation gets bigger, you most certainly should break it down to several scenes. There is no urgency to
work with scenes if you are new to Flash, but you should know about this now. Scenes are played in the order you
defined them.
To insert a new scene
Menu Insert->Scene
To rename/reorder the scenes
• Menu Window->Other Panels->Scene (SHIFT-F2)
• Then drag up or down the scenes
• To rename, double-click on a scene name in this panel.
To navigate between scenes
• Either via the scenes panel, or the Edit Bar (displayed below the timeline). If you can't see it:
Window->Toolbars->Edit Bar.
One advantage of using scenes is that you can just test a single scene (menu Control->Test->Scene).
37
Basic animation
Flash animation overview

Draft
Overview
Learning goals
Learn about the various methods to create animations in Flash
Learn about timeline representations of the Flash Professional Interface (you can consult that later again)
Prerequisites
Flash CS6 desktop tutorial (or Flash CS3 desktop tutorial or Flash CS4 desktop tutorial)
Flash drawing tutorial (at least some of it)
Flash frame-by-frame animation tutorial (not absolutely needed, but probably useful)
Next steps
Flash classic motion tweening tutorial (optional, CS3-style tweening for CS3 and better)
Flash CS4 motion tweening tutorial (CS4, CS5, CS6)
Flash shape tweening tutorial (all)
AS3 TweenLite tweening engine (CS3-CS6, intermediate)
Moving on
Flash CS4 inverse kinematics tutorial
Flash animation summary
Flash CS4 motion tweening with AS3 tutorial
After these (or even before) you should be ready for interactivity. E.g. do the Flash button tutorial
Quality and level
This is just an overview article.
Introduction
Animation means changing properties of objects (e.g. position, size or color) over time.
In Flash CS3 to CS6, you can create several kinds of animations and associated special effects. To create animations,
there are several options:
(1) Frame-by-frame animation Frame by frame animation is an ancient technique used for cartoons. This leads to
precise results but is time consuming, since you will have to draw each picture. See the Flash frame-by-frame
animation tutorial.
(2) Motion tweening with the CS Flash authoring interfaces Wikipedia [1], retrieved 20:45, 7 August 2007 (MEST)
defines “Tweening, short for in-betweening, as the process of generating intermediate frames between two images to
give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings
between the keyframes which help to create the illusion of motion. Tweening is a key process in all types of
animation, including computer animation. Sophisticated animation software enables one to identify specific objects
in an image and define how they should move and change during the tweening process. Software may be used to
manually render or adjust transitional frames by hand or use to automatically render transitional frames using
interpolation of graphic parameters.”. In other contexts, one uses also "morphing". E.g. PCMag [2] (retrieved 20:45, 7
August 2007 (MEST)) defines tweening as “An animation technique that, based on starting and ending shapes,
creates the necessary "in-between" frames. See morphing”.
In CS4/CS5/CS6, there exist two variants:
1. Classic motion tweening as known from CS3 and earlier versions. See the Flash classic motion tweening
tutorial. You can skip this.
2. Motion tweening, a more oject-oriented method introduced in Flash CS4. See Flash CS4 motion tweening
tutorial
(3) Shape animations
• Shape tweening, since you can position key frames of shapes in different positions.
(4) Motion and shape tweening with ActionScript code
There exist many different possibilities, e.g.
• Using a third party library like the Greensocks AS3 TweenLite tweening engine. Must need to know for
everyone who plans to create interactive educational scenarios.
• Dynamically changing x and y positions of a display object over time, e.g. through using the Timer class. See the
unfinished Flash games tutorial for an example.
• Using the Adobe "fl.motion" classes. See the Flash CS4 motion tweening with AS3 tutorial
(4) Inverse kinematics
• Inverse kinematics is the animation of armatures for shapes or connected symbols instances. See Flash CS4
inverse kinematics tutorial
What can be animated with built-in motion tweening ?

In Flash 9/10/11, you can animate all sorts of compound objects:
• Symbols, i.e. any object that is an instance of a library object, e.g.
• Graphic symbols
• Movie clips
• Buttons
• Compound objects (things that you grouped together)
• Text boxes
The ground rules are the following:
• Motion animation means just changing x/y positions of an object over time. Of course during the motion path one
also can change other properties, e.g. orientation, size and tint.
• With all built-in tools, an animation is usually done in a single layer with a single instance of something that sits
in the library.
• With ActionScript it depends, but usually you also would use "heavy" objects like movie clips.
Flash CS4/5/6 timeline representations of interpolations

Adobe show different types of animations using the timeline in the following way: According to Animation basics
[3]
, (retrieved 11:17, 25 April 2010 (UTC))
• A span of frames with a blue background indicates a motion tween. A black dot in the first frame of the span
indicates that the tween span has a target object assigned to it. Black diamonds indicate the last frame and any
other property keyframes. Property keyframes are frames that contain property changes explicitly defined by you.
You can choose which types of property keyframes to display by right-clicking (Windows) or Command-clicking
(Macintosh) the motion tween span and choosing View Keyframes > type from the context menu. Flash displays
all types of property keyframes by default. All other frames in the span contain interpolated values for the
tweened properties of the target object.
• A hollow dot in the first frame indicates that the target object of the motion tween has been removed. The tween
span still contains its property keyframes and can have a new target object applied to it.
• A span of frames with a green background indicates an inverse kinematics (IK) pose layer. Pose layers contain IK
armatures and poses. Each pose appears in the Timeline as a black diamond. Flash interpolates the positions of the
armature in the frames in between poses.
• A black dot at the beginning keyframe with a black arrow and blue background indicates a classic tween.
• A dashed line indicates that the classic tween is broken or incomplete, such as when the final keyframe is missing.
• A black dot at the beginning keyframe with a black arrow and a light green background indicates a shape tween.
• A black dot indicates a single keyframe. Light gray frames after a single keyframe contain the same content with
no changes. These frames have a vertical black line and a hollow rectangle at the last frame of the span.
• A small a indicates that the frame includes an associated script (created with the Actions panel).
• A red flag indicates that the frame contains a label. This allows for instance to write AS code like:
''GotoAndPlay("label");''
• A green double slash indicates that the frame contains a comment.
• A gold anchor indicates that the frame is a named anchor.

References
[1] http:/ / en. wikipedia. org/ wiki/ Tweening
[2] http:/ / www. pcmag. com/ encyclopedia_term/ 0,2542,t=tweening& i=53271,00. asp
[3] http:/ / help. adobe. com/ en_US/ Flash/ 10. 0_UsingFlash/ WS42406111-940D-4eff-A9F3-16EFDA4F1340. html
Flash frame-by-frame animation tutorial

Draft
Introduction
Frame-by-frame animation means displaying a series of images, one image after another. That creates the illusion of
a movie. Real movies actually work that way too.
Learning goals
Learn basic Flash CS6 frame-by-frame animation, one kind of Flash animation.
Learn about embedded movie clips and symbol edit mode.
Save a frame-by-frame animation as reusable movie clip.
Learn about some object transformation features
Prerequisites
Flash layers tutorial
Flash drawing tutorial (for starters some of it, at some point you'll have to dig into it a bit)
Moving on
If you want to do serious frame-by-frame animation, you probably better drawing skills. In particular, you
should read the Flash object transform tutorial and the Flash arranging objects tutorial since you'll have to
change graphics from one frame to the next one.
If you respect our advice on "being modular", you also should look at the first parts of the Flash embedded
movie clip tutorial
The Flash article has a list of other tutorials. You probably should continue with the Flash classic motion
tweening tutorial or Flash CS4 motion tweening tutorial. It will teach how to make fly things. You also can
read the Flash shape tweening tutorial which tells how to do morphing animation.
Quality
This text should technical people get going and may not be good enough for self-learning beginners. It can be
used as handout in a "hands-on" class. That is what Daniel K. Schneider made it for...
Level
Materials (*.fla files you can play with)
http://tecfa.unige.ch/guides/flash/ex6/frame-by-frame-intro/
Alternative version
Flash CS3 frame-by-frame animation tutorial (deprecated)
The principle
Purpose: Frame-by-frame animation gives you very detailed control over the movie (since it's the technology used to
make animation pictures until recently before different 2D and 3D computer animation techniques came into the
existence). Disadvantage is that frame-by-frame drawing is very time consuming work. Therefore, most often,
designers use a combination of frame-by-frame animation and interpolation techniques (called tweening in Flash
lingo). Often, frame-by-frame animation is used to animate single objects that in turn can be used as part of larger
Flash animations. A typical example are buttons that highlight when you move the mouse over them or when you
click on them.
Flash animations are defined through so-called timelines. Each flash file has a timeline, i.e. the so-called main
timeline. Within each flash file you then can insert so-called embedded movie clips. Each of these has their own
timeline. In other words, you can include animated objects within animations.
According to Adobe's Creating your first Flash Professional CS6 document [1], “The Timeline controls the timing
that specifies when elements in the movie appear on the Stage. The playhead begins at Frame 1 and moves from left
to right as the movie proceeds through the frames. Drag the layers in the Timeline to arrange the layering order of
graphics on the Stage. Graphics in the higher layers appear to be placed on top of the graphics in the lower layers.”
The following example is a very simple animation that lasts for 15 frames. Since we set the frame rate to 12
frames/second, it will last about 1.25 seconds.
Files:
• flash-cs6-simple-fbf.html [2]
• flash-cs6-simple-fbf.fla [3] (source code)
Below a screenshot of this example.
Basic frame-by-frame animation
Executive summary of the procedure:

• Insert drawings in various keyframes (as seen in the picture above). Any graphic will do. You also could use as
many layers as you like. Technically speaking frame-by-frame animation is simple !
• Over time (from frame to frame), these drawings should differ only a bit in general.
• Creating a simple animation chain as above works like this:
• (a) Create a drawing.
• (b) Make sure that it or its frame is selected, then hit F6 to copy the drawing to a new keyframe
• (c) Click into the new frame and modify the drawing.
• (d) repeat (F6, drawing)
Further below, we will provide more details through examples and more extended "how to's"
Play time:
• Either load this flash-cs6-simple-fbf.fla [3] file and make some modifications
• Or implement a quick and dirty animation yourself.
Testing the result
• Press CTRL-Enter (or menu Control-> Test Movie).
The big decision - film or modular thinking

When you plan a simple flash project, you can think of it in two very different ways
• Plan to work like a computer designer and think of your flash as combination of modular elements. We prefer that
design philosophy.
• Plan to work like a Flash graphic designer and use hundreds of frames and dozens of layers, i.e. use a "film"
metaphor. Most Flash textbooks for non-programmers would teach you this.
Animations are called "movie clips". This is confusing, but can be explained by the Flash history. A flash file as
whole can be a movie clip. But you also can have clips within clips within clips, e.g. a Flash file can contain several
movie clips that in turn may contain other clips.
Let's have a look at two variants of an example that will demonstrate these principles.
Flying rocket in the main timeline

The following screenshot shows a rocket frame by frame animation [4] made in the main timeline.
• The animation only uses three frames, i.e. we only implement some minimalistic "flaming" animation.
• We use three layers for drawings, one for the rocket and two for the flames
• Yellow flaming is made with three different drawings in frames 1-2-3 (layer 2)
• Red flaming is made with three different drawings in frames 1-2-3 (layer 3)
If you want to add a second, a third rocket and other flying objects you will have to duplicate the three layers. In the
six new layers you will have to move the drawings to positions. This is awfully complicated and we will not show an
example. Therefore, in most cases, do not create animations in the main timeline.
Rocket frame-by-frame animation in the main timeline
Example to look at and to play with:

• flash-cs6-rocket.html [4] (result)
• flash-cs6-rocket.fla [5] (fla source code)
Flying rocket symbols, no main timeline animation

A much smarter way is to define a single rocket as a so-called embedded movie clip, also called movie clip symbol.
Think of an embedded movie clip as flash within flash.
• We use one layer for the background (sky, moon and starts)
• We use another layer to position several instances of the same rocket movie clip that sits in the library. As you
can see we also changed their respective size.
Use of rocket frame-by-frame animation embedded movie clips
An embedded movie clip (also just called symbol or movie clip symbol) has its own timeline. You can create a new
symbol via the menu Insert->New Symbol (Ctrl-F8) or by selecting an object on the stage, right click -> Convert to
symbol.
Editing the rocket frame-by-frame animation embedded movie clip
Once you got a rocket movie clip, you can create as many instances as you like. Just drag the clip from the library to
the stage. What's even better is that you could copy one movie clip symbol from one flash file to a different one. I.e.
you easily can reuse your components.
Example:
• flash-cs6-rocket-symbol.html [6] (Result)
• flash-cs6-rocket-symbol.fla [7] (Source code)
Rocket science, i.e. how to work with frames in order to create some sort of pulsing flame, is explained further
below in this article. Let's now introduce the frame-by-frame animation engineering.
Read more about embedded movie clips in:
• Flash embedded movie clip tutorial
The timeline and keyframes

The principle of frame-by-frame animations made with drawings is that you draw various versions of the same
objects in different frames. These are then displayed one after each other in rapid order (most often between 12-24
frames / second).
Frames and key frames

A frame is a drawing that is displayed at a given time. Usually any drawing uses several layers.
In the timeline, each "stop" is called a frame. Frames are numbered from 1 to whatever length your animation has.
Let us start by introducing the meaning of a few symbols in the timeline. We later will come back to these.
If you feel that display of timeline frames is too tiny, you can fix this with the time line options (little pull-down
menu in the upper right). This menu also allows displaying a preview of the animation (but that takes up space of
course).
Time line options pulldown menu
When you start drawing with Flash, everything is drawn by default into a first frame in layer 1.
The default keyframe is frame # 1
E.g. if you insert a letter, for example, you will see something like in the screen capture just above.
• The first frame in the timeline will have a dot inside. Therefore, if you see a frame with a ".", it means that there
is a drawing inside the frame for this layer. A frame with contents is called a keyframe.
• A frame with a small white circle is called an empty keyframe. It will display nothing.
• A frame without a dot, doesn't have any drawing inside and it will either display the drawing from the prior
keyframe (black dotted frame to the left) or nothing if there is no keyframe to the left.
• The playhead showing the current frame (the red rectangle) sits on top of frame one by default and you can move
it around to inspect your animation.
Executive summary - creating a frame-by-frame animation

Before pressing a button or using the menu, make sure that your are positioned in the right frame in the right layer. It
also is a very smart idea to lock all other layers (see the Flash layers tutorial)
Let's recall the principle:
• Frame-by-frame animation works by displaying drawings after drawings at a rapid pace. By default, Flash CS6
will show 24 frames (drawings) by second.
You don't need to have a drawing in every frame, i.e. a keyframe every five frames is good enough. A keyframe is a
frame that contains a picture or other object. In the timeline, a keyframe is indicated by a black dot.
Here are some useful shortcuts:
• F6 - Copy the graphics of the previous keyframe (Insert Keyframe).
• F7 - Inserts a blank keyframe
• F5 - Extends the drawing of the previous keyframe in the timeline up to this point (Insert Frame).
Right-click on a frame gives you more options, e.g. destroy or empty a frame...
The procedure:
1. Create a new layer or reuse a layer
2. Draw something (for starters, try a "stick man").
3. Insert 3-5 empty frames: Press F5 4 times
4. Click on the last frame (the white rectangle)
5. Press F6 - Create a second keyframe with content identical to the first
6. Slightly change the design of this new keyframe
Repeat as desired (ie 3 times F5 and F6, go to the end, then change the drawing). If your animation is complex, using
multiple layers
In your timeline, you should see something like:
Now, add a nice static background:

• Create at least one new layer and draw a picture, such as a sky.
• Go up to the last frame of the animation and for each of these new layers, press F5. You should see something
like this the timeline:
Now test your animation sequence:

• Press CTRL-Enter (or use the menu Control-> Test Movie)
• You can also move the red control that sit on top of the timeline to the left or to the right.
We now will introduce three frame-by-frame animation examples. We sometimes will do this in the main time line
of the *.fla file. Alternatively (and better), you first should create a new so-called movie clip symbol and then edit
that object.
A simple stickman
We will shortly show how to create a "stickman" animation using an embedded movie clip. Look at
stickman-cs6.html [8] first.
Step 1 - New Flash file and background
• Create a new Flash file
• Draw a simple background in the first layer and call it "background" or something. E.g. we just drew 2
rectangles...
• Lock this layer
• Create a new layer and call it Stickman animation
Step 2 - Create a drawing and make it a symbol
• In the new layer created in step 1, create your drawing
• Select all the elements
• Right click -> Convert to symbol. Select "Movie Clip" and name it "Stickman"
• Kill the drawing on the stage (!). Don't worry, it now sits in the library
• Now drag the Stickman from the library to the stage. You could make several clones and adjust their respective
size in the properties panel. You might see something like this:
First drawing of our stickman
In order to edit this movie clip symbol again, double click on the object on the stage or double click on the library
item. In the first case, you will see the background as shown in the next picture
First drawing of our stickman
Simply click on "Scene 1" about the stage in order to return to the stage...
Step 2 alternative - Create a new embedded movie clip first
• Insert a new symbol (Ctrl-F8)
Create new movie clip symbol - part 1
• Call it "Stickman" and make it of type "Movie Clip"
Create new movie clip symbol - part 2

• You are now editing the Stickman symbol. You should see an empty stage, "layer 1" and a little + sign in the
middle
• Start drawing around this "+" sign which roughly should be in the center of your drawing.
Step 3 - Frame by frame animation
(same for both methods)
• Hit F5 (about 5 times)
• Click in the frame with the white rectangle or the one after it
• Hit F6 (create new keyframe with a copy of the old one)
• Modify the drawing a bit, e.g. just turn an arm
• Hit F5 (about 4 times)
• Hit F6
Repeat ...
Drawing tips:
If you play with a stickman, then you might learn how to use the Free Transform tool ( ) in order rotate limbs
(change the center point and rotate).
• Select the tool
• Select a limb and move the little white circle towards and end
• Then move the mouse to a corner until the mouse cursor changes to rotation. Then drag to rotate.
• Read the Flash object transform tutorial for more information
Enjoy !
Example:
• stickman-cs6.fla [9] (source)
• stickman-cs6.html [8]
A simple letter after letter animation

The following animation was made in the maintime line and with Flash CS3. You can open the example files in
Flash CS4/5/5.5/6 without problems. The only problem one may encounter with CS3 files is that since CS 5.5 fonts
must be embedded (that's a small change).
Have a look at the this simple animation [10] first.
The *.fla, *.swf and *.html files flash-cs3-frame-by-frame-hello.* can be found at http:/ / tecfa. unige. ch/ guides/
flash/ex/frame-by-frame-intro/
We will produce an animation that will display the word "HELLO", one letter after each other. The principle is quite
simple: We will insert new letters in new keyframes. One could do this by inserting "H" into keyframe 1, then add
"E" to keyframe 2 etc. In order to slow down the animation, we insert a keyframe about every 5 frames.
Step 1
We insert the letter "H" in frame 1 (alternatively you may start in frame 5, i.e. the user won't see the "H" when the
frame loads. Anyhow, later you always can add extra empty frames.
Steps 2 to 5
Now we repeat this procedure by adding new letters in new frames. So first we will transform frame 5 into a new
keyframe. It is important to understand that there are two kinds of new keyframes:
1. Blank ones that will clear the stage, i.e. the objects will be gone. That's not what we want here.
2. Keyframes that carry "forward" contents of the keyframe before. We will use this one.
The procedure is the following (see the picture below)
• Right-click in a frame, then select Insert Keyframe (not insert blank keyframe). Alternatively hit F6, i.e.use the
[Flash CS3 keyboard shortcutsshortcut.
Editing keyframe #5
Repeat this, until you incrementally spelled out "HELLO".

Step 6
Test if it works:
• Firstly you can simply move back and forth the playhead (red rectangle that sits on the top of the timeline)
• Then you can test the movie through the menu Control->Test Movie or hit CTRL-Return. This will open a up a
new window where you can see more or less what an end-user would see.
Step 7
Now we want to tune a few things:
(1) You may not be happy that the movie starts with letter "H" already displayed. Right-Click on Frame 1 and Insert
Frame (not a keyframe!) or hit F5. Repeat this 4-5 times. Then hold down the mouse and drag the black dot in the
new frame 1 to frame 5.
(2) Your Movie may be too slow or too fast. Flash animation made with the CS3 drawing tools is not time-based (as
in SVG for instance) so you have to fix a frame rate. You can change the frame rate (number of pictures
shown/second) in two ways:
• Click on an empty spot on the stage and change the rate in the properties panel that you should see below
• Menu Modify->Document (CTRL-J)
For this animation, about 15 frames are about right I think.
(3) You also may align the letters. But you have to do this in each keyframe, else they will jump around, which
actually may be an effect you like.
To align all letters in all frames: Click on the Edit multiple frames button.
Select all frames
• Then, you can select the frames you want to edit together by moving the "[" "]" sliders on top of the timeline
• Then select letter-by-letter groups, then use the align pane (Window->Align), but untick To stage.
This tool is quite dangerous, since it's hard to control what happens in each frame. Make sure to save your file before
you engage in this ! Anyhow, next time make sure to place your objects where they should be.
Step 8
Now you can publish this as a web page.
• Make sure to save the animation in some place you can remember, because Flash will put the exported Flash,
HTML and JavaScript there.
• Then, click on an empty spot in the stage and click the "Publish Settings" button or menu File->Publish Settings.
• Click the publish button when you are happy with the settings. It will put all the necessary files in the same
directory where your *.fla file sits.
• Then click on either the Flash *.swf file or the *.html file and see if it works.
As an exercise, you now can add extra keyframes after frame 1,5,10, etc. and move up or down letters. Alternatively,
read on ...
Frame-by-frame shaky animation

Sometimes, e.g. in trailers or in little advertisement boxes you can see some sort of shaky or jittery icons, like in the
example [11] we are going to discuss now.
The *.fla, *.swf and *.html files flash-cs3-shaking-hello.* can be found here: http:/ / tecfa. unige. ch/ guides/ flash/
ex/frame-by-frame-intro/
Step 1 - change stage size
• Define size and background color of your stage (I use 400x200 px this time). To do so, click with the selection
tool on an empty spot of the stage and change the properties of the stage in the properties panel (usually shown
below the stage).
• This time, we will use two layers, so create 2 layers, call one of these "hello".
Step 2 - draw a hello word
• In the "hello" layer, draw the word "Hello" with the pencil for a change
• Select the pencil
• Put the Pencil tool into "Smooth mode".
• Put Flash into object mode (circle in the options area of the tools panel)
• Select a wide stroke (15px or more)

Go back to the drawing tutorial if you don't how to use object mode and how to set the smooth control for the pencil.
Step 3 - fix the hello word
• You may have to fix the Word "Hello", since despite smooth mode your drawing may not be so hot.
• Firstly use the Free Transform tool to adjust size, rotation, etc. of each letter.
• Then use the Subselection tool to fix certain letters, probably your "o" will be ugly.
• To do good work, you need to set magnification to something like 400 (Menu View->Magnification).
• Then you can drag around the distortion points (squares) and kill some of these and/or move the 'curve
control handles (dots attached to a line).
• You can read further explanation about envelope transforms
• Finally select all letters with the selection tool and center them. You may also make the whole drawing bigger or
smaller (just change the "W" property in the properties panel while everything is selected, i.e. see the screen
capture below).
So now you should have (very) roughly something like this:
Hello with the pencil
Step 4 - Draw an oval

• Draw an oval or something around the "Hello" word if you want. Use another layer for this and lock the "Hello"
layer while you do this. See the Flash layers tutorial if you don't know how to use layers.
• Again, use the subselection tool to fine tune if needed. If you need more explanation about object transformation,
have a peek at the Flash object transform tutorial.
Step 5 - Make a new keyframe for both layers
Create a new keyframe in frame 2 (as explained above).
• Hit F6 or Right-click; Insert Key Frame for the "hello" layer

• Hit F6 or Right-click; Insert Key Frame for the "oval" layer
• Now you should have a copy of both the "hello" word and the Oval in the new frame.
Step 6 - Make changes
• Now you can make slight changes to your drawings in frame 2 (so make sure that frame 2 is selected !)
• I changed color a bit for both the oval and the hello word.
• Unlock the "hello" layer if it's still locked.
• "Edit->Select All"
• Change the color in the properties window
• Then twist a little bit some letters and maybe the Oval
• You can do this for instance with the subselection tool or the Freetransform tool. (I only used the subselection
tool and basically turned a few Curve control handles).
Below is a picture of the slightly altered graphics:
Hello with the pencil - second frame
Step 7 - Add other frames

Just two frames will do, but you can add more of course :)
This example was a bit more professional. We tried to select a good stage size and made some efforts to get the
drawings right.
Rocket science
Frame-by-frame animation is also quite useful if you want to create animated objects that you then can reuse in
another animation as a movie clip. Let's first look at this little rocket [12] we shall discuss.
The *.fla, *.swf and *.html files flash-cs3-rocket.* can be found here: http:/ / tecfa. unige. ch/ guides/ flash/ ex/
frame-by-frame-intro/
I imported this rocket from Uncyclomedia Commons [13]:
http://commons.uncyclomedia.org/wiki/Image:Rocket.svg
• It's an SVG file that I first opened with Illustrator.
• I then copy/pasted it to Flash. See the Clipart article (i.e. the section on Importing to Flash).
Now we would like to animate the flames of this little rocket.
Step 1 - Break the rocket into components
• Break the rocket apart (right-click->Break Apart). You now should see various rectangles drawn around its
various shapes.
• Flames are made with 2 shapes (the two rectangles in the lower right)
A broken apart imported SVG rocket
Step 2 - Put the flames into another layer

The easiest way is to use distribute these to other layers
• Select the 2 flames (hold down the SHIFT key and click on the orange and yellow parts
• Then Right-click->Distribute to layers
• Rename the two layers you created.
Now you should have something like in the screen dump below. I am positioned in the yellow flame layer and show
the other two as outlines.
Rocket with flames in layers
Step 3 - Duplicate frame 1 to frames 2 and 3 in these two layers.

• As explained above, in frame 2: Right-click->Insert Keyframe. Do this for each of the three layers
• Repeat this for frame 3.
Step 4 - Change the flames for each frame
• I simply used the Free Transform tool and dragged the rectangle towards the lower right.
• By doing this you also might have moved the rectangle itself, just push it back underneath the rocket... (either
with the arrows, or with the selection tool).
• In order to get this right, you should each time put all the other layers (rocket plus one of the flames) in outline
mode with the layers tool.
Rocket with flames in layers
Step 5- Tuning
• The animation is now a bit too fast. We would like to get the kind of effect you see in old and cheap cartoons on
TV.
• If you wish you can drag the keyframes (each dot to the right). I made a keyframe in every 5, but I also adjusted
the Framerate to 30/second. That's good TV quality. (click on workspace and adjust in properties panel)
Rocket frames stretched
• Then you also could improve drawing of the flames (see the Flash object transform tutorial and/or add more
keyframes. Finally, you could add motion tweens between the keyframes. I didn't do this since motion tweening is
not part of this tutorial.
Step 4 - Test and publish
• Test and enjoy :)
• Publish
Step 5 - Export as a video clip only
File->Export Movie will just save a *.swf Flash animation file (no HTML and JS).
There are two ways of exporting an *.swf movie.
• "Normal", i.e. compressed. This means that when import this flash file into another flash file, you can't edit the
object anymore.
• "Uncompressed". This means that after you import the rocket you can edit it somewhat. To get this option, untick
Compress Movie in the settings dialog that will pop up.
Step 6 - Turn it into a movie clip symbol (optional)
You also can turn this whole animation into a movie clip symbol. This is best strategy if you want to build a library
of fully editable flash movie clips you can import into other animations. Also, as we shall point out later, you
actually could start by creating a movie clip symbol and then create an animation.
• Select all layers and frames (click on the first layer, then SHIFT-click on the last). Make sure that every frame and
layer in the timeline is black
• Copy all the frames (everything) Menu Edit->Timeline->Copy Frames
• Menu Insert->New Symbol. Tick the Movie clip option and give it a good name, e.g. "Rocket".
• Then you should be in Rocket editing mode and just see "Layer 1" on top
• Put the cursor in the first frame
• The paste the whole rocket code: Menu Edit->Timelines->Paste Frames
You now should see something like this:
Rocket animation made into a symbol
Next you can copy this symbol to another flash file which you may call my_library.fla. We just killed everything in
the file (except the symbol) and saved it under a different name (flash-cs3-rocket-symbol.fla)
Result
Now we have two versions of rocket *.swf move clipt that we can reuse in another Flash animations
• flash-cs3-rocket.swf [14]
• flash-cs3-rocket-uncompressed.swf [15]. This version also has the improved flames
In addition we have file *.fla file with just a rocket symbol inside. You can copy/paste symbols from one flash file to
another one.
• flash-cs3-rocket-symbol.fla [16]
Below is a short how-to re-use *.swf files , but you also can directly go and read the Flash motion tweening tutorial.
Reuse frame-by-frame animations as movie clips
Reuse of swf files

The swf flash files we just created can be used as components in new Flash animation, although we would rather
recommend using embedded movie clips for that purpose.
The *.fla, *.swf and *.html files flash-cs3-rocking-hello.* can be found here: http:/ / tecfa. unige. ch/ guides/ flash/
ex/frame-by-frame-intro/
Step 1 - Import *.swf files into the library of a new Flash file
• Create a new flash file (File->New)
• Then import stuff you made: File->Import->Import to library
• Select the flash-cs3-rocket.swf file
• Do the same with the flash-cs3-shaking-hello.swf file
You now have a nice rocket and a flashing hello in your library:
Hello and rocket movies in your library
Step 2 - Drag the symbols (movies) to the stage

• Drag the item in the library onto the stage
• Now your rocket is too big :(
• No problem. Use the Free Transform tool to make it smaller and to rotate
• Hold down the SHIFT key when you resize it from a corner !
Here is the result:
Hello and rocket movies used
Step 3 - Learn about motion animation

Of course, now you should do a moving animation with these flashing objects. See the Flash motion tweening
tutorial and before this enjoy the flying rocket:
http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/flash-cs3-rocket-moving.html
Creation and reuse of embedded movie clips

Let us recall an important design principle. In the simple Rocket science example and in the others too, we created
the animation in the main time line. Alternatively, as explained in the beginning, you should first start by creating a
new symbol:
• Either create an initial drawing and then convert it to a movie clip symbol. Double click on an instance for editing
and creating the animation.
• Or use menu Insert->New Symbol to create a new one. Tick the Movie clip option and give it a good name, e.g.
"Rocket". Then you land directly in symbol editing mode and you can create an animation for just this object.
• Once you are done with symbol editing, double-click on "scene" in the edit bar (on top of the stage) or click on
the little "back arrow". Always make sure that know whether you edit just a symbol or whether you are in the
main timeline (the whole scene) !
Read more in the Flash embedded movie clip tutorial about creating and using embedded movie clips. This tutorial
will also introduce some ActionScript code that is needed to stop/start embedded animations.
Also remember that you can copy/paste anything from one *.fla file to another and this includes movie clips. So it's a
good idea to create somewhere a private library (a *.fla file) that includes all your major artwork.
Links
Example materials
Example files used (including *.fla source) can be found here:
http://tecfa.unige.ch/guides/flash/ex6/frame-by-frame-intro/(CS6)
http://tecfa.unige.ch/guides/flash/ex/frame-by-frame-intro/(older CS3)
• Click on either an *.html or *.swf file to see.
• Get just the *.fla file if you want to make modifications. The standard copyright of this wiki applies.
References
[1] http:/ / www. adobe. com/ devnet/ flash/ articles/ create-first-flash-document. html
[2] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-simple-fbf. html
[3] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-simple-fbf. fla
[4] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-rocket. html
[5] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-rocket. fla
[6] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-rocket-symbol. html
[7] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ flash-cs6-rocket-symbol. fla
[8] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ stickman-cs6. html
[9] http:/ / tecfa. unige. ch/ guides/ flash/ ex6/ frame-by-frame-intro/ stickman-cs6. fla
[10] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-frame-by-frame-hello. html
[11] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-shaking-hello. html
[12] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-rocket. html
[13] http:/ / commons. uncyclomedia. org/ wiki/ Main_Page
[14] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-rocket. swf
[15] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-rocket-uncompressed. swf
[16] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ frame-by-frame-intro/ flash-cs3-rocket-symbol. fla
Flash classic motion tweening tutorial

Draft
Overview
Motion tweening means motion animation with interpolation as explained in the Flash motion interpolation
overview. In this article we present one of the possible methods, i.e. the so-called "classic motion tween".
Learning goals
Learn about classic motion animation, called simply motion tweening in CS3 and classic motion tweening in
CS4/CS5. Motion animation means moving an object from A to B, to C through keyframes that you define and
(sometimes) a user-defined motion path.
Add some simple shape transforms to the animated object
Learn how to to frame-by-frame animations with embedded movie clips.
Prerequisites
Immediate next steps
Flash CS4 motion tweening tutorial (CS4, CS5)
AS3 TweenLite tweening engine (CS3-CS5, intermediate)
Moving on
Flash shape tweening tutorial
After that you should be ready for interactivity. E.g. do the Flash button tutorial
Quality and level
Materials (*.fla file you can play with)
http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/
In CS4, the motion tween tool has been replaced with an easier tool, but this tool is still available as "motion tween
classic" as explained further down.
Introduction
If you want to work on your own project ...
In this tutorial we will mostly work with graphic and motion clip symbols. So the first thing you may have to do - if
you want to work on your own project - is to convert one of your graphics to either a graphic or a motion clip symbol
and to put it in a separate layer.
• Right-click on the object (click down the right mouse button) and then select Convert to Symbol .... Alternatively
just select the object and hit F8.
• Each object to be animated should be in a separate layer. All the other objects may remain in a single layer.
convert a select object to a symbol
So before we start, make sure that you have a least one graphic symbol, i.e. the object that you would like to move
around in your library. E.g. the library of the "cat example" we will build now contains this:
Library items (only graphic symbols)
Use of layers
You must use a different layer for each separate animation. If you plan to animate several of your objects, there is a
practical shortcut to distribute each object to a new layer:
1. Select objects you want to distribute into layers (e.g. with right-click->select all or shift-click on each object)
2. Then, Modify->Timeline->Distribute to layers
3. Finally, rename the layers in order to help you find things...
Motion tweens within movie clips
Instead of using the main timeline, we always recommend to consider creating animations within movie symbols.
This way you can easily reuse these animations in other Flash applications or play several animations at the same
time. E.g. you would have structure like this:
Main timeline (no animation)
Animation_clip (a movie clip with its own timeline)
Animated_object (e.g. a motion tween) in a layer of Animation_clip

Animation of the animated_object (e.g. a frame-by-frame animation, etc.)
See the example at the end and also Flash embedded movie clip tutorial.
Introductory example - moving a cat

In this example, we will use the drawings made for the flash drawing tutorial and move one of the cats around. If you
want to reproduce what we do here, you can start from file flash-cs3-drawing-trees3.fla [1]. Objects you will need are
already in the library. I am aware that these drawings are ugly, but it makes these tutorials so much more human ....
Executive summary
The principle of motion tweening is quite simple:
(1) Firstly position an object in different locations at different times
• We call these positions keyframes in the timeline, since objects are frozen in different states.
• Btw, you also can change other features than just the position of an object (more later)
(2) Then, you have to apply some interpolation method (tweening) between the two keyframes, i.e. you tell the
computer to generate some in-between picture for each frame between the 2 keyframes in the timeline.
• Simple motion tweening is a linear path, i.e. the object will move on a line from x1,y1 to x2,y2.
• You can also apply a motion tween along a random path (but this is bit more complicated and we will introduce
this technique below).
Moving a cat from x to y

You should lock all other layers. This way you are sure not to edit by mistake a frame of another layer.
Step 1 - Create a a new layer and insert an object for animation
• Create a new layer and call it "animation cat" for example (see the Flash layers tutorial if you forgot how).
• Select this layer
• Put an tween-able object inside, e.g. drag it from your library onto the stage, or cut/paste or copy/paste from an
other layer or *.fla document.
• In our case we cut/paste the existing cat that was sitting in the lower left in the "Objects" layer.
• We move the object (cat) outside of the stage, because the cat in our scenario will move into the scene.
Remember, that you can not motion tween editable objects, so you need to turn a drawing into a symbol first.
So you should see something like this:
The cat before animation. It sits outside the stage and waits
Now you already have a first keyframe for your animation. I.e. the cat is waiting in keyframe 1 to be moved.
Step 2 - Create a second keyframe
• Make sure that you still have the "animation cat" layer selected.
• Right-click somewhere in the timeline, e.g. at 20 and Insert Keyframe
• This will create a new keyframe and copy the contents of the keyframe before, i.e. contents of frame 1 just for
this layer.
• Drag the object (cat) to its final position, e.g. to the right and which can be outside the stage again.
Step 3 - Create the motion tween
• Click on a random frame between the two keyframes (still in the same layer)
• Then right-click and select Create Motion Tween. Alternatively, you also could have used the Tween pull-down
menu in the properties panel at the bottom and select motion.
Creation a motion tween with the right-click

menu
The timeline for the layer including this object should now include a solid line with an arrow (if it is dashed
something went wrong).
The result should look like in the screen capture below:
• Between the two keyframes you see a solid line with an arrow (look at the "Animation cat" layer).
• You should see your object moved to a different position somewhere in the middle of the two keyframes.
Creating a motion tween for the cat
Step 4 - Replicate contents of the other layers

• As you could see in the screen captures above, the stage is empty, except for the cat. This is because all other
drawings for the other layers exist only for frame 1.
• For each other layer, right-click on frame 20 (i.e. in the position of your second keyframe) and hit F5 (Insert
Frame, not insert keyframe !)
• This will "stretch" your drawings from frame 1 to frame 20. The drawings still sit in frame 1, but they are carried
over up-to frame 20. This is shown in the timeline by a little white rectangle.
You now should have something like this:
The first result
Step 5 - Test it
• You can glide (left-right) the playhead (red rectangle on top of the red line that indicates the current frame in the
timeline). It will manually move the object through all positions within the interpolation path.
• Then try: menu Control->Test Movie or hit CTRL-Enter. This will open a popup window with a Flash preview.
Step 6 - Tuning
You may find that the cat moves too fast. First thing you could do is lower the frame rate/second. Click on the
workarea and change the document properties. However, this will lead to a "jumpy" animation. It's a better idea to
use frame 50 instead of frame 20 as end-point.
• Drag the black dot in the animation layer from frame 20 to frame 50. Hold down the mouse on the black dot, wait
a bit and then drag.
• For the other layers: hit F5 in frame 50 (same as above).
• You also can accelerate/decelerate the cat's movement. Play with the "Ease" option in the Properties panel. Click
on layer "animation cat", then select an empty "between frame" somewhere. You now can make changes in the
tweening properties.
• If your cat moves in front instead of behind objects, then you can fix this by arranging the layers' order: Grab the
objects layer in the timeline panel and move it before or after the animation layer (i.e. pull it up or down).
Results
• You can look at my published result: flash-cs3-motion-tweening.html [2]
• You can grab all the files from this directory:
Adding more motion tweens

We want the cat to move back where it came from.
Turning the cat
In our case we have an animation from left to right and the cat will leave the stage. Once it's off the stage we will
turn it so that it can walk back.
• Next to frame 50 I made a third key frame. Click on frame 51 and hit F6.
• Then turn the cat: Click on the cat and use menu Modify->Transform->Flip Horizontal)
Add a new motion tween
You can add more motion tweens to an object simply by repeating the procedure outlined above.
• Add a new fourth keyframe to the right, e.g. in frame 81. Simply hit F6 again.
• Right-click on an empty frame between keyframe 3 and 4 and add a motion tween as above
• Of course, you then also adjust the ending frame for the other layers as above (hit F5) in column 80.
In the screen capture below you can see that we now have several keyframes. In the "animation cat" layer you can
see several dots, each one represents a keyframe.
Moving a cat
You can look at the published result (the cat will walk back where it came from) here:
flash-cs3-motion-tweening2.html [3]
The directory including the *.fla file which you can load into your Flash and play with is here:
Adding (some) motion shape tweening

In each frame you can change some properties of the moving object. In the next example, we will have the cat move
up on top of the hill. We want to implement 2 effects:
• The cat should become smaller (because it's further away)
• It should change color (because it's an effort to run up a hill).
Step 1 - Insert a new keyframe
• I inserted a new keyframe in frame 25 (i.e. between the first two existing key frames)
• In the (new) 2nd keyframe the cat was moved next to the other little one on top of the hill.
Step 2 - Change size of cat in keyframe 2
• Go to the frame (click on frame 25 or wherever yours is)
• Select the object (i.e. the little cat)
• Select the Free Transform Tool in the tools panel (see flash drawing tutorial), hold down the SHIFT key and drag
a corner.
Step 3 - Change the color of the cat in keyframe 2
• Go to the frame
• Select the cat
• In the properties panel you can change the tint (a kind of color) of the cat.
Here is a screen capture. The animated cat is pink and sits next to the other cat. It's pink because moving up the hill
takes effort ...
Moving a cat and changing its size and color
You can look at the published result here: flash-cs3-motion-shape-tweening.html [4]

The directory including the *.fla file which you can load into your Flash and play with is here:
Doing more informed work
Edit bar
If you have to do some frequent zooming you can display the Edit Toolbar (see the screen capture below).
• Get the edit toolbar: Window->Toolbars->Edit bar
This bar also will allow you to directly edit symbols you got in your library.
Onion skins
You can display the path an object will take by clicking one of the onion skin buttons in the Controller toolbar. This
is handy if you have several objects that move.
• Get the controller toolbar: Window->Toolbars->Controller and then click on either the Onion Skin or the Onion
Skin Outlines icon.
Onion skins for the moving cat
Grids and rules

To achieve what we just did, you don't need these. But for more precise artwork you certainly will...
• Right-click somewhere on the workarea and play with Rules, Grids and Guides ...
Rotating animations
Instead of moving an object from point A to point B, you also can rotate it around point A. A good example would
be hands in a clock.
Step 1 - create the object to animate
• Create a separate layer for the object you want to rotate.
• Draw the object (and don't make any new keyframes yet)
• Transform it into a symbol (right-click and select graphic symbol).
Step2 - move the center point
• Then with the free transform tool move its center point somewhere else if you want. E.g. to rotate an hour hand
for clock move it towards and end (the center of the clock).
Move the center point of the hour hand - Rotating

clock
Step 3 - make a motion tween

• Make a new keyframe, i.e.hit F6 in a new frame. You can leave the object where it is (depends on the aim of your
animation)
• Then create the motion tween (right-click anywhere in between the two keyframes)
• Now in the parameters panel select Rotate = CW (clockwise) as in the example shown in the picture. Btw
""CCW" would mean "countclock wise"
• If you want to rotate it more than once during the animation time, enter "XX times". E.g. we entered 12 for the
minute hand in the clock animation.
Motion tween around a center - Rotating clock
Clock example
If you want, you can:
• Look [5] at rotating clock example
• Or get the flash-cs3-rotating-clock.fla [6] file from http://tecfa.unige.ch/guides/flash/ex/
motion-tweening-intro/and play with it.
You don't like my cats ? / Embedded movie clips

As we pointed out in the Flash drawing tutorial, you can import professionally made clipart into Flash. Furthermore,
you now should learn how to move animated objects, i.e. use so-called embedded movie clips. See also the Flash
embedded movie clip tutorial.
Use of embedded movie clips

Instead of using the main timeline to create all your animations, you also can animate so-called "movie clips", i.e.
instances of movie clips.
• Menu Insert->New Symbol
• Select Movie Clip (and give a good name)
• Double-click on this newly created movie clip in the library. You now can edit this object's own timeline.
Alternatively transform an object into a movie clip:
• Select the object (or use the lasso or another appropriate tool to select several objects)
• Right-click->Convert to Symbol; Select Movie clip
• Double-click on this object to edit.
There are two ways to edit a movie clip:
(1) In "stand-alone" view, i.e. you only will see the components of the movie clip. Double click on the movie
symbol's icon (not it's name) in the library. You now can edit, e.g. a add a motion animation or change its drawings.
Most of time, this editing mode is preferable.
(2) Edit with the scene as background. If you put an instance of the movie clip on the stage and then double-click on
this instance, you can edit the same movie clip symbol, but you will see the objects of the stage while you edit.
By editing a movie symbol you basically can do the all the stuff you have learnt so far, e.g. in the Flash
frame-by-frame animation tutorial. In other words, movie clips have their own timeline.
A pulsating moving sun
Let's now create a very simple animation, i.e. a pulsating sun that is moving from left to right in the sky. First, we
will make a simple motion tween of a yellow circle moving from left to right:
• Create a new Flash fileand change the size to 800x200 pixels
• Draw a yellow circle and put it to the left of the stage
• Convert it to a movie clip symbol (Right-click->Convert to Symbol; Select Movie clip)
• Hit F6 in frame 120 and move the circle that is now an instance of a movie clip to the right of the stage
• Make a motion tween.
Then edit the sun symbol to create a frame-by-frame animation
Editing a movie clip symbol used in a motion

tween
• As you can see, we are editing the sun "symbol". Look at the Edit bar (that sits between the timeline and the
stage). It displays the editing hierarchy, i.e. "Scene 1" and "Sun".
• This frame-by-frame animation changes both the color and the size of the circle. Read the Flash frame-by-frame
animation tutorial if you don't know how to create frame-by-frame animations.
Do not forget to go back to the main timeline (scene) once you are done, e.g. by double-clicking on the "scene" in
the edit bar (on top of the stage) or by clicking on the little "back arrow". When you edit a movie clip you are in
symbol edit mode and you should not add anything else by mistake. Make sure that you are aware at which level you
edit and where to place objects !
Finally you also may add a sky in the main timeline (e.g. with a gradient color, see the flash colors tutorial)
The example code is in the http://tecfa.unige.ch/guides/flash/ex/motion-tweening-intro/directory
flash-cs3-motion-tweening-sun.html [7]
flash-cs3-motion-tweening-sun.fla [8]
Note: we use embedded movie clips in many other tutorials. E.g. see ActionScript 3 interactive objects tutorial or
Motion tweening of an animated object chapter in the Flash animation summary or the Shape tweens of motion tween
elements chapter in the Flash shape tweening tutorial
I usually prefer this kind of animation, since I am more interested in creating interactive application (vs. video
clip-like animations). If you plan to learn this, you also should learn how to stop/play embedded movie clips, i.e.
trigger with the help of a button or something else an event that will movie_clip.play() and movie_clip.stop().
Use of swf movie clips in motion tweens

You can import ready made flash animations, e.g. a cat that would have moving legs. In the next chapter we use a
simpler animation that uses a rocket. Rocket making itself is described in the Flash frame-by-frame animation
tutorial.
To import a Flash movie as object: Use File->Import->Import to library You then will see the *.swf files as items
and you can drag them on the stage. With the Transform tools you then can adapt a few features (like size and
rotation) to your needs.
movie clip (*.swf) library items

• Look [9] at the flying rocket
• Or get the file flash-cs3-rocket-moving.fla from here:
Don't worry about details of *.swf movie clip reuse. The motion guide tweens chapter below will show how to do
this in some more detail.
Motion guide tweens

Instead of having an object move from one point to another in a straight path, we can make it follow an arbitrary path
we draw, i.e. a motion guide.
Note: In Flash CS4, there is a simpler alternative, i.e. you can easily create motion guides with the "normal" motion
tween tool.
Step 1 - Create a normal motion tween
• Like explained above, create two keyframes, i.e. one for start and one for the end. Each keyframe should contain a
copy of the same symbol (as above). Then insert a motion tween.
• This is important, else you will fail ...
Step 2 - Insert a motion guide layer
• Select the first keyframe and layer that starts your animation
• On the layer edit bar in the time line click on the little motion guide icon (looks like a slinky) or Right-click->Add
Motion Guide.
You should get something like in the capture below:
A Motion Guide layer
Step 3 - Draw the motion guide in the motion guide layer

• Make sure that you selected the motion guide layer you just created selected. You may lock the other layers and
just display their outlines.
• Then. with the pencil tool. draw the line your rocket has to follow. Use "Object mode" and "Smooth drawing"
from the tools panel controls (see the Flash drawing tutorial if you forgot how to use the pencil).
In the screen capture below, the motion guide would be the red (fatter) line on top of the hill's outline.
A rocket motion guide drawn with the pencil in the Motion Guide layer
Step 4 - Snap the animated object to the start of the motion guide
• Unlock all layers
• Select the animation layer (not the motion guide layer !) and select your start frame.
• Then drag the object (i.e. our rocket) to the start of the line until the little white circle in the center of the rocket
will "snap" to the line. Just drag, don't click...
A rocket snaps to the motion guide
Step 5 - Snap it to the end

• Select the end frame first
• Then drag the object (the rocket) to the end of the line until it snaps. It should snap with the little white circle.
Step 6 - Orient to path
• You can have the object tilt along the path if you want
• Select the animation layer (not the guide)
• Select a frame in between start and end
• In the properties panel (bottom of the desktop), check the box "Orient to path"
• Look [10] at the flying rocket
• Or get the file flash-cs3-motion-guide-tweening.fla from here and play with it.
Publishing and stopping an animation
Publish settings
When you publish a Flash animation, you should first choose the correct settings.
Step 1 - Get the settings
• Either click on an empty spot on the workarea, then hit the Publish button in the properties panel
• Or, menu File->Publish Settings
Step 2 - Choose the Flash version
If you want to make sure that your animation plays on most every computer, select Flash Player 8 (the previous
version). Otherwise Flash Player 9 is now widely deployed. You must select "9" if you use Action Script 3.
Step 3 - HTML
Then select the HTML tab (also in the Publish settings)
• You can untick the loop button (but see below for a more solid solution)
Step 4 - Hit the publish button
This will copy three files to the same directory where you *.fla file sits.
• A *.swf
• A *.html
• A *.js
Copy all three to your website. Then you can edit the html file and add some more HTML if you like. (Make sure to
save copy of this HTML file, since when you publish again the html file will be overwritten).
Stopping an animation
We will improve a bit the flying rocket example, i.e. have the animation stop and display some friendly "Hello".
Step 1 -Create a new layer
• Create a new layer and call it "action"
Add a new keyframe for this layer
• Select the layer
• Right-click after the last frame of your animation and add Insert Blank Keyframe (in our case this is frame 21) or
hit F7.
Add some Action Script
• Hit the F9 button
• This will open the Actions-Frame panel in ActionScript 2 (you can dock it to the properties panel) or the Actions
panel in ActionScript 3.
• Insert this (in either AS2 or AS3):
stop();
• As you can see in the screenshot below, the last frame in the action layer has a little "a" in it. This means that
there is some scripting attached to it.
Fine tune
• In our case I dragged the Background layer to the right (or hit F5).
• Then I inserted a "Hello" movie into this last frame. I took the one we made in the Flash frame-by-frame
animation tutorial
Here is screen dump with the 2 new layers and the bit of ActionScript code.

• Look [11] at the flying rocket plus the
flashing hello.
• Or get the file
flash-cs3-motion-guide-tweening2.fla
[12]
file from http://tecfa.unige.ch/
guides/flash/ex/
motion-tweening-intro/and play with
it.
Differences in CS4
In CS4 there is a new way of creating
motion animations which is easier. We
will document this some other day. In the
meantime, you should know that you still
can do "classic motion tweening" in CS4.
It works exactly in the same way. The
only (slight) differences ca be found in
the user interface for creating tweens and
motion guides:
• To add a tween between two frames in
Adding a short action script stop(); instruction to the action layer a layer, select "Create Classic
Tween"
• To add a motion guide in CS4, right click on the layer name to the left of the newly created classic tween and
select Add Classic Motion Guide.
The same rules apply:
• Only symbols can be animated.
• Only one symbol can be on the stage per animated layer.
Attached two pictures:
Classic Motion tween in CS4
Now right-click on the layer name (not in the timeline itself !)

Classic Guided Motion tween in CS4
Resources and discussion
Resources
• clipart
• Follow up the links in Flash and AS3 links - general and Flash and AS3 links - tutorials for other tutorials.
Daniel K. Schneider's opinion

I do have to say that I find the SMIL/SVG time-based animation model including its interpolation mechanisms more
elegant and simpler to understand. In SVG, you simply decide which property of the object (position, size, shape,
whatever) you want to animate and how interpolation should be done.
CS4 moved in the right direction, i.e. the standard motion tween now creates an "object" by itself...
In CS3, that kind of animation can be done in Flash through ActionScript programming. E.g. by using a tweening
library like TweenLite and its sister classes.
Software
Besides Flash from Adobe, certain animation software can export in Flash. I didn't find any software that can export
to *.fla, just *.swf. Therefore using such tools is ok if you just want to produce animations in an easier way.
E-Frontier products (commercial)
• E-Frontier home page [13]
• E.g. Anime Studio Anime Studio (Wikipedia) [14]
• Motion Artist
Toufee (free online software, needs registration)
• Toufee Home Page [23]
• Toufee [15] (Wikipedia)
• Toufee Wiki [16]
KToon (not tested)
• Frame-by-frame animation drawing tool for Unix systems (including Linux).
• Ktoon can export animations in Flash or a series of PNG images.
• KToon Home Page [17]
• KToon Wikipedia article [18]
Links to Video Tutorials

You also can look at some of the videos you can find on the Adobe web site
• Video tutorials [19]
• Click in the top left window on "Flash CS3 Professional"
• Then view in particular "Creating animations with motion tweens" and "Understanding the timeline, keyframes
and frame rate.
Other Links
• Flash animation [20] (Wikipedia)
Materials used
(including the *.fla's)
Grab stuff from this directory:
References
[1] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ drawing-intro/ flash-cs3-drawing-trees3. fla
[2] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-tweening. html
[3] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-tweening2. html
[4] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-shape-tweening. html
[5] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-rotating-clock. html
[6] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-rotating-clock. fla
[7] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-tweening-sun. html
[8] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-tweening-sun. fla
[9] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-rocket-moving. html
[10] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-guide-tweening. html
[11] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-guide-tweening2. html
[12] http:/ / tecfa. unige. ch/ guides/ flash/ ex/ motion-tweening-intro/ flash-cs3-motion-guide-tweening2. fla
[13] http:/ / www. e-frontier. com/
[14] http:/ / en. wikipedia. org/ wiki/ Anime_Studio
[15] http:/ / en. wikipedia. org/ wiki/ Toufee
[16] http:/ / www. toufee. com/ wiki/ index. php/ Main_Page
[17] http:/ / ktoon. toonka. com/
[18] http:/ / en. wikipedia. org/ wiki/ KToon
[19] http:/ / www. adobe. com/ designcenter/ video_workshop/
[20] http:/ / en. wikipedia. org/ wiki/ Flash_animation
Flash CS6 motion tweening tutorial

Draft
Overview
Motion tweening means motion animation with interpolation.
Learning goals
Learn about basic motion animation
Add some simple filter transforms (e.g. size, color) to the animated object
Learn how to use frame-by-frame animations within embedded movie clips.
Prerequisites
Flash CS4 desktop tutorial or Flash CS6 desktop tutorial
Flash motion interpolation overview
Moving on
Flash shape tweening tutorial
Flash embedded movie clip tutorial (explains in some more depth how to use embedded clips)
After that you should be ready for interactivity. E.g. do the Flash button tutorial
Quality and level
Materials (*.fla file you can play with)
http://tecfa.unige.ch/guides/flash/ex6/motion-tweening-intro/
Alternative version
Flash classic motion tweening tutorial (CS3 style animation)
Flash CS4 motion tweening tutorial (similar, but less)
Introduction
Wikipedia [1], retrieved May 28 2009 defines tweeing as “Inbetweening or tweening is the process of generating
intermediate frames between two images to give the appearance that the first image evolves smoothly into the second
image. Inbetweens are the drawings between the keyframes which help to create the illusion of motion.
Inbetweening is a key process in all types of animation, including computer animation.”.
In this tutorial we will introduce Flash CS4/CS5/CS6 motion interpolation. See also Flash animation overview and
the Flash classic motion tweening tutorial
Built-in motion tweens are applicable only to "heavy" Flash objects, in particular instances of movie clip symbols
and text fields. Other types of objects (e.g. drawings or shapes) must first be wrapped into a symbol when
interpolation is applied to them. We suggest that you should not let Flash do this, i.e. think ahead and and transform
drawings into symbols beforehand.

In Flash, a symbol can be a graphic, a button or movie clip created that is reusable in the same document or in
others. Each symbol that you use/create is inserted into the library. The symbol itself is never directly used in an
animation, you always must create an instance. In practical terms this means that you must drag the object from the
library to the scene, then give it a name as discussed below.
For a programmer, a symbol can be understood as a kind of class (i.e. a generic object). To learn more, read Flash
embedded movie clip tutorial. You also can use symbols as classes in ActionScript code, e.g. create an instance and
insert it into the scene
You only can animate one single instance of a symbol in the same layer. You later can of course replace the graphics
inside. If you want to create animations with multiple objects, use either multiple layers or embedded movie clips.
When the interpolation includes a trajectory (as opposed to a rotation for example), a "motion path" will appear on
the stage. This path shows the position of the object in each interpolation frame. In each frame, you can change the
position of the object and the interpolated trajectory will change. To do so, just drag the object to another position.
This will create new keyframes and therefore modify the path.
Finally in each keyframe (starting, ending and those that you added), you also can transform other properties of the
object, for example: size, rotation, tint, 3D position etc.. It is important to understand that you will not change the
graphic itself, but rather just apply a "filter" to it.
Traditional Flash desginers create all animations in the main timeline (scenario). The scenario will then be divided
into sequences, called scenes. A modern Flash developer rather would tend to place individual animations within and
embedded "movie clip" and then place those clips in space and time. As explained in the Flash frame-by-frame
animation tutorial, a movie clip symbol has its own timeline. It also may include other movie clips. For example: you
could create a movie clip called "bird animation. In this movie clip, you could create a moving object ("bird") which
in turn would flap its wings. These wings are are again symbols embedded at a third level and we will have a the
following hierarchy: Bird animation -> Bird -> Wings.
Create a simple motion tween

Let's now look at an example:
You can download the following file that already contains the objects
• flash-cs-4-motion-tweening-empty.fla [1]
Solution:
• flash-cs-4-motion-tweening.html [2] (already admire the result)
• flash-cs-4-motion-tweening.fla [3] (the solution, do not cheat if you want to learn using this example !)
Step 1: Prepare the object to animate
Important: Each object must be interpolated in a different layer and that object must be a symbol.
If you do not have symbols in your library, this is a procedure:
(1) Create a new layer
(2) In this layer, draw a picture using any drawing tools, images etc.. you want.
(3) transform the drawing into a symbol. If you do not, Flash will do it for you and not necessarily the way you
like. So even if Flash provides all sorts of help to unite the selected objects and to create layers for each symbol, do
not let Flash do that work for you! To create a symbol which will be placed in the library and create a instance on
the stage:
• In the layer with your drawings select all objects on the stage. Then right-click and Create Symbol. Select "Movie
Clip" because this type of symbol is the most powerful.
• Make sure it is no unwanted object in the scene for this layer. If you want to create a symbol from drawings that
extend over many layers, the procedure is the same, just make sure that you only select wanted elements.
Step 2: Create the interpolation animation (motion tween)
First select the object (symbol instance) on the stage
Then do one of the following:
• Menu Insert> Motion Tween
• Right-click (Windows) or Ctrl-click (Macintosh) on the object or the current "frame" and choose Create Motion
Tween.
In the following screenshot we show how to add a motion tween to an "Raising Sun" symbol of the "Sun" which is in
the library.
Right-click on the sun, then Create Motion

Tween
Flash now creates a motion tween span with an interpolation of 24 frames (default). Span refers to the range of the
interpolation, from the beginning to the end. By default 24 frames last one second at the default frame rate of 24
FPS.
Step 3: Create the motion path
The control (slider) in the timeline (scenario) was placed in the last frame. Now move the object to a new position.
A motion path (trajectory) appears on the scene. The motion path shows the trajectory of interpolated images during
the tween span. For now, we see just a straight line that connects the first frame to last. You can change this
interpolation path to create a more interesting one.
Once done, you'll see this:
In the last frame, the sun shot into a new position
To see the object moving along the route:

• Move the control (rectangle) in the red timeline to the left and right
• Or already view the results : Press CTRL-Enter (or menu Control-> Test Movie).

Flash Tutorial - Part - 1

Uploaded by

Copyright:

Available Formats

Flash Tutorial - Part - 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Flash Tutorial - Part - 1

Uploaded by

Copyright:

Available Formats

Flash Tutorials

Daniel K. Schneider (ed.)

Use of external media 126

Advanced drawing 153

Basic interactivity and use of components 194

More animation 245

More interactivity 268

Working with ActionScript libraries 362

Other Flash articles of interest 409

Flash and the CS6 authoring tool

Flash tutorials and articles in EduTech wiki

The Flash framework

Flash versions compared

Links for software and media elements

Translators and common formats

framework.” (Flash glossary: FXG [19], retrieved March 7 2011).

Special purpose authoring tools

Programming Editors for ActionScript

Media for building your own scenes

Flash CS6 desktop tutorial

Opening the desktop from the Flash welcome screen

Flash CS6 Welcome Screen

Layout and configuration of the Flash Desktop

The default desktop(s)

Flash CS6 workspaces menu

Configuring the desktop layout

Docking the color panel as a tab

Docking the library panel below the

Other panel operations

• This option is only useful if you got a small screen.

Example configuration of a CS4 Flash desktop

Roughly, the tools are arranged in the following three-column layout:

Drawing tools Time-line Color + Alignment + Transformation

Built-in and online Help

Getting ready to work with CS6

The Work area and the stage

Resized stage with different background color

The Menu Bar

Note: Other important "view" items are in the Windows menu

Flash drawing tutorial

Setting up the stage

Defining document size

What size for a Flash document ?

Configuration of the drawing environment

The Flash CS6 drawing environment (designer workspace)

Strokes vs. fills

The main tools panel

Flash CS6 drawing tools panel

Merge (shape) vs. object drawing

List of standard tools

Free Transform and Gradient Transform tools

Rectangle and other tools

Various drawings with the rectangle, oval,

The three pencil drawing modes (CS3, same

Stroke, color and line properties.

Ink Bottle tool

Paint bucket tool

Filling a closed graphic with paint

Option controls and tools configuration