Flashandmath.com Site Search

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.

• NEW! 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 the DisplacementMapFilter.
   
• 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 you provide.
   
• 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 comma-delimited input.
   
• 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.