NEW TUTORIALS, EFFECTS AND HOW-TOs
AS3 Events Tutorial 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.
AIR Mobile Tutorial Mobile AIR: Loading an External SWF as a Scrollable Help File Our goals are to bundle help files with a mobile app so they can easily be accessed without Internet connection, will not be trying on the memory, and will scroll smoothly. Our help files contain text and graphics. We find that bundling and loading at runtime AS3-free SWF files is a good way. We provide a custom SWFScroller AS3 class.
Loading SWFs: Behavior of a Loaded SWF File versus Behavior of a MovieClip You load an external SWF file at runtime using Loader.load method. You extract the file via Loader.content, cast it to MovieClip, and store in a MovieClip variable. You add a listener to mouse clicks to your loaded MovieClip only to discover that it does not respond to clicks. Isn't Loader.content in the case of loading an SWF file a MovieClip? We discuss the issue and give examples.
AIR Mobile: Display Web Content within AIR Mobile App - StageWebView Tutorial There is a couple of ways to display web pages in your AIR mobile app: the navigateToURL method and the AS3 StageWebView class. We discuss both, but focus on StageWebView as it displays web content without leaving your app. We explain the finer points of using the class, e.g. disabling and enabling zooming in StageWebView instance. Complete Flash CS5.5 and CS5 code ready for download.
New How-To: Drawing Display Objects into Bitmaps with BitmapData.draw Method In many circumstances you may want to draw a DisplayObject into a Bitmap. For example, to take an image 'snapshot' of a Sprite. The important BitmapData.draw method became even more important in development for mobile as Bitmaps are easier to process by mobile devices than vector content. In this simple AS3 How-To, we discuss the method with special emphasis on the second, often overlooked, transform matrix parameter.
AIR Mobile and Vectors: BitmapData.draw or cacheAsBitmapMatrix or Vector Content - AIR Mobile Experiments You want to zoom and pan a MovieClip with static but otherwise complex vector content. From the point of view of performance - memory and frame rate - is it better to leave it in the vector form, draw a scaled up version into a BitmapData or use cacheAsBitmapMatrix AS3 method available in mobile AIR? We compare these three techniques and provide Flash source files and AS3 code which make it easy to test. Also, we show how to create one-finger panning effect.
AIR Mobile Gestures: Zoom In on a Point in an Image and Pan with Gestures - AIR Mobile Tutorial We examine two important AS3 gesture events: GESTURE_ZOOM and GESTURE_PAN. We show how to use the AS3 MatrixTransformer class to zoom around a specific point in an image rather than around the registration point. We make panning smooth by removing GESTURE_ZOOM listener in the BEGIN phase of GESTURE_PAN. Complete source code ready for download.
AIR for Mobile: Loading Images from and Saving Images to Camera Roll - AIR for Android Experiment We discuss loading images from the Camera Roll on your phone into an app and saving images of the screen or a part of the screen to the Camera Roll. Many new AS3 classes specific to AIR on mobile come into consideration. In particular, the CameraRoll class and its methods: browseForImage and addBitmapData. We provide here complete, commented source code.
Perlin Lines: Perlin Lines - A Generative Art Effect in AS3 Flash Two versions of Flash art which is based on a simple principle: allowing lines to be traced out on a Bitmap with changing directions determined by an invisible Perlin noise BitmapData. The examples include grayscale and a colorized version. The results are highly aesthetic. The images can be saved due to our custom and easy to reuse BitmapSaver class.
Fireworks: Colorful Fireworks Display Formed From Particles in AS3 Flash A colorful fireworks display created with an animation of thousands of particles. The fireworks are created using abstract particles which are drawn as pixels to a bitmap. For added realism, we lighten up the sky when the fireworks explode, and also place a dark skyline over the animation.
Fire Effect: Billowing Fire with Perlin Noise and Filters - Flash AS3 Effect A fire effect which is built out of distorted Perlin noise and a few filtering steps. The result is a billowing and chaotic fire rising from the base of the display. The effect makes use of the perlinNoise method of the BitmapData class, plus a ColorMatrixFilter and a DisplacementMapFilter.
Android Trigonometry App: AIR for Android Angle of Elevation - Source Code This simple app illustrates a mathematics tool implemented using Accelerometer events on your mobile device. Stand 20 meters away from a tree, point your phone at the top of the tree, and read the angle of elevation from the screen. Calculating the height of the tree becomes part of an active lesson in trigonometry.
AS3 Marble Texture: AS3 MarbleTexture Class - Apply Marble Texture to Any Display Object An example of a texture created completely from code. Our custom MarbleTexture AS3 class creates a marble-textured Sprite with the same shape and mouse interactivity as any source Sprite that you pass to the constructor. Choose pink, blue or white marble.
Browser Version of PeekAMaze Game: Browser Version of PeekAMaze Game in AS3 Flash We present a desktop version of our free PeekAMaze app that is currently available for Android phones on the Android Market. The version given here runs in a standard browser window.
Android Game Source Code: AIR for Android PeekAMaze Game - Complete Source Code This app is a new twist on the classical maze puzzle. The purpose is to find an exit out of a maze but at each point you can see only a portion of a maze. You have an option of 'peeking' at the maze by dragging it in a view window. At each level of difficulty, a practically unlimited number of mazes can be generated using our custom AS3 classes, including a perfect maze generator.
Android App: AIR for Android Traffic Lights Game - Source Code We provide and discuss complete source code for our TrafficLightsFM Android game. The game is an Android app based on the browser version of our Traffic Lights game linked below.
New Game: Traffic Lights Game in AS3 Flash A very challenging game which is a variation and extension of the classic "Lights Out" puzzle.
Web-Based Rolling Cubes: Rolling Cubes 3D Puzzle in AS3 Flash - Browser Version Recently, we published at the Andorid Market an app which is a 3D rendition in AIR of the Rolling Cubes puzzle. Here, we present a web-based version of the puzzle.
Browser Version of GraphSlider: Web-Based GraphSlider Puzzle in AS3 Flash CS5 We present the web-based version of our free GraphSlider app that is currently available for Android phones on the Android Market. The version given here runs in a standard browser window.
New Text Transitions: Fuzzy Text Transition Effects in AS3 Flash CS5 Three new text transition effects. Text becomes broken and fuzzy, then collapses back to form a new line. Simple variation of parameters produces many different effects. The technique can easily be applied to images.
Rolling Cubes Puzzle: AIR for Android Rolling Cubes 3D Puzzle - Source Code A new 3D rendition of the classic Rolling Cubes puzzle. The puzzle is very challenging and takes a minimum of 36 moves to solve. We provide several simpler versions as a 'warm-up' for the main puzzle. The post contains complete source code.
AIR for Android Puzzle: Flash CS5 AIR for Android GraphSlider Application - Saving Puzzle State The post contains complete source code for our GraphSlider Android AIR app that you can download and install from the Android Market. We comment the code with special emphasis on saving the state of the game. The app contains 30 different puzzles at different levels of difficulty.
Text Transitions: Cool Text Transitions in AS3 Flash CS5 A cool effect of a transition from one piece of text to another. Text becomes distorted and blurred before transitioning back to a new line of text. The effect makes use of a perlinNoise, DisplacementMapFilter and other filters. Several parameters allow easy customization and experimentation.
Particle Effect: RGB Sinks and Springs - Interactive Particle Effect in AS3 Flash A new fun particle effect: RGB sinks and springs. Motion of bitmap particles is determined by their RGB components and their proximity to color 'sinks'. Each red, green and blue sink flies by itself or can be dragged by hand. It attracts and repels particles based on their color components. Invisible 'springs' pull the particles back to their original positions.
New Photo Gallery: Tweening Tile Image Gallery in AS3 Flash The fun feature of this gallery lies in the way the thumbnails transition to a larger image: the image is loaded into pieces onto the thumbnail rectangles, which then 'snap' together with a tween to form the larger image. The gallery is easily customizable via an XML file. We include several custom AS3 classes that make bulding XML-driven 2D and 3D galleries easy.
MazeFM for Android: AIR for Android MazeFM Application, Cool Control Wheel! We provide complete source code for our Android app, MazeFM. The app is a new rendition of the classic maze game. Generate a new perfect maze at a touch of a button. Steer the ball through the maze by moving your finger around a cool and easy to use steering wheel.
3D Snow Effect: A 3D Snowfall Effect with Realistic Turbulence and Sense of Depth in AS3 Flash We present a highly realistic 3D snowfall effect. The motion is driven by an acceleration field determined by Perlin noise. That creates a characteristic turbulence of snow motion. We use BlurFilter for flakes that are very far away or very close to the camera which, together with parallax effect, gives very real perception of depth. Download and play with the code!
Flash CS5 3D Text: Flash CS5: Cool 3D Text Effect, Embedding Fonts via TextFlow.fontLookup Text is loaded dynamically at runtime. Thanks to the new TLF methods, the body of the text is split into separate lines. The lines are tweened in 3D and colorized creating a cool, wavy 3D effect. Moreover, fonts are embedded into TextFlow with the TextFlow.fontLookup property without using the TLFTextField class. Works beautifully on Android 2.2!
Simple Particle Tutorial: 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: 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'.
100,000 3D Particles: 100,000 Glowing 3D Particles Run Smoothly in Flash Player 10.1 More examples of our popular 'particles made of light'. New surfaces, more particles, new effects, and a custom performance monitor.
3D Particle Effect: Astronaut - 3D Particle Effect in AS3 Flash CS4 We present a new 3D particle effect: Astronaut. We animate 15,000 particles with a beautiful effect.
3D Rings Photo Gallery: 3D Revolving Rings: An Interesting Photo Gallery in AS3 Flash CS4 We present a 3D photo gallery in which rings of two-sided thumbnails revolve in 3D. The gallery is easily customizable via an XML file.
Flash CS4 3D Cube: 3D Display Cube with a Versatile Custom AS3 Class in Flash CS4 Each instance of the DisplayCube class accepts any DisplayObjects as sides, it revolves in 3D, its sides respond to clicks. Moreover, the cube drops shadow in 3D! We show an application with three Bitmap cube menus that drop dynamic shadows on the floor beneath as they rotate. We use simple FP10 3D methods.
Flash CS5 3D Text: Flash CS5: Double 3D Text Effect with TLF Text Text is loaded dynamically at runtime. Thanks to the new TLF methods, the body of the text is divided between two 3D boards and split into separate lines. Each line flips in 3D with a tween. Super cool!
Flash CS5 Text Effects: AS3 Flash CS5: Cool Text Effects with TLF Text We load TLF markup text at runtime, use a custom TextSlicer AS3 class to split the text into lines, and then tween, slide, zoom, fade in, and color. We show how to use the new AS3 classes available in Flash CS5 to accomplish a variety of interesting text effects.
Flash CS5 Tutorial: Flash CS5: XML Markup and Runtime Loading of TLF Text with AS3 The new TLF text AS3 classes are extremely useful for creating cool text effects, particularly if you can import your text on the fly, at runtime. In this tutorial, we show how to create a text file or an XML file containing TLF markup, load the file at runtime, and display the dynamically loaded text.
Flash CS5 Tutorial: Multicolumn Text on the Fly with New AS3 TLF Text Classes in Flash CS5 We show how to use the new AS3 text layout classes: TextFlow, ContainerController, TextLayoutFormat, and properties like TextFlow.flowComposer to lay out and format text programmatically. In our example, the number of columns in the layout can be changed on the fly by dragging a slider.
SOME OF THE MOST REQUESTED TUTORIALS AND HOW-TOs:
Flash CS4 Waterfall Effect: Waterfall Flash Effect - A Custom AS3 Waterfall Class
addChild, Display List, Stage: The Display List, The Stage, and addChild in Flash CS3
Loading External SWF: Loading and Unloading SWFs with 'stage' References, Loader.unloadAndStop
Flash CS4 3D Photo Gallery: 3D Spherical Gallery in Flash CS4
Flash CS4 3D Particles: Flash CS4 AS3: Flower Twist - Interactive 3D Bitmap Particles
drawTriangles Method: 3D Texture Mapping with drawTriangles in Flash CS4 - 3D Earth
Flash CS4 Snow Effect: Realistic 3D Snowfall Effect in ActionScript 3 and Flash
Flash CS4 Particle Effect: Nova - Cosmic Interactive Particle Effect in Flash
3D Depth Sorting: Z-Sorting of a 3D Card and the Projection Center in FP10
XML 3D Cylindrical Gallery: A Dramatic 3D Photo Gallery in AS3 Flash CS4
Playing Cards: Custom Classes for Playing Cards in ActionScript 3
Extract and Combine RGB: Extracting and Combining RGB Components, Rewriting in HEX, Custom Color Picker
Simple 3D: Simple 3D Drawing in Flash CS3
Flash CS4 3D Depth-Sorting: Z-Sorting and Perspective Projection in AS3 and Flash Player 10
Incredibly Smooth Mouse Drawing: A Smooth and Responsive Drawing Application in AS3 Flash
Folding Mona Lisa: 3D Accordion-Like Effect of Image Folding and Unfolding in AS3 Flash CS4
Low CPU Clouds: AS3 Flash: Low CPU Clouds Animation
FP10 Perspective Projection: How to Set Perspective Projection of Display Objects - Experiments in Flash CS4
Random Choice from Array: How To Randomly Choose Any Number of Elements from an Array
Flash CS5 Video Tutorial: New AS3 Text Layout Classes in Flash CS5 - Tour and Example
Flash CS5 Video Tutorial: Custom Code Snippet in Flash CS5 that Zooms in and Spins in 3D
Dripping Blood: Spooky Effects in AS3 Flash: Text Dripping Blood
Easing Without Tweens: How to Add Easing to Your Dragging without Tweens in AS3 Flash
Flash CS4 Fountain Effect: A Dynamic, Interactive Fountain - Flash CS4 AS3 Effect
3D Photo Gallery: 3D Cylindrical Photo Gallery in AS3 Flash - Revolves Around You
Rotating Object: How to Rotate a Display Object About an Arbitrary Point in AS3 Flash
Rare Effect: Three Mirror Kaleidoscope in Flash AS3
Kaleidoscopic Gallery: Kaleidoscopic Gallery in Flash CS4
Flash CS4 3D Cards: 3D Card Flips with Tweens in Flash CS4 and Flash CS3
DataGrid Component: How to Use the AS3 Flash DataGrid Component
Perspective Projection: How to Set Perspective Projection of AS3 Interactive Objects without Losing Interactivity
3D Photo Gallery: 3D Photo Gallery in Flash CS4
drawPath and Transparency: AS3 graphics.drawPath versus moveTo, lineTo Methods - Preserving Transparency
XML 3D Photo Gallery and Menu: XML-Driven 3D Spinning Menu and Photo Gallery in Flash CS4
Math Parser, Function Grapher: A Simple Function Grapher in Flash CS3
Simple Particle Tutorial: Fading Trail Effect for Flash AS3 Particle Animations - a Simple Example
Loading Clips and Video: Loading External Clips and Videos in Flash CS3.
Flash CS4 3D Billboard: XML-Driven 3D Billboard - Flash CS4 and AS3 Effect
Flash CS4 Simple 3D: Simple 3D Dynamic Drawing in Flash CS4
Choosing Randomly from XML Data: Loading Random Images from an XML List in Flash CS3
Easing, Tweening, Balloon Effect: Tween Tricks in ActionScript 3 and Flash CS3
Masking: Masking in Flash CS3
Drag and Drop: A Tour of Drag and Drop Techniques in AS3 Flash
Simple Tweening: Using the Tween class in Flash CS3 and ActionScript 3
AS3 Wood Texture: Custom AS3 WoodTexture Class - Apply Wood Texture to Any Display Object
Flash CS5 Tip: Embedding Runtime Shared Library for TLF Text into SWF File
Hand Drawing: Sketching Derivatives Applet in AS3 Flash - The Code
AIR for Android App: AIR for Android Application KaleidoscopeFM - Source Code
For more tutorials and effects explore the categories in the menu at the top of this page!
Consider our book: Flash and Math Applets: Learn by Example which is available at amazon.com.