Building Click-and-Rotate Content in Flash - Part 7
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:
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:
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:
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:
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?
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:
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:
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:
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:
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:
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:
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:
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:
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:
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.
Making Your Own Utility Classes - Part 2: Custom Loader Utility
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
TodCon 2007 Session: Hurry Up and Code: Power Shortcuts for Flash and Flex Developers
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:
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.
Using E4X to Retrieve XML Data in Flash CS3
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.
The Displacement Map Filter Demystified: Part 3 - Curvature
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:
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 1 - How It Ticks
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
Rolling Your Own Dial Control
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.
Simian: A Flash Game of Pattern Recall - Part 2
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:
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:
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
Informing the End User: Part 2 - Status Messaging and Error Handling for Video Applications
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:
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:
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:
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:
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
Introduction to Captionate 2.0
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:
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
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.
Reading Flash Metadata with PHP
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
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
Using the Scale 9 Feature in Flash 8
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:
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:
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:
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:
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:
- The AdminTool Connector component — This Flash MX 2004 extension enables you to integrate AdminTool simply by adding the component to your FLA library.
- 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:
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:
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
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.
Captioning Flash Video
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:
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:
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:
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:
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:
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:
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:
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
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:
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.
Outlining Letters with Motion Guides
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:
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:
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:
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:
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:
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:
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
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.