SPAS 3.0 FX Implementation
Article published by Pascal
July 22, 2012
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):
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(pfx); 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))); s.play();
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
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
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
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
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
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.
On 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,
Tween, have similar behaviors, except that:
Tweencan 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),
BTweenis based on the
Vectorclass 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; obj.display();
SPAS FX API
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.
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.
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
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):
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.