Intermediate Techniques and Tutorials - AS3
Tutorials in this section illustrate objects and user interactions more complex than those in the Basic Constructs and Interactions section.
AS3 Events Properties: target,
currentTarget, eventPhase, localX, localY
We look at basic properties of events in AS3: target, currentTarget, localX, localY,
as well as eventPhase. We provide a simple utility that displays those properties for MouseEvent.CLICK.
Some results may surprise you, especially Event.target and localX, localY. Throughout event's
propagation, localX and localY remain relative to the interactive display object that was clicked,
and that object remains the event's target even if the object itself has no listeners registered to it.
Moving Rectangles - Flash Generative Art Effect
A simple piece of Flash art. It is a very minimalist animation of sliding and rotating rectangles, which combine
to create an evolving tapestry of colors. It also serves as a tutorial for a few interesting aspects of ActionScript,
including blend modes, alpha values, and a technique to prevent Tweens from quitting unexpectedly due to garbage collection.
AS3 Flash: Psychedelic Effect via
Perlin Noise and DisplacementMapFilter
We show how to combine the BitmapData.perlinNoise method with the DisplacementMapFilter
to create a psychedelic art effect. Combining the two techniques is common for creating
a variety of effects. We explain the code and the details of the perlinNoise method and
AS3 Flash: Low CPU
Clouds Animation - Perfect for Mobile
In our our recent tutorial on clouds effect via BitmapData.perlinNoise and ColorMatrixFilter,
we presented a nice clouds animation but very CPU intensive and not suitable for
larger images or for mobile devices. Here we present a version that is extremely CPU efficient,
runs very well on Android 2.2, and can be used to generate large images. We show two examples
in which we generate 500 by 380 animations.
Realistic White Clouds on Blue Sky in AS3 Flash
In this tutorial we show how to use two important methods of the BitmapData class,
perlinNoise and ColorMatrixFilter. By combining the two, we obtain a realistic
dynamic cloud effect. The color schemes of the sky and the clouds can easily be changed.
Pixel Particles Made Simple - AS3 Flash Tutorial
Curiously, pixel particles that are behind most particle
effects are not display objects. In this tutorial we explain
the nature of pixel particles. We give a simple example that
shows how to create and move particles and how to make them
leave shadowy trails. Our example handles comfortably as many
as 200,000 particles.
Color Fountain - Interactive
Particle Effect in AS3 Flash
Interesting interactive particle effect. Pixel particles move
based on their position but also based on their color and the colors
of neighboring pixels via attract/repel action. The motion creates
a pretty 'color fountain'.
'Parametric Flowers' - Four
Great Animations in AS3 Flash
Watch flower-like, mathematically generated patterns
continuously bloom and fade. Four different themes:
Lush, Wilting, Amber and Frosty, each with different
coloring and fading transforms. Really pretty!
AS3 Flash: Extracting and Combining RGB Components,
Custom Color Picker
We present in this tutorial a nice custom color picker but our real goal is to present formulas
for extracting RGB components from a color value, combining RGB componets into a color value,
and rewriting a color in its familiar hexadecimal form. We give detailed explanations
of the binary and hexadecimal representations. We discuss the bitwise operators involved.
Kepler's Supernova - 3D Particle Effect in AS3 Flash CS4
A new 3D particle effect: the spectacular Kepler's
Supernova. We animate 17,000 pixel particles put into motion based
on the difference between their red and blue color components.
Thus, every time you change the underlying bitmap image, you will
obtain a different effect.
Function Grapher with Zooming and Panning
In this tutorial, we present a math function grapher which has a drag and drop panning
and mouse click zooming functionality. Panning has a cool easing
effect, too. All the source code including parsing and graphing
custom AS3 classes available for download.
Color and Image Effects with a Custom
InterpolateColorTransform AS3 Class
We present a custom InterpolateColorTransform class and
interesting color and bitmap effects accomplished using the methods of the class.
The methods provide several ways to smoothly transition between two
instances of ColorTransform.
Three Mirror Kaleidoscope in Flash AS3
The most common computer generated kaleidoscopes correspond
to a simple two mirror kaleidoscope. Three mirror
kaleidoscopes give rise to much richer symmetry effects,
just like the toys you might remember from childhood.
We provide a custom AS3 class that creates a three mirror
kaleidoscope based on any bitmap image or a MovieClip
Fading Trail Effect for Flash AS3 Particle Animations -
a Simple Example
We show how to create the effect of particles leaving a fading, 'ghostly',
trail while moving. The effect is easy to accomplish but the relevant code
often gets lost in more complex particle experiments. Thus, we use a simple
example of one particle to explain the effect. (Flash CS4)
3D Moving Spotlight and Shadow Effect in AS3 and Flash
We present an effect of an object, in our example text,
illuminated by a moving spotlight, with a shadow cast on a wall behind the text.
The effect is three-dimensional, but we are not using any of the native
3D methods in Flash. Rather, the effect is achieved
with some clever layering and masking. (Flash CS4)
Kaleidoscopic Gallery in Flash CS4
We present a gallery of kaleidoscopic effects and stunning, dynamically generated
images. Take a photo of street graffiti, or any other image, and transform it into
fascinating symmetrical patterns. To accomplish these effects we use a custom AS3 class,
KaleidoscopeMirror. It is a new and enhanced version of the Kaleidoscope class
from our earlier tutorial. (Flash CS4)
Loading and Unloading SWFs with 'stage' References
Loading external SWF files that contain references
to 'stage' requires caution and often extra steps to avoid runtime errors.
We discuss all the issues involved and give solutions. We also
explore the question of unloading loaded content. We explore
an exciting new method available in Flash Player 10,
Loader.unloadAndStop and its superiority over Loader.unload. (Flash CS4)
- Custom AS3 Math Classes, Implicit Plotter in Flash
The implicit equations grapher presented in this tutorial is another example of how
the custom AS3 math classes provided at flashandmath.com can be used to easily create
custom math applets. In this tutorial, we use our custom MathParser and GraphingBoard
classes that do all the work for you. The tutorial contains complete, well-commented source code.
- Magnifying Glass Effect in Flash CS3 and AS3, Displaying Load Progress of Runtime Assets
We show how to easily create a magnifying glass effect. When the user mouses over an image,
a magnified portion is displayed. We use the bitmapFill method rather than masking to accomplish
the effect. Since a high resolution image is loaded at runtime, we show how to create a simple
load progress display. The image, the shape and dimensions of the magnifying glass,
the magnification factor are all easily customizable.
- Creating Event Listeners Dynamically in AS3 and Flash CS3, The Lights Out Game
We present the Lights Out Game in which the number of cells is randomly generated at runtime with each new game. Thus, the click
listeners attached to each square have to be created on the fly. The listeners are similar but different for each square.
Don't miss this interesting tutorial written by James Hamblin.
- XML-driven Check Box and Combo Box Quizzes in Flash CS3
We show a simple way to create quizzes that use CheckBox or ComboBox interfaces. Questions and answers are
pulled at runtime from an external XML file.
- A Gummy Bitmap: Custom Bitmap Transformations in ActionScript 3
We show our custom AS3 BitmapTransformer class in action. In one example
we have a bitmap whose vertices can be dragged in an arbitrary way
and the image is distorted accordingly in all sorts of contorsions.
In the second example, we throw in a dash of tween, and create
'an elastic' image. Great visual effects!
- Tween Tricks in ActionScript 3 and Flash CS3
In this tutorial we explore less common ways of using the AS3 Tween class. The class is remarkably
flexible. Instead of tweening properties directly related to motion or appearance, we tween
a property of an auxiliary object. We show how to use the technique to create tweened nonlinear motion,
tweened text effects, and a 'balloon' effect. We also illustrate the built-in AS3 easing functions.
- An XML-based RadioButton Quiz in Flash CS3
Learn how to create a simple quiz interface supplied with content from an
external XML data file. This particular quiz structure uses only RadioButton
components, but the ideas are adaptable to other interfaces as well.
- The Display List, The Stage, and addChild in Flash CS3 We start from a very elementary example of
a "solar system" animation and use it to explain the child-parent relationship in ActionScript 3 and Flash CS3. We discuss the notion of the Display List in Flash CS3,
and explain the concept of the Stage and the meaning of the keyword "stage" in AS3.
- Depths Management in Flash CS3 and ActionScript 3 We discuss the depths model in ActionScript 3
and the basic depths management methods: addChildAt, setChildIndex, swapChildren, swapChildrenAt. We give a 3D example and a drag and drop
examples involving depths issues.
- Creating, Deleting, and Accessing Display Objects at Runtime in Flash CS3. The 'name' Property of Display Objects
The need for creating, deleting and manipulating a non-predetermined number of display objects at runtime is a frequently
encountered issue when programming highly interactive applications, for example games or math applets.
The approach to that and related issues is dramatically different in AS3 from the way it was in AS2. In this tutorial, we look at two examples,
in which we examine how the features of the Display List, the 'name' property of DisplayObject and getChildByName method
can be used to make such programming tasks easier.
- Areas Behind Display Objects and Mouse Events in Flash CS3. Reparenting in AS3 We discuss the issue
of how overlapping display objects respond to mouse events and show displayObject.mouseEnabled property in action. We show how to
change the parent of a display object. It is very easy in ActionScript 3! The tutorial provides a refresher on local
and global coordinates as well.
- Masking in Flash CS3 The tutorial shows dynamic and programmatic
masking techniques in ActionScript 3, including transitions between images and masks animated with the
EnterFrame event. As one of the examples, we show a mathlet that relies on masking.
- Using the Custom Math Parser This tutorial shows how to use the MathParser class that is available on this site.
Examples include simple computation and answer checking. The same class is used in the Simple Function Grapher tutorial that follows.
- A Simple Function Grapher in Flash CS3 In four setps,
we explain how to built a simple function grapher in AS3. The user can choose the x and y ranges as well
as the function being graphed. This simple applet uses our custom mathematical expressions parser
in ActionScript 3. The AS3 parser is contained in a custom class MathParser. You can download the parser and all
other relevant files from the tutorial.
- Creating a histogram with runtime
drawing A step-by-step tutorial that reinforces the ideas
of dynamic drawing in Flash CS3 and shows a method of parsing the user's
- Animating using the "Enter
Frame" event The tutorial explains in detail
how to animate a bouncing ball programmatically in AS3.
- Loading External Clips and Videos in Flash CS3 This multipage tutorial is written in html so that the active examples will help you understand how to load and control movie clips defined in external swf files, including those with embedded Flash video files.
- An Animated Family of Functions We
use the same technique as in the previous tutorial
to animate a family of trigonometric functions in AS3.
- Drawing in a window at runtime The
user clicks on two points in a graphing
board. The points and the line between them are dynamically drawn.
- Flash Forum
Custom Classes: Modifying Appearance We show how to easily
modify the appearance
of a parametric grapher written in ActionScript 3 from our Flash Forum article
"Flash Tools for Developers (AS3): Graphing Curves in the Plane". We provide a package
of custom ActionScript 3 graphing and parsing classes.
- Creating Textboxes at Runtime in Flash CS3 A simple matrix multiplication applet. However, the user is allowed to choose the dimensions as well as the elements of matrices. Hence, all textboxes have to be created at runtime via AS3
Bridging the gap: writing AS3 classes
- Introduction to Writing and Using Custom ActionScript 3 Classes with Flash CS3
In this first tutorial, we discuss the three ways that AS3 custom classes can be used with Flash CS3. Then we present
a simple applet. In the initial version of the applet, the code is placed on the MainTimeline. We show how to move the code into
a custom class. Then we use the class to construct variations on the applet.
- Flipping a Card Applet
in Terms of ActionScript 3 Custom Classes - Take 1
We show how to change our very popular Card Flips applet so at first most and then all the code
resides in custom AS3 classes. We create an image flipping AS3 class. We use
the class to create a two-card applet. We also introduce and discuss
the Document Class in Flash CS3.
- Loading Images and
Spinning Them in 3D in Terms of AS3 Custom Classes - Take 2
We show how to use custom AS3 classes to construct a Flash CS3 applet where a couple of two-sided images can be span in 3D. This time,
images are loaded at runtime from external files. The concurrent loading is done by a custom ImageLoader class that extends
the EventDispatcher class. We show how to create custom events in AS3.
- A Custom HorizontalSlider
AS3 Class in Action: Applying Color Tints to Photos
We present custom HorizontalSlider and a VertcalSlider AS3 classes that provide a light-weight alternative to the built-in
Flash CS3 slider component. The HorizontalSlider class extends Sprite and dispatches custom events. As an example
of usage, we construct an applet in which color tints are applied to a photo.
A Custom Fraction Class in ActionScript 3
The custom AS3 Fraction class included with this tutorial handles arithmetic of fractions. Three applets that make use of the class are also provided to demostrate how the new
class works. Within the class definition, we illustrate the 'rest...' and the untyped '*' constructs for function input parameters, which allow for flexible definitions of class methods.
Fraction class allows for exact fraction arithmetic and complements our more general MathParser class.
- Bubbling Liquid, MovieClips Linked to Custom AS3 Classes
The tutorial illustrates various ways
of controlling at runtime MovieClips created at design time. We start by placing
code on a MovieClip's timeline and end by linking MovieClips to custom
AS3 classes. We use bubbling liquid and the Cereal Box Problem as examples.
Consider our book: Flash and Math Applets: Learn by Example which is available at amazon.com.