Flash is an authoring tool for creating animation and interactivity with
a focus on vector graphics. Flash is designed for the web, but can also
be used to create stand-alone animations and interactive applications
in CD-ROMs, kiosks, and other non-web mediums.
Flash is a flexible system that can be used for many different applications,
including:
Complete websites
Website interface elements
Animations
Comics
Games
Interactive training systems
Mobile phone applications
Prototypes of interactive products
Flash specializes in vector graphics, which are particularly suited
to the web and other low bandwidth applications which need small files.
Vector graphics (like those created in Illustrator and Freehand) describe
the shape of a graphic in a resolution independent way, without including
information about every pixel. This usually creates small files compared
to bitmap images like those created in applications like Photoshop.
Advantages of vector graphics:
Typically smaller files when compared to bitmap graphics
Resolution independent so images can be made larger or smaller without
degradation of the image
Note that Flash also supports bitmap graphics, and can import files
from Photoshop. In addition, Flash supports video. So Flash can be used
to combine a variety of media in a single application. Just be careful
of the file size created, because bitmap graphics and video do not compress
as well as vector graphics.
Flash has two main authoring features, the Stage and the Timeline, which enable
the user to assemble graphics and make them animate over time.
The Stage: The area on the screen where you create, edit,
and position graphics. Graphics objects are drawn, imported, edited
and positioned on the stage for each keyframe in the movie. The user
can set the pixel dimensions of the stage to determine the default
display size of the Flash movie. The stage is composed of a number
of layers (similar to those in Photoshop), which allow the user to
determine how objects display in relation to each other.
The Timeline: This section of the program enables the user
to navigate to specific time points in the Flash movie. When a point
in time (a frame) is selected, the stage displays all the objects
currently active and visible for that frame. The user can set the
frame rate (i.e. how many frames display per second), extend the
timeline by inserting frames, and create keyframes where
(graphic, audio, or interactive) events occur.
brief tour of flash :
Main Windows to review
Main Window: Contains the Stage and Timeline
Window>Tools: Contains the controls for drawing and editing
graphics on the stage
Window>Properties>Properties: Shows properties
for the currently selected object. If nothing is selected, properties
for the movie
Window>Library: Shows the graphics and other elements
used in the current and other open movies
Window>Common Libraries>Buttons These
are standard buttons that come with Flash
Window>Actions: (option F9) Where
you can write and see ActionScript code
Flash movie settings. Set the following items using the property
inspector (when no other objects are selected), or double click on
the frame rate display, just below the timeline.
Frame rate: Defines how many frames per second
the animation runs at. E.g. 12fps.
Dimensions: Defines the pixel size of the Flash movie.
Background color: Sets the color of the stage behind any
graphics.
Publish settings: Determines the version of the
Flash player required, along with many other settings
timeline :
The timeline is a simplified display of the frames that compose
the movie. Each division represents one frame of the movie, and the
numbers across the top show the frame number for each position.
Layers: The timeline is divided into separate sections,
where independent animations take place. These layers run in parallel,
with the graphics on them layered from top to bottom, where the topmost
layer is in the foreground, and the bottom most layer is in the background.
New layers can be added by clicking on the add "+" layer
icon on the left, below the layer names. The new layer is put on
top, "in front" of the layer that was clicked on.
Keyframes: Click a point on the timeline in a layer. Use
F6 or INSERT>TIMELINE>KEYFRAME to insert a Keyframe at this location.
If there are no frames at this location, the layer's time will be
extended to this point. If there is a frame at this location, the
frame is converted to a keyframe. Keyframes are points in the timeline
where you can make changes to an element in the movie. Note that
when you insert a keyframe, all of the contents in that
layer are copied from the previous keyframe into the new
keyframe (unless you use INSERT>TIMELINE>BLANK KEYFRAME).
Frames: Click a point on the timeline in a layer. Use F5
or INSERT>TIMELINE>FRAME to insert a Frame at this location. If
there are no frames at this location, the layer's time will be extended
to this point. If there are frames at this location, a new
frame will be inserted at this point, pushing all frames to the right
ahead by one frame. NOTE: If a frame (not a keyframe)
is selected, and you draw or edit a graphic, you are actually changing
the previous keyframe, not the current frame.
Onion Skin: It is possible to view the graphics on multiple
frames in the timeline. Click on one of the two onion skin buttons
under the timeline, at the left. Two brackets at the top of the timeline
determine the number of frames displayed.
Edit multiple frames. There are often times when you want
to move elements on many frames at a time. Rather than selecting
each frame and moving the element on that frame, set the the Edit
Multiple Frames button below the timeline, just to the right of the
Onion Skin buttons.
Labeling keyframes
It's important to label any keyframe you want to be to be able to
navigate to. For example, you might have keyframes labeled:
home, portfolio, resume, contact
This way you can create a navigation system that allows the user to
go to any of these pages and see the corresponding content. It is better
to use labels than the frame number, because you might move the contents
of a keyframe to a different frame--with a frame label, your navigation
will continue to work, even though the contents of the page are on
a new frame.
To add a label to a keyframe, click on the keyframe, and in
the property inspector type in the name for the label and hit return.
layers :
Each layer contains a separately animating element(s), and can
be used to organize your elements. Elements in layers that are
higher on the timeline are "in front" of elements in
lower layers.
Current layer: Select a layer for editing by clicking on
the layer name. The layer name area will become darkened, and any
subsequent editing will occur on that layer.
Layer name: Double click on the layer name to change the
name. Naming your layers is an important aspect of documenting your
project. You may remember which layer contains what 5 minutes from
now, but you will not remember tomorrow!
Lock layers: To ensure you don't select or change elements
on a layers, click the dot in a layer under the lock icon. You can
lock all the layers by clicking on the lock icon itself.
Show/Hide layers: You can show or hide a layer by clicking
on the dot in layer under the eye icon.
Layer folders: You can group layers (like Photoshop
layer sets) with layers folders. Click on the folder icon to create
a new folder. Drag layers into it to group them. Click on the folder
triangle to open or close it.
playing/exporting
:
You can play the movie directly from the Stage, although
not all of the motion, animation, and interactivity will show up. The
best way to see how your movie animates is to Test the Movie in true
Flash format.
Play: You can preview the motion in your movie by clicking
on the Play button of the controller window, or selection CONTROL>PLAY.
Test movie: To see how the movie will really play, select
CONTROL>TEST MOVIE, or press COMMAND + ENTER. This creates a fully
compiled movie that will play exactly as it will in a web site or
as an external application.
Publish movie: To create a flash movie and the
HTML go to with it, select FILE>PUBLISH. To adjust the settings
that go with the published movie, select FILE>PUBLISH SETTINGS...
There are two files associated with a Flash application:
.FLA: This is the authoring file used to edit
and change the application
.SWF: This is the exported file used to deliver
the final application. The .swf file is uploaded to the web server
(not the .fla file). Typically, the .SWF file will be contained in
an enclosing .html page.
text :
Text in Flash is maintained as vector graphics, and can be
edited at any time.
Insert text using the Text Tool
Select the text type (STATIC, DYNAMIC, INPUT) in
the property inspector, and set the size, font, and other attributes
of the text
Click once to insert a single line text box that
expands to the size of the text entered
OR
Click and drag to insert a paragraph box that has
a fixed width
The property inspector is used to modify the entire
text box or selections within the box
Make a basic scrolling text box
Select the Text Tool, and set the property inspector
to dynamic text box, and Multiline
Click and drag to create the text box
Open WINDOW>COMPONENTS,
and drag the User Interface>UIScrollbar onto
the side of the text box where you want it to display. It will resize,
and attach to that side of the text box.
If you want to resize the text box, drag the Scrollbar
away from the text box, resize the box, and then drag the Scrollbar
back over the text box
If you add another scrollbar, drag it from the project
Library rather than from the Component window so you don't duplicate
the Scrollbar in the project Library
For information about how to make a scroller using a
text field and your own graphics for the buttons, see the coding
example at end of this page.
tweening :
The tweening capability of Flash is a powerful feature that automatically
creates all the frames between any two keyframes you create. If you position
a symbol with a start and end position (including any transformations you
want to make), Flash will create all the frames in between to create smooth
motion. Alternatively, Flash can Tween from one shape to another, creating
a "morph". To make a Tween:
To create a MOTION TWEEN, select a layer and create the beginning
keyframe
Place a symbol (it must be a symbol, graphics won't
tween) on that keyframe, in the beginning position for the animation.
It's important that only one symbol is in the layer to be tweened
Now create the ending keyframe, and position the symbol to its
end position
Select the beginning keyframe, and in the Property Inspector set
TWEEN to MOTION. Flash will create the in between frames in a straight
line between the beginning and ending keyframes
To create a complex path, you can place keyframes at each point
along a path with tweening set for each keyframe. Or you can create
a Motion Path
To create a SHAPE TWEEN, or morph, put the initial graphic shape
(NOT a symbol) in the first keyframe
In the next keyframe, place the end shape
In the first frame, set TWEEN to SHAPE
drawing tools :
Flash has many tools for creating graphics, and most of them are similar
to those available in Illustrator, though they don't always work quite the same.
To learn about Flash drawing tools, go to the Adobe Design Center for a series of videos including this one on drawing:
To import a bitmap or vector graphic, select the layer and frame you
want the element to appear on, and select FILE>IMPORT (import to stage or import to library depending on your needs). Any element you
import will also be made a symbol and placed in the movie library.
For practice, download and open this Photoshop file: ducky.psd
.PNG files: Use the PNG file format for importing bitmap
graphics with an alpha channel
.PSD files: You can import Photoshop
files directly, and if you want, you can import with layers and editable text intact
Multiple files: If you have a series of files that are
frames of an animation, name them with a number at the end. For example,
anim01.png, anim02.png...anim13.png. Flash will import them all,
and automatically place them in subsequent frames.
project structure :
Interactive Flash projects require a methodical approach to the project
structure. Making the projects easy to create and maintain involves organizing
the different pages/scenes as well as organizing the content within each
page. In addition, the ActionScript that makes the project interactive
and the sounds used should have their own organization.
Keyframes for each page
Typical Flash projects have several "pages" with different
content. For example, in a portfolio site, you may have a home page,
plus pages for the portfolio, resume, and contact. The best way to structure
a project like this is to put all the content for each page in a single
frame on the timeline dedicated to this page. Here is an example of a
project structured this way:
You can see in the above Flash timeline that frames 1, 5, 10, and 15
are used for each of the pages respectively. The different elements for
each page (e.g. page content, sound, page title, and actions/labels)
have keyframes at these points. Common elements that exist for every
page (e.g. site name, navigation, backgrounds) do not have keyframes
at these points so that these same elements are visible and usable throughout
the project, on every page.
Layers for each kind of content - graphics, actions/frame labels, sounds
It is best to separate each element of content on its own layer, being
sure to name the individual layers in a clear way. Of course, layers
also allow you to control how elements display, either in front of or
behind each other.
In addition to the visual content of the project, it is best to create
separate layers for any ActionScript used in the timeline
frames. Typically, frame labels are put in the same
layer as the ActionScript, and this layer is usually the top layer to
make it easy to find. Sounds should also be placed in
their own timeline to make them easier to work with.
Exercise: Recreate the above timeline, layers, labels,
and simple content for the portfolio
If you get into trouble, you can download the following file that has
this completed: portfolio_thin.fla
navigate/interact
:
Flash has the capability to respond to the user for navigating to different
parts of the flash movie, starting/stopping animations, and many other
possibilities. These interactions are controlled by a scripting language
called ActionScript.
Where does code go?
ActionScript code can go in many different places inside a flash movie,
and where it goes affects when the code is run. There are two main kinds
of places where code can be placed:
Keyframes - ActionScript code can be attached to
any keyframe, either in the main movie timeline, or in the timeline
of a MovieClip. Scripts cannot be attached to a normal
frame - they must be put on a keyframe.
Click on the keyframe to add a script to it.
A script attached to a keyframe is run upon entry of the timeline into that
frame. So if a script is on a keyframe on frame 15, the script will be run
when the movie play head crosses that frame. If the movie or MovieClip is
stopped before frame 15, that script will not be run.
Note that scripts in keyframes are run before any graphics are displayed
for that frame. For example, if a script is on the first frame of the main
movie, and that script changes the location of graphics on the screen, the
user will only see the new locations of the graphics. I.e. the script is
run and the graphics are moved before the first frame is displayed.
Example: Insert a keyframe at frame 15. Click
on that keyframe, open the Actions window,
and insert the following code:
trace("got to frame 15");
Buttons and MovieClips - In ActionScript 2.0, scripts can be attached
to instances of Buttons and MovieClips on the stage. Scripts cannot be
directly attached to Buttons and MovieClips in ActionScript 3.0, but they can be assigned to to these objects by putting some script in one the timeline.
ActionScript 2.0
Click on the Button/MovieClip instance on the stage to add
a script to it. You'll have to specify what event for that
object will trigger the script--e.g. "on (release)" specifies
that the script will be run when the mouse button is released.
A script on a Button or MovieClip is run when some event occurs,
regardless of the position of the timeline or if the timeline is playing
or is stopped. An event can be a mouse click, the point at when the object
first appears, or when some data is finished loading. When associated
event occurs, the script is run.
Example: Create a movieclip and put it on the stage. Click on that movieclip, open the Actions window, set it to Expert Mode, and insert the following code:
on (release) {
trace("release event received");
}
ActionScript 3.0
Give an instance name to the Button/MovieClip
In a layer called actions, click on the first frame, and open the Actions window and type in the following:
portfolio_nav.addEventListener(MouseEvent.MOUSE_UP, goportfolio);
function goportfolio(evt:Event):void {
gotoAndStop("portfolio");
}
Working with ActionScript
You access the ActionScript capabilities by selecting the keyframe,
button or movieclip you want to make interactive, and then opening WINDOW>ACTIONS (or
F9). This interface enables you to add the action you want taken by double
clicking.
Putting stop() Actions on frames
For our example portfolio project, we need to prevent the Flash movie
from playing through all of the pages continuously. To do this, we need
to place a "stop()" action on each of the page keyframes. To
do this
select each page keyframe in the Actions layer
in the left side of the actions window, click on Global Functions
and then Timeline Control set of actions
double click on the "stop" action to add
this action to the frame
For Action Script 3.0, select flash.display and then MovieClip, then Methods, and then double click stop. After "not-yet-set.stop();" is inserted, in the box where it says Object, type in "this".
making a button :
Flash includes a set of standard buttons, but often you want to make
your own interactive buttons. To do this:
select INSERT>NEW SYMBOL... and provide a unique name for the
button and select "Button" as the behavior for this symbol
then create graphics for each state of the button. States are the
different visual displays of the button for the normal, mouse over,
and mouse down situations. Often, you will create a common background
in one layer that will be the same for all states, and then make a
different text color for the normal and over states. Here is the timeline
of such a button:
button timelines have special kinds of frames to represent each
state, plus a frame that can define the shape of the hotspot for the
button. In this example, a common gray background is placed in a layer
for both Up and Over states. Black text is placed in the Up frame of
the text layer, and green text is placed in the Over frame.
this produces a button that shows black text in the normal state
and green text for the over state
when you've completed making your button graphics, select Scene 1
from upper left hand corner of the stage to return to editing the main
timeline.
now you can place copies of the new button on the stage by dragging
them out of the main library (WINDOW>LIBRARY) and dropping them
on the stage.
symbols :
Each movie has a library of elements that can be reused throughout the
movie. These are called symbols, and are displayed in the LIBRARY window.
It's recommended that symbols be used for any graphics you plan to move
or place in multiple sections of the animation.Using symbols
saves file size because you are reusing the same graphic everywhere. In
addition, only symbols can have scripting attached to them.
Symbols are self-contained objects defined in the library. To use them,
you drag a copy (formally named an instance) of the
symbol from the library onto the stage. This instance will always reflect
the version defined in the library. For example, if you change the shape
of the graphic in the library, all instances on the stage will reflect
this change.
Create a symbol: In the pull down menu in the upper right
hand corner of the Library window, select Create Symbol (or select
INSERT>NEW SYMBOL). A dialog will be presented which enables the
user to set the name and type of symbol. When finished editing the
symbol, select the scene name right above the layers (or EDIT>EDIT
DOCUMENT) to return to editing the full movie.
Convert a graphic into a symbol: select the graphic(s),
and select INSERT>CONVERT TO SYMBOL.
Graphic: This is the simplest type of symbol, used for
static graphics or simple animations (that sync with the main
movie timeline). Graphic symbols can be a single frame or multiple
frames with as many layers as you want. Use the stage to create
the graphic. Alternatively, any graphic that's imported automatically
becomes a Graphic symbol.
Button: A Button symbol responds to button clicks, rollovers
and other behaviors. It has 3 frames for the Up, Over, and Down
positions of the button. In addition, it has a Hit frame to define
the "hotspot" of the button (i.e. the area that is
clickable or responsive). Put a graphic in the Up, Over and Down
positions, and Flash will automatically display the right frame
when the button is used in the full movie. If you want any of
the button states to animate, place a Movie symbol in the Up,
Over, or Down frame. Draw a simple filled rectangle in the Hit
frame to set the hotspot.
Movie Clip: A Movie symbol is a self-contained movie
that can have multiple layers and frames. These animated symbols
are complete Flash movies that become objects in the full movie.
When placed in a frame in the full movie, they run whether the
full movie is playing or stopped (including any interactivity
you've defined in the symbol). Create and edit a Movie symbol
as you would a regular Flash movie.
Edit a symbol. You can edit a symbol at any time, and the
changes will automatically be reflected wherever the symbol is used
in the movie. On the stage or in the library window, double click
on the symbol to edit it.
Place an instance of a symbol: To place a symbol in the
full movie, select the desired layer and frame (making sure you are
editing the movie and not the symbol). With the Library window open,
select the name of the symbol you want, and drag its image from the
Library window onto the movie stage. Placing a symbol in a layer
creates an instance of the symbol which can be named
and addressed individually from other instances of the symbol in
the movie.
In addition to any user created symbols, Flash has many standard buttons
built-in. To use these, select:
WINDOW>COMMON LIBRARIES>BUTTONS.
Symbols are efficient
One reason to use symbols is that they save space in the Flash movie,
since the same information is used for each instance of the symbol
that's placed on the stage. In addition, it makes your production more
efficient because if you decide to make a change to a symbol used throughout
the project, you only need to make the change once to the symbol, and
all the instances will instantly reflect the changes.
Symbols can consolidate complex timelines/interactions
into a single object
It's often convenient to create an animation or interactive segment
inside of a symbol to make it easier to work with. Since a symbol has
its own timeline, all of the animation and interaction are included
inside of the single symbol. In this way, you can place a whole animation
on the stage as a single object that can be resized, duplicated, and
interacted with.
Animated symbols
An example of this in animation would be if you wanted many birds
on the stage. You could animate a bird flying once inside of a symbol,
and then place multiple copies of the bird symbol on the stage.
Interactive symbols
An example of this for interactive symbols would be creating a self-contained
portfolio viewer that has frames for each member of the portfolio.
This symbol would have its own navigation buttons to move between the
portfolio members within the symbol timeline. Once complete, the entire
portfolio viewer symbol can be placed on the main timeline as a single
object. Then it will be a complete interactive application on a single
frame of the main timeline.
Symbols within symbols
There are times when it makes sense to put a symbol inside of another
symbol. In the above portfolio example, the buttons are symbols that
are placed inside of the portfolio symbol. Another example is when
you want something to animate and move. Say you want to have a bird
both flap its wings and fly across the screen. This requires putting
on symbol (the flapping animation), inside another symbol (the motion
tween across the screen). The symbol with the motion tween is then
placed, perhaps multiple times, on the main timeline as single objects.
EXERCISE: In your portfolio file, create a new movieClip
that contains each of your portfolio images on a
different frame. Also
create small boxes as symbols (buttons) that will be the navigation within
the movieClip. These nav boxes should
be on a frame that spans all of the frames of the movieClip (i.e. on
their own layer that has only one keyframe). The timeline should look
like this:
Place the images one to a frame, centered in the same location. Place
the navigation boxes in a line, being sure they are not overlaped by
the images. To easily align all the images, select the Edit Multiple Frames
option in the timeline, extend the selected frames to all you've used,
and then select all the frames. Use MODIFY>ALIGN>HORIZONTAL CENTER and
MODIFY>ALIGN>BOTTOM or MODIFY>ALIGN>VERTICAL CENTER as appropriate.
To make the navigation work:
select each square and use MODIFY>CONVERT TO SYMBOL, select button, and OK
now select button and give it an instance name in the property inspector that relates to its location. e.g. btn1, btn2, btn3, etc.
place the portfolio symbol in the
content layer of the main movie, on the portfolio frame. Give it an instance name of "portfolio"
on the actions layer, at the portfolio from, add the following code:
portfolio.stop();
Then on the same from, add the following code for each button you created inside the portfolio symbol. Change the "1" to the appropriate number for each case of "btn1", "go1", and in the "gotoAndStop(1)";
portfolio.btn1.addEventListener(MouseEvent.MOUSE_OVER, go1);
function go1(evt:Event):void {
portfolio.gotoAndStop(1);
}
sound :
Sound can add a tremendous impact to any presentation, but designers often
seem to forget about the power and importance of sound. As of Flash MX
2004, Flash has no sounds built in, so you have to import sounds to experiment.
These sounds are attached to keyframes and play when the play-head reaches
that keyframe.
To import a sound in .WAV or .AIFF format, select FILE>IMPORT>IMPORT
TO LIBRARY... and locate the file.
Once the sound is in the library, select the keyframe you want the sound
to start at, and drag the sound to the stage. Or, you can drag a sound
directly to any keyframe in the timeline. Once inserted, you will see
the sound located in the timeline. In general, it's a good idea to create
a separate layer for sounds.
You can edit the volume (e.g. for fade-ins or outs) by clicking on the
keyframe, and selecting edit in the property inspector.
Sources for sounds and music loops on the Internet include:
For information on how to use ActionScript to control sounds (change
volume, set pan position, start and stop sounds, etc.), go to this link
on the web scripting site.
coding :
jump to a frame:
You can use symbols to move around the timeline and change what is displayed.
To do this:
on the time line, in the first layer, add a keyframe at frame 5
on this layer, put a text box with a "1" on frame 1, and a "5" on frame 5.
add another layer, and create two symbols and place them on the stage, one with an instance name of goframe1, and the other with a name of goframe5
on this layer, add a frame (NOT KEYFRAME) at frame 5
add a third layer called actions,and add a frame (NOT KEYFRAME) at frame 5
on this layer put stop(); in the first frame's actionscript
add the following code to symbol goframe1
on (press) {
_root.gotoAndStop(1);
}
and on goframe5
on (press) {
_root.gotoAndStop(5);
}
For actionScript 3.0, create the same movie as above, but do the following:
put the following code to the first frame of the actions layer
stop();
goframe1.addEventListener(MouseEvent.MOUSE_DOWN, go1);
function go1(evt:Event):void {
gotoAndStop(1);
}
goframe5.addEventListener(MouseEvent.MOUSE_DOWN, go5);
function go5(evt:Event):void {
gotoAndStop(5);
}
dragable symbols :
It is possible to make symbols dragable by the user, so that when
they click on the symbol, they can drag it across the screen, and the
drop it when they release the mouse button.
To do this:
create a symbol, place it on the stage in the main timeline, and give it an instance name of dragme
create code to look like the this:
on (press) {
this.startDrag();
}
on (release, releaseOutside)
this.stopDrag();
}
OR IN ACTIONSCRIPT 3 - place on the main timeline
dragme.addEventListener(MouseEvent.MOUSE_DOWN, startdrag);
dragme.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
function startdrag(evt:Event):void {
evt.target.startDrag();
}
function stopdrag(evt:Event):void {
evt.target.stopDrag();
}
in addition to allowing the user to drag a symbol, you can set constraints on the dragging to a specified rectangle. This prevents the user from dragging the symbol outside of an area. If you want the dragging limited to a single line (e.g. for a sound fader knob), then make the Left and Right the same for a vertical drag, and the Top and Bottom the same for a horizontal drag. The way to do this is to add what are called "parameters" to startDrag() by putting them between the parenthesis. The parameters are as follows:
this.startDrag(lockToMouseCenter, left, top, right, bottom)
So if we wanted to make the symbol lock to the mouse center, and be constrained to a space on the stage that was near the top left, and was a rectangle of 100 pixels wide, by 150 pixels tall we would change the code to look like the following:
on (press) {
this.startDrag(true, 20, 20, 120, 170);
}
OR IN ACTIONSCRIPT 3 - place on the main timeline
var rectangle:Rectangle = new Rectangle(20, 20, 120, 170);
function startdrag(evt:Event):void {
evt.target.startDrag(true, rectangle);
}
custom cursor :
Sometimes you want to replace the standard cursor with your own graphic.
Doing this requires putting some custom code on the graphic symbol you
want to use for the cursor.
To do this:
select the movieClip that will be the cursor
paste in the following code:
onClipEvent (enterFrame) {
Mouse.hide(); // hides the normal cursor
this._x = _root._xmouse; // sets the movie clip to the x mouse position
this._y = _root._ymouse; // sets the movie clip to the y mouse position
}
OR IN ACTIONSCRIPT 3 - place on the main timeline
Mouse.hide();
stage.addEventListener(MouseEvent.MOUSE_MOVE,redrawCursor);
function redrawCursor(evt:MouseEvent):void
{
myCursor.x = evt.stageX;
myCursor.y = evt.stageY;
}
animating symbols :
It is possible to create movement and animation of symbols without
using the timeline. Instead, you can use code to change the position,
rotation, or shape of a symbol. For example, if you wanted to make a
symbol spin around by itself:
select the symbol
paste in the following code:
onClipEvent (enterFrame) {
this._rotation = this._rotation + 5;
}
ACTIONSCRIPT 3.0 - place on the main timeline
myButton.addEventListener(Event.ENTER_FRAME, doEnterFrame);
function doEnterFrame(evt:Event):void {
evt.target.rotation = evt.target.rotation + 5;
}
another interesting thing to do is move the symbol across the screen:
onClipEvent (enterFrame) {
this._x = this._x + 10;
if (this._x > 550) {// reached the right side, reset to the left side
this._x = 0;
}
}
ACTIONSCRIPT 3.0 - place on the main timeline
function doEnterFrame(evt:Event):void {
evt.target.x = evt.target.x + 10;
if (evt.target.x > 550) {
evt.target.x = 0;
}
}
make the symbol move back and forth across the screen:
onClipEvent (enterFrame) {
// check for going off screen
if (this._x>=500) {
this._rotation = 180;
}
if (this._x<=0) {
this._rotation = 0;
}
// make the symbol move in the direction it's pointing
if (this._rotation == 0) {
this._x += 10;
} else {
this._x -= 10;
}
}
ACTIONSCRIPT 3.0
function doEnterFrame(evt:Event):void {
if (evt.target.x>=500) {
evt.target.rotation = 180;
}
if (evt.target.x<=0) {
evt.target.rotation = 0;
}
// make the symbol move in the direction it's pointing
if (evt.target.rotation == 0) {
evt.target.x += 10;
} else {
evt.target.x -= 10;
}
}
If you want to find out about other properties (e.g. width, height,
x position, etc.), see this link
in the web scripting site.