Flash

Building Click-and-Rotate Content in Flash - Part 7
Reader Level: Reader Level

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 6, we migrated the ActionScript 2.0 version of our custom Scrubber class to ActionScript 3.0. This required a second class file, ScrubberEvent.as, which introduced a key difference in event dispatching between the two versions of the language. Here in Part 7, we'll conclude the series by investigating another AS3 point of interest (again related to events) — and finally, we'll use the Scrubber class for a bit of audio/visual fun.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Building Click-and-Rotate Content in Flash - Part 6
Reader Level: Reader Level

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 5, of this series, we reorganized our click-and-drag functionality — keyframe code until that point — into a custom Scrubber class in ActionScript 2.0. Here in Part 6, we'll migrate this custom class to ActionScript 3.0, keeping an eye on two things: a) how little the actual principles change (not at all) and b) how the structure of AS3 necessitates certain syntax revisions. As you'll see, though, none of it gets too overwhelming.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Building Click-and-Rotate Content in Flash - Part 5
Reader Level: Reader Level

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 4, of this series, we explored "out of the box" implementations of the basic click-and-rotate concept. In that article, "rotating" became "scrubbing"; that is, the action that began as spinning a jet plane evolved into scrolling a list of numbers, which were converted to letters, re-interpreted as different font faces, and could even have been used to adjust the volume of an audio clip. As cool as that was, all of the code for this click-and-scrub routine was located in a keyframe script. Here in Part 5, we'll make that code portable by moving it into a custom class.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

ActionScript 3.0 Conversion Chronicles - Part 4: Automation Strategies
Reader Level: Reader Level

Were you ever confused, frustrated or dismayed by a project you had to convert from ActionScript 1 or 2 and migrate it up to ActionScript 3.0? Maybe you've checked out the AS2 Migration reference, and have found it lacking specific examples, or searched on the net and been flabbergasted by the multitude of conversations. Finding the right information, the right tips and the right approach can be challenging when you're under the gun and need a solution, fast.

This series will guide you through some simple formulas and techniques to convert and migrate legacy Flash ActionScript 1 and 2 code and techniques to ActionScript 3.0.

When you start on nearly any ActionScript 1-to-3 conversion project, you will necessarily need to convert all of those text fields in the FLA. It is such a necessary step in the conversion process that it could be considered as basic as removing all the underscores in MovieClip property references.

Continuing from the last tutorial where you learned to convert AS1 textfields to AS3, in this article you'll learn a neat trick: no more hunting down and converting each and every AS1 text field in an FLA with hundreds or even thousands of assets. In this tutorial we'll show you how to automate the conversion of AS1 textfields with a simple JSFL script. Along the way we'll also look at how to fix the Flash CS3 ObjectFindAndSelect.jsfl bug, and a few high level strategies when confronted with any conversion problem.

The ActionScript 3.0 Conversion Chronicles Series:
ActionScript 3.0 Conversion Chronicles - Part 1: An Introduction to AS3 Migration
ActionScript 3.0 Conversion Chronicles - Part 2: Button Events
ActionScript 3.0 Conversion Chronicles - Part 3: TextFields
ActionScript 3.0 Conversion Chronicles - Part 4: Automation Strategies
ActionScript 3.0 Conversion Chronicles - Part 5: Source Navigation Coming soon
ActionScript 3.0 Conversion Chronicles - Part 6: Button Scripts Coming soon

Decorative Drawing in Flash CS4 Using the Deco Tool and Spray Brush
Reader Level: Reader Level

Flash designers around the world have been using Flash for years to create decorative drawings and symmetrical shapes manually. Flash CS4 comes with two new decorative tools that are built on the algorithmic calculation, called procedural drawing, engine that uses the Flash JavaScript API.

Both the Deco tool and the Spray Brush tools are based on the same concept. It lets you, with a simple mouse click or mouse drag, create a pattern that is based on a default shape or symbol in the library.

In this article we will dig deeper to understand more about the decorative tools in Flash CS4.

Rafiq Elmansy has been a multimedia graphic designer since 2001 and a graphic and web designer since 1999. His background is in fine art and sculpture. He uses Flash to create graphics and animations for desktop applications, cartoons, games, web sites, e-learning courses, and mobile and Pocket PC applications. He is the founder of Bee Design Studio. He is an Adobe Flash CS3 Certified, Adobe Photoshop CS3 Certified, and the founder of the first Adobe User Group in Egypt. Rafiq also creates computer artworks and writes articles and reviews about graphic, animation, and Flash topics at his articles site, Graphic Mania. Rafiq is an Adobe Community Expert and Contributor writer at Adobe Design and Developer center.

Flash CS3: What Happened to the WebServiceConnector Component? Free!
Reader Level: Reader Level

Based on the title of this article, you might get the impression that the WebServiceConnection component has disappeared in Flash CS3 — that you can't consume Web services at all after Flash 8 — and that isn't actually true. If you're programming in ActionScript 2.0, you can go right on using any of the data components listed in the Components panel, including the one for web services. The issue described in this article hinges on the way Flash CS3 responds to the version of ActionScript you're using. As soon as you configure a FLA file's publish settings for ActionScript 3.0, the Components panel actually changes the items it displays, causing the data components to vanish. So it's ultimately ActionScript 3.0 that makes a challenge out of using Web services in conjunction with Flash.

The overall number of components in Flash has been reduced for ActionScript 3.0 FLA files. The data components, as mentioned, have been removed completely and now belong to the Flex framework. A handful of user interface (UI) components, such as Accordion, Tree, and Window, are also absent. Again, these components are still available for ActionScript 2.0 documents, but if you want to program in ActionScript 3.0 — which is only possible as of Flash CS3 — you'll need a workaround.

This article, adapted from an excerpt of The ActionScript 3.0 Quick Reference Guide, gives you exactly that, thanks to a free third-party component. This reference book is slated for October, 2008, published by O'Reilly, and written by Community MX partner David Stiller, as well as Rich Shupe, Jen deHaan, and Darren Richardson.

Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Reader Level: Reader Level

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

Flex comes with its own video player component, the VideoDisplay class, which serves as a simple video player, but it does not possess the capability of the Flash CS3 FLVPlayback component. In this tutorial we will build upon techniques in previous articles, such as editing Flash class files in Flex and using the Flex Component Kit. Using this as a starting point, you will learn how to use the Flash CS3 FLVPlayback component in a Flex application, including some best practices and crucial gotchas to avoid in this conversion and a detailed authoring & compilation diagram to make it all clear.


The Final Flex Application with FLVPlayback Component, Authoring & Compilation Diagram

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Building Click-and-Rotate Content in Flash - Part 4
Reader Level: Reader Level

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 3, of this series, we loaded the rotation image sequence from external JPG files. Here in Part 4, we're going to step out of the box and give a stretch to the clicking-and-rotating (or clicking-and-scrubbing) concept. In doing so, we'll re-shuffle the code a bit, and refine it in preparation for building this concept into a custom class that can be used for a wide variety of applications.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Building Click-and-Rotate Content in Flash - Part 3
Reader Level: Reader Level

In one implementation of the QuickTime VR format, known as QTVR Object Movies, the user can click-and-drag an image to seemingly rotate it, as if spinning the real-life object on a lazy Susan. This simulated 3-D interactivity can improve multimedia curb appeal, and makes for a nifty way to showcase merchandise. But it doesn't stop there: the same basic principle can also bring click-and-drag responsiveness to short video sequences and even user input widgets, such as click-and-scrub input fields.

In Part 2, of this series, we continued our exploration of the Flash version of a QTVR Object Movie that rotates an F-15A aircraft, adding a "grabber" icon and reversing the rotation direction. Here in Part 3, we'll load the image sequence from external files. In future articles, we'll consider alternate uses for the same programmatic concept and eventually build a custom class to wrap the functionality into a neatly portable bundle.

The Building Click-and-Rotate Content in Flash Series:
Building Click-and-Rotate Content in Flash - Part 1
Building Click-and-Rotate Content in Flash - Part 2
Building Click-and-Rotate Content in Flash - Part 3
Building Click-and-Rotate Content in Flash - Part 4
Building Click-and-Rotate Content in Flash - Part 5
Building Click-and-Rotate Content in Flash - Part 6
Building Click-and-Rotate Content in Flash - Part 7

Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Reader Level: Reader Level

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

In the last article, we looked at how to use Flex Builder as the ActionScript 3 editor for a Flash-compiled project. But as some of you may have discovered, there is something missing from that workflow: if you are using any Flash CS3 components, Flex Builder is unable to recognize those component classes, which negates one of the principle advantages of using Flex Builder, which is its code assist. In this article, we will take a look at how to get Flex Builder to recognize the Flash CS3 Component classes for editing ActionScript 3 files in Flash CS3 projects.


How do we get Flex Builder's code assist to recognize Flash CS3 Component classes?

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Flash-Flex Integration - Part 5: Building the DragPanel Component
Reader Level: Reader Level

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

Flex presents developers with a suite of tools which makes coding applications for the Flash Player a real treat. However, there are times you want to create a skin in Flash, and port it into a Flex application. Not merely embedding image assets via CSS, but utilizing flexible, complex skin assets.

In the previous article, we skinned our Flex component, tested its button states and the scale-9 properties of the background skin. In this final article in the scale-9 skinning trilogy (parts 3-5), we will finish coding the full functionality of our drag-and-resize component. You will learn how to:
  • Output realtime event results to a textfield in the component;
  • Code a drag control which allows a Flex component to be moved on stage constrained to a defined boundary;
  • Calculate the minimum dimensions of a component using a scale-9 skin;
  • Apply complex boundary calculations for a component resize handler;
  • Update the dimensions of a resizable component at runtime;
  • Build a custom DragPanel component with a skinned scale-9 background and functional drag and resize handles.


The final skinned and functional DragPanel component with calculation diagram.

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex


Flex-Flash Integration, Part 2: Flex 2 Component Skinning
Reader Level: Reader Level

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

This article offers a clearly understandable tutorial on skinning Flex 2.01 components with Flash CS3. Later in this series we will move on to more advanced component skinning available in Flex 3.


The completed application with custom-skinned buttons.

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Creating Click-and-Paint Flash Content - Part 2: AS3
Reader Level: Reader Level

Ah, coloring books! In my neighborhood, a family restaurant keeps a stack handy for kids to use while they wait for their food to arrive. Coloring books were certainly a fun pastime for me growing up, both on rainy and sunny afternoons. There's nothing like the smell of a fresh box of Crayolas, and nothing beats the satisfaction of tearing off paper as the colored wax slowly wears down. Even so, online coloring books are plenty fun in their own way, and Flash provides the easiest tool for creating a click-and-paint version of this childhood favorite.

This two-part series began last time with a tutorial for an implementation in ActionScript 2.0. In this article, we'll update the programming for ActionScript 3.0, and use the opportunity to grapple with a few migration issues.

The Click-and-Paint Flash Content Series:
Creating Click-and-Paint Flash Content - Part 1: AS2
Creating Click-and-Paint Flash Content - Part 2: AS3

Creating Click-and-Paint Flash Content - Part 1: AS2
Reader Level: Reader Level

Ah, coloring books! In my neighborhood, a family restaurant keeps a stack handy for kids to use while they wait for their food to arrive. Coloring books were certainly a fun pastime for me growing up, both on rainy and sunny afternoons. There's nothing like the smell of a fresh box of Crayolas, and nothing beats the satisfaction of tearing off paper as the colored wax slowly wears down. Even so, online coloring books are plenty fun in their own way, and Flash provides the easiest tool for creating a click-and-paint version of this childhood favorite.

In this two-part series, we'll begin by stepping through an approach in ActionScript 2.0. In the follow-up article, we'll update the programming for ActionScript 3.0, taking the opportunity to note and work through a number of challenges presented by the code migration.

The Click-and-Paint Flash Content Series:
Creating Click-and-Paint Flash Content - Part 1: AS2
Creating Click-and-Paint Flash Content - Part 2: AS3

Understanding Bitmap Fills in ActionScript
Reader Level: Reader Level

As Tom Green demonstrates in his video tutorial "Bitmap Fills in Flash," Bitmap fills are easy to achieve with the drawing tools — but what about ActionScript? Is it even possible to script bitmap fills? If so, is it insanely burdensome? The answers are: yes, it's possible (yay!); and no, it's not burdensome at all (double yay!). So what's the scoop? How does it work? You've come to the right tutorial.

Progressive Enhancement with Flash - Part 3: AS3
Reader Level: Reader Level

For many developers, progressive enhancement is a good idea that often gets set aside. After all, doesn't it require duplicated effort? Not necessarily. In this series, you're going to build a simple Flash slideshow that takes its cues entirely from the HTML document that contains it. Update the HTML and the Flash updates too — automatically. If Flash Player is not installed, the user sees the images anyway, only without the Flash pizzazz.

Here in Part 3, you'll learn how to migrate the ActionScript you wrote last time from 2.0 to 3.0 — code that retrieved images and captions from the XHTML file you loaded in Part 1.

The Progressive Enhancement with Flash Series:
Progressive Enhancement with Flash - Part 1
Progressive Enhancement with Flash - Part 2: AS2
Progressive Enhancement with Flash - Part 3: AS3

Progressive Enhancement with Flash - Part 2: AS2
Reader Level: Reader Level

For many developers, progressive enhancement is a good idea that often gets set aside. After all, doesn't it require duplicated effort? Not necessarily. In this series, you're going to build a simple Flash slideshow that takes its cues entirely from the HTML document that contains it. Update the HTML and the Flash updates too — automatically. If Flash Player is not installed, the user sees the images anyway, only without the Flash pizzazz.

The Progressive Enhancement with Flash Series:
Progressive Enhancement with Flash - Part 1
Progressive Enhancement with Flash - Part 2: AS2
Progressive Enhancement with Flash - Part 3: AS3

Making Your Own Utility Classes - Part 2: Custom Loader Utility
Reader Level: Reader Level

If you've read some of my past articles about ActionScript, you may have heard me say that I am a designer who knows how to program. In other words, I'm in denial about being a programmer. I cannot be in denial any longer though because I have a confession to make... I love making my own utility classes. I can program these things all day long.

Utility classes are classes that perform re-usable, common tasks in Flash. Say you have an application that has status and message panels that pop-up in multiple locations within the application. Rather than re-program the panels for every situation, construct an object from a utility class that takes care of the panel functionality. For me personally, I also love creating separate utility classes as I like to separate tasks and functionality in my code as much as I can. ActionScript is easier to de-bug, read and program when functionality is in a focused and easy-to-digest manner.

Part 2 of this series looks at building a custom loader class to re-use for loading image and swf assets throughout an application. After creating the basics of this custom class, you should feel comfortable in taking the class to the next step and tweaking it out and adding to it for your own dev purposes. As with other utiltiy classes I create in my dev environment, a custom utility class like the one we will build in this article keeps redundant and verbose coding to a minimum and can add some unique functionality to my loading sequences.

The Making Your Own Utility Classes Series: Making Your Own Utility Classes - Part 1
Making Your Own Utility Classes - Part 2: Custom Loader Utility

The Object Oriented Designer - Part 5: Building a Reflective Image Menu with XML and AS3.0
Reader Level: Reader Level

In this segment of the Object Oriented Designer series, we will build on the previous tutorial and focus on populating our menu with numerous external images that are defined in an external XML file. This will allow our menu to be dynamic and updateable from outside of the FLA file.



The final installment in this series will make thumbnails clickable for events or links and make the menu scrollable.

If you are not familiar with the previous installments in this series, please read them before you continue with this tutorial starting here.

The Object Oriented Designer Series
The Object Oriented Designer - Part 1: Animated Buttons
The Object Oriented Designer - Part 2: Making the Button Class
The Object Oriented Designer - Part 3: Creating Reflective Images with AS 3
The Object Oriented Designer - Part 4: Building a Reflective Image Menu with AS 3.0
The Object Oriented Designer - Part 5: Building a Reflective Image Menu with XML and AS 3.0
The Object Oriented Designer - Part 6: Creating Buttons out of the Reflective Thumbs

The Object Oriented Designer - Part 4: Building a Reflective Image Menu with AS 3.0
Reader Level: Reader Level

In this segment of the Object Oriented Designer - Creating a Reflective Image Menu, we will build on the previous tutorial and turn the reflective image application into a dynamic menu set-up. We will focus on: converting the previous set-up into a class based set-up, the loading of the external images, the XML configuration menu. This will set us up for the last installment, where we will make the menu interactive and scrollable.

The Object Oriented Designer Series
The Object Oriented Designer - Part 1: Animated Buttons
The Object Oriented Designer - Part 2: Making the Button Class
The Object Oriented Designer - Part 3: Creating Reflective Images with AS 3
The Object Oriented Designer - Part 4: Building a Reflective Image Menu with AS 3.0
The Object Oriented Designer - Part 5: Building a Reflective Image Menu with XML and AS 3.0
The Object Oriented Designer - Part 6: Creating Buttons out of the Reflective Thumbs

The Object Oriented Designer - Part 3: Creating Reflective Images with AS 3
Reader Level: Reader Level

In this segment of the Object Oriented Designer series we will tackle a pretty tricky solution for creating reflective images using AS3.0 and an external image. These reflective image effects and reflective menus are the 'hot' thing to do right now. This tutorial will cover the loading of a single external image, creating a reflection of it by copying the image, flipping it, blurring it, and masking it with a gradient mask so you can get the effect as shown with David Stiller's photo below. No frame and property effects. Just 100% ActionScript!


Further installments will include classing out the ActionScript, dynamically populating a menu list with a number of loaded CMX Partner thumbnails, and mouse interactivity. For now, I will pick on David's image for the tutorial.

The Object Oriented Designer Series
The Object Oriented Designer - Part 1: Animated Buttons
The Object Oriented Designer - Part 2: Making the Button Class
The Object Oriented Designer - Part 3: Creating Reflective Images with AS 3
The Object Oriented Designer - Part 4: Building a Reflective Image Menu with AS 3.0
The Object Oriented Designer - Part 5: Building a Reflective Image Menu with XML and AS 3.0
The Object Oriented Designer - Part 6: Creating Buttons out of the Reflective Thumbs

Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Reader Level: Reader Level

When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the second lesson of this series, we will set up the foundation for a custom component.

The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers

Flash CS3: The Document Class - Part 2
Reader Level: Reader Level

The document class is a powerful new feature in Flash CS3 that utilizes the new IDE's integration into ActionScript 3.0. After the previous lesson, we've covered what the document class is and how it works. In this lesson, we will explore just how powerful the document class can be for building complex, modular applications.

The Flash CS3 Document Class Series:
Flash CS3: The Document Class - Part 1
Flash CS3: The Document Class - Part 2

TodCon 2007 Session: Hurry Up and Code: Power Shortcuts for Flash and Flex Developers Free!
Reader Level: Reader Level

In the high pressure world of RIA development, being efficient at churning out code, over time, can mean the difference between late nights and project overruns or peace of mind. Learning to type 50 WPM is not the only way to code faster. Learn some important secrets to being more efficient in your coding, increasing productivity in both Flash and Flex development environments.

This is presentation made at TodCon 2007 in Las Vegas, June 12, 2007.

Creating Audio Visualizations in AS 3.0
Reader Level: Reader Level

In the past, the creation of audio visualizations were only made possible using external tools. The new AS 3.0 sound utilities, however, offer greater advantages for handling such view-driven effects. The process becomes even greater simplified through the use of the Spectrum Tools library, which I have built for free use to the Flash community.

Working with the Camera Class - Part 7: Controlling Audio Quality
Reader Level: Reader Level

In this "Working with" series, you learn how to use the Camera class in Flash Player. The Camera class has been available in Flash Player since version 6, yet many Flash designers and developers don't know much about it. The Camera class gives you access to the user's webcam, to do everything from publishing a live video stream to detecting movement in the camera frame. In this tutorial, you learn how to control the audio quality and bandwidth usage of the Microphone class used with a live publisher stream.

NOTE: In order to follow along with the tutorials in this series, you should have a webcam and microphone compatible with Flash Player 6 and higher. Just about any webcam and microphone works with the Flash Player.

SPECIAL OFFER: The first twenty readers of this tutorial series to send me an e-mail via the feedback link on this tutorial will receive a free time-limited Flash Media Server account at Influxis. You can use this account to publish live video streams. Please allow one to three days for me to verify your subscriber (or pay per use) status with Community MX. (There are still accounts available as of May 20th, 2007!)

The Working With the Camera Class Series:
Working with the Camera Class - Part 1: Viewing Live Output
Working with the Camera Class - Part 2: Detecting Motion
Working with the Camera Class - Part 3: Publishing a Live Stream
Working with the Camera Class - Part 4: Subscribing to a Live Stream
Working with the Camera Class - Part 5: Adding Audio to a Live Stream
Working with the Camera Class - Part 6: Controlling Image Quality and Bandwidth Usage
Working with the Camera Class - Part 7: Controlling Audio Quality
Working with the Camera Class - Part 8: Recording a Stream


Using E4X to Retrieve XML Data in Flash CS3
Reader Level: Reader Level

Back in early 2005, Danny Patterson took us on an early examination of something called E4X (see ECMAScript for XML (E4X): Overview). He was looking ahead to a technology that would greatly simplify XML data retrieval when it made its introduction to Flex developers in ActionScript 3.0.

With the recent commercial release of Flash CS3, this enhancement has become available to Flash developers too. You're going to love what E4X means to your XML-in-Flash workflow! The following tutorial is slightly modified from an excerpt of the XML chapter in Foundation Flash CS3 for Designers, by Tom Green and David Stiller, to be published summer 2007 by friends of ED.

Flash PowerTools: Code Automation with SEPY Free!
Reader Level: Reader Level

Out there in the Flash design and development world, there are many tools available to assist in creating projects. These are "power tools" that supercharge the task of designing, coding, compiling, testing and documenting, allowing you to save time and present ideas much more effectively. Some have been around for a few years, and some are pretty new. This series highlights some of the open source tools and techniques which have made my life as a Flash developer much more effective.

When coding an object-oriented project involving many external ActionScript files, using the SEPY ActionScript Editor has been quite simply a boon to my life as a Flash developer, whose features have saved me a lot of time and headaches. One of those features is the ability to automate code creation. In this article we will look at how SEPY can make your job as a Flash developer a whole lot easier.


The SEPY Snippets panel

The Flash PowerTools Series:
Flash PowerTools: Code Automation with SEPY
Flash PowerTools: FlashTracer for Firefox
Flash PowerTools: Standalone FLV Players
Flash PowerTools: Transition and Tween Explorer
Flash PowerTools: Flash Switcher for Firefox
Flash PowerTools: Exploring Gradients
Flash PowerTools: Kuler Color - Part 1
Flash PowerTools: Kuler Color - Part 2 Coming Soon

The AS3 Event System - Part 3: Custom Dispatchers
Reader Level: Reader Level

In the third installment of the AS3 Event System series, we'll be taking the custom Stopwatch class we built in part 2 and turn it into a custom event dispatcher.

The AS3 Events System Series:
The AS3 Event System - Part 1: The Basics
The AS3 Event System - Part 2: Timer Class
The AS3 Event System - Part 3: Custom Dispatchers
The AS3 Event System - Part 4: Event Flow Basics
The AS3 Event System - Part 5: Managing Event Flow

The Displacement Map Filter Demystified: Part 3 - Curvature
Reader Level: Reader Level

Flash Professional 8 introduced a number of exciting new visual filters — such as drop shadow, blur, glow, and bevel — which reproduce many of the corresponding filters of Photoshop and Fireworks. Of these, most are available via the Property inspector's Filters tab. All filters are accessible to ActionScript, but a few actually require programming. One of these is the DisplacementMapFilter class, which distorts images based on the colors or transparency in a special reference map. Here in Part 3 of this series, you will learn how to harness the magnification effect we achieved last time by adding a second layer of "strength factor" to the gradient displacement map. This can produce perspective distortion, only available with shapes until Flash 8, and even curved distortion, like a fisheye lens. In the next and final installment, we'll use ActionScript's built-in Perlin noise generator in conjunction with the DisplacementMapFilter class to add animated ripples to an image.



Loaders Demystified: Part 5 - Photorealism
Reader Level: Reader Level

Loaders in Flash have become somewhat of a lost art or a no-brainer, depending on whom you speak to. Many mysteries have been solved quite a while ago in the history of Flash, but with new advances, many of these techniques have been forgotten, and some new tricks have come to light. Like anything in Flash, there is more that one way of arriving at the same result, and loaders are no exception. Despite this fact, the Loader remains one of the most mysterious and neglected aspects of Flash development. This series seeks to cover the pitfalls, best practices, tips and tricks to building loaders of all kinds in Flash.

Ever wondered how to incorporate a loader seamlessly into the design of the application itself, or show the load progress using a photorealistic image? In this tutorial we'll build a load indicator that looks exactly like an analog needle dial from a rusted old display panel.



The Loaders Demystified Series
Loaders Demystified: Part 1 - Usability Guidelines
Loaders Demystified: Part 2 - Creating a Simple Loader
Loaders Demystified: Part 3 - Getting Creative with Progress Indicators
Loaders Demystified: Part 4 - Using the CMX GIF Pre-Loader Packs
Loaders Demystified: Part 5 - Photorealism

Approximate download size: 1.6MB

The Displacement Map Filter Demystified: Part 2 - Skewing and Magnification
Reader Level: Reader Level

Flash Professional 8 introduced a number of exciting new visual filters — such as drop shadow, blur, glow, and bevel — which reproduce many of the corresponding filters of Photoshop and Fireworks. Of these, most are available via the Property inspector's Filters tab. All filters are accessible to ActionScript, but a few actually require programming. One of these is the DisplacementMapFilter class, which distorts images based on the colors or transparency in a special reference map.

Here in Part 2 of this series, you will learn how a gradient fill can be used to skew and magnify pixels in an imported graphic file. In future installments, you will learn how to add curvature and even ripples.

The Displacement Map Filter Demystified Series
The Displacement Map Filter Demystified: Part 1 - How it Ticks
The Displacement Map Filter Demystified: Part 2 - Skewing and Magnification

The Displacement Map Filter Demystified: Part 1 - How It Ticks Free!
Reader Level: Reader Level

Flash Professional 8 introduced a number of exciting new visual filters — such as drop shadow, blur, glow, and bevel — which reproduce many of the corresponding filters of Photoshop and Fireworks. Of these, most are available via the Property inspector's Filters tab. All filters are accessible to ActionScript, but a few actually require programming. One of these is the DisplacementMapFilter class, which distorts images based on the colors or transparency in a special reference map.

Here in Part 1 of this series, you will learn how the displacement map filter works and how to use it to reposition pixels in an imported graphic file. In future installments, you will learn how to produce a handful of very cool visual effects that are only possible with ActionScript, including a magnifying class, fisheye lens, and ripples.

The Displacement Map Filter Demystified Series
The Displacement Map Filter Demystified: Part 1 - How it Ticks
The Displacement Map Filter Demystified: Part 2 - Skewing and Magnification

Creating Fluid Layouts in Flash - Part 2: Proportional Layouts
Reader Level: Reader Level

Ever wondered how some Flash applications break free of the constraints of a fixed stage size, flowing from one size to another depending on browser size or application state? Creating these fluid layouts in Flash is considered by some to be one of those hidden mysteries of Flash coding. By others it is regarded as a milestone to be achieved on the path of ActionScript mastery. For me, it is both.

We will take you through the steps, from intermediate to advanced, necessary to create application layouts in Flash which can exhibit fullsize or fluid functionality. In this series we will explore the basic principles of creating fluid layouts in Flash, build a sample application with a class architecture using components, finishing off with an exploration of the new fullscreen feature available in Flash Player 9.

In the last tutorial we covered the basics of fluid layouts by building a flexible stage container and positioning objects within according to the stage size. In this tutorial we will complete our examination of the basics by creating a fluid layout with proportionally sized content panels.



The Creating Fluid Layouts in Flash Series:
Creating Fluid Layouts in Flash - Part 1: The Basics
Creating Fluid Layouts in Flash - Part 2: Proportional Layouts
Creating Fluid Layouts in Flash - Part 3: Application Development
Creating Fluid Layouts in Flash - Part 4:Creating the Movie Class
Creating Fluid Layouts in Flash - Part 5: Extending the Stage Class
Creating Fluid Layouts in Flash - Part 6: Using Fullscreen

Creating Fluid Layouts in Flash - Part 1: The Basics Free!
Reader Level: Reader Level

Ever wondered how some Flash applications “break free” of the constraints of a fixed stage size, flowing from one size to another depending on browser size or application state? Creating these fluid layouts in Flash is considered by some to be one of those hidden mysteries of Flash coding. By others it is regarded as a milestone to be achieved on the path of ActionScript mastery. For me, it is both.

We will take you through the steps, from intermediate to advanced, necessary to create application layouts in Flash which can exhibit fullsize or fluid functionality. In this series we will explore the basic principles of creating fluid layouts in Flash, build a sample application with a class architecture using components, finishing off with an exploration of the new fullscreen feature available in Flash Player 9.

This tutorial will explore the basics of creating a flexible stage application.



The Creating Fluid Layouts in Flash Series:
Creating Fluid Layouts in Flash - Part 1: The Basics
Creating Fluid Layouts in Flash - Part 2: Proportional Layouts
Creating Fluid Layouts in Flash - Part 3: Application Development
Creating Fluid Layouts in Flash - Part 4:Creating the Movie Class
Creating Fluid Layouts in Flash - Part 5: Extending the Stage Class
Creating Fluid Layouts in Flash - Part 6: Using Fullscreen

Rolling Your Own Dial Control
Reader Level: Reader Level

In Knobs, Sliders and Flash, Oh My! Sound Controls in Flash MX 2004, Tom Green shows how to use a specialized button — a knob, or dial control — included with Flash under the Window > Common Libraries panel. These built-in assets look great and are indeed good for rapid prototyping, as Tom mentions, even if they aren't as powerful or easily configurable as the more recent v2 User Interface components. Surprisingly, the Components panel does not offer a rotating dial control, so if you're interested in something round, you either have to use the discussed knob button or build one from scratch. In this tutorial, you'll learn learn how to "roll your own" basic dial control with ActionScript 2.0 ... and yours can look exactly how you like.

Dynamic Text Formatting Demystified - Part 5: HTML Formatting
Reader Level: Reader Level

Ever tried formatting a text field in flash using ActionScript, only to get all tangled up in a myriad of class properties and methods? Parts 1 & 2 of this series looks at how to create a text field and format it completely with code. Part 3 examines dynamic font embedding, Parts 4 & 5 cover how to use HTML formatting, and Parts 6 & 7 show you how to use CSS stylesheets in Flash.

In this tutorial we are going to pick up where we left off in Part 4, where we looked at formatting HTML text. We are also going to expand on what we learned about font embedding in Part 3 as it applies to HTML text.

The Dynamic Text Formatting Demystified Series:
Dynamic Text Formatting Demystified - Part 1: setTextFormat
Dynamic Text Formatting Demystified - Part 2: setNewTextFormat
Dynamic Text Formatting Demystified - Part 3: Embedding Fonts
Dynamic Text Formatting Demystified - Part 4: HTML Formatting
Dynamic Text Formatting Demystified - Part 5: HTML Formatting
Dynamic Text Formatting Demystified - Part 6: Stylesheets Coming Soon
Dynamic Text Formatting Demystified - Part 7: Stylesheets Coming Soon

Dynamic Text Formatting Demystified - Part 4: HTML Formatting
Reader Level: Reader Level

Ever tried formatting a text field in flash using ActionScript, only to get all tangled up in a myriad of class properties and methods? In Parts 1 & 2 of this series we looked at how to create a text field and format it completely with code. Part 3 will examine dynamic font embedding, Parts 4 & 5 will look at how to use HTML formatting, and Parts 6 & 7 will show you how to use CSS stylesheets in Flash.

The Dynamic Text Formatting Demystified Series:
Dynamic Text Formatting Demystified - Part 1: setTextFormat
Dynamic Text Formatting Demystified - Part 2: setNewTextFormat
Dynamic Text Formatting Demystified - Part 3: Embedding Fonts
Dynamic Text Formatting Demystified - Part 4: HTML Formatting
Dynamic Text Formatting Demystified - Part 5: HTML Formatting
Dynamic Text Formatting Demystified - Part 6: Stylesheets Coming Soon
Dynamic Text Formatting Demystified - Part 7: Stylesheets Coming Soon

Simian: A Flash Game of Pattern Recall - Part 2
Reader Level: Reader Level

Many of you will remember the Milton Bradley game Simon, immensely popular in the 1980s. This two-part series re-creates the game in Flash.

In the previous article, Part 1, we covered an ActionScript 2.0 class that manages the game's functionality. This class was specifically designed to be realized in a variety of ways. Here in Part 2, we'll prove that by walking through two different implementations — one very much like the Milton Bradley original (lighted buttons and tones), and one that relies on timeline animation, rather than sound.

Approximate download size: 4.7MB

Simian: A Flash Game of Pattern Recall - Part 1
Reader Level: Reader Level

Many of you will remember the Milton Bradley game Simon, immensely popular in the 1980s. In this two-part series, we're going to write an ActionScript 2.0 class that emulates this game (Part 1, this tutorial) and then build a couple sample FLAs that use the class (Part 2, next time).

This class is specifically designed to be realized in a variety of ways. For example, you may want your version to be comprised of eight buttons instead of the original four. In fact, you might aspire to a themed approach, where your buttons are represented by, say, blenders in a smoothie shop or arms on a starfish. The presentation is up to you, and the sky's the limit! Our incarnation — a playfully similar spelling, suggestive of the notion "monkey see, monkey do" — is called Simian.

Building an Animated Drop-Down Menu: Part 2
Reader Level: Reader Level

We will take our basic animated menu arcchitecture we created in Part 1 and add to it it make our menu fully dynamic.

In Part 2, we are going to create a button class to populate our menu with, a data provider to specify how many buttons the menu will have, the labels for the buttons, and where the buttons will link to when pressed. We will also create some "smart" code that will size the menu mask, and calculate the animated mouse-over and mouse-off positions depending on the height of the menu.

Part 3 will wrap things up with populating our menu data from XML and some dynamic menu backgorund drawing using the drawing API.

The Building an Animated Drop-Down Menu Series:
Building an Animated Drop-Down Menu: Part 1
Building an Animated Drop-Down Menu: Part 2
Building an Animated Drop-Down Menu: Part 3

Dynamic Text Formatting Demystified - Part 3: Embedding Fonts
Reader Level: Reader Level

Ever tried formatting a text field in flash using ActionScript, only to get all tangled up in a myriad of class properties and methods? In Parts 1 & 2 of this series we looked at how to create a text field and format it completely with code. Part 3 will examine dynamic font embedding, Parts 4 & 5 will look at how to use HTML formatting, and Parts 6 & 7 will show you how to use CSS stylesheets in Flash.

The Dynamic Text Formatting Demystified Series:
Dynamic Text Formatting Demystified - Part 1: setTextFormat
Dynamic Text Formatting Demystified - Part 2: setNewTextFormat
Dynamic Text Formatting Demystified - Part 3: Embedding Fonts
Dynamic Text Formatting Demystified - Part 4: HTML Formatting
Dynamic Text Formatting Demystified - Part 5: HTML Formatting
Dynamic Text Formatting Demystified - Part 6: Stylesheets Coming Soon
Dynamic Text Formatting Demystified - Part 7: Stylesheets Coming Soon

Dynamic Text Formatting Demystified - Part 2: setNewTextFormat
Reader Level: Reader Level

Ever tried formatting a text field in flash using ActionScript, only to get all tangled up in a myriad of class properties and methods? In Parts 1 & 2 of this series we'll look at how to create a text field and format it completely with code. Part 3 will examine dynamic font embedding, Parts 4 and 5 will look at how to use HTML formatting, and Parts 6 and 7 will show you how to use CSS stylesheets in Flash.

The Dynamic Text Formatting Demystified Series:
Dynamic Text Formatting Demystified - Part 1: setTextFormat
Dynamic Text Formatting Demystified - Part 2: setNewTextFormat
Dynamic Text Formatting Demystified - Part 3: Embedding Fonts
Dynamic Text Formatting Demystified - Part 4: HTML Formatting
Dynamic Text Formatting Demystified - Part 5: HTML Formatting
Dynamic Text Formatting Demystified - Part 6: Stylesheets Coming Soon
Dynamic Text Formatting Demystified - Part 7: Stylesheets Coming Soon

Informing the End User: Part 2 - Status Messaging and Error Handling for Video Applications
Reader Level: Reader Level

In Part 1 of this series, we worked on informing the end user by detecting and handling errors in Flash Applications. We will build on that by focusing on informing the user of the status of a video application, as well as errors that can happen duriing video playback. Further, we can use status events of objects used in a video application to manage the playback controls of the player.

In this article, we will take a simple video player application and create "status messaging", informing the user of the state of the video in a player, and errors that happen in a video stream. We will also use these status messages to be the "nerve centre" of the player to toggle and disable player controls depending on the playback state of a video. The status messages we will be using come from the event objects of the NetConnection and NetStream classes.

The Informing the End User Series:
Informing the End User: Part 1 - Handling Errors
Informing the End User: Part 2 - Status Messaging and Error Handling for Video Playback

Handling Double-Clicks in Flash - Part 3
Reader Level: Reader Level

As anyone who uses Windows or Macintosh can attest, the double-click is among the most familiar of user interface actions. Curiously, neither buttons nor movie clips in Flash raise an onDoubleClick event in ActionScript 1.0 or 2.0. Despite the many events they do raise, they cannot be instructed to handle double-clicks without custom programming. In Part 1 of this three-part series, we looked at a basic solution to this strange omission. In Part 2, we expanded on that original work to produce a configurable version of the same solution. Here in Part 3, we will conclude by providing for triple-clicks and more.

The Handling Double-Clicks in Flash Series:
Handling Double-Clicks in Flash - Part 1
Handling Double-Clicks in Flash - Part 2
Handling Double-Clicks in Flash - Part 3

Handling Double-Clicks in Flash - Part 2
Reader Level: Reader Level

As anyone who uses Windows or Macintosh can attest, the double-click is among the most familiar of user interface actions. Curiously, neither buttons nor movie clips in Flash raise an onDoubleClick event in ActionScript 1.0 and 2.0. Despite the many events they do raise, they cannot be instructed to handle double-clicks without custom programming. In Part 1 of this three-part series, we looked at a basic solution to this strange omission. Here in Part 2, we will step through an intermediate solution, which builds on our previous work. In Part 3, we will expand the capability even further to provide for triple-clicks.

The Handling Double-Clicks in Flash Series:
Handling Double-Clicks in Flash - Part 1
Handling Double-Clicks in Flash - Part 2
Handling Double-Clicks in Flash - Part 3

Understanding the Movie Clip Architecture - Part 2: Levels
Reader Level: Reader Level

Ever get confused by all of the different ways that Flash organizes assets and information within your FLA and your SWF? Frames and timelines and levels and layers and depths, oh my! This series will sort it all out, and give you some great tips. If you ever wanted the skinny on the Flash movie clip architecture, this be da place, mon.

In Part 2 of this series we will look at levels: what they are, how to use them and what to watch out for in your Flash projects. We will look at library asset linkages in multilevel SWFs, and examine the difference between authortime and runtime objects. In addition we will look at the _lockroot property. As an advanced topic bonus we will also code an implementation of _lockroot for SWFs exported to Flash 6 using AS 1.0.

The Understanding the Movie Clip Architecture Series:
Understanding the Movie Clip Architecture - Part 1: The Almighty Movie Clip
Understanding the Movie Clip Architecture - Part 2: Levels
Understanding the Movie Clip Architecture - Part 3: Scenes Coming Soon

Handling Double-Clicks in Flash - Part 1
Reader Level: Reader Level

As anyone who uses Windows or Macintosh can attest, the double-click is among the most familiar of user interface actions. Curiously, neither buttons nor movie clips in Flash raise an onDoubleClick event in ActionScript 1.0 and 2.0. Despite the many events they do raise, they cannot be instructed to handle double-clicks without custom programming.

In this three-part series, we will step through a solution to this strange omission and learn a bit about writing ActionScript 2.0 classes in the process. Part 1 of this series looks at a convenient, basic edition solution that stands on its own. Parts 2 and 3 build on this workaround to accommodate additional functionality. At the end of each tutorial, you will have a functioning class that is progressively more useful.

The Handling Double-Clicks in Flash Series:
Handling Double-Clicks in Flash - Part 1
Handling Double-Clicks in Flash - Part 2
Handling Double-Clicks in Flash - Part 3

Loaders Demystified - Part 4: Using the CMX GIF Pre-Loader Packs Free!
Reader Level: Reader Level

In this tutorial we will look at using the popular CMX GIF Pre-Loader Packs, which contain animation assets for loaders. Using a sample from the series, you will create a custom animated flash loader using a combination of tried-and-true techniques and some of the latest in flash 8 effects.

By the end of this tutorial your loader will look like the following:
the finished product

Approximate download size: 1.3MB

The Loaders Demystified Series
Loaders Demystified: Part 1 - Usability Guidelines
Loaders Demystified: Part 2 - Creating a Simple Loader
Loaders Demystified: Part 3 - Getting Creative with Progress Indicators
Loaders Demystified: Part 4 - Using the CMX GIF Pre-Loader Packs

Flash Printing Tasks - Part 4: Creating a Form for Certificate Information
Reader Level: Reader Level

Once you have a component that can accept dynamic parameters, you'll want to make a user interface that can easily accept new certificate details and pass the information to the certificate clip. In this tutorial, you learn how to add Label, TextInput, and DateField components to your Flash movie.

Approximate download size: 717k

The Flash Printing Task Series:
Flash Printing Tasks - Part 1: Building a Certificate Template in Illustrator and Flash
Flash Printing Tasks - Part 2: Basic Printing of the Certificate
Flash Printing Tasks - Part 3: Adding Dynamic Text to the Certificate
Flash Printing Tasks - Part 4: Creating a Form for Certificate Information
Flash Printing Tasks - Part 5: Building a Preview for the Certificate
Flash Printing Tasks - Part 6: Creating a Color/Grayscale Toggle for the Certificate Preview Window
Flash Printing Tasks - Part 7: Printing Alpha and Color Mode Effects
Flash Printing Tasks - Part 8: Printing Filter Effects Coming Soon

Introduction to Captionate 2.0 Free!
Reader Level: Reader Level

Flash Video combined with simple ActionScript gives you, the developer, the ability to synchronize video content with additional data such as text, images and even links. This functionality has been enabled since Flash Video started with Flash 6, but is now easier to implement with tools like Captionate and the Flash 8 Video Encoder. This article focuses on the basics of Captionate 2.0 and its ability to synchronize video content with persistent data. I will not go in to detail of any feature; however I will try to cover Captionate from a broad spectrum. I will assume you have never used the application and will explain not only what's new, but also the existing features from Captionate 1.0.

Unobtrusive JavaScript: Dynamically Adding a Flash Music Player to MP3 Links
Reader Level: Reader Level

This tutorial discusses using JavaScript to dynamically add a small Flash music player control to a page that contains links to MP3 files. With this technique, you'll merely need to link in the appropriate JavaScript to your page, and all MP3 links on a page, such as your latest Podcast, will automatically have player controls added next to them, with no further digging into the code on your part.

The Local File System and Flash Free!
Reader Level: Reader Level

It seems like Flash developers always want to save data to the user's local file system. For security reasons, Flash does not give a SWF permission to do this. However, with the features found in many of today's top Flash projector tools, you can write to the user's local file system.

In this article, we will examine Zinc, one of the most popular Flash projectors on the market, and see how we can use it to save an XML file to the user's hard drive.

Working with SMIL, Part 4: Creating a Video List with XML, SMIL, and the FLVPlayback Component
Reader Level: Reader Level

Learn how to create multiple SMIL files for several pieces of video content, played within the new FLVPlayback component shipping with Flash Pro 8. Use the List component with XML data to specify each clip, which in turn loads a SMIL file responsible for the FLV files associated with the video content.

The Working with SMIL Series:
Working with SMIL - Part 1: The FLVPlayback Component and Progressive FLV Files
Working with SMIL - Part 2: Detecting Bandwidth with Progressive FLV Files
Working with SMIL - Part 3: Real-time Streaming FLVs with the FLVPlayback Component
Working with SMIL - Part 4: Creating a Video List with XML, SMIL, and the FLVPlayback Component

Reading Flash Metadata with PHP
Reader Level: Reader Level

Flash 8 is the first version of the SWF file format to support standardized, native metadata. This is a great new feature that has the potential to make SWF files easier to manage, organize, and even locate through search engines. Unfortunately there's one small catch; although Flash 8 has made adding metadata to your SWF files extremely simple, at the time of writing there are very few applications/scripts/bots outside of Flash itself that actually have the ability to read that metadata!

In this article we'll take a look at a custom PHP class that can be used to read SWF metadata, and how it can be used to realize some of these great new potentials.

Making Flash Remoting Development Easier with Service Capture Free!
Reader Level: Reader Level

There are few tools available to Flash developers for debugging their applications. This becomes increasingly complex when developing Flash applications with server integration. Service Capture, written by Kevin Langdon, is one of the few tools to break into this market. It works as a proxy on your local computer and inspects Remoting (AMF), Web Service (SAOP) and XML data. It also captures other data not directly relevant to Flash development. In this article we will examine the various feature

Working with Dates - Part 1
Reader Level: Reader Level

In Part 1 of this series, you'll learn how to use the methods of the built-in Date class to create and manipulate date objects in Flash. You'll also learn how to display dates in a more readable format in your applications.

The Working with Dates Series:
Working with Dates - Part 1
Working with Dates - Part 2

Using the Scale 9 Feature in Flash 8
Reader Level: Reader Level

Scale 9 is a new feature of Flash 8 that allows you to specify how you want a MovieClip to scale. A great example of how you can use this is to preserve the rounded corners of a box. In this tutorial, we will examine two ways of using scale 9 in your projects.

Loading Assets into Flash with MovieClipLoader
Reader Level: Reader Level

In this article, you'll learn how to use the MovieClipLoader class to load external assets, such as SWFs and JPEGs, into Flash movies. Unlike loadMovie(), the MovieClipLoader class enables you to monitor the loading progress of a download to display feedback to the user. With MovieClipLoader, you can also use a single instance to load multiple assets.

CMX Insert FlashObject 1.2 (Dreamweaver Extension)
Reader Level: Reader Level

FlashObject is an external JavaScript file, created by Geoff Stearns, that enables you to embed Flash movies into web pages using XHTML-compliant code. The CMX Insert FlashObject extension automatically inserts FlashObject code into Dreamweaver documents, and copies flashobject.js into the folder you specify. Now supports major, minor, and revision Flash Player detection.

Requirements: Dreamweaver MX or higher, Flash Player

This extension has been updated 7/10/06. The updated version is available here.

Distributing ActionScript Classes - Part 1
Reader Level: Reader Level

If you've ever developed an application or a piece of software that needs to be distributed, you know it isn't always easy. One area that most Flash developers have to eventually deal with is distributing their code. This most frequently happens when working on teams with other developers or designers. In the first part of this series, we will look at techniques focused on distributing ActionScript classes in a way that allows for easy installation, maintenance and scalability.

The Distributing ActionScript Classes Series:
Distributing ActionScript Classes - Part 1
Distributing a Class Library: Part 2

Debugging Flash Applications with AdminTool
Reader Level: Reader Level

As Flash applications become more and more complex, it's difficult to debug them using only trace() statements and the built-in Flash Debugger. To address this, a number of Flash developers have begun creating their own debug tools using the LocalConnection class. Of these, the clear standout is John Grden's AdminTool.

In this article, you'll learn two different ways to use AdminTool with your Flash projects:
  1. The AdminTool Connector component — This Flash MX 2004 extension enables you to integrate AdminTool simply by adding the component to your FLA library.
  2. The AdminTool Connector package — This ActionScript class, com.acmewebworks.admintool.Connector.as, loads an external SWF called ConnectorOnly_as2.swf. This approach is a little more complicated because you have to import the class and create a listener for the Connector.adminToolLoadComplete event.

The support files include examples of both approaches: a component demo, and an ActionScript class demo.



Monitor Changes Using the Object.Watch Feature in Flash
Reader Level: Reader Level

My last article covered a lesser-known feature of the native Object class in Flash for resolving undefined properties and methods: Resolving Undefined Methods and Properties Within a Flash Object. This article is also going to explore a lesser-known feature of the Object class called watch/unwatch. The feature allows you to monitor an object's properties for changes. In this article we examine the feature and show how to use it. We will also cover a real-world example of how this feature could be used to make your development efforts easier.

Discovering CFMX 7: Flash Forms - Part 2
Reader Level: Reader Level

In this tutorial, we will be looking at how we can create a more compact flash form by using the accordion interface. We will look at setting up required fields and how we can then validate them using ColdFusion.

We will also investigate the use of the datefield control. This control adds an icon to your form that when clicked allows a user to select a date from a scrollable flash calendar.

Discovering CFMX 7: Flash Forms - Part 1 Free!
Reader Level: Reader Level

In this tutorial, we will be looking at how ColdFusion MX 7 makes it very easy for us to use and create flash forms in our work.

We will be looking at how to set up the forms and we'll investigate tabbed navigation and paging. Breaking our forms down into manageable chunks can be very helpful for our users, particularly on large forms. CFMX 7 makes it very easy for us to do this.

Finally we will look at skinning our flash forms and the skins that are natively available on the CFMX 7 server.

Streaming MP3s with Flash Communication Server - Part 4: Using Other Playback Components
Reader Level: Reader Level

You can use the MediaPlayback component to stream content, including MP3 files, from your FlashCom Server. In this tutorial, you learn how to specify URIs for FlashCom-served MP3 files and how to combine the functionality of a listbox with the MediaPlayback component.

The Streaming MP3s Series:
Streaming MP3s with Flash Communication Server: Part 1 - Streaming Basics
Streaming MP3s with Flash Communication Server: Part 2 - Creating an MP3 Component
Streaming MP3s with Flash Communication Server: Part 3 - Adding a Playlist to the MP3 Component
Streaming MP3s with Flash Communication Server: Part 4 - Using Other Playback Components
Streaming MP3s with Flash Communication Server: Part 5 - Creating an MP3 Database
Streaming MP3s with Flash Communication Server: Part 6 - Displaying Dynamic MP3 Data in a Flash UI
Streaming MP3s with Flash Communication Server: Part 7 - Linking MP3 Directories to the FCS App
Streaming MP3s with Flash Communication Server: Part 8 - Playing Streams from Virtual Directories Coming Soon

Captioning Flash Video
Reader Level: Reader Level

Are you using Flash video? Want to add captions? Captions help make your applications more accessible to those with low and no hearing. You can also use the same techniques to add transcriptions of the audio as translated to other languages. In this article learn how to add captions to Flash video playback.

This article assumes that you have a basic understanding of ActionScript and XML and know how to create FLVs for videos. Additionally, you'll need to have Flash MX Professional 2004 in order to use the MediaPlayback component.

Using XML to UI With JSAPI in Flash
Reader Level: Reader Level

JSAPI is a new feature that was introduced in Flash MX 2004. This feature adds the ability to extend the Flash authoring tool by adding functionality through commands, behaviors, tools, and effects. The JSAPI was created to closely resemble the Dreamweaver and Fireworks javascript APIs.

The XML to UI feature is used to define dialog boxes. XML to UI uses a subset of the XML User Interface Language (XUL). In this article, we will use XML to UI to create a dialog box from within a JSAPI command. This article will cover the creation of the XUL dialog, the JSFL command, and finally we will put the command in an MXP file that can be installed through the Macromedia Extension Manager.

Flash and Beyond: Automated Telephone Conversations
Reader Level: Reader Level

Why look at Flash as just a web-based technology? With a bit of creativity all the power and ease of Flash can be used to control and interact with everyday objects in the realworld!

In this article, we'll take a look at how Flash can be used to automatically answer a telephone, conduct a believable and convincing conversation with a caller, and hang up again when the conversation's over.

Using Flash as a Dynamic Agent
Reader Level: Reader Level

This tutorial will show you how to use a hidden flash movie on your page to dynamically get data from a server without reloading the page.

Managing Stage Layout Programmatically
Reader Level: Reader Level

You want to create a Flash application that is capable of managing the stage layout as the player resizes. It's fairly trivial to cause the player to scale the contents of your application as the player resizes. However, scaling the contents is not necessarily the optimal solution in many cases. That can cause text to get too large or too small. It can cause bitmapped content to appear pixelated. And it can have other unexpected effects. Instead, in this article you'll get to read about the basics of creating a Flash application that can manage the layout more effectively.

Using the XFactorStudio XPath Classes in Flash
Reader Level: Reader Level

Any developer that uses XML should become familiar with XPath. What is XPath? XPath is a W3C standard for defining parts of an XML document. XPath uses expressions to search for matching nodes within an XML document. This article will cover some of the basics of XPath and how you can use XFactorStudio's XPath classes inside your ActionScript code. This article will not attempt to cover all the syntax involved with XPath.

Masking Flash Video
Reader Level: Reader Level

When Macromedia suggests sticking Flash video in the Sony JumboTron on Times Square in New York, the normal response might be "Huh?" This article goes them one better and shows how, through the use of Masking in Flash, to create a "Blade Runner" effect (using video and a web cam), just a little up the Square from the JumboTron.

Dispatching Events in Flash
Reader Level: Reader Level

In this article, you'll learn how to implement event-dispatching in your applications using the mx.events.EventDispatcher class. This enables you to create ActionScript 2.0 classes and v2 components that properly dispatch events. You'll also learn how to register listener objects that listen for events and respond to them accordingly.

Understanding Try/Catch in ActionScript Free!
Reader Level: Reader Level

Learn how to use error handling with ActionScript. In this article, you'll get a chance to learn about using try/catch/finally statements in your ActionScript code in order to best deal with errors that may arise.

Calculating Distance Between Objects in Flash
Reader Level: Reader Level

In this tutorial, you'll learn how to calculate the distance between objects in Flash using basic trigonometry. This is a fundamental scripting technique that is used in Flash gaming and in other methods, such as dynamically drawing objects.

Controlling the Volume and Pan of a Sound Object in Flash MX 2004
Reader Level: Reader Level

Manipulate the volume and panning (left and right speaker) of a sound object using Actionscript 2.

Outlining Letters with Motion Guides
Reader Level: Reader Level

Community MX is the only resource I know of where members can request tutorials from authors and actually see them appear. While you might luck out on some of the free web sites and find what you want, with our service members can actually request a tutorial on a paricular technique via the forums and see their request filled. Such was the case recently when a member asked how to create an effect of a flare following the outline of an object. This tutorial covers that technique.

Creating Classes in ActionScript 2.0
Reader Level: Reader Level

In this tutorial, you'll learn how to create custom ActionScript 2.0 classes and use them to create new class instances. You'll also learn about the advantages of using get/set methods to modify your class properties.

Turn the Page with Freehand and Flash--Part 2
Reader Level: Reader Level

As rich and diverse as the suite of tools available for designers using the MX Studio are, the one area where there is a deficiency is in rendering three-dimensional effects. You can certainly buy, and learn, new applications that will render these kinds of effects for you, but when you only need the occasional 3-D effect what are you to do? In this case — where the goal is to create an animation that simulates the opening of a book — you turn to Freehand for its ability to perform 3-D rotations of objects and then to Flash for the completion of the animation.

Snowboarding game with Flash
Reader Level: Reader Level

Games are a lot of fun. In this game you will build a simple snow boarding game. The concepts for the game can be used for any game you develop with Macromedia Flash.

CSS in Flash MX 2004
Reader Level: Reader Level

One of the new features in Flash MX 2004 is the support for Cascading Style Sheets, CSS, in the Flash Player. In this article you will learn where and how to apply CSS formatting in a Flash movie.

FStyleFormat Demystified -- Part 2
Reader Level: Reader Level

The second in a 3 part series explaining how to control the appearance of the built in Flash Components. This article focuses on how skinning works in Flash, how it works with the FStyleFormat, and how you can make your own skins.

Flash Remoting with .NET - Using the Custom Control
Reader Level: Reader Level

Flash Remoting for .NET provides a powerful tools to allow you to use .NET to power you "Rich Internet Applications". This article will show you how to use the Flash custom control when passing data back and forth between your flash movies and .NET applications.

XML In Flash Free!
Reader Level: Reader Level

XML is the backbone to web services across the Internet. In this article you will learn how to pull and extract XML files into Flash MX.