ActionScript 3 Tutorials for Flash Developers:
Flashandmath.com Site Search

Flash CS4 Tutorials

Flash and Math brings you a series of Flash CS4 tutorials and effects, for beginners as well as for advanced developers.

  • NEW! 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.
     
  • NEW! 'Seussian Twists', a Mesmerizing Particle Effect in Flash AS3  Glowing lights fly up into the air and leave behind trails that look like colorful twisted stalactites. The effect looks like something in the style of Dr. Seuss, or perhaps like something out of the movie Avatar. Full source code is available to download.
     
  • NEW! Flash CS4 AS3: Flower Twist – Interactive 3D Bitmap Particles  A spectacular 3D particle effect with full source code ready to download. An image of a flower explodes into a 3D helix. Watch the colorful particles twist and fly through space, or turn off the automatic mode and use the sliders to control the motion and geometry of the particle cloud. The code involves z-buffering of particles, interactive quaternion-based rotation, and bitmap filters.
     
  • NEW! Z-Sorting and Perspective Projection in AS3 and Flash Player 10  In Flash Player 10 one can literally 'build' 3D objects by placing their elements in the 3D space. Such objects can be rotated easily. The z-sorting, however, has to be done 'by hand'. In this tutorial, we show that with the effects of perspective projection, sorting by the z-coordinate does not work very well. Instead, we sort with respect to the distance from the observer.
     
  • NEW! How to Set Perspective Projection of AS3 Interactive Objects without Losing Interactivity  A simple but useful tip concerning native 3D methods of Flash Player 10.
     
  • NEW! A Dramatic 3D Photo Gallery in AS3 Flash CS4  XML-customizable, versatile gallery on a rotating 3D cylinder viewed from the outside. The tutorial includes many useful custom AS3 classes: multiple image loader, a preloader and more.
     
  • Realistic 3D Snowfall Effect in ActionScript 3 and Flash  We present a custom AS3 SnowDisplay class which can be used to create a variety of realistic 3D snow animations that include turbulence and wind effects. You can superimpose the animated snow over your image. You can create two instances of the class with small flakes and larger flakes, and place your graphics in between the instances creating an incredibly real-looking effect. We use Perlin noise, the parallax effect, particle techniques, and physical modelling.
     
  • 3D Cylindrical Photo Gallery in AS3 Flash - Revolves Around You  The most spectacular of our 3D galleries yet! A cylindrical 3D gallery that can be fully customized via editing of a simple XML file. Sit in the center of the cylinder and watch the images revolve around you. The application uses native 3D methods of Flash Player 10.
     
  • Waterfall Flash Effect - A Custom AS3 Waterfall Class  We present a particle effect of a spectacular, dynamic waterfall. By manipulating parameters, you can easily customize the look and the feel of your waterfall. You can choose a transparent background and place a waterfall over any image you want.
     
  • Create Great Paper Cutting Patterns on the Fly - a Flash CS4 Effect  We present an effect meant to recreate the childhood experience of cutting and unfolding paper. Cut out polygons from a folded paper triangle like you would with a scissors and see the beautiful snowflake-like patterns emerge as the paper unfolds. The effect is based on custom AS3 classes that use methods new to Flash Player 10.
     
  • A Snowflake Generator in Flash CS4  We provide a custom AS3 class, SnowFlake, and an applet that creates snowflakes from a drawing generated by the user. The user creates a drawing through simple dragging of dots. Via a series of symmetries and random parameters, the image gives rise to an unlimited number of complex snowflake patterns. We use new to FP10 methods of the Graphics class: drawPath and copyFrom.
     
  • Nova - Cosmic Interactive Particle Effect in Flash  This exploding star particle effect will blow you away! Watch the mesmerizing colors of particles and their shadowy trails as they billow away from the core. As always, complete AS3 source code comes with the tutorial.
     
  • Bursting and Twirling Ribbons - AS3 Flash Particle Effect  We continue our popular series of particle animations with a whimsical new example. This time, the particles consist of line segments which rotate as they move. Small rectangles are drawn between the previous segment location to the new segment, producing the effect of twirling ribbons being swept out in the trajectories. ColorTransform is continuously applied to produce smooth gradient coloring.
     
  • A Dynamic, Interactive Fountain - Flash CS4 AS3 Effect  Don't miss this spectacular 'fountain made of particles effect'. The effect uses our custom AS3 classes that, with some variations of parameters, produced our recent, very popular examples of Splashing Rain and Lorenz Attractor in Bubble Form. This new effect in the series shows the versatility of the custom AS3 classes.
     
  • Simple and Sleek Solution to Blurring of 3D Objects in Flash Player 10  Everyone who works with 3D methods in FP10 is familiar with the blurring issue: the moment an object becomes a 3D object, it blurrs. We present a simple and elegant solution to this issue by Matteo Sisti Sette. His solution consists of a clever 'scaling correction'.
     
  • Lorenz Attractor in Bubble Form - AS3 Flash CS4 Visual Effect  Don't miss this very interesting visual effect. The Lorenz Attractor, a choatic dynamical system, is drawn in the form of bubbles which become loose and float away. The bubbles shrink, dissolve, and seem to follow ever-changing pattern.
     
  • Rain Animation with Splashing Raindrops - AS3 Flash CS4 Effect  We present a versatile custom AS3 class, RainDisplay. With easy parameter manipulation, you can create a variety of spectacular visual effects: rain with splashing raindrops, dripping paint, and much more.
     
  • XML-Driven 3D Billboard - Flash CS4 and AS3 Effect  We use the native 3D methods available in Flash Player 10 as well as several custom ActionScript 3 classes to construct an advertising billboard with a 3D twist. The billboard is fully customizable by editing a simple XML file.
     
  • 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.
     
  • Kaleidoscope Effects in Flash CS4  We use the new ActionScript 3 method, graphics.copyFrom, supported by the Flash Player 10, to create spectacular kaleidoscope effects. We provide a custom AS3 class, Kaleidoscope, that can easily be customized in all respects. A simple change in the intial image passed to the constructor produces dramatic changes in subsequent kaleidoscopic images. Fun to play with!
     
  • 3D Card Flips with Tweens in Flash CS4 and Flash CS3  The ultimate image flip tutorial! We present two custom AS3 classes, TweenFlipCS4 and TweenFlipCS3 prepared for FP10 and FP9, respectively. Flip vertically, horizontally, customize easily tweens and speed. In the CS4 version, we use native AS3 3D methods, and provide a way of solving the blurring of 3D objects problem.
     
  • How to Set Perspective Projection of Display Objects - Experiments in Flash CS4  If you have more than one 3D object in your movie, manipulating the perspectiveProjection property of the root may not produce good results. In this tutorial, we show how to assign instances of the PerspectiveProjection class to individual display objects. We show several ways of accomplishing that. We discuss sometimes surprising behavior of such assignments.
     
  • XML-Driven 3D Spinning Menu and Photo Gallery in Flash CS4  Due to the great popularity of our earlier spinning gallery, we present a much improved version of the gallery and the underlying SpinnerMenu class. The new gallery is XML-driven and thus easily customizable; each instance has its own PerspectiveProjection object which makes several instances of the menu in the same movie look good; loaded images can be captioned. Don't miss this one!
     
  • 3D News Ticker in Flash CS4 and AS3  In this effect, we show how to use our custom AS3 class 'NewsTicker' to create a cutomizable 3D news ticker in Flash CS4. We use the new 3D methods available in AS3 for Flash Player 10. News messages are loaded from an external XML file. We also examine the issue of display objects becoming blurry when placed in the 3D space, the issue particularly bothersome when dealing with text.
     
  • 3D Spinning Menu and Photo Gallery in Flash CS4  In this effect, we present a 3D image gallery in Flash CS4 in which the menu of thumbnails is spinning in 3D. The tiles spin asynchonously creating a nice effect. At each spin, a different set of images is revealed on the reverse of each tile. The code can be adapted to create any kind of 3D spinning menu. The custom AS3 SpinnerMenu class at the heart of the effect, uses the new 3D rotation properties available in Flash Player 10.
     
  • 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.
     
  • 3D Bitmap Book in Flash CS4 and AS3, Flipping Text in 3D  In this effect, we show how to use our custom AS3 class 'Book' and a sequence of Timers to create a 3D animated book that spins, rotates, and travels through 3D space. We also demonstrate how to flip TextFields and other DisplayObjects in 3D. We use images of our book but the source code can be easily customized.
     
  • 3D Spherical Gallery in Flash CS4  The new ActionScript 3 3D methods available in Flash Player 10 and Flash CS4 make it very easy to create sophisticated 3D effects that before required advanced tools like Papervision3d. In this example, we show how to build a 3D spherical image gallery. The sphere of thumbnails can be rotated by the user or it auto rotates. When the user clicks on a thumbnail, an image loads. Building this fully functional spherical gallery requires only a couple of pages of timeline code.
     
  • 3D Photo Gallery in Flash CS4  A stunning 3D gallery of outer space images! The new 3D ActionScript 3 methods available in Flash Player 10 and Flash CS4 make it possible to literally 'build' complex 3D objects by positioning their elements in Flash's 3D space. It's simple and easy. In this effect, we build a 3D cylindrical gallery.
     
  • The new drawPath Method in Flash CS4  This Basic tutorial illustrates the drawPath method and the Vector class (new to Flash CS4) by creating a filled polygon and a "curved" polygon with draggable vertices. We focus particularly on the "winding" protocols for filling overlapping regions.
     
  • 3D Texture Mapping with drawTriangles in Flash CS4  We create a collection of 3D textured spheres, namely planets, that auto rotate or can be rotated by the user in 3D. We use the AS3 method 'drawTriangles' for texture mapping. The method is new to Flash Player 10 and Flash CS4. A comparison with an earlier version of the app, where a custom AS3 class was used for bitmap distortion, shows that the drawTriangles method significantly improves performance.
     
  • Simple 3D Dynamic Drawing in Flash CS4  In this tutorial, we present basics of runtime 3D drawing in Flash CS4 done in the simplest possible way. We use the new Matrix3D, Vector3D classes and rotational methods to build a simple renderer for 3D objects drawn at runtime. We show examples of a cube and an icosahedron that can be rotated by the user.
     

Earlier Flash Player 10 Experiments

You can find below a few experiments that use some of the new ActionScript 3 classes and methods that Flash CS4 and Flash Player 10 support. The 'as' files in those experiments were compiled using a nightly builds of Flex 3 SDK. SWF files compiled for FP10 Beta 2 run just fine in the release version of FP10 and the 'as' files can easily be adapted to Flash CS4.

  • The drawTriangles Method in Flash Player 10 for 2D Image Transformations  One of the most powerful new AS3 methods that will become available in Flash Player 10 is the drawTriangles method. It allows for sophisticated 2D and 3D bitmap transformations. In this experiment, we illustrate and explain the drawTriangles method in the context of 2D image transformations.
     
  • Interactive, Open-Sided Bitmap Cube in Flash Player 10  We construct an open-sided, interactive cube whose sides are bitmaps. The cube can be rotated in 3D and manipulated by the user. Whenever possible, we use the simple built-in 3D methods available in Player 10. We use the matrix3D class for depths-sorting only. FP10 Beta 1 and FP10 Beta 2 versions are provided.
     
  • Getting Started with 3D Methods in Flash Player 10  3D effects that took a lot of coding before will become very easy in Player 10 because of its native 3D support. In this tutorial, we show a few basic 3D methods that are new in Player 10. We show how to easily rotate bitmaps in 3D and how to flip a playing card in 3D. Because of many new AS3 classes supported by the new version of the Flash Player, such effects are very easy to accomplish.

 

Twitter

We welcome your comments, suggestions, and contributions. To contact us, email Barbara Kaskosz at barbara@flashandmath.com, Doug Ensley at doug@flashandmath.com, or Dan Gries at dan@flashandmath.com.

Adobe®, Flash®, Flex® are registered trademarks of Adobe Systems Incorporated.