SPAS 3.0 FX Implementation

SPAS 3.0 FX Implementation

For those of you guys, who frequently use the SPAS 3.0 API reference, you have probably seen that the org.flashapi.swing.fx package was tagged as "to be refactored" for many years !

It is finally done ! And it will be available in the next nightly build release (alpha 6.2.8). So, let's have a look at the result (click the panel to launch the animation):

Get Adobe Flash player

The key points of the preceding effect are the use of the createFX() method and the ParallelFX class within a SequenceFX instance :

//var obj:Panel;
var pfx:ParallelFX = new ParallelFX();
pfx.add(createFX(obj, Move, new Point(350, 200)));
pfx.add(createFX(obj, Rotate, 360));
pfx.add(createFX(obj, UIColorize, new RGBColor(200, 0)));
pfx.add(createFX(obj, UIResize, new Size(250, 100)));

var s:FXSequence = new FXSequence();
s.add(new Pause());
s.add(createFX(obj, UIResize, new Size(150, 300)));
s.add(createFX(obj, Move, new Point(50, 50), null, 1500, new Elastic(EaseType.BOTH)));;

Basics of the SPAS 3.0 FX API

The SPAS 3.0 FX API is defined in the org.flashapi.swing.fx package. All SPAS 3.0 FX objects implement the FX interface, but to use animation capabilities of the FX API, you must use instances which implement the TweenFX interface.

The base package for applying effects on ActionScript objects is org.flashapi.swing.basicfx, but to work with SPAS 3.0 UIObject instance, you must use effects defined in the org.flashapi.swing.uifx package.

To create bunches of effects that play parallel, you use the ParallelFX class. To create a sequence of effects, you use the SequenceFX class. Each object contained in a ParallelFX, or SequenceFX, instance must be a TweenFX object. Because the ParallelFX class implements the TweenFX interface, you can add a set of parallel effects to a SequenceFX instance.

The createFX() method returns an new instance of the type of TweenFX, initialized from the specified parameters. It allows to create effects and add them to a FX sequence without declaring instances of these effects. By this way, you can create volatile sequences of effects and delete them instantaneously, by using the FXSequencer.finalizeAll() method.

Recap of SPAS 3.0 animation APIs

SPAS 3.0 provides several different APIs for creating animations. Each one has been designed to give the best solution for a specific use case. It is important to understand the purpose of each of these APIs, to take benefits of the SPAS 3.0 framework capabilities.

BTween API

BTween APIOn the top of the SPAS 3.0 animation APIs, there is the BTween API. The BTween API is the tween engine used by the SPAS 3.0 Framework. As it has been defined as a top level API, you can use it independently of SPAS in all of you projects. Both core classes of the API, BTween and Tween, have similar behaviors, except that:

  • Tween can be used with all versions of Flash Player, since Flash Player 9 (it is the core class for all motion tween in the SPAS 3.0 Framework),
  • BTween is based on the Vector class implementation; it means that it can anly be used with Flash Player since version 10.

The BTween API provides a utility tool for controlling motion tweens : the TweenSequencer class. You can use the TweenSequencer class to easily create custom motion effects, as shown in this example.

Integrated Effects API

The org.flashapi.swing.effect contains the SPAS 3.0 Integrated Effects API. These effects are only used to specify the display and remove effects, as defined by the UIObject class implementation.

Thus, the following code will create a new window that will be displayed by progressively increasing its scale from 0 to 100%:

var obj:Window = new Window("My Window", 500, 500);
obj.hasDisplayEffect = true;
obj.displayEffectRef = ScaleIn;


The SPAS FX API allows to apply many different vectorial effect, such as blur, glow, resizing, etc., to any display objects or UIObject instances, within a SPAS 3.0 application. You typically use this API to apply transitions from a visual state to another in the application.

Because the SPAS FX API uses vector rendering of the Flash Player, it can be high CPU consumer. So you should take care not to overload your application with unnecessary effects.

CoffeeShop API

Coffe Shop API The org.flashapi.coffeeshop package provides to the Flash Platform developers a complete set of tools to create tansitions between bitmapdata images. Contrary to the SPAS FX API, the Coffee Shop API is based on blittering techniques for rendering effects. This ensure a low CPU usage when playing effect transitions.

You typically use the CoffeeShop API to create animated banners or carousel effects...

An other usage of the CoffeeShop API is to render animations between two different views of an application: see Coffee Shop API for Mobile Devices

Sample Application

The SPAS 3.0 FX API has been designed to be fast and easy-to-use. We have paid attention to the fact that effects should visually be understandable by developers, even while coding. So, let's have a look on what we can do with less than 125 lines of code (click on the title bars to play the effects):

Get Adobe Flash player

You can download the source of this application, and the preceeding one, by cliking here.

Share this article:


There are no comments yet for this article.

Leave a reply

Your email is required but will not be displayed.

To prevent abusive emails, please enter the numbers you see in the image below:

Security code