Flash CS3 Welcome Screen
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part I of some Flash tutorials.
Learning goals:
Prerequisites:
Next steps:
Notice: As of November 2008 you should acquire CS4. It offers various new features, such as 3D support or better motion tweening support. However, if you don't find a good CS4 desktop tutorial, you still may profit from this. The overall logic of the interface remains the same.
When you launch Flash you will see a welcome screen. This screen offers a few shortcuts. It looks like this:
To start working with a Flash file, you now can use either the File Menu or you can click on an item in the welcome screen. E.g.
If you tick Don't show again you won't see the welcome screen anymore, but the same options are available through the File Menu. If you want it back: Edit->Preferences.
To start learning the Flash desktop, we suggest to click on Flash File (ActionScript 3.0) since this the most recent Flash standard.
ActionScript 2 would let you use some built-in behaviors (i.e. do some action script without programming). Action Script 3.0 does not support this, but then it's probably a bad idea to work with something that is outdated ...
Now you really entered the Flash Desktop working environment. Read on...
Definition: By Flash Desktop (Desktop in short) we mean the whole authoring environment that you can see when you work on some Flash animation.
When you first open a the Flash Desktop you will not see all the tools you later will use. Your initial desktop configuration should look a bit like the screenshot below (I am not so sure about the right-hand side panel area). This annotated screenshot already conveys an idea of the kinds of tools you get, but we will introduce them later.
You can arrange the Flash Desktop in various ways (see below), but for the rest of this tutorial we will try to stay with a somewhat stable environment, i.e. leave the main tool panel to the left and the timeline on top.
Before we explain some tools components I suggest that you learn how to arrange your Desktop.
Firstly, we'd like to show how to display some more panels (tools and libraries). Having tools at your fingertip is IMHO always a good idea if your screen is big enough. BTW, if you can afford to buy CS3 it maybe is also a good idea to invest in monitor that can display 1900x1200 pixels....
You most of the time will need the main drawing tool panel (leave it to the left). You then can add two other tools panels that include some of the most commonly used menu commands.
To display all the toolbars
Panels are tools and libraries that contain special editing functionalities. Some of these you can't find in any menu, therefore at some point you have to learn what kind of panels exist. Btw, if at some point panels you put on the desktop disappeared, hit F4 or Window->Show Panels). So F4 toggles between more space for drawing and more tools
Now let's see how you can organize the workspace. CS3 lets you arrange panels in various ways:
To dock a panel, simply grab it with the mouse (press the left-mouse button on a empty area in its top bar) and then drag it to a "place" that will "light up" in some light blue color.
The two screenshots below should illustrate the principle.
The Swatches panel (shown in transparent color) is being dragged to the empty and therefore reduced right hand panel area. There is a faint blue vertical line. Note, that you also may encounter horizontal blue lines against which you can dock ...
The (transparent) Color panel is in the process of being docked together with the library panel. The top bar of the library panel is light blue, i.e. ready for docking (see also the next picture) ...
Now the color panel is firmly docked as a "tab" grouped together with the library panel
Drag it to some place that doesn't light blue.
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 can save several working environments.
If you are happy with what you did, save your configuration now ...
Here is an example configuration Daniel K. Schneider is using. 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.
Of course, you also may choose to work with less visible panels and only open them when you need them, like in the following example that you can enlarge if you wish. Finally, you may save different configurations for different kinds of work you do...
There are two sorts of support:
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. It doesn't work for me, maybe because my default browser is Firefox.
Within the built-in help texts there are also links to Adobe's on-line resources, but they do not necessarily work as they should (e.g. the link www.adobe.com/go/learn_fl_tutorials doesn't lead to a text tutorial as advertised. Quite typical of Adobe on-line support I should say.
However there is good stuff on Adobe's website, e.g.
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 stage in the middle (white by default) is the area where you work on your Flash contents. It 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 will hold motion animation objects that later will "walk" into the scene.
With Modify->Document menu you can make several modifications:
On top of the desktop is the menubar (on the Mac it will be on top of the screen of course). Flash lets do you things in three different ways:
Available operations in menus and panels are context dependent, i.e. they differ in function of what you are working on in the workspace and also in function of the Flash "Publish Setting" (e.g. ActionScript 2 vs. ActionScript 3).
Here is a short and incomplete summary of the menu groups' functionalities:
We will introduce panels as we need them in other tutorials. Here we only would like to introduce the library: It contains all the objects you use in a Flash document.
For example, in the flash drawing tutorial we used five different reusable objects, i.e so-called graphic symbols. Once you defined something as symbol (either a graphic, a button or a movie clip) you can reuse these as many times as you like in a flash document.
Now you should be ready to start learning how to create drawings with Flash. Move on to the Flash drawing tutorial.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
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.
Flash lets you create a new document from various templates: File->New. Then choose from General or Templates.
These templates may predefine several things:
In any case, to learn Flash's drawing feature, you don't have to worry much about what 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)
With Modify->Document (or by clicking on an empty spot in the stage and then changing the properties) you can:
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 (user should be able to read and distinguish all elements) and horizontal/vertical space you take up).
The 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.
Just don't make menu bars too large ....
Firstly you should know that there are two kinds of drawing tools:
Here is screen-dump that I made while drawing a red "ray" with the Pencil tool (the mouse pointer is missing from the drawing).
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.
There are several types of colors:
To select a color type, there is a pull-down menu in the color panel.
To work with gradients is not very easy and the interface doesn't help that much. To change a gradient you need 2 tools:
Read the [[Flash colors tutorial] if you want to know more colors and gradients ...
The main tools panel contains the major drawing tools. We suggest to leave this panel docked to the left side (since it's frequently used). But depending on your screen size, you can display it either in a single column or as a double column, click the ">>" on its top bar to change this.
The main tools panel organizes tools by different categories:
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).
Tools may have variants (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 Rectangle tool you can display/access the Polystar tool.
Flash has two drawing models:
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:
The behavior of tools changes according to mode used and it's not so obvious to remember what Flash does.
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.
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.
This tool lets you select elements (shapes, strokes, fills, symbols, bitmaps) in the workarea by clicking on it (simple click). If you wish to select several objects together hold down the SHIFT key or use a selection box or the lasso (see next).
You also can drag the mouse pointer to select an area with one or several objects. You certainly have to do this for a drawing made in merge mode, i.e. a collection of simple shapes). If you want to select a non-rectangular area, use the Lasso tool.
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.
Warning: This tool also can act as a distortion tool ! See the Flash object transform tutorial. Always make sure that you see a big "cross-hair" cursor before you start moving around anything.
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.
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:
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 Gradiant 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.
Select several objects or parts of a shape. Remember: to transform an object into a shape, break it apart. This tool also includes a "magic wand" mode (see the controls)
This is the tool that allows you to make the most complex drawings, i.e. pathes with Bezier curves.
(not explained here ....)
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.
Draws simple lines.
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.
Below you can see a few drawings. The screen capture has been taken with the Polystar tool activated.
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.
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.
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.
The brush tool lets you paint. There are several special effects and several modes.
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 ...
Choose from the options in the options section ....
This tool allows you to apply color changes to the strokes of drawings.
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.
The paint bucket tool works like the ink bottle tool but it is used to change colors of paintings. You also can fill in empty areas (insides of drawings made with the pencil for example)
Again, you also can 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.
You can select a color from some spot on the workarea. The tool will then automatically change to the paint bucket tool (see above).
Erase stuff. See the Flash object transform tutorial for details.
Some option tools are always displayed, some only for certain tools.
The Tools panel can be configured via Edit->Customize Tools Panel (but for now I suggest not to change anything there).
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.
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:
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.
The basic principles for paint-challenged people like me is the following:
E.g. To the right is a simple apple tree with a green snake (I later erased).
E.g. here is a cat made as explained in Creature Features.
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.
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.
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.
Flash can handle various vector formats and even better: you can modify these within Flash.
To import:
E.g. here is a cat I imported from Free Clip Art. This site has free clipart images for personal use. You can use them for school, fun, non-profit Web sites, and other personal needs.
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.
Here is the result of a three times two trees, two of my cats, an imported cat and a little house.
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 from DadyyCool.
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
You can download the *.fla files here:
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Flash has quite powerful object transformation tools. You should learn about these in order to create more sophisticated drawings and/or morphing (shape tweening) animations animations.
... a rather confusing amount of tools. Probably I forgot something ;)
The select tool (arrow on top) strangely enough has two functions. These are entirely different and may lead to confusion.
To distort objects the easy way, read on ...
If you click on an object or if you select it with a selection box you see this:
You then can move it around, but that's not what we are interested in right now. The only important thing you may remember is the following:
... this is not what you want.
Ok, now let's distort an object. Let's start with an oval drawn in object mode. See the picture above or below.
Here is a result, a nice banana:
Result: two bananas of different shape:
You then can fine tune things with the subselection tool (see below).
Hint: To rotate around a random rotation point, see the free transform tool below
Make sure that you understand drawing basics, i.e. have an idea what kinds of tools you got in the tools panel. If you don't, please go read the Flash drawing tutorial.
The free transform tool allows you to do several things
So again, you face a multipurpose tool. You can define its different variants by selecting different mode in the options part of the tools panel (lower end). Read on ...
Instead of dragging around handles as explained below, you also may type in transformation values in the Transform panel. That's useful for technical drawings.
Get it with the Window->Transform menu. I usually have this docked next to the color panels (top right) as in the following screen capture. (If you don't know how to dock, please read the Flash CS3 desktop tutorial).
By default the free transform tool let's you scale, rotate, skew.
You also will see the changes in the transformation panel. Btw. you can move the rotation point (see next section).
In the following screendump we have a picture of a stick man and we'd like turn his right arm. To do so:
After that you can rotate the arm around its new rotation point (as described in the previous section).
The standard options of the transform tool allows to rotate, resize and distort an object. You have to work with options for more complex transforms.
Envelope transforms allow to change the shape of an object in a more controlled way. It works on both shapes and objects. Let's now make a designer chair.
The Menu Modify->Transform gives you the choice of several kinds of transformations
Basically it let's you all you can do with
You can smoothen out shapes, make them blurry or straigthen, etc.
You can for example:
Here is an example of soft edges and straighten:
You can not do everything with composite objects. E.g. to add soft edges, ungroup / break groups apart first, then union...
This tool allows envelope transformations or rather fixing envelope transforms made with the selection tool or with the transform tool in envelope or distortion mode. Handles work like in the Envelope transform tool.
The little squares are distortion points
The little dots are curve control handles with which you can adjust the curves in two ways:
If you can't see well what your are doing (I can't in 100% mode), zoom in like 200 or 400% ...
The eraser tool allows you to carve objects. In the options / controls in the tool panel, you can change the way the eraser works.
Erasing shapes (drawn in merge mode) and graphics objects (drawn in object mode) doesn't lead exactly to the same results. When you carve an object it remains an object. When you carve a (single) shape, it will divide into other shapes.
We shall not explain much here, better try it out ...
Here are the modes:
In the following screen dump we used the 'erase fill option to take out fills from the oval and the rectangle.
Includes a magic wand (see the controls at the bottom of the tools panel)
(to be continued some day)
If you already didn't do it, try the Flash shape tweening tutorial, i.e. learn how to do morphing animations.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of the Flash tutorials.
Snapping refers to a kind of assistance you may get for technical drawings. It helps to position an object with respect to the others and without using the Align Panel.
You can tune the desktop to various snapping modes
I usually just have these ones. (But more often I turn snapping off and then rather align objects with the align panel).
Object spacing does what its name says:
Disclaimer: I am not sure what certain combinations do. Here is for example what happens if you drag the red rectangle close to the yellow one in snap align / snap objects mode with zero object spacing:
To align objects on the stage, there exist three solutions:
With the align panel, you can align, distribute or resize a series of selected objects.
There are two fundamental modes:
The align panel (with "to stage" option unticked):
To see what each icon does, move your mouse cursor over it. The align panel icons convey the following kind of message:
Match size will change the size (either width, height or both) of smaller objects with a larger object. Space works a bit like distribute.
You also may align objects in several frames. For example, to align letters in all frames: Click on the Edit multiple frames button in the bar below the timeline.
This tool is quite dangerous, since it is hard to control what happens in each frame. Make sure to save your file before you engage in this ! Also, when you are done, untick the Edit multiple frames button.
When you draw a new object it is drawn on top of the others.
You can move forward or backwards any selected object(s)
To combine several shapes into an object:
To break apart an object:
Tip: This operation is not innocent, i.e. it creates a new single editable object. If you just want to group vector graphics into a composite object use "grouping" (see below).
Menu Modify->Combine Objects lets you combine objects in several ways:
To break apart an object:
Use this feature, if you plan to re-edit hierarchies of grouped objects as you may have in complex drawings. To group several objects:
To ungroup an object
Note: Flash will allow you to animate grouped objects in a motion tween, but it will create tweening objects in the library (like it does for simple, editable objects). You can't ungroup these anymore, except by breaking them apart. I suggest alwaysusing movie clip symbols for motion animation! Tween objects are bad (at this stage).
Then you have to select the type:
All these symbols can later be edited (double click in the library or the stage to land in symbol editing mode).
Tips:
There is more stuff in the Modify Menu, but that's its enough for now ... :)
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of the Flash tutorials.
In Flash there are three kinds of colors
Both RGB and HSB model is supported for colors
Flash CS3 has several color tools and controls
When you select (or change) fill or stroke color, a color popup swatches pane will pop up. You then can select a color with the eye-dropper tool or alternatively from any color in the Flash workspace.
You also can change alpha channel or type a 6 digit hexadecimal RGB Code (see color panel explanation below)
To work with the color or the swatches panel, select an object on the stage (or decide to modify the one that you are working on)
We recommend to have the color panel docked on top right, else get it with menu Window-Color (or SHIFT-F9).
In the color panel you then can:
The swatches panel (not shown here) includes a series of standard colors. These are same ones you get with the Fill controls in the Tools and Parameters panel
Solid colors can be defined in various ways (and there is a whole science behind it). Let's just recall a few principles. For more information, please see the Wikipedia links in the color article.
Let's define a few terms first:
RGB colors are the most popular ones used in computing applications. A color is defined by the amount of Red - Green - Blue. By default, the CS3 color panel is in RGB mode.
RGB is the way computer monitors work. E.g. to get a nice yellow you need 100% Red + 100% Green + 0% Blue. RGB is a so-called additive color mixing model. “Projection of primary color lights on a screen shows secondary colors where two overlap; the combination of all three of red, green, and blue in appropriate intensities makes white.” (Wikipedia). Now if you project each of these primary colors with different intensity, overlapping colors will change.
RGB colors can be encoded in various ways. For Internet formats such as HTML, CSS or Flash, most often a hex triplet is used, i.e. a hexadecimal 6 digit number. With 2 hexadecimal digits you can represent numbers in the range of 0 to 255.
With ordinary numbers you would represent a full red like this:
The corresponding hex triplet is FF 00 00:
In terms of percentage of colors you get:
Let's now have a look at a few colors in a diagram we copied from Wikipedia on sept 8 2007: It represents "Truecolor", i.e. RGB values in 24 bits per pixel (bpp). In Truecolor, colors can be defined using three integers between 0 and 255, each representing red, green and blue intensities. For example, the following image shows the three "fully saturated" faces of the RGB cube, unfolded into a plane:
| yellow (255,255,0) |
green (0,255,0) |
cyan (0,255,255) |
|
| red (255,0,0) |
 |
blue (0,0,255) |
|
| red (255,0,0) |
magenta (255,0,255) |
For more information about colors see links in the color article. Have a look at Wikipedia's great list of colors if you need to find a number for your favorite color name. (If you speak french, get this one. You also may read the Wikipedia Web colors article. It also includes a list of colors and explains what a hex triplet is.
Below is a standard blue (the brightness/saturation slider remains in the middle)
Below is a blue with augmented brightness (using the slider to the right of the color picker).
The HSV (Hue, Saturation, Value) model also known as HSB (Hue, Saturation, Brightness) defines a color in terms of three components:
The Hue scale from 0 to 360 degrees is the following:
In many graphics tools (not in Flash) you get a HSV color wheel that looks like this:
On the outside you can select a color (H), then on the inside you can select V and S.
For more information about HSV, read Wikipedia's HSV color space article.
In Flash, when you change RGB model to HSB (with the little pull down menu on the top right of the color panel) you will see this:
The slider to the right will adjust both Saturation and Brightness.
According to Wikipedia, “In color theory, a tint is the mixture of a color with white, and a shade is the mixture of a color with black. Mixing with white increases value or lightness, while mixing with black reduces chroma. Mixing with any neutral color, including black and white, reduces chroma or colorfulness. The intensity does not change.”
In Flash, tint is a color that you can add to a symbol in motion tweening. Alternatively (but not at the same time) you can modify its brightness. In addition you can change its alpha value (make it more or less transparent)
See the Flash special effects tutorial tutorial.
Flash supports there are 2 kinds of color gradients (see the picture below)
Color gradients work with color bands. You can define 2 or more colors and Flash will fill in intermediate colors between them. The result then depends:
You can change these be defining and dragging color pointers in the Color panel. Read on ...
There are some built-in gradients (linear and radial) that you may use as is, however you most likely want to change things. To do so, you need the color panel and then manipulate the controls in the preview window.
If you select either "linear" or "radial" Type you will see the gradient preview window at the bottom of the color panel:
The little "arrow squares" you now can move from left-to-right are called color pointers and they delimit color bands.
Here is a list of common operations:
With the gradient transform tool (hidden underneath the Free Transform tool) you can do five things:
(note: I forgot to annotate the triangle which you also can move).
Stretching or rotating a linear gradient works in a similar way:
In computer graphics, alpha compositing is the process of combining an image with a background to create the appearance of partial transparency (Wikipedia)
In more simple terms, you can set the alpha to some percentage:
Hint: With the alpha channel you can create other effects than see-through "windows". E.g. you can overlay textures with color or the other way round.
There are two solutions:
With the free transform tool you can adjust how a bitmap will be applied. You can change:
Select the Free Transform tool, then
Note: I have the impression that there may be some bugs (i.e. the tool acts strangely when I use it twice with several instances of the same bitmap).
You can apply various color changes to all symbol instances (movie clips, buttons and graphics). To do so, play with the Color and Blend controls in the properties panel.
You can add filters (e.g. a gradient glow a bevel or a drop shadow) to movie clip and button symbol instances. Use the Filters panel to do so, (click on the tab in the properties panel), else use menu Windows->Properties->Filters)
To add filters, simply click on the + sign and then play with the parameters. Using different sorts of "Quality" also has an important effect on the rendering, high quality may slow down certain computers.
This is a nice feature that beginners often overlook. So if you need cool looking 3D effects on graphics explore these filters. You also can apply several filters to the same object. In the screen capture below we show an attempt to create a floating 3D button from a simple red circle.
Tip: Since filters are applied to instances of movie clips, you may use them in motion tweens. E.g. in the first key frame you could use no filter and in the second keyframe a filter, or change parameters or apply different filters ....
Just for your information: 3D graphics languages and tools usually offer a much richer palette of color types and much more sophisticated textures. CS4 may have these too, at the time of writing I didn't upgrade yet.
E.g. in VRML/X3D (a Web standard) you get color types like this:
In Flash, you actually can get these effects (but I don't know how to do it in a simple way, the easiest way may be to play with filters as described just above).
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Bitmap tracing means transforming a bitmap graphic (e.g. a photograph) into a vectorized object.
Bitmap tracing will turn a bitmap (e.g. a photograph or a non-vectorized graphic) into vector graphics. This allows you for example to
That's a tough problem, since a picture got many colors and sometimes objects overlap (i.e. you have to remove these and then repair with painting).
To the right you see the picture of some lion that can be found in Vienna (plus the head of a research assistant). We show how we extracted just the lion (about 30 minutes of work).
This will lead to a set of shapes that are neither too big nor to small
There are several kinds of tools and tactics you may use:
Select all the shapes (hit CTRL-A). Then
The result is really dreadful as you can see in the thumbnail to the right:)
See the "lion*" files in http://tecfa.unige.ch/guides/flash/ex/tracing-intro/
There exist four parameters in the tracing panel:
See this little gallery of my traced portrait.
Typical settings you could use are:
Source of the demo application (it uses a component for navigation)
Of course, once you have your trace, you then can remove unwanted elements (e.g. backgrounds in a portrait), change colors or apply all other drawing techniques you know.
We will trace of portrait picture (jpg bitmap) and then add a shape tween to it.
Here is an example that shows the original and the traced result side by side
You can admire the result (files flash-cs3-shape-picture-morphing3.*)
stop();
Of course this is really ugly ...
Illustrator CS3 has more sophisticated bitmaps tracing features. Here is a very short example that includes a shape tween:
Once you hit the trace button, the controls on top will change and you can play with all sorts tracing methods and parameters
Try everything you can
... enjoy
Basically the machine must be told how to group similar pixels together into a vector objects. For example, an algorithm can group together pixels with similar brightness, similar color, or try to find lines from similar pixels.
You can admire the result
The free Inkscape editor can also trace. If you don't own Illustrator and need more than CS3 can offer, you may give it a try.
This time I used another strategy:
You can admire the result. It's also fairly ugly (despite some extra work)
Ok that would be the only picture of me in edutech wiki. In addition I made these very quickly which is not what you should do in a "real" production. The result is really ugly and useless ...
This article or section is a stub.
A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.
This entry is part of the Flash tutorials.
The pen tool allows to create complex shapes with lots of straight lines and perfect arcs.
When you hold down the mouse over the pen tool you can get three other tools that you may use while your are working on a drawing (before hitting ESC)
By default, the Pen tool changes to the Add Anchor Point tool as you position it over a selected path, or to the Delete Anchor Point tool as you position it over an anchor point.
Later, you also can use the subselection tool to repair.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Layers help you deal with more complex Flash projects. Working with layers has several advantages:
The layers tool is part of the Timeline panel.
The layers tool is in the left part of the timeline. Annotations in the following screen capture highlight a few functionalities we will further explain below.
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.
When you create a Flash document, it only contains a single layer, i.e. less than you need.
To create a new layer, either:
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.
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.
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)
The following screen capture shows hidden and locked layers:
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:
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"...
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.
One advantage of using scenes is that you can just test a single scene (menu Control->Test->Scene).
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Frame-by-frame animation means to display one image after each other and that creates the illusion of a movie.
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.
Executive summary of the procedure:
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 10-25 frames / second).
A frame is a drawing that is displayed at a given time. In the timeline, each stop in each layer of the timeline is a frame and they are numbered from 1 to whatever length your animation has. Let's 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 elements 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).
When you start drawing with Flash, everything is drawn by default into a first frame in layer 1.
E.g. if you insert a letter, for example, you will see something like in the screen capture just above.
There are other symbols that can appear in the timeline and we will introduce them later as we need these.
We now will introduce three frame-by-frame animation examples. We will do this in the main time line of the *.fla file. Alternatively, you also can first create so-called movie clip symbols and then edit these objects as described in the end of this article.
Have a look at the this simple animation 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. We will do something slightly different here, i.e. we insert a keyframe every 5 frames.
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.
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:
The procedure is the following (see the picture below)
Repeat this, until you incrementally spelled out "HELLO".
Test if it works:
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:
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.
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.
Now you can publish this as a web page.
As an exercise, you now can add extra keyframes after frame 1,5,10, etc. and move up or down letters. Alternatively, read on ...
Sometimes, e.g. in trailers or in little advertisement boxes you can see some sort of shaky or jittery icons, like in the example 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/
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.
So now you should have (very) roughly something like this:
Create a new keyframe in frame 2 (as explained above).
Below is a picture of the slightly altered graphics:
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.
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 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:
Now we would like to animate the flames of this little rocket.
The easiest way is to use distribute these to other layers
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.
File->Export Movie will just save a *.swf Flash animation file (no HTML and JS).
There are two ways of exporting an *.swf movie.
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.
You now should see something like this:
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)
Now we have two versions of rocket *.swf move clipt that we can reuse in another Flash animations
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.
Below is a short how-to re-use *.swf files , but you also can directly go and read the Flash motion tweening tutorial.
The swf flash files we just created can be used as components in new Flash animation.
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/
You now have a nice rocket and a flashing hello in your library:
Here is the result:
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:
In the Rocket science example and in the others too, we created the animation in the main time line. Alternatively (and better for the future) you should first start by creating a new symbol:
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.
Example files used (including *.fla source) can be found here:
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Motion tweening means motion animation with interpolation.
In Flash, you can create several kinds of animations and associated special effects. To create motion animation, there are 2 options:
In Flash 9, you can animate all sorts of compound objects:
In this tutorial we will mostly work with graphic 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 a graphic symbol and to put it in a separate layer.
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:
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:
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. 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 ....
The principle of motion tweening is quite simple:
(1) Firstly position an object in different locations at different times
(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.
You should lock all other layers. This way you are sure not to edit by mistake a frame of another layer.
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:
Now you already have a first keyframe for your animation. I.e. the cat is waiting in keyframe 1 to be moved.
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:
You now should have something like this:
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.
We want the cat to move back where it came from.
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.
You can add more motion tweens to an object simply by repeating the procedure outlined above.
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.
You can look at the published result (the cat will walk back where it came from) here: flash-cs3-motion-tweening2.html
The directory including the *.fla file which you can load into your Flash and play with is here:
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:
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 ...
You can look at the published result here: flash-cs3-motion-shape-tweening.html
The directory including the *.fla file which you can load into your Flash and play with is here:
If you have to do some frequent zooming you can display the Edit Toolbar (see the screen capture below).
This bar also will allow you to directly edit symbols you got in your library.
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.
To achieve what we just did, you don't need these. But for more precise artwork you certainly will...
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.
If you want, you can:
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.
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.
Alternatively transform an object into a movie clip:
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.
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:
Then edit the sun symbol to create a frame-by-frame animation
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)
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().
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.
If you want, you can:
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.
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.
You should get something like in the capture below:
In the screen capture below, the motion guide would be the red (fatter) line on top of the hill's outline.
If you want, you can:
When you publish a Flash animation, you should first choose the correct settings.
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.
Then select the HTML tab (also in the Publish settings)
This will copy three files to the same directory where you *.fla file sits.
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).
We will improve a bit the flying rocket example, i.e. have the animation stop and display some friendly "Hello".
stop();
Here is screen dump with the 2 new layers and the bit of ActionScript code.
If you want, you can:
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. 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.
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.
You also can look at some of the videos you can find on the Adobe web site
(including the *.fla's)
Grab stuff from this directory:
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Shape tweening means transforming an object from one state into an other. This is usually called morphing.
You can transform any form (shape) into any other form. Shape tweens work on so-called editable objects, e.g. it will not work with symbols or grouped objects. You may shape tween:
Also, as in motion tweening, the object(s) to be shaped must be in a separate layer.
You should have something like this:
This will insert an empty new Keyframe
In this frame, draw a new object, i.e. we inserted a Polystar, also in object mode.
Then make it a bit "oval" and adjust it more or less to the size of the oval
You should have something like this:
Done :)
Notice: If CS3 refuses to create a shape tween, you probably work with a symbol (e.g. a movie clip or a graphic symbol) or another non-editable object. Forget it, it won't work !. To extract the graphics from a symbol instance: Right-click->Break apart or double click on the symbol or symbol instance to enter symbol editing mode, then copy paste the graphics you need.
To morph images there are two kinds of solutions:
See the Flash bitmap tracing tutorial for some ugly examples or portrait morphing.
In this animation I made three keyframes
You can admire the result (files flash-cs3-shape-tweening-tear.*)
Anyhow, the idea is that for some shape transformations, you should learn how to to transform shapes. See the Flash object transform tutorial
In order to create some slightly better shape animations you can give Flash hints where a shape should go. “Shape hints identify points that should correspond in starting and ending shape. For example, if you are tweening a drawing of a face as it changes expression, you can use a shape hint to mark each eye. Then, instead of the face becoming an amorphous tangle while the shape change takes place, each eye remains recognizable and changes separately during the shift.” ([1], retr. nov 2008)
Let's look at a not so canonical example (shape hints work best for shapes that do not move a lot). These hints do something to the animation, but do not ask me what exactly. To do shape hinting right, each morphed shape should be in a different layer if I understand right.
Below are three screen captures for keyframe 1, keyframe 2 and keyframe 3 of an animation that starts with a tear on top. It then separates into 2 tears. In the third keyframe one becomes a hill and the other one morphs into a tree. It almost looks good, as you can see
 No shape hint in first keyframe |
 Shape hint in middle keyframe |
 Shape hint in last keyframe |
Shape hints will disappear from view when edit something.
In the Flash bitmap tracing tutorial we tried shape hints for a portrait morphing. A 2-color portrait was morphed into another. Some objects were given shape hints.
To use a shape tweened object in a motion tween animation, you simply can save a shape tween as *.swf (Flash) and then import as movie. But you also can draw everything in the same *.fla file using embedded movie clips.
Repeat this for the other objects you want to animate, e.g. create a blue circle that represents a planet.
Click on scene 1 (or whatever your scene is called) to get back to the normal stage (alternatively use the pull-down menus to the right).
The picture below shows the kind of time line in you should get in the main scene.
Of course a planet should turn around the star. Therefore we should embed the planet motion animation with the star motion animation, e.g. something like this motion-in-motion animation
Example files used (including *.fla source) can be found here:
This entry is part of the Flash tutorials.
This article in our Flash series is a summary of: Flash frame-by-frame animation tutorial, Flash motion tweening tutorial and Flash shape tweening tutorial. It also includes some of: Flash CS3 desktop tutorial, Flash drawing tutorial, Flash CS3 keyboard shortcuts, Flash object transform tutorial, Flash arranging objects tutorial, Flash colors tutorial and Flash bitmap tracing tutorial.
You can use this as self-reviewing aid: If you don't understand some items, you will have to go over some Flash tutorials again. This entry also includes two exercises with *.fla files that we used as tasks for mid-term exams...
The way you want your desktop configured depends on your screen size and the type of animation you build. If your screen is big enough, put as many tools at your finger tips as you can. In particular:
E.g. something like this:
If you are lost: go back to the Flash CS3 desktop tutorial
If you are lost: go back to the Flash layers tutorial
There are two modes: merge mode and object mode:
Most of your drawings should be in object mode. So make sure
that this icon is on when you select a drawing tool:
Other commands:
If you are lost: go back to the Flash drawing tutorial and Flash arranging objects tutorial
To transform an object or shape there are several tools, most importantly:
Additional stuff is in the Modify menu. Also see the Flash CS3 keyboard shortcuts.
If you feel lost, go back to the Flash object transform tutorial.
Set snapping preferences right: View->Snapping or right-click on the workspace. Then Edit snapping
If you need this: see the Flash arranging objects tutorial.
See the Flash colors tutorial if needed.
Is useful for several things, e.g.
Frame by frame animation works with anything. Just draw any kind of shapes or graphic objects or whatever else in each keyframe. Animation simply works because the frames are shown to the user in rapid succession.
To add new keyframes that are empty:
To add new keyframes and copy over contents from the last keyframe:
If you are lost: go back to the Flash frame-by-frame animation tutorial
You only should animate non-editable objects (symbols, text boxes, etc.). It's best to turn all your animated objects into movie clips because you then can use Filters. E.g. add a glow or a bevel to an object.
If you are lost: go back to the Flash motion tweening tutorial
(1) You can add a little bit of shape tweening to motion tweening if your animation is based (as we told you) on symbols. To do so:
This is not shape tweening, but consider using this technique before you try to do motion with a shape tween (putting shapes in different positions in the two keyframes will not just move the shape but also transform it while moving).
(2) Alternatively, add a shape tween inside of the movie clip. Double click on the item in the library and edit it.
If you are lost: go back to the Flash motion tweening tutorial
Note: Timeline effects will be covered in a later tutorial.
Tips:
If you are lost: go back to the Flash motion tweening tutorial
You can only animate editable objects, i.e. shapes and simple drawing objects.
Therefore if you want to morph a graphic symbol, a textbox, a picture, etc. break it apart. You may have to break it apart more than once. In case you don't want to break apart a symbol because you also want to use it in a motion animation, double-click on it to enter symbol edit mode and copy/paste the graphics. Then, go back to the main timeline.
Then simply follow the same procedure as for the motion animation:
Tip:
If you are lost: go back to the Flash shape tweening tutorial
If you are lost: go back to the Flash motion tweening tutorial.
You can import an *.swf file and move it as a movie clip symbol.
Alternatively, you can create animations within animations:
You also can copy/paste a series of frames (e.g. a frame-by-frame animation or a motion tween to this new embedded movie symbol from another *.fla file:
So it is copy/paste frames, not "normal" copy/paste !
Important: Make sure where you are when you edit, check whether are you editing a scene and the main timeline or whether you are editing a movie clip i.e. in symbol edit mode ! If you mix up the two (or more) levels of editing you are likely to mess up things ! This is the same problem as customizing button symbols
If you are interested in working with embedded movie clips, there is more detailed explanation in the Flash embedded movie clip tutorial
If you are totally lost: go back to the Flash frame-by-frame animation tutorial, Flash motion tweening tutorial and the Flash shape tweening tutorial (there is some useful information in each of them). Finally you may have a glance at the ActionScript 3 interactive objects tutorial if you need some more ActionScript tricks.
Complete a weather animation by using the existing layers and the objects in the library. You only need to add one extra motion guide layer to complete the tasks described below.
Download the *.fla file from here:
Then look at the solution (swf file):
Notes:
Tip: This is a motion tween animation with a shape transform of the cloud instance (not a shape tween !)
Tip: Use a frame-by-frame animation (e.g. about 10 frames)
Tip: This is a motion guide tween.
Tip: This includes at least 2 shape tweens in a row. Use color gradients: 1-2 color bands should do. Do the gradient transform before you start duplicating the sky of frame 1. Alternatively you also can add a glow to the sun with a filter ...
You can find the solution here:
Note: some vector graphics, i.e. the trees and the cloud have been taken from the Open Clip Art Library. You can find the SVG files in the same directory. Before importing to Flash I made some modifications with Illustrator
Complete this animation by using the existing layers and the objects in the library. It should take you no more than 70 minutes (about 10 minutes for each task).
Please complete the six tasks described below. Most of the work is already done, you only need to complete animations and change properties:
Tip: This is a shape tween (morphing) of a gradient color rectangle (frame 1 to frame 100)
Tip: Remember that you only can morph shapes (paint) and graphics, but not symbols. The manga girl and the pumpkin are symbols (and this is a first problem).
Tip: This is a motion tween of a movie clip symbol (frame 1 to frame 49). Shape of an instance (the Penguin in a given frame) can be changed in the properties panel.
Tip: This is a frame-by-frame animation of an embedded movie clip (double click on the Penguin in the library). Four frames will do.
Tip: This is a motion guide tween, i.e. same logic as the (almost finished) penguin walk
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash CS3 tutorials.
In Flash there are several built-in special effect features.
Some of these effects may be very demanding on your CPU. Try to work with simpler objects or space out generated keyframes if this happens.
Timeline effects are effects that are automatically generated by the Flash environment from an object. You only can parameterize these effects, but not hand-edit generated objects and frames !
NB: Ignore error warnings about Flash 7 etc.
There are three sub-menus for effects:
For each of these effects you can set certain parameters, in particular:
Important: Using the special effects means that you can not change anything Flash will generate. Also, do not make modifications to the object. Flash will:
If you want to remove an effect, it is best to Right-click->Remove on an object ! You also can delete all the generated objects, but this is more work and you may by mistake delete something else ....
The following (ugly) example contains three effects:
(1) Distributed duplicate (tumbling): An object will tumble and be reproduced with X copies. You may set several parameters like:
(2) Blur: Motion blur that may include change of alpha, position or scale of an object
(3) Explode
To edit create special effects animation, you will work with a tool available from the Time-line effects menu. Below we show a screenshot of "Distributed duplicate". You then have to play with the parameters until you get it right. Remember that you cannot make any changes to the object or the generated objects!
The only way you can change an effect is through the edit effects tools. There are two methods:
This way you also can remove an effect.
Example:
An other example that uses tumbling is this "enhanced" video.
“For spotlight effects and transitions, use a mask layer to create a hole through which underlying layers are visible. A mask item can be a filled shape, a type object, an instance of a graphic symbol, or a movie clip. Group multiple layers under a single mask layer to create sophisticated effect” (About mask layers, retrieved 16:51, 8 October 2007 (MEST)).
Masks are layers that will allow you to see what is underneath through a sort of hole (i.e. a drawing). You then can animate this hole with a motion tween for example. Masked layers are the layers underneath.
In the following picture, a mask lets you see part of bookshelf through an oval.
Step 1 - Create some contents:
Step 2 - Add a mask layer:
Step 3 - Define the masked layers:
To undo a masked layer, just right-click and revert back it to "normal". We show a picture of mask and masked layers further down. Such static masks are of course not very interesting, so let's move on ...
Step 1 - Add a simple motion tween:
Step 2 - Do a motion tween
The user will only see things that will lie underneath the tweened object. E.g. if you move a circle, only the stuff that sits under the moving circle will be shown.
Example:
The tweened shape will determine what parts of the drawing in the masked layer(s) you can see.
The principle is not the same as for the simple motion tween. You will have to created an embedded movie clip in the mask layer. If you don't understand embedded movie clips, read the Flash embedded movie clip tutorial.
Step 1 - Create a movie symbol
Timeline might look like this:
Step 2 - Edit the movie symbol
Your embedded movie clip might look like this:
Example:
This section needs to be written, but filters are also introduced in the Flash colors tutorial.
Look at the options in the parameter panel when you do a "normal" motion or shape tween and play with these ...
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of Flash tutorials
Video components are prebuilt interface elements (widgets) that will speed up video integration. In particular, the FLVPlayBack Video Component allows to render videos without any ActionScript programming. It includes a nice choice of skins for user controls. Videos also can be enhanced with captioning or they may interact with the rest of the animation. Some of these techniques require some more technical skills, e.g. knowledge of XML and some ActionScript.
Flash has built-in video management components.
Flash uses a special video format (*.flv) to render videos. You may directly encode your formats with the CS3 video encoding tool (that's what I suggest) or wait until Flash will prompt you to encode when you import a video in non *.flv format.
The Flash package includes a video encoder with which you can transcode various video formats into *.flv format. It also lets you define cue points and edit (somewhat) the video.
Now, open the Flash CS3 Video encoder program directly from the Desktop (i.e. not from Flash!).
The tool supports most current video formats. You can for example import *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg and *.mp4 formats in this tool. If you need a video file to play with see the Artwork links at the end of this tutorial.
The Flash Video Encoder tool has some limited editing capacity you can access through the settings button. Since videos quickly can become huge, you may want to crop off space from top, bottom or left and right and also make it shorter. You also can choose from various levels of video and audio quality.
See the screen capture below.
Tip: If you want to hear the video, just listen to it with an other tool, e.g. the QuickTime Player if your source is *.mp4. Both tools show time in seconds.
It is import to make a video as small as possible if you plan to do timeline animations as shown in the Importing a video to the timeline section.
“Cue points cause the video playback to start other actions within the presentation. For example, you can create a Flash presentation that has video playing in one area of the screen while text and graphics appear in another area. A cue point placed in the video starts an update to the text and graphic, while they remain relevant to the content of the video. (Adobe CS3 Video Encode Help, sept. 2007)”
You don't need cue points for just playing a video, so you may come back later and read about inserting cue points.
There are several ways of adding cue points.
I don't think that there are any real differences between these two kinds of cue points. At least from an ActionScript point of view, the difference is simply that you can identify with which category a cue point is labelled (type property).
Each cue point consists of a name, a type and the time at which it occurs and we then can retrieve this information in Flash as you will see in handling events from the movie section below. Anyhow, I rather suggest to add cue points through the component's parameters, since you then can add/remove cue points whenever there is a need.
The advantage of the ActionScript and the XML method is that you easily can change these cue points when adjustments are needed. E.g. you may notice at some point that your video file is too big and you may want to shorten it down. It's faster to change AS code or XML descriptors than entering the cue points again with the encoding tool.
Your modern cell phone may encode video with MP4. Flash 9 (CS3) can not directly import this format. If you don't have access to the CS3 Flash Video Encoder tool (an older Flash version may not encode newer formats), you may download the free SUPER tool (it has more features than many commercial tools).
Read the MP4 article to see how I managed to use this free (and excellent) SUPER encoder to go from MP4 to MPV with MPEG3-v2/MP3.
Let's now import a video and use it the simple way. In this example we will show how to import a video I (quickly) made with my Nokia N73 cell phone. The easiest strategy is to directly import a *.flv file.
The most simple procedure to use a video with the FLVPlayBack component is the following one:
just keep the file name
Else when you copy both the *.sfw and the *.flv file to some other place you flash file won't find the video anymore and the playback will break.
Enjoy ....
Here is an alternative and longer method for using the FLVPlayBack component.
You then can from a popup menu choose how the video should be deployed (see next step).
The video you will import will simply use the standard video playback component that you also can find in the "Components" panel.
You must tell Flash where the video file will sit on your server (see also the next step)
For example, instead of:
I only kept the file name since I plan to put all files in the same directory on the server. Also on my desktop the files sit in the same directory.So I shortened down the path:
In the property inspector or parameters panel you may set things like:
A caption is a text that is displayed dynamically while the video is playing. Captions may serve several purposes:
In order for captions to work, you must do three things:
To import the video, use the same procedure as in Using the FLVPlayback component
If you are not familiar with XML, you may have a glance at the XML article and maybe the DTD tutorial. Then, we also suggest to work with an XML editor in order to insure that your file is well formed. We suggest the free Exchanger XML Lite. If you don't feel learning XML, just make very sure that you exactly use a template as described below. One missing tag or or some syntax mistake like a missing ">" will make your animation fail.
Flash doesn't support the full Timed Text specification and the documentation at Adobe is rather shaky. For those who are familiar with XML I wrote a little DTD that helps editing. Just grab it from the Timed Text article and also copy/paste the XML template.
Note: Timed Text is defined with a complex XML Schema but since Adobe Flash only implements a subset, it's not worth using this.
In order to write this XML file you must know what caption to insert at which time and for how long. The CS4 Adobe Media player does show time and maybe other *.flv video players too.
If you want high precision, you also can load the *.flv file into the timeline (see below) and then play it with View->Bandwidth Profiler on. Write down the frame number for captions and then divide by the frame rate. Hit:
As a minimum we suggest to enter the following data. For each caption enter:
Time is in seconds, but also may use a more complex format like
02:30.5
meaning 2 minutes, 30 seconds and a half.
Here is the file we called timed-text.xml and that we used in this example
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Daniel's Office</p>
<p begin="5" dur="5">My Palm Tree (from NYC)</p>
<p begin="11" dur="7">My Bookshelf</p>
<p begin="18" dur="5">My favorite Flash Drawing Book</p>
<p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
<p begin="30" dur="5">My Ubuntu Linux workstation</p>
<p begin="33" dur="5">Working hard on Flash Tutorials using the Xemacs Editor</p>
<p begin="42" dur="5">The outside (not my bike)</p>
</div>
</body>
</tt>
Note: Captions may overlap, i.e. Flash will display a new caption on a new line if the previous one is still on. You can see this in the example we present in the next section.
For now, just grab the template below and add "p" tags, make sure to close them as in the example above. Replace "Let's start" by your own caption of course.
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head><styling></styling></head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Let's start</p>
</div>
</body>
</tt>
As explained in Tom Greens' Captions for Video with Flash CS tutorial, you can use a different text box to display the captions.
Tell the captioning component to use the textbox you just made to display captions:
Just look at this example (file timed-text2.xml). I don't really understand how some styling tags work. I'd expect for instance to behave backgroundColor within a span like in HTML but it doesn't. I don't know this behavior is a feature or a bug or my misunderstanding of the manual.
If something is not clear, please download the *.fla file and look at it. Make sure to verify that both the playback and the captioning component parameters are ok and that you put all the files in your computer or the server (including the skin *.swf, the *.flv and the *.xml file) in the same directory. Do not forget to copy the skin !
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="0" dur="9" style="title">Daniel's Office</p>
<p begin="5" dur="4">My Palm Tree (from NYC)</p>
<p begin="10" dur="13" style="title">Books ....</p>
<p begin="11" dur="7">My Bookshelf</p>
<p begin="18" dur="5">My favorite Flash Drawing <span tts:color="red">Book</span></p>
<p begin="24" dur="16" style="title">Computers ....</p>
<p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
<p begin="30" dur="5">My <span tts:backgroundColor="yellow" tts:color="black">Ubuntu Linux workstation</span></p>
<p begin="35" dur="5"><span tts:backgroundColor="transparent"></span>Working hard on Flash Tutorials using the Xemacs Editor</p>
<p begin="40" dur="4">The outside (not my bike)</p>
</div>
</body>
</tt>
There is an alternative method. Read Captions for Video with Flash CS3 (Part Two), by Tom Green, Digital Web Magazine, June
Now we will look at a very different way of using videos. Instead of using the playback component we will include the video into the timeline (each video frame will be a timeline frame). This will allow us to create videos augmented with animations in an easy way.
If you embed a video into the timeline, then you don't get the ready-made video control as above. Only embed video in the timeline if you plan to add animations the simple way and if the video file is really small. Also you shouldn't care about smaller synchronization problems with the audio track.
Embedded video will make your timeline really long, although you can choose to have it its own timeline. Anyhow, in this example we took the "hundreds of frames" timeline option.
We will insert the video in frame #2. We also will add a play button that will jump to frame 2 and play the video.
In our example we added three buttons:
The ActionScript code:
/* This will stop Flash from playing all the frames
User must stay in Frame 1 */
stop();
/* Associate a handler function for each button instance */
btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);
btn_book.addEventListener(MouseEvent.CLICK, clickHandler);
/* Instead of writing a function for each button, we just create one.
In order to understand which button was clicked, we ask from the event
the label of the button(event.currentTarget.label).
Then we gotoAndStop(x) to Frame 374 for Credits
Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
switch (event.currentTarget.label)
{
case "Credits" :
gotoAndStop(609);
break;
case "PLAY" :
gotoAndPlay(2);
break;
case "Go to Book Scene" :
gotoAndPlay(230);
break;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
The "embed in timeline option" is probably only useful if you plan to play around with fine grained frame-by-frame jumping around or if you plan to add animations that synchronize with the video as described in the next example. Otherwise it is better to use a external video with the video playback component as described above.
Note: I noticed that when you import more than once a movie, file size will grow a lot ! Probably a side-effect of the undo mechanism. So 'do not do this. If you notice this problem, save the file with "save as". The new version will be ok. (Maybe there is another solution to trim down file size).
Embedding video into the timeline makes sense (IMHO) if you are looking for an easy way to synchronize other animations with the video. This requires no more additional ActionScript knowledge than you need for simple animation and navigation.
In this example, we add various animations (e.g. two motion tweens and a shape tween) to the project. Below you can see that books are tumbling out of a bookshelf while the video shows a "real" bookshelf.
Here is the action script code that we use to implement a simple play button, plus two other ones that are not really necessary. All the rest is just simple Flash animation
/* This will stop Flash from playing all the frames
User must stay in Frame 1 */
stop();
/* Associate a handler function for each button instance */
btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);
/* Instead of writing a function for each button, we just create one.
In order to understand which button was clicked, we ask from the event
the label of the button(event.currentTarget.label).
Then we gotoAndStop(x) to Frame 572 for Credits
Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
switch (event.currentTarget.label)
{
case "Credits" :
gotoAndStop(572);
break;
case "PLAY" :
gotoAndPlay(2);
break;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
Working with cue points is another way to have your video interact with other animation. It's a more difficult solution than using timeline videos, but more elegant.
Code for jumping to cue points is fairly easy if you know how to use buttons or button components.
As a bonus I added some invisible trees that will become visible when the user jumps to the cue point.
To adapt this code to your needs: Change "XPS" to the name of your cue point. Remove the lines with trees if you don't want this ...
btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);
function jumpLapTop(event:MouseEvent):void {
video.seekToNavCuePoint ("XPS");
trees.visible = true;
}
trees.visible = false;
Without trees:
btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);
function jumpLapTop(event:MouseEvent):void { video.seekToNavCuePoint ("YOUR_CUEPOINT"); }
Implementing animation that is triggered by the video's encounter of cue points was a bit harder since documentation wasn't so easy to find.
The following code will display a trace of all your cue points in the Flash CS3 output window. To make it work:
// You must import this class (even when you just script the timeline !!)
import fl.video.MetadataEvent;
video_component.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
function cp_listener(eventObject:MetadataEvent):void {
trace("Elapsed time in seconds: " + video_component.playheadTime);
trace("Cue point name is: " + eventObject.info.name);
trace("Cue point type is: " + eventObject.info.type);
}
When you play the *.flv video you can see these kinds of messages in the output window:
Elapsed time in seconds: 7.485 Cue point name is: palm_tree Cue point type is: event Elapsed time in seconds: 9.888 Cue point name is: books Cue point type is: navigation Elapsed time in seconds: 20.52 Cue point name is: missing_manual Cue point type is: event Elapsed time in seconds: 26.188 Cue point name is: XPS Cue point type is: navigation Elapsed time in seconds: 31.674 Cue point name is: ubuntu Cue point type is: event
Now let's put this information to use and rewrite the code. Since this is near the end of this tutorial we shall make it slightly more complicated. But the resulting animation is still quite ugly. I am just teaching some Flash and I do not have time for decent artwork or even good design. Students should aim at both :)
Let's create some Flash movie clips:
Once you got one or more of these animations:
movie_books
movie_books.stop(); movie_books.visible=false;
At the heart of cue point events management is an event handler that is registered, i.e. we use exactly the same principle as for user interaction with buttons (Flash button tutorial).
The cuepoint_listener function includes a switch statement that deals with each event it receives.
movie_books.visible=true; movie_books.play();
If you want music textures, you can for example import a sound file into the library and then export it for action script (Right-click on it). Make sure you remember its class name. Else you can dynamically import sound from external files as shown in the Flash drag and drop tutorial.
So here is the complete code you can find in the *.fla file of this example:
import fl.video.MetadataEvent;
// Stop all the animations of the various movie clips
// Make the bookshelf invisible
movie_trees.stop();
movie_books.stop();
movie_books.visible=false;
movie_penguin.stop();
movie_manual.stop();
movie_manual.visible=false;
// This is a sound of the class music
// Was defined by exporting the music file in the library
var music:Music = new Music();
var volume = new SoundTransform(0.2, 0);
// Add a cuepoint for the end and which is not in the flv movie
video_component.addASCuePoint(40, "End");
video_component.addEventListener(MetadataEvent.CUE_POINT, cuepoint_listener);
function cuepoint_listener(obj:MetadataEvent):void {
switch (obj.info.name)
{
case "palm_tree" :
movie_trees.play();
break;
case "books" :
movie_trees.stop();
movie_books.visible=true;
movie_books.play();
break;
case "missing_manual" :
movie_books.stop();
movie_books.visible=false;
movie_manual.visible=true;
movie_manual.play();
break;
case "XPS" :
movie_manual.stop();
movie_manual.visible=false;
var song = music.play(0,3,volume);
break;
case "ubuntu" :
movie_penguin.play();
break;
case "End" :
// song.stop();
movie_penguin.stop();
movie_penguin.visible=false;
movie_books.visible=false;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
Below some more technical links which so far are not really used much in this tutorial.
Note: (URLs seem to be unstable if they don't work go to Programming ActionScript 3.0
All Artwork (clipart) is from:
Sound (except voice track on videos) is from:
Videos
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Grab the various *.fla files from here:
Flash can handle several sound formats:
(Some formats may depend on whether QuickTime is installed on your computer).
Best bet is to use MP3 format, since it is very popular. E.g. it is easy to find music or sound textures on the Internet.
You can attach sound to any frame via the properties panel
Ideally, each sound should have its own layer. This way it is much easier to control fade in/outs, when to stop etc. You also can see exactly how far the sound will extend on the timeline. Hit F5 or F7 (if you want to stop the sound) somewhere to the right.
In the configuration panel you can change certain parameters and also edit a bit.
Sync: Will defined how sound is synchronized with the timeline.
Repeat:
Effect:
You can attach sounds to buttons in the same manner as above.
It is better to load sounds with ActionScript if your sound file is large, e.g. a background music or if you want to to trigger a sound as a result of some complex user interaction.
Insert this kind of code with F9 in the frame where you want if to load. Typically, use a frame in a layer called "action" or "script".
To load a sound from an external file
var request:URLRequest = new URLRequest("track.mp3");
var your_sound:Sound = new Sound();
your_sound.load(request);
To play it:
your_sound.play();
To play 5 loops:
your_sound.play(0,5);
To stop all sounds (this is a static method, just insert the line as is).
SoundMixer.stopAll();
For an example used in the Flash drag and drop tutorial, look atflash-cs3-drag-and-drop-matching-3.*
This code snippet would start playing sound on load
var mySound:Sound= new Sound();
mySound.loadSound("track.mp3" , true);
mySound.onLoad = function() {
mySound.start();
}
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
Buttons are interactive interface elements on which a user can click. As an alternative you also could use component buttons (see the Flash components tutorial).
Buttons are interface components to add simple interactivity, such as displaying extra information, launch a movie clip etc.
(1) To create a button:
(2) To make use of a button:
ActionScript 2.0 and ActionScript 3.0 (Flash CS3/9 and later) do not work the same way !
In this tutorial we only will cover ActionScript 3 (three) programming elements. Read the flash button tutorial - AS2 if you must use the older version (Flash 8/ActionScript 2)
If you lack any sort of programming experience, then download the source files I made and play with them, e.g. add an extra picture and fix the code if needed...
Flash contains a good variety of pre-built buttons. To use these, your first should dock the Library-Buttons.fla panel next to your libraries panel: Menu Window->Common Libraries->Buttons. (See the Flash CS3 desktop tutorial on how to dock a panel).
In this section we will first just discuss the architecture of a Flash button.
In built-in buttons library, buttons are arranged in folders. Double click to open these. Then, you may may inspect various button symbols by clicking on a button. In the upper part of the library panel you will get a preview. Click on the arrow to see how the button behaves.
For use in your own animation I suggest to copy a button first to your own library (else Flash will do it for you too)
Next, from your library panel simply drag the button on the stage. This will create an instance of the button. To remove it from the stage, select it and hit the delete key. You will see in the properties panel something like Instance of: rounded orange and you now should give it a name, e.g. my_button.
To customize a button symbol, double-click on the icon of the symbol library panel. This will let you work just on this object, i.e. it puts you into a Symbol editing mode. There are other ways to get into this editing "inside" (via the general menu or double-click or right-click on an instance).
You now could for instance change the font or the color of a symbol or make changes to its frame-by-frame animations. Anyhow, we suggest to leave the buttons as is for the moment.
There are several solutions:
As you can see in the picture below, on the Edit Bar from left to right you can see the cascade of editing levels. Right now we are editing the "bubble to red" button.
While you can use these buttons "as is" (except making them larger or smaller maybe), you only need to know how to insert a label for starters.
A symbol is basically something that you can use several times over, but its fundamental look and feel properties will remain the same, including its the label. So if you need buttons with other labels you must create copies of these symbols. In your library panel right-click on the icon of the symbol and select duplicate from the popup menu. Choose an appropriate name, e.g. "do not press"
To change the label (and font) of a button symbol:
Built-in button symbols contain four frames and several layers. For each frame, different drawings may be defined but some, e.g. the label text may be reused in several layers. Look at the various frames. The four mandatory frames for button symbols (including the ones you may create) are:
Various kinds of buttons have various layers (usually between three and five) depending on the complexity of the drawings. These layers contains just drawing for these four button frames. The Flash engine will then select the appropriate frame for display according to user action (mouse over, mouse down, etc.).
Beginners just should use built-in buttons. There is no need to change anything in the keyframes or the layers except the label. However, you later can change any drawings in any way you like. A button can be made of any sort of graphics you like (even pictures as you shall learn below) and you even may add animation with embedded movie clips.
You can attach behaviors in various ways to buttons but there is no difference between built-in buttons and the ones you can create yourself. The most obvious one is to jump to a different frame in the main timeline after the user clicks on a button.
In the next section we will use a button to launch a rocket.
The goal is make a flash animation that stops at frame one when the file loads. The user then will see a button on which he can click. The animation should restart in frame 2 after the user clicked.
We have to give the launch button (not the symbol in the library but the thing we got on stage) a name. Once you drag a library item to the stage you produce an instance of the symbol. In order to find this instance, Flash needs to know it by name. It's like in magic: you name it - you control it ;)
launch_button
Make sure that the name is doesn't have any blanks or special symbols inside (actually Flash will complain if you define an illegal name).
stop();
This will just stop the execution of the main movie. I.e. Flash will only display the contents of the first frame (all layers) and then wait.
stop ();
line. So click again in frame 1 of the Action Layer and hit
F9:Add this below the "stop();":
launch_button.addEventListener(MouseEvent.CLICK,launchRocket);
function launchRocket(event:MouseEvent) { gotoAndPlay(2); }
We can not really explain event driven programming here (see the ActionScript 3 event handling tutorial), but the principle is the following:
Of course you can reuse this code for a similar problem, i.e. moving the animation to another spot on the timeline when the user presses a button. All you need to do is this:
gotoAndPlay(2);. E.g.
change it to 5 if you want it jump to frame 5.Tip: If your code is getting bigger, undock the Actions Frame panel and pin it down. Hit F9 to to hide it again.
If this sounds too complicated, you can start with less:
stop();
start.addEventListener(MouseEvent.CLICK,launch);
function launch (ev){ gotoAndPlay (2); }
We now have an "Enter" button in the first frame of the animation. As soon as the user will click on it, the animation will move to frame 2 and play the rest. Of course, this means that you have to put something in frame 2 (and beyond) that users can look at.
You can build little flash "web" sites with buttons with what you just learned. The principle is simple:
We show you how to do this step-by-by with ActionScript 3:
For each button:
You may not have heard of "named frames" so far, but they are quite practical and using named frames is good development policy. If you use names for frames, you later can move them around. Also it is easier to remember names.
To name a frame:
We basically use two actions:
gotoAndStop ("your_frame_name"); to jump to
a frame and stopgotoAndPlay (...); to jump to a frame and let it
play until it runs into a stop.The script then should look something like this. I think I made it as simple as possible for non-programmers. Code inserted between /* .... */ is just comment, i.e. information that Flash will not interpret but that is useful to you as a developer.
/* This will stop Flash from playing all the frames
User must stay in Frame 1 */
stop();
/* Associate a different handler function for each button instance:
Syntax: button_name.addEventListener(Event.type, function_name
Lines below mean:
* If the user clicks on the palmtree_btn with the mouse,
then the function clickHandler3 defined below will execute
*/
home_btn.addEventListener(MouseEvent.CLICK, clickHandler1);
lake_btn.addEventListener(MouseEvent.CLICK, clickHandler2);
palmtree_btn.addEventListener(MouseEvent.CLICK, clickHandler3);
sunrise_btn.addEventListener(MouseEvent.CLICK, clickHandler4);
/* Each function defines where to move the playhead in the animation.
E.g. clickHandler2 will go to frame 3 and then stop */
function clickHandler1(event:MouseEvent) { gotoAndStop("home"); }
function clickHandler2(event:MouseEvent) { gotoAndStop("lake"); }
function clickHandler3(event:MouseEvent) { gotoAndStop("palmtree"); }
/* This one does not stop, it will play the animation */
function clickHandler4(event:MouseEvent) { gotoAndPlay("sunrise"); }
The purpose of this application is again to explain buttons and some Action Script, not to make the perfect slide show tool.
To create a slideshow, we will first import the pictures and adjust the stage. This way we we can get a feel for the size of buttons needed. Then we draw the buttons. Finally we will make it interactive
So you should have something like this.
So now you should have something like 2 button symbols in the library and an named instance of each on the stage.
As you will see, the button will change color when you move the mouse over it. Do the same with the other button.
Firstly insert a stop to the animation:
stop();
This is ActionScript code that will stop the animation right after frame one is loaded. Only by clicking the buttons can the user then go forward or backward.
Then insert this slide show code:
forward_btn.addEventListener(MouseEvent.CLICK,forward);
back_btn.addEventListener(MouseEvent.CLICK,backward);
function forward(event:MouseEvent) {
if (this.currentFrame == this.totalFrames)
{
gotoAndStop(1);
}
else
{
nextFrame();
}
}
function backward(event:MouseEvent) {
if (this.currentFrame == 1)
{
gotoAndStop(this.totalFrames);
}
else
{
prevFrame();
}
}
This ActionScript 3.0 code firstly adds Event Listeners to each button as we have seen before.
The forward function has some "if-then-else" logic inside. Let's look at its "if-then-else" statement.
if (this.currentFrame == this.totalFrames) { gotoAndStop(1); }
else { nextFrame(); }
Meaning: When the user clicks on the forward button, the Flash engine will check if the current frame is the last frame then move to frame 1 else just move to the next frame.
The backward function implement the following:
if (this.currentFrame == 1) { gotoAndStop(this.totalFrames); }
else { prevFrame(); }
Meaning: If we are on the first frame then go to last frame, else go to the previous frame.
In order to use this slide-show code for your own slide show you do not need to understand it. Just copy and paste it, but make sure that your forward button instance is called "forward_btn" and the backward button instance "back_btn".
Tip: If this doesn't work, make sure that your Publish settings say ActionScript 3. It won't work with ActionScript 2. Also make sure that your button instances are named and that these names correspond to the ones you use in the script. It doesn't matter how you name the button symbols, we talk about button instances here !
Finally, make sure that these buttons are displayed throughout the "movie"
Your timeline should roughly look like this:
You may want to fix the title page.
This slide show was fairly simple. Now you maybe would like to use fancier buttons. See Animated buttons below.
You can make image maps from bitmaps too. I.e. you could use a picture and then insert "hot spots".
Steps (more details when I have time):
.... This gets you a roll-over region :)
If you like the idea of crazy buttons, you really can use all your graphics and animation skills. Buttons can include any kind of graphics, including embedded movie clips.
In order to use animations within button symbol frames, you simply create an embedded movie clip (see Flash motion tweening tutorial or Flash embedded movie clip tutorial) and then put it in one of the "up", "over" or "down" frames of the button symbol.
First, create a layer in the timeline called "Script" or "Action". Use frames in this layer to script behaviors. You can extend the scope of a script by hitting F5 in the timeline (same principle as for backgrounds).
To attach some behavior to a mouse click, use code like this:
button_instance_name.addEventListener(MouseEvent.CLICK,function_name);
function function_name(event:MouseEvent):void {
gotoAndPlay(2);
}
Replace button_instance_name' and 'function_name' by whatever naming is appropriate.
Here is a good example:
go_button.addEventListener(MouseEvent.CLICK,goFrameA);
function goFrameA (event:MouseEvent) { gotoAndPlay(2); }
Here is a bad example ("go-button" has a dash, and "go Frame" is two words)
go-button.addEventListener(MouseEvent.CLICK,goFrameA);
function go FrameA (event:MouseEvent) { gotoAndPlay(2); }
stop(); - will stop the animation. You can insert
stops(); wherever you like in your timeline.gotoAndStop(4); - will jump to frame #4 and stop.
Use this for still pictures.gotoAndPlay("my_frame"); - will jump to frame
called "my_name" and play that frame and the following ones. Use
this for animations that extend over several frames. But then
consider inserting a "stop();" in the last frame of that
animation.gotoAndPlay(4); - will jump to frame #4 and play
the rest (as above).If you search the Internet you can find lots of Flash slide shows. Some commercial, some tutorials, some good, some outdated. Here are a few:
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of Flash tutorials
Video components are prebuilt interface elements (widgets) that will speed up video integration. In particular, the FLVPlayBack Video Component allows to render videos without any ActionScript programming. It includes a nice choice of skins for user controls. Videos also can be enhanced with captioning or they may interact with the rest of the animation. Some of these techniques require some more technical skills, e.g. knowledge of XML and some ActionScript.
Flash has built-in video management components.
Flash uses a special video format (*.flv) to render videos. You may directly encode your formats with the CS3 video encoding tool (that's what I suggest) or wait until Flash will prompt you to encode when you import a video in non *.flv format.
The Flash package includes a video encoder with which you can transcode various video formats into *.flv format. It also lets you define cue points and edit (somewhat) the video.
Now, open the Flash CS3 Video encoder program directly from the Desktop (i.e. not from Flash!).
The tool supports most current video formats. You can for example import *.mov, *.avi, *.mpeg, *.dvi, *.wmv, *.3pg and *.mp4 formats in this tool. If you need a video file to play with see the Artwork links at the end of this tutorial.
The Flash Video Encoder tool has some limited editing capacity you can access through the settings button. Since videos quickly can become huge, you may want to crop off space from top, bottom or left and right and also make it shorter. You also can choose from various levels of video and audio quality.
See the screen capture below.
Tip: If you want to hear the video, just listen to it with an other tool, e.g. the QuickTime Player if your source is *.mp4. Both tools show time in seconds.
It is import to make a video as small as possible if you plan to do timeline animations as shown in the Importing a video to the timeline section.
“Cue points cause the video playback to start other actions within the presentation. For example, you can create a Flash presentation that has video playing in one area of the screen while text and graphics appear in another area. A cue point placed in the video starts an update to the text and graphic, while they remain relevant to the content of the video. (Adobe CS3 Video Encode Help, sept. 2007)”
You don't need cue points for just playing a video, so you may come back later and read about inserting cue points.
There are several ways of adding cue points.
I don't think that there are any real differences between these two kinds of cue points. At least from an ActionScript point of view, the difference is simply that you can identify with which category a cue point is labelled (type property).
Each cue point consists of a name, a type and the time at which it occurs and we then can retrieve this information in Flash as you will see in handling events from the movie section below. Anyhow, I rather suggest to add cue points through the component's parameters, since you then can add/remove cue points whenever there is a need.
The advantage of the ActionScript and the XML method is that you easily can change these cue points when adjustments are needed. E.g. you may notice at some point that your video file is too big and you may want to shorten it down. It's faster to change AS code or XML descriptors than entering the cue points again with the encoding tool.
Your modern cell phone may encode video with MP4. Flash 9 (CS3) can not directly import this format. If you don't have access to the CS3 Flash Video Encoder tool (an older Flash version may not encode newer formats), you may download the free SUPER tool (it has more features than many commercial tools).
Read the MP4 article to see how I managed to use this free (and excellent) SUPER encoder to go from MP4 to MPV with MPEG3-v2/MP3.
Let's now import a video and use it the simple way. In this example we will show how to import a video I (quickly) made with my Nokia N73 cell phone. The easiest strategy is to directly import a *.flv file.
The most simple procedure to use a video with the FLVPlayBack component is the following one:
just keep the file name
Else when you copy both the *.sfw and the *.flv file to some other place you flash file won't find the video anymore and the playback will break.
Enjoy ....
Here is an alternative and longer method for using the FLVPlayBack component.
You then can from a popup menu choose how the video should be deployed (see next step).
The video you will import will simply use the standard video playback component that you also can find in the "Components" panel.
You must tell Flash where the video file will sit on your server (see also the next step)
For example, instead of:
I only kept the file name since I plan to put all files in the same directory on the server. Also on my desktop the files sit in the same directory.So I shortened down the path:
In the property inspector or parameters panel you may set things like:
A caption is a text that is displayed dynamically while the video is playing. Captions may serve several purposes:
In order for captions to work, you must do three things:
To import the video, use the same procedure as in Using the FLVPlayback component
If you are not familiar with XML, you may have a glance at the XML article and maybe the DTD tutorial. Then, we also suggest to work with an XML editor in order to insure that your file is well formed. We suggest the free Exchanger XML Lite. If you don't feel learning XML, just make very sure that you exactly use a template as described below. One missing tag or or some syntax mistake like a missing ">" will make your animation fail.
Flash doesn't support the full Timed Text specification and the documentation at Adobe is rather shaky. For those who are familiar with XML I wrote a little DTD that helps editing. Just grab it from the Timed Text article and also copy/paste the XML template.
Note: Timed Text is defined with a complex XML Schema but since Adobe Flash only implements a subset, it's not worth using this.
In order to write this XML file you must know what caption to insert at which time and for how long. The CS4 Adobe Media player does show time and maybe other *.flv video players too.
If you want high precision, you also can load the *.flv file into the timeline (see below) and then play it with View->Bandwidth Profiler on. Write down the frame number for captions and then divide by the frame rate. Hit:
As a minimum we suggest to enter the following data. For each caption enter:
Time is in seconds, but also may use a more complex format like
02:30.5
meaning 2 minutes, 30 seconds and a half.
Here is the file we called timed-text.xml and that we used in this example
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"
xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Daniel's Office</p>
<p begin="5" dur="5">My Palm Tree (from NYC)</p>
<p begin="11" dur="7">My Bookshelf</p>
<p begin="18" dur="5">My favorite Flash Drawing Book</p>
<p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
<p begin="30" dur="5">My Ubuntu Linux workstation</p>
<p begin="33" dur="5">Working hard on Flash Tutorials using the Xemacs Editor</p>
<p begin="42" dur="5">The outside (not my bike)</p>
</div>
</body>
</tt>
Note: Captions may overlap, i.e. Flash will display a new caption on a new line if the previous one is still on. You can see this in the example we present in the next section.
For now, just grab the template below and add "p" tags, make sure to close them as in the example above. Replace "Let's start" by your own caption of course.
<?xml version="1.0" encoding="UTF-8"?>
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head><styling></styling></head>
<body>
<div xml:lang="en">
<p begin="1" dur="4">Let's start</p>
</div>
</body>
</tt>
As explained in Tom Greens' Captions for Video with Flash CS tutorial, you can use a different text box to display the captions.
Tell the captioning component to use the textbox you just made to display captions:
Just look at this example (file timed-text2.xml). I don't really understand how some styling tags work. I'd expect for instance to behave backgroundColor within a span like in HTML but it doesn't. I don't know this behavior is a feature or a bug or my misunderstanding of the manual.
If something is not clear, please download the *.fla file and look at it. Make sure to verify that both the playback and the captioning component parameters are ok and that you put all the files in your computer or the server (including the skin *.swf, the *.flv and the *.xml file) in the same directory. Do not forget to copy the skin !
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tt SYSTEM "mini-tt.dtd">
<tt xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1" xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
<head>
<styling>
<style id="title" tts:backgroundColor="transparent" tts:color="red" tts:fontSize="24"/>
</styling>
</head>
<body>
<div xml:lang="en">
<p begin="0" dur="9" style="title">Daniel's Office</p>
<p begin="5" dur="4">My Palm Tree (from NYC)</p>
<p begin="10" dur="13" style="title">Books ....</p>
<p begin="11" dur="7">My Bookshelf</p>
<p begin="18" dur="5">My favorite Flash Drawing <span tts:color="red">Book</span></p>
<p begin="24" dur="16" style="title">Computers ....</p>
<p begin="25" dur="5">My DELL XPS Laptop Flash machine</p>
<p begin="30" dur="5">My <span tts:backgroundColor="yellow" tts:color="black">Ubuntu Linux workstation</span></p>
<p begin="35" dur="5"><span tts:backgroundColor="transparent"></span>Working hard on Flash Tutorials using the Xemacs Editor</p>
<p begin="40" dur="4">The outside (not my bike)</p>
</div>
</body>
</tt>
There is an alternative method. Read Captions for Video with Flash CS3 (Part Two), by Tom Green, Digital Web Magazine, June
Now we will look at a very different way of using videos. Instead of using the playback component we will include the video into the timeline (each video frame will be a timeline frame). This will allow us to create videos augmented with animations in an easy way.
If you embed a video into the timeline, then you don't get the ready-made video control as above. Only embed video in the timeline if you plan to add animations the simple way and if the video file is really small. Also you shouldn't care about smaller synchronization problems with the audio track.
Embedded video will make your timeline really long, although you can choose to have it its own timeline. Anyhow, in this example we took the "hundreds of frames" timeline option.
We will insert the video in frame #2. We also will add a play button that will jump to frame 2 and play the video.
In our example we added three buttons:
The ActionScript code:
/* This will stop Flash from playing all the frames
User must stay in Frame 1 */
stop();
/* Associate a handler function for each button instance */
btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);
btn_book.addEventListener(MouseEvent.CLICK, clickHandler);
/* Instead of writing a function for each button, we just create one.
In order to understand which button was clicked, we ask from the event
the label of the button(event.currentTarget.label).
Then we gotoAndStop(x) to Frame 374 for Credits
Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
switch (event.currentTarget.label)
{
case "Credits" :
gotoAndStop(609);
break;
case "PLAY" :
gotoAndPlay(2);
break;
case "Go to Book Scene" :
gotoAndPlay(230);
break;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
The "embed in timeline option" is probably only useful if you plan to play around with fine grained frame-by-frame jumping around or if you plan to add animations that synchronize with the video as described in the next example. Otherwise it is better to use a external video with the video playback component as described above.
Note: I noticed that when you import more than once a movie, file size will grow a lot ! Probably a side-effect of the undo mechanism. So 'do not do this. If you notice this problem, save the file with "save as". The new version will be ok. (Maybe there is another solution to trim down file size).
Embedding video into the timeline makes sense (IMHO) if you are looking for an easy way to synchronize other animations with the video. This requires no more additional ActionScript knowledge than you need for simple animation and navigation.
In this example, we add various animations (e.g. two motion tweens and a shape tween) to the project. Below you can see that books are tumbling out of a bookshelf while the video shows a "real" bookshelf.
Here is the action script code that we use to implement a simple play button, plus two other ones that are not really necessary. All the rest is just simple Flash animation
/* This will stop Flash from playing all the frames
User must stay in Frame 1 */
stop();
/* Associate a handler function for each button instance */
btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
btn_play.addEventListener(MouseEvent.CLICK, clickHandler);
/* Instead of writing a function for each button, we just create one.
In order to understand which button was clicked, we ask from the event
the label of the button(event.currentTarget.label).
Then we gotoAndStop(x) to Frame 572 for Credits
Or we can play the movie that sits in frame 2
*/
function clickHandler(event:MouseEvent):void {
switch (event.currentTarget.label)
{
case "Credits" :
gotoAndStop(572);
break;
case "PLAY" :
gotoAndPlay(2);
break;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
Working with cue points is another way to have your video interact with other animation. It's a more difficult solution than using timeline videos, but more elegant.
Code for jumping to cue points is fairly easy if you know how to use buttons or button components.
As a bonus I added some invisible trees that will become visible when the user jumps to the cue point.
To adapt this code to your needs: Change "XPS" to the name of your cue point. Remove the lines with trees if you don't want this ...
btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);
function jumpLapTop(event:MouseEvent):void {
video.seekToNavCuePoint ("XPS");
trees.visible = true;
}
trees.visible = false;
Without trees:
btn_laptop.addEventListener(MouseEvent.CLICK, jumpLapTop);
function jumpLapTop(event:MouseEvent):void { video.seekToNavCuePoint ("YOUR_CUEPOINT"); }
Implementing animation that is triggered by the video's encounter of cue points was a bit harder since documentation wasn't so easy to find.
The following code will display a trace of all your cue points in the Flash CS3 output window. To make it work:
// You must import this class (even when you just script the timeline !!)
import fl.video.MetadataEvent;
video_component.addEventListener(MetadataEvent.CUE_POINT, cp_listener);
function cp_listener(eventObject:MetadataEvent):void {
trace("Elapsed time in seconds: " + video_component.playheadTime);
trace("Cue point name is: " + eventObject.info.name);
trace("Cue point type is: " + eventObject.info.type);
}
When you play the *.flv video you can see these kinds of messages in the output window:
Elapsed time in seconds: 7.485 Cue point name is: palm_tree Cue point type is: event Elapsed time in seconds: 9.888 Cue point name is: books Cue point type is: navigation Elapsed time in seconds: 20.52 Cue point name is: missing_manual Cue point type is: event Elapsed time in seconds: 26.188 Cue point name is: XPS Cue point type is: navigation Elapsed time in seconds: 31.674 Cue point name is: ubuntu Cue point type is: event
Now let's put this information to use and rewrite the code. Since this is near the end of this tutorial we shall make it slightly more complicated. But the resulting animation is still quite ugly. I am just teaching some Flash and I do not have time for decent artwork or even good design. Students should aim at both :)
Let's create some Flash movie clips:
Once you got one or more of these animations:
movie_books
movie_books.stop(); movie_books.visible=false;
At the heart of cue point events management is an event handler that is registered, i.e. we use exactly the same principle as for user interaction with buttons (Flash button tutorial).
The cuepoint_listener function includes a switch statement that deals with each event it receives.
movie_books.visible=true; movie_books.play();
If you want music textures, you can for example import a sound file into the library and then export it for action script (Right-click on it). Make sure you remember its class name. Else you can dynamically import sound from external files as shown in the Flash drag and drop tutorial.
So here is the complete code you can find in the *.fla file of this example:
import fl.video.MetadataEvent;
// Stop all the animations of the various movie clips
// Make the bookshelf invisible
movie_trees.stop();
movie_books.stop();
movie_books.visible=false;
movie_penguin.stop();
movie_manual.stop();
movie_manual.visible=false;
// This is a sound of the class music
// Was defined by exporting the music file in the library
var music:Music = new Music();
var volume = new SoundTransform(0.2, 0);
// Add a cuepoint for the end and which is not in the flv movie
video_component.addASCuePoint(40, "End");
video_component.addEventListener(MetadataEvent.CUE_POINT, cuepoint_listener);
function cuepoint_listener(obj:MetadataEvent):void {
switch (obj.info.name)
{
case "palm_tree" :
movie_trees.play();
break;
case "books" :
movie_trees.stop();
movie_books.visible=true;
movie_books.play();
break;
case "missing_manual" :
movie_books.stop();
movie_books.visible=false;
movie_manual.visible=true;
movie_manual.play();
break;
case "XPS" :
movie_manual.stop();
movie_manual.visible=false;
var song = music.play(0,3,volume);
break;
case "ubuntu" :
movie_penguin.play();
break;
case "End" :
// song.stop();
movie_penguin.stop();
movie_penguin.visible=false;
movie_books.visible=false;
}
}
/* This shows how to open an URL in a WebBrowser */
btn_edutech_wiki.addEventListener(MouseEvent.CLICK, GoToUrl);
function GoToUrl(event:MouseEvent):void {
var url:String = "http://edutechwiki.unige.ch/en/Flash_video_component_tutorial";
var request:URLRequest = new URLRequest(url);
try
{
navigateToURL(request, '_blank');
}
catch (e:Error)
{
trace("Error occurred!");
}
}
Below some more technical links which so far are not really used much in this tutorial.
Note: (URLs seem to be unstable if they don't work go to Programming ActionScript 3.0
All Artwork (clipart) is from:
Sound (except voice track on videos) is from:
Videos
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of the flash tutorials
“The DataGrid class is a list-based component that provides a grid of rows and columns. You can specify an optional header row at the top of the component that shows all the property names. Each row consists of one or more columns, each of which represents a property that belongs to the specified data object. The DataGrid component is used to view data; it is not intended to be used as a layout tool like an HTML table. (DataGrid, retrieved 10:12, 30 October 2008 (UTC)).”
Let's create a table to display information about Learning management systems, i.e. a data grid with 3 columns. Column 1 is called "Name", column 2 is "License", column 3 is "Description. We then also will add 4 rows of data.
You may have a look at the data-grid-0 example now or open the thumbnail of the screen dump to the right.
Below we will show three solutions and point to a forth one:
You now will see an empty square on the stage without any visual appeal.
In the properties panel, make it a big bigger, e.g. w:300 and H:200
If your instance name is datagrid then hit F9 in frame 1 (or wherever you want it to be) and copy/paste this code. The result is a three column table with headers.
datagrid.addColumn("Name"); datagrid.addColumn("License"); datagrid.addColumn("Description"); datagrid.addItem({Name:"Moodle", License:"GPL (free)", Description:"Good for blended activity-oriented teaching"}); datagrid.addItem({Name:"ATutor", License:"Free", Description:"Good for content-oriented teaching"}); datagrid.addItem({Name:"Blackboard", License:"Commercial", Description:"Good for content and exercice-oriented teaching"}); datagrid.addItem({Name:"MediaWiki", License:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"});
The result is not absolutely convincing, since you can't read the contents of column three. It shows the minimum AS code you need to know in order to fill in DataGrid tables.
You can tune some properties of this grid within the Component Inspector (Shift-F7) or the properties panel. E.g. we made the cells editable. But most tailoring has to be done through ActionScript coding. There are dozens of properties and methods. In addition since the DataGrid is an assembly of Column and Cell objects you also may change things at these levels.
You can find the link to the *.fla source after the slightly improved version which we shall discuss now.
Instead of opening the component library, then dragging the component to the stage and giving it an instance name, you could just enter the code below in frame 1 of the main timeline. However, you still need a DataGrid component in your library ! (E.g. drag the component to the stage, then kill the instance).
Firstly we have to import some standard packages that we will need.
// Import the necessary packages import fl.controls.DataGrid; import fl.controls.ScrollPolicy
// Now create a a new instance of DataGrid and name it "datagrid_AS" var datagrid_AS:DataGrid = new DataGrid();
We also tailor the size of column three and make the whole widget horizontally scrollable. To do so we have to assign the column instance we want to change to a variable. This way, we can change its properties:
// this is to make col. 3 a bit bigger
var col3 = datagrid_AS.addColumn("Description");
col3.minWidth = 350;
Then we have to set the size for the whole Grid
// Fix the size datagrid_AS.width = 400; // Set the height to the number of rows + 1 (for the header). datagrid_AS.rowCount = datagrid_AS.length + 1;
Finally, we position this instance relative to the stage and put it on the stage for real.
// Position it at x=300 and y = 70 datagrid_AS.move(300, 70); // Then add it to the stage addChild(datagrid_AS);
Here is the complete code (that also can be found in the *.fla source file below):
// Import the necessary packages import fl.controls.DataGrid; import fl.controls.ScrollPolicy // Now create a a new instance of DataGrid and name it "datagrid_AS" var datagrid_AS:DataGrid = new DataGrid(); datagrid_AS.addColumn("Name"); datagrid_AS.addColumn("License"); // this is to make col. 3 a bit bigger var col3 = datagrid_AS.addColumn("Description"); col3.minWidth = 350; datagrid_AS.addItem({Name:"Moodle", License:"Free", Description:"Good for blended activity-oriented teaching"}); datagrid_AS.addItem({Name:"ATutor", License:"Free", Description:"Good for content-oriented teaching"}); datagrid_AS.addItem({Name:"Blackboard", License:"Commercial", Description:"Good for content and exercise-oriented teaching"}); datagrid_AS.addItem({Name:"MediaWiki", License:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"}); // Fix the size datagrid_AS.width = 400; // Set the height to the number of rows + 1 (for the header) datagrid_AS.rowCount = datagrid_AS.length + 1; // Position it at x=400 and y = 50 datagrid_AS.move(300, 70); // Horizontal scrolling is on datagrid_AS.horizontalScrollPolicy = ScrollPolicy.ON ; // Then add it to the stage addChild(datagrid_AS);
This is a section that non-programmers or persons who don't want to learn a lot of ActionScript programming should skip.
In order to do this you first should also read:
Here is the executive summary:
As you can in the screen capture to the right, there is nothing on the stage nor in some frame. The only object we need is the DataGrid component in the library
You may have a look at the DataGridFill-CS3.html example now or open the thumbnail of the screen dump to the right.
Here is the ActionScript code. It is quite similar to the AS code above, except that we work with a class structure and that we also add a label on top of the data grid.
package { // Only works with CS3 - i.e. the DataGridFill.as file must be in the library // 1. Add the DataGrid component to the library. // 2. Save this code as DataGridFill.as in the same directory as your FLA file. // 3. Set the Document class in the FLA file to DataGridFill. import flash.display.Sprite; import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import flash.text.TextField; public class DataGridFill extends Sprite { var data_grid:DataGrid; var textLabel:TextField; public function DataGridFill () { createTitle (); createDataGrid (); // fixStage (); // too complicated } private function createTitle():void { textLabel = new TextField(); textLabel.text = "DataGrid entirely made with AS3 through CS3"; textLabel.x = 10; textLabel.y = 10; textLabel.width = 400; textLabel.selectable = false; textLabel.textColor = 0xFF0000; addChild (textLabel); } private function createDataGrid():void { // Create a a new instance of DataGrid and name it "data_grid" data_grid = new DataGrid(); data_grid.addColumn("Name"); data_grid.addColumn("License"); // this is to make col. 3 a bit bigger var col3 = data_grid.addColumn("Description"); col3.minWidth = 350; data_grid.addItem({Name:"Moodle", License:"Free", Description:"Good for blended activity-oriented teaching"}); data_grid.addItem({Name:"ATutor", License:"Free", Description:"Good for content-oriented teaching"}); data_grid.addItem({Name:"Blackboard", License:"Commercial", Description:"Good for content and exercise-oriented teaching"}); data_grid.addItem({Name:"MediaWiki", License:"GPL (free)", Description:"Good for writing-to-learn and technical mini-projects teaching"}); // Fix the size data_grid.width = 500; // Set the height to the number of rows + 1 (for the header) data_grid.rowCount = data_grid.length + 1; // Position it at x=400 and y = 50 data_grid.move(10, 70); // Horizontal scrolling is on data_grid.horizontalScrollPolicy = ScrollPolicy.ON ; // Then add it to the stage addChild(data_grid); } } }
Notice: see the Flex datagrid component tutorial for the Flex equivalent.
We now shall see how to fill in a DataGrid with data from user interaction. E.g. we built a simple application that let's the user select three colors from a list of buttons which then will show up in the Grid. This is totally useless application, but it allows to show the principle.
You may have a look at the data-grid-1 example now or open the thumbnail of the screen dump to the right. On the stage we have 6 buttons and they have instance names like "red", "blue" etc.
This time we call our data grid instance "data_grid":
var data_grid:DataGrid = new DataGrid();
We firstly introduce a new way to define colums. E.g. we want to distinguish between the short internal property name ("c1") and what the users will see ("1st choice:").
var col1:DataGridColumn = new DataGridColumn ("c1");
col1.headerText = "1st choice:";
data_grid.addColumn(col1);
The rest of the DataGrid definition code is more or less the same as above.
Now let's look at the buttons (and if this really new to you, you should read the Flash button tutorial). We put all the button's instance names into an array. Then we register the same "colorPick" event handling function for the mouse click event.
// This is the list of instance names we create in CS3
var button_list:Array = [blue,cyan,green,pink,red,yellow];
// For all we register the same Event Handler function
for (var i:Number=0; i<button_list.length; i++) {
button_list[i].addEventListener(MouseEvent.CLICK, colorPick);
}
The colorPick function does the following:
function colorPick(evt:MouseEvent):void {
var obj = evt.target;
// A picked object goes hidden
obj.visible = false;
selected_colors.push(obj.name);
// Once the user got three, we display and reset all buttons to visible
if (selected_colors.length==3) {
// fill in the three cols. Warning: it's the "c1" etc. property defined above
data_grid.addItem({c1:selected_colors[0], c2:selected_colors[1], c3:selected_colors[2]});
for (var i:Number=0; i<button_list.length; i++) {
button_list[i].visible = true;
}
selected_colors = new Array ();
}
}
Here is the complete AS code as in the downloadable *.fla file (see below).
// Import the necessary packages import fl.controls.DataGrid; import fl.controls.ScrollPolicy; import fl.controls.dataGridClasses.DataGridColumn; // --------------------- DataGrid init ---------------------------- // Now create a a new instance of DataGrid and name it "data_grid" var data_grid:DataGrid = new DataGrid(); var col1:DataGridColumn = new DataGridColumn ("c1"); col1.headerText = "1st choice:"; var col2:DataGridColumn = new DataGridColumn ("c2"); col2.headerText = "2nd choice:"; var col3:DataGridColumn = new DataGridColumn ("c3"); col3.headerText = "3rd choice:"; data_grid.addColumn(col1); data_grid.addColumn(col2); data_grid.addColumn(col3); // Fix the size data_grid.width = 300; // data_grid.height=300; // Set the height to five rows data_grid.rowCount = 5; // Position it on the stage data_grid.move(250, 70); // Then add it to the stage addChild(data_grid); // ----------------------- Buttons code // This is the list of instance names we create in CS3 var button_list:Array = [blue,cyan,green,pink,red,yellow]; // For all we register the same Event Handler function for (var i:Number=0; i<button_list.length; i++) { button_list[i].addEventListener(MouseEvent.CLICK, colorPick); } // A an array of max 3 elements (i.e. what the user picked) var selected_colors = new Array (); function colorPick(evt:MouseEvent):void { var obj = evt.target; // A picked object goes hidden obj.visible = false; selected_colors.push(obj.name); // Once the user got three, we display and reset all buttons to visible if (selected_colors.length==3) { // fill in the three cols. Warning: it's the "c1" etc. property defined above data_grid.addItem({c1:selected_colors[0], c2:selected_colors[1], c3:selected_colors[2]}); for (var i:Number=0; i<button_list.length; i++) { button_list[i].visible = true; } selected_colors = new Array (); } }
Typically data that should go for display and editing in a data grid may sit in data structures produced by a server-side application. The best way to deal with these data sources is probably exporting/importing as XML.
The well-formed kind of XML structure you can use is list of elements with attributes or a list of elements with subelements. Translated in XML, this means that you need structure like this (element and attribute names don't matter of course as you shall see):
<list> <line attr1="xxx" attr2="yyy" attr3="zzz"/> </list>
<list> <line> <element1>xxx</element1> <element2>yyy</element2> <element3>zzz<element3> </line> </list>
You first can have a look at the data-grid-xml.html example. It's just a simple DataGrid table as introduced above. The only difference is that data is imported from a lms-list.xml file. The XML inside looks like this:
<?xml version="1.0"?> <list> <entry> <Name>Moodle</Name> <Type>LMSware</Type> <License>GPL</License> <Description>Good for blended activity-oriented learning</Description> </entry> <entry> <Name>PageFlakes</Name> <Type>Webtop service</Type> <License>Free to use</License> <Description>A minimal persona learning environment</Description> </entry> <entry> <Name>Drupal</Name> <Type>Portalware</Type> <License>GPL</License> <Description>Good for project-oriented teaching</Description> </entry> </list>
Here is the ActionScript code. As you can see need some lines of codes to get the XML into the table. Unless you want to do some data filtering, e.g. the XML file structure doesn't match the DataGrid structure, you can copy/paste the code as is:
// Import the necessary packages import fl.controls.DataGrid; import fl.data.DataProvider; // --------------------- DataGrid init ---------------------------- // Create a a new instance of DataGrid and name it "data_grid" var data_grid:DataGrid = new DataGrid(); data_grid.addColumn("Name"); data_grid.addColumn("Type"); data_grid.addColumn("License"); var col4 = data_grid.addColumn("Description"); col4.minWidth = 300; // Fix the size data_grid.width = 600; // Set the height to five rows data_grid.rowCount = 5; // Position it on the stage data_grid.move(10, 70); // Then add it to the stage addChild(data_grid); // ------ DataProvider and XML loading code var dp:DataProvider; // define a URL and make it a request instance var url:String = "lms-list.xml"; var request:URLRequest = new URLRequest(url); // define a loader and have it load the request var url_loader:URLLoader = new URLLoader(); url_loader.addEventListener(Event.COMPLETE, completeHandler); url_loader.load(request); // define a function that will execute after data has finished loading function completeHandler(event:Event):void { var ldr:URLLoader = event.currentTarget as URLLoader; // create XML datastructure from loaded XML var xmlDP:XML = new XML(ldr.data); // create a new data provider with this and register it with the DataGrid dp = new DataProvider(xmlDP); data_grid.dataProvider = dp; }
You first can have a look at the data-grid-xml-attrs.html
The AS code is exactly the same. Only, as you can see below, the XML code uses attributes instead of elements. We also changed the formatting of each entry a bit (just to see if Adobe did a good job - it did).
<?xml version="1.0"?> <list> <entry Name="Moodle" Type="LMSware" License="GPL" Description="Good for blended activity-oriented learning" /> <entry Name="PageFlakes" Type="Webtop service" License="Free to use" Description="A minimal personal learning environment" /> <entry Name="Drupal" Type="Portalware" License="GPL" Description="Good for project-oriented teaching"/> <entry Name="Blackboard" Type="LMS" License="Commercial" Description="Good for grading exercises"/> </list>
We will not show the AS code here, since it's the same (except for the file name).
Generate some XML data with PHP that comes from a database. That's just a PHP coding exercise.
See the Flex datagrid component tutorial
(to do ....)
More needed and some cleanup too ...
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of the Flash tutorials
The bones tool is an inverse kinematics (IK) tool with which one can create armatures for shapes or connected symbols instances. These armatures connect objects or parts of shape in a hierarchical tree. These parts can be called bones or limbs. "Outer" (or child) limbs that are moved also will move "inner" (or parent) limbs. E.g. In a human avatar, if you pull a finger, the hand will move too and the hand in turn will move the lower arm, etc. So in contrast to "forward kinematic animation", where each movement for each component must be planned, only the starting and ending locations of a limb are necessary to get a basic animation going.
“Inverse kinematics is the process of determining the parameters of a jointed flexible object (a kinematic chain) in order to achieve a desired pose. Inverse kinematics is a type of motion planning. Inverse kinematics are also relevant to game programming and 3D animation, where a common use is making sure game characters connect physically to the world, such as feet landing firmly on top of terrain.” (Wikipedia, retrieved 27 November 2008 ).
“Inverse kinematic animation (IKA) refers to a process utilized in 3D computer graphic animation, to calculate the required articulation of a series of limbs or joints, such that the end of the limb ends up in a particular location. In contrast to forward kinematic animation, where each movement for each component must be planned, only the starting and ending locations of the limb are necessary.” (Inverse kinematic animation, retrieved 17:52, 28 November 2008 (UTC)).
“The characters in a game have skeletons. Similar to our own skeleton, this is a hidden series of objects that connect with and move in relation to each other. Using a technique called parenting, a target object (the child) is assigned to another object (the parent). Every time the parent object moves, the child object will follow according to the attributes assigned to it. A complete hierarchy can be created with objects that have children and parents [...] Once the skeleton is created and all of the parenting controls put in place, the character is animated. Probably the most popular method of character animation relies on inverse kinematics. This technique moves the child object to where the animator wants it, causing the parent object and all other attached objects to follow.” (How stuff works, retrieved 27 November 2008).
Adobe CS4 fully integrates inverse kinematics modelling with
their drawing tools. “Inverse kinematics (IK) is a method for animating
an object or set of objects in relation to each other using an
articulated structure of bones. Bones allow symbol instances and
shape objects to move in complex and naturalistic ways with a
minimum of design effort. For example, inverse kinematics lets you
create character animation, such as arms, legs, and facial
expressions much more easily.
You can add bones to separate symbol instances or to the
interior of a single shape. When one bone moves, the other
connected bones move in relation to the bone that initiated the
movement. When animating using inverse kinematics you need only
specify the start and end positions of objects. Inverse kinematics
lets you create natural motion much more easily.”
(Using inverse kinematics, retrieved 27 November
2008).
The following application shows the difference between an IK structure (armature) made with red symbols and an another made with a blue shape.
Load the symbol-vs-shape-armature.html application and drag the tips (or other parts of the shapes around. Make sure that you have a Flash 10 player installed. Else, it will not work. Notice: The armatures have been defined as type "Runtime", meaning that we let the user do the animation (manipulate the IK structure).
Source:
Have a look at the symbols-ik-armature-intro example first.
In your library you now should have two Movie clip symbols, e.g. Red ball and Red rectangle
The chain should be going from parent to children, from children to great children etc. In our case, this means that we start with the rectangle that is attached to the floor.
You now will see that Flash now created an armature layer (called "Armature_1" and you can't edit your objects anymore. They have been copied to the armature layer and did become ikNodes. You may change the name of that layer if you like.
A note on terminology: Each bone will get a name like "ikBoneName1" (that you can change) and each connected symbol will get a name like "ikNode1" (that you also can change). So in a IK armature we got bones and nodes.
Now you can play a bit, e.g. drag the last child in the IK structure around and see if the joints are in the right place. If not, adjust (see below)
The picture below shows what happens if you move a shape and change its rotation point. The result is not entirely convincing (compare with the previous picture above) ...
Let's now create an IK animation. Before you start, make sure that the IK structure is what you want. It must be complete. You won't be able to change the structure itself later on. You only can change poses, do some transformations and other more advanced tuning. So here is the procedure.
What if you got it all wrong ?
You also can add an armature to a shape as we have seen in the initial demo shown at the start. I recommend the following steps:
I suggest the following procedure for drawing:
You now will see an armature layer and you can't edit your objects anymore since they all have been moved to the armature layer.
This example is really ugly. I would have to do it again. It seems that using the pencil tool (strokes), for the blue flower was not such a good idea. If you need fat lines, rather use the rectangle tool or the paint tool. Then you could adjust the envelope later on.
This shape has been drawn with the Paint tool in object mode. Once the drawing was done, we made a union of all its parts (Modify->Combine Objects->Union) and then optimized (Modify->Shape-Optimize) at 100%.
The result isn't great, but given the time we spent on it (little) it's ok.
You sometimes can see that the shape doesn't really follow the bones (I mean these sharp edges that can appear). Such behavior can be fixed:
Unless you are looking for a "snake-like" behavior, it is probably better to use a symbol-based armature as in the next chapter.
(not done yet !)
Let's now create a stickman avatar that roughly has human proportions. In order to create a "human" stick man we need a few objects to represent body parts. Here are a few rules of thumbs regarding size of body parts:
Select a bone and play with the options in the properties panel
You can produce a inverse kinematics armature that the user can manipulate. To do so:
This is a sort of short manual for the IK tools an objects
Below is a list of tools you may use and their function. See further down for "how to".
An armature is defined in a special Armature layer. By clicking on the layer, you then can change some of its properties in the properties panel:
Flash automatically moves all the object from the drawing layer to the armature layer as soon as you create an IK. Therefore if you want to break the armature, make sure to copy first all your stuff from the armature layer to another layer or much better, before you start adding an armature, simply save your drawings as a symbol in the library (break apart the instance on stage again after you saved).
Also, armatures can only be edited after you created it, i.e. you may edit the structure of the initial pose. If you have more than one pose, i.e. more than one frame, you can't. In the other frames you only can change and copy/paste poses. That makes sense, since the armature must be the same throughout the animation.
After creating bones, there are many ways of editing them. You can reposition the bones and their associated objects, move a bone within an object, change the length of a bone, delete bones, and edit the objects containing the bones.
Remember that you should edit the bones before you start adding poses !
You can define 3 sets of parameters for each bone (or set of bones)
To rotate a bone (turn it), use the selection tool to drag the bone (or the shape). All bones that are in the same branch also will move. But if you select a spot closer to the joint, they will move less.
To rotate a bone without moving the parents, shift-drag (hold down the shift key).
To move a joint, select the joint with the free transform tool. In other words, you simple move the rotation point, i.e. little white circle you should know from old style CW motion animation. You also can play with the transform panel. If you want to stretch the bone of parent A, select child B.
I did not manage to move bone ends with the Subselection tool for symbol-based armatures, only within a shape-based IK.
Symbol instances connected with bones become ikNodes. I.e. when you click on a shape with the select tool, you will see something like ikNode_3 in the properties panel.
In both cases the bones will adapt, i.e. stretch and rotate.
Tip: Magnify a lot (e.g. 400%), it's really hard to get the right point. Also CS4 behaves a bit erratically, i.e. I sometimes have trouble inserting a new control point vs. moving a curve control. Therefore you also can use the pen tool and its sub-tools to add/remove controls.
When you move the bone structure to a different pose, you may not be happy with the result, but you can fix that. By default, the control points of a shape are connected to the bone that is nearest to them, but you can change that with the bind tool (that sits underneath the bone tool in the tools panel).
If you click on a bone it will show all associated control points (i.e. parts of the shape that go with a bone). The bone will be red and the associated control points yellow. Points that are associate with just one bone are yellow squares. The ones that connect to more than one bone are yellow triangles.
The other way round. If you click on a control point (blue if no bone is selected) it will become red and show the associated bones in yellow.
This article or section is a stub.
A stub is an entry that did not yet receive substantial attention from editors, and as such does not yet contain enough information to be considered a real article. In other words, it is a short or insufficient piece of information and requires additions.
Grab the various *.fla files from here:
According to the Flash CS3 documentation, retrieved 12:43, 7 September 2007 (MEST):
Every component broadcasts events when a user interacts with it.
When a user clicks a Button, for example, it dispatches a
MouseEvent.CLICK event and when a user selects an item
in a List, the List dispatches an Event.CHANGE event.
An event can also occur when something significant happens to a
component such as when content finishes loading for a UILoader
instance, generating an Event.COMPLETE event. To
handle an event, you write ActionScript code that executes when the
event occurs.
Below a few basic principles
Usually, events are broadcasted by an instance of an interactive object, typically a graphic on the screen that is a symbol instance. User interactions are, technically speaking, events generated by Flash objects. You then have to write code that can deal with these events. Firstly you must give a name to each symbol instance, users interact with. Otherwise your AS code can't find them.
This name must be legal:
E.g. if you want the user to interact with buttons after the animation loads:
Code will only work within the frames the layer extends to. So if your code is supposed to be valid throughout the animation.
For each event (user action or something else) you would like to intercept, you must register a so-called event listener function.
The syntax is the following:
addEventListener(Type_of_event.Name_of_event, Name_of_function_YOU_define);
Example:
hello_button.addEventListener(MouseEvent.CLICK, click_handler);
Programmers (only): You should be aware that a a component's events inherit from the parent classes. You also can remove a listener with the removeEventListener(). Also the correct explanation is "Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event".
Let's recall that when an event happens, Flash will create an object that will be sent to the registered function. This object contains at least the following information:
Since target refers to an object you then can also extract information about the target, e.g. its label (if it has one).
The event handler function (also called a callback function) will be called by Flash as soon as the event happens. Think a function as a kind of recipe that will do something with a given event. This function that you have to define yourself will receive the following information:
Now you must write some code that deals with it, e.g. moves to playhead in the timeline to another frame.
Note: about multiple events and multiple listeners:
After you registered an event handling function like
hello_button.addEventListener(MouseEvent.CLICK, click_handler);
you then have to define this function. E.g. if we called our function click_handler we get the following template:
function click_handler(event_object:MouseEvent) {
/* Do something with this event */
}
event_object is a variable name (we came up with) and that will contain the name of instance we defined, e.g. hello_button in our case.
From the Flash button tutorial. When a user clicks on the "launch_button", then the launchRocket function is called. It will move the animation to Frame 2 and let it play.
launch_button.addEventListener(MouseEvent.CLICK,launchRocket);
function launchRocket(event:MouseEvent) { gotoAndPlay(2); }
This is the copy/pasted example from the Flash components tutorial.
We first register an event handling function with five different buttons.
btn_rainbow.addEventListener(MouseEvent.CLICK, clickHandler); btn_tecfa.addEventListener(MouseEvent.CLICK, clickHandler); btn_bosses.addEventListener(MouseEvent.CLICK, clickHandler); btn_my_computers.addEventListener(MouseEvent.CLICK, clickHandler); btn_credits.addEventListener(MouseEvent.CLICK, clickHandler);
The function itself looked like this:
function clickHandler(event:MouseEvent):void {
switch (event.currentTarget.label)
{
case "Rainbow" :
gotoAndStop(2);
break;
case "TECFA" :
gotoAndStop(3);
break;
case "Bosses" :
gotoAndStop(4);
break;
case "My computers" :
gotoAndStop(5);
break;
case "Credits" :
gotoAndStop(6);
break;
}
}
The function will receive an object that contains information about the event.
Let's now look at the first line. What does it mean ?
function clickHandler(event:MouseEvent):void {
Non-programmers: Just insert these last two elements the same way and don't worry.
Note: Flash also allows Flash designers who typically just insert little bits of code to ignore typing, e.g. you just could write:
function clickHandler(event)
but this is considered bad practice, it makes your program less secure.
switch is a programming statement that is use to organize program flow. In other words, we need to take different action for different user input. Its syntax is the following:
switch (value) {
case value_1 :
/* do something */
break;
case value_2 :
/* do something */
break;
....
}
So event.currentTarget.label means that we ask the event object event its current target (i.e. the button on which the user clicked) and from this its label (i.e. what the user sees). This will allow us to figure out which button was clicked.
All display objects with which you can interact can produce events: mouse, keyboard, and focus.
Here is a short list of all (most?) events that can be generated by interactive objects with which a user can interact through mouse, keyboard, and the more general concept of focus. It also includes loading/modification events like animation entering a frame or an object being inserted to the stage.
For (very) technical information, consult in Adope ActionScript 3.0 Language and Components Reference: InteractiveObject (see also its subclasses) and Event (and subpages like MouseEvent)
Here is a list of events and mouse/keyboard/focus event properties:
| Event | Description | Happens in target | Event property |
|---|---|---|---|
| activate | Dispatched when Flash Player gains operating system focus and becomes active. | EventDispatcher | |
| added | Dispatched when a display object is added to the display list. | DisplayObject | |
| addedToStage | Dispatched when a display object is added to the on stage display list, either directly or through the addition of a sub tree in which the display object is contained. | DisplayObject | |
| click | Dispatched when a user presses and releases the main button of the user's pointing device over the same InteractiveObject. | InteractiveObject | MouseEvent.CLICK |
| deactivate | Dispatched when Flash Player loses operating system focus and is becoming inactive. | EventDispatcher | |
| doubleClick | Dispatched when a user presses and releases the main button of a pointing device twice in rapid succession over the same InteractiveObject when that object's doubleClickEnabled flag is set to true. | InteractiveObject | MouseEvent.DOUBLE_CLICK |
| enterFrame | Dispatched when the playhead is entering a new frame. | DisplayObject | |
| focusIn | Dispatched after a display object gains focus. | InteractiveObject | FocusEvent.FOCUS_IN |
| focusOut | Dispatched after a display object loses focus. | InteractiveObject | FocusEvent.FOCUS_OUT |
| keyDown | Dispatched when the user presses a key. | InteractiveObject | KeyboardEvent.KEY_DOWN |
| keyFocusChange | Dispatched when the user attempts to change focus by using keyboard navigation. | InteractiveObject | FocusEvent.KEY_FOCUS_CHANGE |
| keyUp | Dispatched when the user releases a key. | InteractiveObject | KeyboardEvent.KEY_UP |
| mouseDown | Dispatched when a user presses the pointing device button over an InteractiveObject instance in the Flash Player window. | InteractiveObject | MouseEvent.MOUSE_DOWN |
| mouseFocusChange | Dispatched when the user attempts to change focus by using a pointer device. | InteractiveObject | FocusEvent.MOUSE_FOCUS_CHANGE |
| mouseMove | Dispatched when a user moves the pointing device while it is over an InteractiveObject. | InteractiveObject | MouseEvent.MOUSE_MOVE |
| mouseOut | Dispatched when the user moves a pointing device away from an InteractiveObject instance. | InteractiveObject | MouseEvent.MOUSE_OUT |
| mouseOver | Dispatched when the user moves a pointing device over an InteractiveObject instance in the Flash Player window. | InteractiveObject | MouseEvent.MOUSE_OVER |
| mouseUp | Dispatched when a user releases the pointing device button over an InteractiveObject instance in the Flash Player window. | InteractiveObject | MouseEvent.MOUSE_UP |
| mouseWheel | Dispatched when a mouse wheel is spun over an InteractiveObject instance in the Flash Player window. | InteractiveObject | MouseEvent.MOUSE_WHEEL |
| removed | Dispatched when a display object is about to be removed from the display list. | DisplayObject | |
| removedFromStage | Dispatched when a display object is about to be removed from the display list, either directly or through the removal of a sub tree in which the display object is contained. | DisplayObject | |
| render | Dispatched when the display list is about to be updated and rendered. | DisplayObject | |
| rollOut | Dispatched when the user moves a pointing device away from an InteractiveObject instance. | InteractiveObject | MouseEvent.ROLL_OUT |
| rollOver | Dispatched when the user moves a pointing device over an InteractiveObject instance. | InteractiveObject | MouseEvent.ROLL_OVER |
| tabChildrenChange | Dispatched when the value of the object's tabChildren flag changes. | InteractiveObject | Event.TAB_CHILDREN_CHANGE |
| tabEnabledChange | Dispatched when the object's tabEnabled flag changes. | InteractiveObject | Event.TAB_ENABLED_CHANGE |
| tabIndexChange | Dispatched when the value of the object's tabIndex property changes. | InteractiveObject | Event.TAB_INDEX_CHANGE |
Each generated event contains different information, but some is inherited by all kinds of events:
Technical note: The basic event class includes total (included inherited ) 8 properties, 26 constants and 13 public methods.
The most interesting property of an event is
Now let's look at mouse events. Flash defines 10 different types of mouse events (see the event overview table above). Each of these events contains extra information the may be useful. Let's have a look at the click event ojbect (as defined in the Adobe reference manual. This object conatins about 12 different properties that describe the event.
| Property | Value |
|---|---|
| bubbles | true |
| buttonDown | true if the primary mouse button is pressed; false otherwise. |
| cancelable | false; there is no default behavior to cancel. |
| ctrlKey | true if the Control key is active; false if it is inactive. |
| currentTarget | The object that is actively processing the Event object with an event listener. |
| localX | The horizontal coordinate at which the event occurred relative to the containing sprite. |
| localY | The vertical coordinate at which the event occurred relative to the containing sprite. |
| shiftKey | true if the Shift key is active; false if it is inactive. |
| stageX | The horizontal coordinate at which the event occurred in global stage coordinates. |
| stageY | The vertical coordinate at which the event occurred in global stage coordinates. |
| target | The InteractiveObject instance under the pointing device. The target is notalways the object in the display list that registered the event listener. Use the currentTarget property to access the object in the display list that is currently processing the event. |
What this technical documentation means is that we can extract extra information from the generated event object, e.g.
(to do, see http://www.adobe.com/devnet/actionscript/articles/event_handling_as3_03.html for now ...)
These are almost impossible to understand for non programmers, but otherwise the documentation at Adobe is excellent.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This is part of the flash tutorials
The purpose of this tutorial is go a little bit beyond dealing with mouse clicks, buttons and button components as seen in previous tutorials, i.e. you will learn how to change properties of objects (such as position, size and visibility) and how to play embedded movie clips:
Grab the various *.fla files from here:
The principle of (simple) object manipulation is fairly simple: change properties of a display object. The tricky thing is to know what you can change on a given kind of object. Some changes are easy to make, others are really hard. Typically, most objects are non-editable (its component objects maybe are). It's easy to change size and position of a display object, i.e. operations you could do on grouped objects and symbol instances with the transform tool or the parameters panel.
Below, we show a few little examples that demonstrate how to manipulate objects with mouse events (see the ActionScript 3 event handling tutorial for more details). All the objects on the stage (e.g. black_cat) are instances of movie clip symbols. These are a kind of interactive object and react to mouse and keyboard events. The kind of tricks will we show act on named instances of library symbols. In technical terms: we will work with display objects that are assigned to a variable.
You could imagine dozens of other simple examples, but it's not so easy to understand the technical ActionScript documentation which is made for programmers and not designers. If you feel more adventurous, you may have a look at the class hierarchy described in the Flash ActionScript 3 overview and in particular the Display Object and its children. Follow up a link to the Flash documentation and see if you can find other properties that are easy to manipulate...
To understand what is goining on below, you may want to load this fla file.
To reposition an object, just change its x and y properties. In the following example, when you click on the interactive object (a symbol instance that is called "black_cat") it will move itself to position x= 200 and y=200. Note: Position is defined by the center of the display object (i.e. the little "+" sign who's value depends on how you made it).
black_cat.addEventListener(MouseEvent.CLICK, moveCat);
function moveCat(event:MouseEvent):void {
black_cat.x = 200;
black_cat.y = 200;
}
A statement like
cat.x = 100;
is called an assignment and means: The x property of the cat object will become "100".
If you want to move the cat forth and back you'd rather use this code:
black_cat.addEventListener(MouseEvent.CLICK, moveCat);
// cat can be in original position or not (true,false)
var black_cat_ori_pos = true;
function moveCat(event:MouseEvent):void {
if (black_cat_ori_pos == true)
{
black_cat.x += 200;
black_cat.y += 200;
black_cat_ori_pos = false;
}
else
{
black_cat.x -= 200;
black_cat.y -= 200;
black_cat_ori_pos = true;
}
}
In this function we use a so-called if-then-else statement. The line
if (black_cat_ori_pos == true)
checks if the variable black_cat_ori_pos has the value of true.
If this is true we then execute the clause { black_cat.x +=
... ; black_cat.y ..... } that follows. If it is not
true we execute the other {...} clause after the else.
Also note the difference between an assignment ("=") and an equality test ("=="). The latter will test if two values are the same. Note to beginners: never use just the "=" inside the conditional of an "if". Use "==".
Let's describe this at a more conceptual level: black_cat_ori_pos can be called a "flag" variable since it will register whether the cat is in a new position or the original old position. If it's in the new one, we will move it back, and the other way round. So
black_cat_ori_pas == true
tests if the cat sits in its original position.
X and Y positions are defined with respect to the upper left corner. E.g. if x is 100 and y is 100, the registered center point of the object is 100 pixels to the right and 100 pixels down. The instruction:
x += 100; x -= 100;
means "add 100 to x" or "substract 100 from x". So it's a shortcut for x = x + 100;, i.e. "new value of x becomes old value of x plus 100".
Changing size, means to change width and height properties. In the following example, when you click on the interactive object (a symbol instance that is called "blue_cat") it will double its size when you hold down the mouse button and go back to normal when you release it. Note: If you hold down the button and then move the mouse out (still holding down), and only then release the button, the mouse will stay big since it never will catch the mouse up event.
blue_cat.addEventListener(MouseEvent.MOUSE_DOWN, resizeCat);
function resizeCat(event:MouseEvent):void {
blue_cat.width = blue_cat.width * 2;
blue_cat.height = blue_cat.height * 2;
}
blue_cat.addEventListener(MouseEvent.MOUSE_UP, resizeCat2);
function resizeCat2(event:MouseEvent):void {
blue_cat.width = blue_cat.width / 2;
blue_cat.height = blue_cat.height / 2;
}
This code may not exactly do what you want. As we said, if the user holds down the mouse button and moves it out, the MOUSE_UP event will never happen, i.e. the cat will grow permanently. A better solution can be found in the example code that we included at the end of this section.
In the following example, we will make a white cat invisible when you click on it. Technical note: It is still there, but the user can't click on it.
white_cat.addEventListener(MouseEvent.CLICK, hideCat);
function hideCat(event:MouseEvent):void {
white_cat.visible = false;
}
Once the cat is hidden, the user never will be able to bring it back. Therefore, in the next example we decided to implement a switch between a cat and a dog:
// can't see the dog for starters
brown_dog.visible=false;
brown_dog.addEventListener(MouseEvent.CLICK, hideShow);
white_cat.addEventListener(MouseEvent.CLICK, hideShow);
function hideShow(event:MouseEvent):void {
// instead of using white_cat.visible = false; we just switch it to the opposite
white_cat.visible = !white_cat.visible;
brown_dog.visible =!brown_dog.visible;
}
white_cat.visible = !white_cat.visible;
"!" means that the "visible" property will be set
to its opposite. E.g. if the value is true it will become
false, and the other way round. Same technique for the dog
(which is invisible for starters).
The next example shows how to let a user drag the red cat object with the mouse (button pressed down) and then drop the cat when the user releases the mouse button.
red_cat.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
red_cat.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function startDragging(event:MouseEvent):void
{
red_cat.startDrag();
}
function stopDragging(event:MouseEvent):void
{
red_cat.stopDrag();
}
For a tutorial on dragging and dropping, see the Flash drag and drop tutorial that demonstrates how to implement a simple children's educational game. You will learn for instance how to test if a dropped object will sit on top of another one.
So-called "transforms" of a non-editable display object are more tricky. We just will demonstrate how to change the tint with a color transform. You also could skew an object with a similar strategy. However, this kind of code is really a bit too difficult to understand without some prior introduction to object-oriented programming.
Color: The ColorTransform class lets you adjust the color values in a display object. The color adjustment or color transformation can be applied to all four channels: red, green, blue, and alpha transparency. Here are the formula according to the manual, retrieved 20:58, 8 October 2007 (MEST):
The tricky thing is that you have to program transformations with a temporary ColorTransform object and then copy this object to the display object's colorTransform property if I understood the manual right. See the code towards the end of the full example code below.
The (all-in-one) file with the examples we discussed above is here:
Here is the complete ActionScript code:
/* ---- moving ---- */
black_cat.addEventListener(MouseEvent.CLICK, moveCat);
// cat can be in original position or not (true,false)
var black_cat_ori_pos = true;
function moveCat(event:MouseEvent):void {
if (black_cat_ori_pos == true)
{
black_cat.x += 200;
black_cat.y += 200;
black_cat_ori_pos = false;
}
else
{
black_cat.x -= 200;
black_cat.y -= 200;
black_cat_ori_pos = true;
}
}
/* ---- resizing ---- */
blue_cat.addEventListener(MouseEvent.MOUSE_DOWN, resizeCat);
var cat_size = 1;
function resizeCat(event:MouseEvent):void {
blue_cat.width = blue_cat.width * 2;
blue_cat.height = blue_cat.height * 2;
cat_size = 2;
}
// We have to test both mouse up and mouse out since user can
// press mouse and move out. Cat in this case would stay big.
// Also we have to test if cat is already big when user moves in.
blue_cat.addEventListener(MouseEvent.MOUSE_UP, resizeCat2);
blue_cat.addEventListener(MouseEvent.MOUSE_OUT, resizeCat2);
function resizeCat2(event:MouseEvent):void {
if (cat_size > 1)
{
blue_cat.width = blue_cat.width / 2;
blue_cat.height = blue_cat.height / 2;
cat_size = 1;
}
}
/* ---- dragging ---- */
red_cat.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
red_cat.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function startDragging(event:MouseEvent):void {
red_cat.startDrag();
}
function stopDragging(event:MouseEvent):void {
red_cat.stopDrag();
}
/* ---- Hiding ---- */
// can't see the dog for starters
brown_dog.visible=false;
brown_dog.addEventListener(MouseEvent.CLICK, hideShow);
white_cat.addEventListener(MouseEvent.CLICK, hideShow);
function hideShow(event:MouseEvent):void {
// instead of white_cat.visible = false; we just switch it to the opposite
white_cat.visible = !white_cat.visible;
brown_dog.visible =!brown_dog.visible;
}
/* ---- transforms ----
This is a bit more difficult.... */
empty_cat.addEventListener(MouseEvent.CLICK, transformCatColor);
// R,G,B,A multipliers and R,G,B,A offsets
// We start with a light grey cat
var resultColorTransform = new ColorTransform (0.1,0.1,0.1,1,120,120,120,255);
empty_cat.transform.colorTransform = resultColorTransform;
function transformCatColor(event:MouseEvent):void {
var resultColorTransform = empty_cat.transform.colorTransform;
// Create a new color transform object and change it
// red color will peak at 255, blue color offset will cycle from +255 to -100
resultColorTransform.redOffset = Math.min(resultColorTransform.redOffset+10,255);
resultColorTransform.redMultiplier = Math.min(resultColorTransform.redMultiplier+0.1,1);
resultColorTransform.blueOffset += 10;
if (resultColorTransform.blueOffset >= 255)
{
resultColorTransform.blueOffset = -100;
}
resultColorTransform.blueMultiplier = 0.1;
// Copy that to the cat
empty_cat.transform.colorTransform = resultColorTransform;
//trace("redOffset="+resultColorTransform.redOffset +
// " blueOffset="+resultColorTransform.blueOffset);
}
/* ---- permanent size change ---- */
; Learning goals:
;Prerequisites:
;Moving on
;Level
grey_mouse.addEventListener(MouseEvent.MOUSE_WHEEL, changeMouse);
function changeMouse(event:MouseEvent):void {
grey_mouse.width += event.delta*3;
grey_mouse.height += event.delta*3;
}
Here is another example that demonstrates the following principles:
I also simplified the way functions are written, i.e. I ripped off argument type declarations and the return type. This is not necessarily a good thing, but it should demonstrate to designers that a little bit of ActionScript is not necessarily very complex ....
The example can be viewed here:
Here is the complete code: On the stage are several buttons (named like "bigger", "smaller", etc.), a cat movie clip instance called "cat" and a dog called "brown_dog".
/* ---- moving ---- */
move.addEventListener(MouseEvent.CLICK, moveCat);
// cat can be in original position or not (true,false)
var cat_ori_pos = true;
function moveCat(ev) {
if (cat_ori_pos == true)
{
cat.x += 200;
cat.y += 200;
cat_ori_pos = false;
}
else
{
cat.x -= 200;
cat.y -= 200;
cat_ori_pos = true;
}
}
/* ---- resizing ---- */
bigger.addEventListener(MouseEvent.MOUSE_DOWN, growCat);
function growCat(ev) {
cat.width = cat.width * 2;
cat.height = cat.height * 2;
}
smaller.addEventListener(MouseEvent.MOUSE_DOWN, shrinkCat);
function shrinkCat(ev) {
cat.width = cat.width / 2;
cat.height = cat.height / 2;
}
/* ---- dragging ---- */
cat.buttonMode = true;
cat.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
cat.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
function startDragging(event:MouseEvent) {
cat.startDrag();
}
function stopDragging(event:MouseEvent) {
cat.stopDrag();
}
message_text.visible=false;
instructions.addEventListener(MouseEvent.CLICK, messageText);
function messageText(ev) {
message_text.visible = !message_text.visible;
}
/* ---- Hiding ---- */
// can't see the dog for starters
brown_dog.visible=false;
hide.addEventListener(MouseEvent.CLICK, hideShow);
function hideShow(ev) {http://edutechwiki.unige.ch/en/Help:COAP-2110#Final_exam
// we just switch visibility to the opposite
cat.visible = !cat.visible;
brown_dog.visible =!brown_dog.visible;
}
/* ----- Playing ---- */
// There is a little problem here. If the cat movie gets bigger, the motion guide also
// will grow big. Size does not refer to the cats drawing but to the composite object.
// Changing just the cat requires much more advanced AS.
playcat.addEventListener(MouseEvent.CLICK, playCat);
function playCat(ev) {
// make sure cat is visible
cat.visible = true;
brown_dog.visible = false;
cat.play ();
}
Notice on function definitions:
If you want to write clean AS 3 code, you should define functions like this:
function growCat(ev:MouseEvent):void {
cat.width = cat.width * 2;
cat.height = cat.height * 2;
}
The following line
function growCat(ev:MouseEvent):void {
means that we define a function (i.e. a recipe) called growCat.
When an event happens, this function will be called (invoked) and
given a mouse event argument to process. We called
this argument i.e. the information to process ev and
declared it of type MouseEvent. In our code we actually
never use this event information but we could for instance figure
out at what exact position the user clicked. :void
means that the function will not return any result. The function
will in fact just modify properties of the cat when the event
happens. We do not care about the event itself ...
If you script in the timeline, this simplified code will also do
function growCat(ev) {
cat.width = cat.width * 2;
cat.height = cat.height * 2;
}
As you can notice, in the above code we use (for demonstration purposes) both the easy "scripting" syntax and the more object-oriented one you need to adopt if you write external ActionScript code that could be loaded into your *.fla file.
You can stop or start an embedded movie clip like this:
movie_clip.start(); movie_clip.stop();
This example is discussed in the Flash embedded movie clip tutorial. Here we just include the AS code snippet that will allow you to start and stop a movie clip animation with two buttons.
kite.stop();
start_button.addEventListener(MouseEvent.CLICK,start_kite);
stop_button.addEventListener(MouseEvent.CLICK,stop_kite);
function start_kite(event:MouseEvent) {
kite.play();
}
function stop_kite(event:MouseEvent) {
kite.stop();
}
Flash lets you intercept key presses in the same way you can intercept and deal with mouse clicks. There are some subtle differences though and I find key press events more difficult to deal with because figuring out how Flash focuses on buttons is a bit tricky.
The goal is to implement some code that lets you move around an object with the left/right/up/down arrow keys.
The basic event handling code is very much the same as for buttons:
instance_of_symbol.addEventListener(KeyboardEvent.KEY_DOWN, key_even_handler);
function key_event_handler(event:KeyboardEvent):void {
move_it .....
}
The following example is based on the assumption that somewhere on the stage you have a sprite, e.g. a movie clip or a component button that is called missile and that you want to be able to move it around with around with the arrow keys.
You need to implement the following things
stage.focus = missile;
Let's look at a clause of the switch statement like the following one.
case Keyboard.LEFT : missile.x -= big_step; break;
This means the following: If the user presses the left arrow key, then we will change the "x" (horizontal) position of the missile to x minus big_step (set to 9). So if the missile was in position x=100, after a mouse press event it will be in position x=91.
// how many pixels to move left/right
var big_step = 9;
// Put initial focus on missile
// Focus will change when user clicks on another object (so don't)
stage.focus = missile;
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
var key = event.keyCode;
switch (key) {
case Keyboard.LEFT :
missile.x -= big_step;
break;
case Keyboard.RIGHT :
missile.x += big_step;
break;
case Keyboard.UP :
missile.y -= big_step;
break;
case Keyboard.DOWN :
missile.y += big_step;
break;
}
}
Here is an alternative take of the same code. The difference is that the code that will move the missile also will work for an other object, e.g. a button. The following fragment will ask from the event on which target (e.g. the missile) it was used and then move the target.
// how many pixels to move left/right
var big_step = 9; // User clicked on missile
// Put initial focus on missile
// Focus will change when user clicks on another object (so don't)
stage.focus = missile;
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
var key = event.keyCode;
var target = event.target;
// trace(event + "CODE=" + event.keyCode);
switch (key) {
case Keyboard.LEFT :
target.x -= big_step;
break;
case Keyboard.RIGHT :
target.x += big_step;
break;
case Keyboard.UP :
target.y -= big_step;
break;; Learning goals:
;Prerequisites:
;Moving on
;Level
case Keyboard.DOWN :
target.y += big_step;
break;
}
}
Sadly, this example will not work in a web browser, only in the Flash player. The missile will never receive focus. So it's probably a good idea to move to the next example.
Example code:
Flash has the feature that when you press an arrow up/left/right key it will by default move the focus on the next button. In order to inhibit this behavior I found that I had to add some extra code which is below. I don't guarantee that this is the most simple solution.
/* ActionScript for timeline scripting
Shows how to move around a flash movie with keypresses and not loose focus
Works ONLY if you have 2 objects on the stage:
* A movie clip instance called "missile"
* A button component instance called "button"
*/
// FocusManager package has to be imported.
import fl.managers.FocusManager;
// how many pixels to move left/right
var big_step = 9;// User clicked on missile
/* If you have buttons in addition to missile on stage, then the
the missile will not work as expected, i.e. it will loose focus.
Extra code needed is: Tell the missile it's a button and put it on the
list of "tab" buttons and also some code to put it in focus when the
user clicks on it.
*/
// Create a focus manager. Will help to set us the right focus
var manager = new FocusManager(this);
// Put initial focus on missile
// since focus will change when user clicks on another object
// stage.focus = missile; // works also in principle
manager.setFocus(missile);
// The line below is absolutely bloody vital. Missile must be on the
// "tab" list, else focus will move to the button when key is hold down
missile.tabEnabled = true;
missile.buttonMode = true;
// The missile will listen to a mouse click we will use to put focus on it again.
missile.addEventListener(MouseEvent.CLICK, change_focus);
function change_focus(ev:MouseEvent) {
manager.setFocus(missile);
// stage.focus = missile;
}
/* Managing keyboard events
We register keyboard events for missile and the button component. The
listener function is the same for both. The move_it function will ask the
target over which key was pressed who it is and then move it
*/
missile.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
button.addEventListener(KeyboardEvent.KEY_DOWN, missile_control);
function missile_control(event:KeyboardEvent):void {
move_it(event);
}
function move_it(event) {
var key = event.keyCode;
var target = event.target;
// trace(event + "CODE=" + event.keyCode);
switch (key) {
case Keyboard.LEFT :
target.x -= big_step;
break;
case Keyboard.RIGHT :
target.x += big_step;
break;
case Keyboard.UP :
target.y -= big_step;
break;
case Keyboard.DOWN :
target.y += big_step;
break;
}
}
Example code:
Note: This code is not optimal for gaming, since Flash has to wait for each key press event that the keyboard will send in order to move the missile one more step. It's probably a better idea to have the rocket keep moving as long as there isn't any keyUP event, but this requires more coding.
The keyDown event is dispatched when the user presses a key. The most important properties you may use are:
KeyCodes are represented as numbers or constants. I prefer to use constants.
So instead of using something like:
if (key == 37) ...
use
if (key === Keyboard.LEFT) ....
Let's summarize a few events and actionscript tricks that might be useful for starters and that should not be very difficult to use.
Here is a short summary of mouse events that can be intercepted by a registered event handler for a given object. So these events are only useful if you define both an event handler function and register it with an object. In the following example "cat" is an interactive object, e.g. a movie clip symbol with which we shall register a function for a mouse down event.
cat.addEventListener(MouseEvent.MOUSE_DOWN, resizeCat);
function resizeCat(event:MouseEvent) {
cat.width = blue_cat.width * 2;
}
| MouseEvent.MOUSE_DOWN | User holds mouse button down over the object |
| MouseEvent.MOUSE_UP | User releases mouse button |
| MouseEvent.MOUSE_OUT | User moves mouse away from the object |
| MouseEvent.MOUSE_WHEEL | User turns mouse wheel |
| MouseEvent.MOUSE_OVER | User moves mouse over the object |
| MouseEvent.CLICK | User clicks on object |
Note: Technically speaking these are actually event properties (see the ActionScript 3 event handling tutorial if you want to know more).
Playing movie clips: Movie clips symbols are embedded Flash animations.
movie_books.stop(); movie_books.play();
Making objects visible/invisible, works with any display object but you should work with an object that you can name, i.e. a symbol instance.
cat.visible = true; cat.visible = false;
Moving position of an object, works with any display object
Example - position cat at x is 100 and y is 200 pixels:
cat.x = 100; cat.y = 200;
Example - add 50 px to cat's current position
cat.x += 50; cat.y += 50;
Resize an object, works with any display object
Example, cat will be 100 px wide and 120px tall
cat.width = 100; cat.height = 120;
Example, cat will double its size. Expression below means, set cat.width to old cat.width times 2.
cat.width = cat.width * 2; cat.height = cat.height * 2;
Dragging an object, works with any interactive object
cat.startDrag(); cat.stopDrag();
Moving around in the timeline. You can either go to a frame and play it (until it encounters a stop) or go there and stop.
If you want to go to frame 12 of the same scene:
gotoAndPlay(12); gotoAndStop(12);
If you want to go to frame 13 of a scene called "test":
gotoAndPlay(13,"test"); gotoAndStop(13,"test");
These are almost impossible to understand for non programmers, but otherwise the documentation at Adobe is excellent.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
Dragging and dropping objects is a popular brick in edutainment programs. This is part of Flash CS3 tutorials. It is probably not suitable for Flash designers without any programming experience.
Grab the various *.fla files from here:
Tip: This page contains more code than screen dumps. You should download the source code and play with it.
// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
obj.stopDrag();
}
The goals is to write a little Flash application that will tell the user whether he correctly dragged and dropped an object over another one.
This textbox should initially display instruction, then display feedback: "made it" and "missed".
// Register mouse event functions
blue_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
blue_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
red_btn.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
red_btn.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the object exists AND it is the blue button, then we change
// the text in the TextBox.
// Since obj.dropTarget is a Shape, we need its parent.
if (target != null && target.parent == blue_btn)
{
textField.text = "Made it !!";
}
else
{
textField.text = "Missed :(";
}
obj.stopDrag();
}
The goal is to move objects to a textbox containing the first letter of its name. E.g. "Cat" should be moved to the "C" box. If there is a hit, the user will get some success message and can't move the object anymore. If he is done, he should get an extra message.
Make sure that the textboxes are in the background or the movie clips in the foreground. Otherwise a dropped object will not find its target.
Code below is fairly awful since it lacks abstraction, but it has the advantage to use a minimal variety of AS3.
var hits = 0;
// Register mouse event functions
dog.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
dog.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
rocket.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
rocket.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
cat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
cat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
bat.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
bat.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the target object exists the we ask the test_match function
// to compare moved obj and target where it was dropped.
if (target != null)
{
test_match(target, obj);
}
obj.stopDrag();
}
function test_match(target,obj) {
// test if either one of the four pairs match
if ( (target == box_c && obj == cat) ||
(target == box_d && obj == dog) ||
(target == box_r && obj == rocket) ||
(target == box_b && obj == bat) )
{
// we got a hit
hits = hits+1;
textField.text = "Yes ! You got one !";
// make the object transparent
obj.alpha = 0.5;
// kill its event listeners - object can't be moved anymore
obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Test if we are done
if (hits == 4)
{
textField.text = "Made it !!";
}
}
else
{
textField.text = "Missed :(";
}
}
Instead of writing an application just for four matching pairs, we can write code that is more general. This code only needs slight modifications to adapt to other named instances and text boxes and you can insert as little/many pairs you like. Just make sure that the target textboxes are in the background.
Btw this is the first AS3 code that includes a tiny bit of programming I ever made (I probably also should type variables but then I am not a real programmer ....)
var dict = new Dictionary ();
// =================== START USER Config =====================
// Insert as many "dict[text_box] = movie;" statements you like
// Replace: text_box by the name of a matching dynamic text_box
// movie by the name of movie instances users can move around.
dict[box_c] = cat;
dict[box_d] = dog;
dict[box_r] = rocket;
dict[box_b] = bat;
dict[box_a] = apple;
// Do NOT change/delete any other line. Also make sure to respect
// the syntax, e.g. dont forget the ";" at the end of each line.
// ===================== END USER Config ====================
var hits = 0; // counts succesful hits
var max = 0; // used to compute dictionary length
// For each item in the dictionary we add event listeners
// "for each" will loop through the values ... not the keys
for each (var item in dict)
{
item.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
item.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
item.buttonMode = true; //needed for the hand cursor to work
max = max + 1;
}
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
// we should limit dragging to the area inside the canvas
object.useHandCursor = true;
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the target object exists the we ask the test_match function
// to compare moved obj and target where it was dropped.
if (target != null)
{
test_match(target, obj);
}
obj.stopDrag();
}
function test_match(target,obj) {
// test if the pairs match
if (dict[target] == obj)
{
// we got a hit
hits = hits+1;
textField.text = "Yes ! You got one !";
// make the object transparent
obj.alpha = 0.5;
// kill its event listeners - object can't be moved anymore
obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Test if we are done
if (hits == max)
{
// here we should play an animation
textField.text = "Made it !!";
}
}
else
{
textField.text = "Missed :(";
}
}
Our last version for now includes some more features.
// Daniel K. Schneider - TECFA - sept 2007
// Copyright: See http://edutechwiki.unige.ch/en/
var dict = new Dictionary ();
// =================== START USER Config =====================
// Insert as many "dict[text_box] = movie;" statements you like
// Replace: text_box by the name of a matching dynamic text_box
// movie by the name of movie instances users can move around.
dict[box_c] = cat;
dict[box_d] = dog;
dict[box_r] = rocket;
dict[box_b] = bat;
dict[box_a] = apple;
// Do NOT change/delete any other line. Also make sure to respect
// the syntax, e.g. dont forget the ";" at the end of each line.
// ===================== END USER Config ====================
// Sound
// should I preload this somehow ?
var request:URLRequest = new URLRequest("applause_3.mp3");
var applause:Sound = new Sound();
applause.load(request);
var request2:URLRequest = new URLRequest("music.mp3");
var music:Sound = new Sound();
music.load(request2);
var request3:URLRequest = new URLRequest("baby_laugh.mp3");
var laugh:Sound = new Sound();
laugh.load(request3);
// Drag and match code
var hits = 0; // counts succesful hits
var max = 0; // used to compute dictionary length
var ori_x;
var ori_y;
// For each item in the dictionary we add event listeners
// "for each" will loop through the values ... not the keys
for each (var item in dict)
{
item.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
item.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
max = max + 1;
item.buttonMode = true;
}
// Define a mouse down handler (user is dragging)
function mouseDownHandler(evt:MouseEvent):void {
var object = evt.target;
ori_x = object.x
ori_y = object.y
object.useHandCursor = true;
object.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void {
//stop all sounds
SoundMixer.stopAll();
var obj = evt.target;
// obj.dropTarget will give us the reference to the shape of
// the object over which we dropped the circle.
var target = obj.dropTarget;
// If the target object exists the we ask the test_match function
// to compare moved obj and target where it was dropped.
if (target != null)
{
test_match(target, obj);
}
obj.stopDrag();
}
function test_match(target,obj) {
// test if the pairs match
if (dict[target] == obj)
{
// we got a hit
hits = hits+1;
textField.text = "Yes ! You got one !";
applause.play();
// make the object transparent
obj.alpha = 0.5;
// kill its event listeners - object can't be moved anymore
obj.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
obj.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
// Test if we are done
if (hits == max)
{
textField.text = "Made it !!";
music.play(0,5);
}
}
else
{
obj.x = ori_x;
obj.y = ori_y;
textField.text = "Missed :(";
laugh.play();
}
}
I may move these to some other article sometimes soon.
Objects that you can drag around are Movie Clips. These are children of Sprites. Sprites have associated graphics.
From the ActionScript 3.0 Language and Components Reference:
The class hierarchy looks like this: MovieClip -> Sprite -> DisplayObjectContainer -> InteractiveObject -> DisplayObject -> EventDispatcher -> Object
When you drop a sprite over another sprite, the Flash will give the shape of the target object. This shape is a DisplayObject and from a DisplayObject we can get its parent, i.e. a Movie Clip in our case.
Important: When you look at the definition of Class, there are buttons to open inherited properties and methods. Mostly likely you need these.
Movie clips can use normal Event Handling:
The TextField class is used to create display objects for text display and input.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This entry is part of the Flash tutorials.
There exist several free high quality ActionScript libraries available and that can be used by Flash designers that only possess very little programming skills.
Typical examples of such libraries are:
“Flint is an open-source project to create a versatile particle system in ActionScript 3. The aim is to create a system that handles the common functionality for all particle systems, has methods for common particle behaviour, and lets developers extend it easily with their own custom behaviours without needing to touch the core code. ([1])”. That may sound very technical and it actually is. Such libraries are meant primarily for "real" ActionScript programmers. However, Flash designers with a little bit of ActionScript programming know-how can also use such code. In particular, they simply may slightly adapt the excellent examples that are for download.
Flint is developed by Richard Lord and is released under the free open source MIT licence.
Firstly have a look at what this particle system can do. Cool isn't it ?
You might want snowflakes. Creating a nice snowing animation with lots of snowflakes by drawings would be very tedious and programming them yourself is a bit difficult (unless you are a "real" programmer). You now have two options:
So, get FliNT from http://flintparticles.org/. I took:
... At the present time, there may be a more recent version. E.g. a 2.0 final.
You also may download extra stuff, e.g.
Dezip these three archives in a new directory.
Now since we are interested in snowflakes were are actually really lucky. There is both example code (in the example zip file) and a nice Introducing Flint with a snow effect tutorial made by Richard Lord the author of the Flint system.
In these ActionScript 3.0 settings, you then have to add the name
of the subdirectory where the flint system sits.
Basically, what you have to understand at this point is that your application has to know in which directory to look for the FliNT code. The "org" subdirectory must be a direct sub-directory of the classpath directory you just defined. If you want to understand more about packages and classes you'll have to dig fairly deeply into ActionScript programming, something we will not do here ...
Personally, I'd like to have some snow in my Office as you can see in our own version. So firstly we need to import a picture. I made the orginal much darker with higher contrasts in order to be able to see the snowflakes. It may be too dark on your screen, but on my DELL M1730 laptop it looks just fine.
/* * FLINT PARTICLE SYSTEM * ..................... * * Author: Richard Lord * Copyright (c) Big Room Ventures Ltd. 2008 * http://flintparticles.org/ * * Licence Agreement * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. */ import org.flintparticles.common.counters.*; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.initializers.*; import org.flintparticles.twoD.actions.*; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.*; import org.flintparticles.twoD.renderers.*; import org.flintparticles.twoD.zones.*; // We keep the same here - unlike the original // addChild( new SnowBackground() ); var emitter:Emitter2D = new Emitter2D(); emitter.counter = new Steady( 150 ); emitter.addInitializer( new ImageClass( RadialDot, 2 ) ); // Modified DKS - our picture is a bit larger // emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 605, -5 )) ) ); emitter.addInitializer( new Position( new LineZone( new Point( -5, -5 ), new Point( 645, -5 ) ) ) ); emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 65 ) ) ) ); emitter.addInitializer( new ScaleImageInit( 0.75, 2 ) ); emitter.addAction( new Move() ); // Modified DKS - our picture is a bit larger // emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 620, 420 ), true ) ); emitter.addAction( new DeathZone( new RectangleZone( -10, -10, 645, 485 ), true ) ); emitter.addAction( new RandomDrift( 20, 20 ) ); var renderer:DisplayObjectRenderer = new DisplayObjectRenderer(); renderer.addEmitter( emitter ); addChild( renderer ); emitter.start(); emitter.runAhead( 10 ); // We keep the same here - unlike the original // addChild( new SnowForeground() );
That was really easy. We just took the code from the Flint_2_0_0_b_examples.zip archive and made 2 little modifications. We only use a single background and commented out 2 lines. Also, we changed two parameters since our picture is a bit bigger.
If you see something like this:
Scene1, Layer 'Script', Frame 1, line 22 1172: Definition org.flintparticles.common.counters could not be found.
then you most likely got your classpath definition wrong. See above !
If it isn't snowing all over your picture, then you will have to adjust 2 lines in the AS3 code. Figure it out yourself by looking at our inserted comments in the AS code above. Also you should get the DeathZone right. This is a hidden area underneath the picture where the falling down flakes are killed.
The result: flint-snowflakes.html
Get the flint-snowflakes.fla file from http://tecfa.unige.ch/guides/flash/ex/flint/, but please recall that you will have to set the classpath for the FLiNT library. It will not work "as is" !
Read the Introducing Flint with a snow effect tutorial made by Richard Lord.
Our only contribution was to add some explanations on how to define a classpath, i.e. the very basics about how to reuse such an example and which R.L. doesn't explain (since he made this library for programmers and not designers in the first place).
Something else you can with this particle system is to create burning Logos, e.g. something that symbolizes how hot the master program you should join is.
The example below is just a adaptation of the example distributed in the Downloads. You also can look at the maybe different online version of the burning Flint Logo.
To create your own burning logo you need two things:
Class: Logo
You now should have a setup that looks like this (minus the fire log which we shall create below). Enlarge the picture below if you can't make out the details.
You then have to make adjustments where I inserted comments:
var bitmapData:BitmapData = new Logo( 332, 99);
bitmap.x = 35; bitmap.y = 35;
emitter.x = 35; emitter.y = 35;
Code to copy/paste:
/* * FLINT PARTICLE SYSTEM * ..................... * * Author: Richard Lord * Copyright (c) Big Room Ventures Ltd. 2008 * http://flintparticles.org/ * * Licence Agreement * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * */ import org.flintparticles.common.debug.*; import org.flintparticles.common.actions.*; import org.flintparticles.common.counters.*; import org.flintparticles.common.displayObjects.RadialDot; import org.flintparticles.common.initializers.*; import org.flintparticles.twoD.actions.*; import org.flintparticles.twoD.emitters.Emitter2D; import org.flintparticles.twoD.initializers.*; import org.flintparticles.twoD.renderers.*; import org.flintparticles.twoD.zones.*; import org.flintparticles.common.energyEasing.TwoWay; // Look up the dimensions of your logo (Right-click in the library->Properties) var bitmapData:BitmapData = new Logo( 332, 99); var bitmap:Bitmap = new Bitmap(); bitmap.bitmapData = bitmapData; addChild( bitmap ); // Position the bitmap graphic on the scene bitmap.x = 35; bitmap.y = 35; var emitter:Emitter2D = new Emitter2D(); emitter.counter = new Steady( 600 ); emitter.addInitializer( new Lifetime( 0.8 ) ); emitter.addInitializer( new Velocity( new DiscSectorZone( new Point( 0, 0 ), 10, 5, -Math.PI * 0.75, -Math.PI * 0.25 ) ) ); emitter.addInitializer( new Position( new BitmapDataZone( bitmapData ) ) ); emitter.addInitializer( new ImageClass( FireBlob ) ); emitter.addAction( new Age( TwoWay.quadratic ) ); emitter.addAction( new Move() ); emitter.addAction( new Accelerate( 0, -20 ) ); emitter.addAction( new ColorChange( 0xFFFF9900, 0x00FFDD66 ) ); emitter.addAction( new ScaleImage( 1.4, 2.0 ) ); emitter.addAction( new RotateToDirection() ); var renderer:BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 500, 200 ) ); renderer.addEmitter( emitter ); addChild( renderer ); // The fire must be in the same position as the bimap emitter.x = 35; emitter.y = 35; emitter.start( );
Maybe you may rather want to demonstrate how burning cool your institutions is. All you need to do is make a Logo in blue and then change a line in the AS3 code.
To change the color of the fire emitter, you have to understand that the ColorChange class wants 2 arguments: The color of Logo and the color of the bright parts of the flames. That being said, you can use any colors you want of course. So we change this orange fire:
emitter.addAction( new ColorChange( 0xFFFF9900, 0x00FFDD66 ) );
into a blue cool fire:
emitter.addAction( new ColorChange( 0xFF0000FF, 0x00DDFFFF ) );
In principle you should be able to import *.swf "movies" to the library and then use them like internal movie clips, but I wasn't able to import these into the library for a reason I don't understand yet (Flash doesn't give any feedback, it just doesn't import).
Instead I'll show you how to have multiple Logos on fire within a same Flash file. All you need is to create embedded movie clips for each Logo and then attach an AS3 script to each of these. See the Flash embedded movie clip tutorial if don't know how to create embedded movie clips.
Some hints (for the rest, please dig into the fla file below):
Results:
Of course, this needs some tuning, e.g. it's too fast and the frame rate is too low and it's otherwise ugly. Anyhow, I wouldn't join a degree program that banks on the effect of a Flash Logo ;)
The Flint examples all come in two versions, either Flash or PureAS3. Go for the Flash version (unless you want to learn how to play with Flex in which case you will have to start reading the Adobe Flex and AS3 Compiling a program tutorials in this wiki).
The Flash version examples usually have just a single line in the script code that you insert in frame 1:
include Frame1.as
This instruction simply includes the contents of the file "Frame1.as" that you will find in the same directory. In our examples above we just copy/pasted the contents of these *.as files into the AS script. The result is the same, but the strategy of including an *.as file is smarter if you plan to reuse your code and if your prefer to use a different editor. We included the code in the *.fla for the simple reason that this way you only need to grab a single file.
To play with the examples in the Flash CS3 environment, the only thing you will have to do is to open the respective *.fla and then fix the classpath, i.e. tell Flash where the Flint_xxxx/src directory is located. E.g. if you need a firework, open in CS3 the
Flint_2_0_0_b_examples/examples2D/Firework/Flash/Firework.fla
Then fix the classpath as described in the Let's snow example
Finally hit CTRL-Enter or publish.
Notice: The resulting swf always will include all the necessary ActionScript code, i.e. you won't have to copy the Flint files to the server.
TweenLite, TweenFilterLite and TweenMax are tweening libraries
See AS3 TweenLite tweening engine. For the moment it's more of a cheat sheet, but there are 1-2 examples.
All ActionScript code that you will import is defined with classes (see the Actionscript 3 tutorials if you really want to learn how programming works.). Theses classes can then be bundled together in so-called packages which allows to organize code into discrete groups that can be imported by other scripts. E.g.
package packageName {
class someClassName {
}
}
More information about setting the Class path can be found at Adobe, i.e. here and here in the "Using Flash documentation".
More information about packages can be found in Adobe's Packages and namespaces chapter in the Programming ActionScript 3.0 tutorial which is very technical.
Authors: Daniel K. Schneider (TECFA) and
Marielle Lange
(WidgEd)
This page contains the most important Flash CS3 keyboard shortcuts. There may be some mistakes and omissions for now (e.g. programming/debugging is not covered). Table size optimized for Mozilla/Windows.
(from Adobe, to sort out)
With the arrow cursor: Control + Click and Drag - Duplicates a shape By hitting the control key first (Macintosh & Windows) and THEN clicking and dragging on a selected shape or group of shapes, you will create a duplicate of those shapes at the spot where you release the mouse button.
CTRL+Clicking a keyframe to move frame: CTRL+clicking a frame in
the timeline switches the cursor to a slider, and allows you to
click and drag that frame to a new place in the timeline within
that same layer. Useful if you want to stretch out tweens for
example
With the magnifier tool:
Control + Click - Toggles to the opposite magnifier. If the + magnifier (zoom in) is active, and you hit Control while clicking, you will switch to the - magnifier and actually zoom OUT.
With the dropper tool:
Shift + Click - Select a color for both fill and outline tools Clicking a red fill will do the same, giving you the Bucket tool, and switching fill colors to red. But the outline tool colors are not changed. Clicking on text switches the text tool to that color, and gives you the text tool. Shift clicking with the dropper makes the color you click on active for ALL tools, and doesn't automatically switch you to any tool. It leaves the dropper active.
This is one of the least well known short cuts in Flash, and is the ONLY way to use the dropper on an outline for example, and then be able to switch to the fill tool and have that color automatically active already.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This articles lists a few file formats and objects you can have on the stage or in the library and explains some of the terminology. It is part of the Flash series.
It's purpose is to help you identify objects you are working with as a Flash designer. We don't use the term "object" here in the sense of an ActionScript object !
Note: This text is a rough draft. Some things may be wrong or missing.
Copyright notice: The table below has been copied more or less as it from Wikipedia's Macromedia Flash article on July 12, 2007. Its contents are available under the GNU Free Documentation License.
| Ext. | Explanation |
|---|---|
| .swf | .swf files are completed, compiled and published files that cannot be edited with Adobe Flash. However, many '.swf decompilers' do exist. Attempting to import .swf files using Flash allows it to retrieve some assets from the .swf, but not all. |
| .fla | .fla files contain source material for the Flash application. Flash authoring software can edit FLA files and compile them into .swf files. |
| .as | .as files contain ActionScript source code in simple source files. FLA files can also contain Actionscript code directly, but separate external .as files often emerge for structural reasons, or to expose the code to versioning applications. They sometimes use the extension .actionscript |
| .swd | .swd files are temporary debugging files used during Flash development. Once finished developing a Flash project these files are not needed and can be removed. |
| .asc | .asc files contain Server-Side ActionScript, which is used to develop efficient and flexible client-server Macromedia Flash Communication Server MX applications. |
| .flv | .flv files are Flash video files, as created by Adobe Flash, ffmpeg, Sorenson Squeeze, or On2 Flix. It's container format that uses (mostly) h.263 for video and MP3 for audio. |
| .swc | .swc files are used for distributing components; they contain a compiled clip, the component's ActionScript class file, and other files that describe the component. |
| .jsfl | .jsfl files are used to add functionality in the Flash Authoring environment; they contain Javascript code and access the Flash Javascript API. |
| .swt | .swt files are 'templatized' forms of .swf files, used by Macromedia Generator. |
| .flp | .flp files are XML files used to reference all the document files contained in a Flash Project. Flash Projects allow the user to group multiple, related files together to assist in Flash project organization, compilation and build. |
| .spl | .spl files are FutureSplash documents. |
| .aso | .aso files are cache files used during Flash development, containing compiled ActionScript byte code. An ASO file is recreated when a change in its corresponding class files is detected. Occasionally the Flash IDE does not recognize that a recompile is necessary, and these cache files must be deleted manually. They are located in %USERPROFILE%\Local Settings\Application Data\Macromedia\Flash8\en\Configuration\Classes\aso on Win32 / Flash8. |
| .avi | AVI file is a video file, standing for Audio Video Interleave. Flash includes several compression codecs, including some from Radius. |
| .gif | A GIF image; either a single static frame or multi-frame animation. |
| .png | A PortableNetworkGraphic image. |
On the stage you can have various kinds of graphics objects, i.e. objects that you can move, copy, delete, transform, stack, align, and group.
See also the Flash drawing tutorial, Flash object transform tutorial and Flash arranging objects tutorial for more details.
Shapes are the most primitive objects. When you draw shapes that overlap each other in the same layer, the topmost shape cuts away the part of the shape according to your drawing controls. When you draw a graphic like a rectangle in merge mode with both stroke (the outline) and a fill (paint), they become separate shapes and can be moved independently.
You can transform a shape into graphic object with menu Modify->Combine objects union
Tip: As a general rule, avoid shapes (unless you work
like a painter or a drawing artist). In other words, put the
controls of the Tools panel in object mode:
When you draw in object mode, then you will produce graphic objects. You can transform a graphic object into a shape (right-click->break Apart).
When select several objects you have a composite object. When you group them together too.
There exist different variants:
Tip: Make sure that you don't work on a composite object when you believe that you just edit a simple object. E.g. watch out what you have selected before you turn it into a symbol ...
Instances are made from objects that you have in your library. You only can apply certain transformations to these (without changing the library objects). E.g. you can
You can attach behaviors to instance object in ActionScript 2. In ActionScript 3 you can also do this, but only via the timeline.
Some instances let you edit parameters, i.e. compiled clips
Modifying lines and shapes can alter other lines and shapes on the same layer. See Flash motion tweening tutorial for example.
Graphic symbols are named graphic objects. You can transform a drawing or shape into a graphic symbol with the right-click menu. Actually, as soon as you are happy with a creation you should do this.
Movie symbols are Flash animations that you can edit by double-clicking. You can use them as components for more sophisticated animations.
Button symbols are special movies that implement the graphics or button touching, pressing, releasing, etc.
Bitmaps Are imported bitmaps of various formats, e.g. *.jpg, *.gif, *.png
Represent motion tweens. I never use these. If you have these in your library it means either:
Movie clips are simply imported Flash files *.swf. You can drag them on the stage and for example use them in a motion animation.
Compiled clips are ActionScript objects exported/imported trough the *.swc format. If you drag an instance to the scene you then can edit its particular parameters through the properties or the component inspector panels.
These are Flash video containers in *.flv format. When you drag these to the stage, they will integrate to the timeline. E.g. a short movie may extend over several hundred frames. Most often you'd rather use the FLV playback component to play such videos. See the Flash video component tutorial.
This article or section is incomplete and its contents need further attention.
Some sections may be missing, some information may be wrong, spelling and grammar may have to be improved etc. Use your judgement !
This reminder of a few simple "how to work with the Flash environment" is part of Flash CS3 tutorials.
Unless you are gifted,
Always make sure:
Use a separate layer
Use layer folders if you get too many layers
Always name things:
Use conventions for naming (more later)
If you can divide an animation into scenes, use different scenes
Even for small projects: