Using integrated animation properties in SPAS 3.0

Difficulty: Easy
Using integrated animation properties in SPAS 3.0

One of the aims of SPAS 3.0 is to reduce the development duration of RIAs and Web sites by introducing processes in response to recurrent tasks. For this purpose, SPAS 3.0 integrates a complete windowing system since the ActionScript 1.0 version. SPAS 3.0 window classes have many helpful functionalities to improve your applications, and easily create motion effects.

In this tutorial, we will create a basic effect that can fast be adapted to all kind of applications, such as widgets or tool palettes. The effect involves an autonomous "popup" window which is able to show or hide its content when the user clicks on its title bar.

The code in this tutorial is based on SPAS 3.0 alpha 3.1 release.
We assume that you are familiar with external files programming and that you have already downloaded SPAS 3.0.

Using an Application entry point

First of all, you need to create an ActionScript class called AnimatedPopup that extends the Application class. Then, create a private method called "init", to be used as the application entry point. Since the alpha 2.1 version, you can use an entry point function as a parameter for the super statement of the constructor function. By doing this, you will let SPAS deal with the entry point without doing it yourself. (This hack prevents any problems that could occur when loading a child application into the main one.)

package {
 
	//--> SPAS 3.0 API import
	import org.flashapi.swing.*;
 
	/**
 	*  Creates a sample application that displays a popup object
 	*  which has an animated layout.
 	*/
	public class AnimatedPopup extends Application {
 
		//--> Constructor
		public function AnimatedPopup():void { super(init); }
 
		//--> Entry point
		private function init():void {
		}
	}
}

Designing the GUI

To create the user interface, we only need two objects: the popup and an Image instance. The image will be used to display and manipulate an externally loaded picture. To simplify the management between both states of the popup (opened and closed), we will use a StateManager object: org.flashapi.swing.managers.StateManager. All these objects are declared as private variables, as shown below:

//--> GUI
private var _popup:Popup;
private var _manager:StateManager;
private var _image:Image;

The use of the StateManager class is probably the easiest way to manipulate different states of an object or a more complex task. But we will see how it works later; we will first focus on the GUI's design.

There are several ways to manipulate Image instances. Here we will consider the one which is the closest to the "img" tag in HTML language. This way, we use the first three parameters of the Image constructor function, respectively the source image, its width and its height.

In our case, it is very useful, because we want to use the popup autosize property. So, the size of the window will be adjusted according to the size of the image. Once we have created the image and the popup instances, we can add the image to the popup element list and display it.

private function init():void {
	_image = new Image("my_picture.jpg", 300, 326);
	_popup = new Popup("Double click to close");
	_popup.autoSize = _popup.shadow = true;
	_popup.addElement(_image);
	_popup.display(30, 30);
}

Notice that the default popup title label is "Double click to close".  It means that we invite users to double click the title bar of the popup to interact with the displayed images.

The resizing function

In the preceding part, you have discovered how it is easy to create a Graphic User Interface with SPAS 3.0! So now, let's see how to create spectacular effects with very tiny code.

At this point, what we want is to navigate between two different states. In the first one, we want to set the height of the popup to 0 pixels, to hide the image. In the second state, we set this property to 326 pixels, to see the whole picture. Each state will see the popup titlebar's label change to indicate to the user how to proceed from the current to the next state.

This could be translated in Actionscript through the single following function:

private function setHeight(height:Number):void {
	_image.height = height;
	_popup.label = height == 0 ? "Double click to open" : "Double click to close";
}

The most OOP logical way to call this method is to define two different functions, each of which corresponds to a specific state action: close() and open().

private function close():void { setHeight(0); }
private function open():void { setHeight(326); }

The StateManager class

If you are familiar with Actionscript coding, you have probably written a lot of similar lines of code. But what is really annoying in this process is to add the corresponding event handlers, because of the multiplication of identical actions.

With SPAS 3.0, we can use the StateManager class, for more fun. Instead of creating several events for all states, we just add an event producer. Then we can add as many state actions as we want, by using the addActions() method:

_manager = new StateManager();
_manager.addEventProducer(_popup, WindowEvent.TITLE_BAR_DOUBLE_CLICK);
_manager.addActions(close, open);

With the addEventProducer() method, we indicate that the popup must fire a state action each time its titlebar is double clicked by the user.

To see how the application works, write the above code at the end of the init() function and compile your Flash movie.

Using animation properties

So now, we have got a fully functional and reactive application. But what about adding an ajax-like effect when the popup window is resized?

Let's go, and use the autoSizeAnimated property, which is defined by the Layout interface! Add the following code after the StateManager statement, and compile the animation again to see what happens:

_popup.layout.autoSizeAnimated = true;

Actually,  the Layout autoSizeAnimated property is an automatic process implemented by some layouts to make spectacular effects with a minimum of work.

(Notice that this property does not work at the moment if it is combined with the Layout animated property.)

And here is the complete class we wrote all along this tutorial:

package {
	import org.flashapi.swing.*;
	import org.flashapi.swing.event.*;
	import org.flashapi.swing.managers.*;
 
	public class AnimatedPopup extends Application {
 
		public function AnimatedPopup():void { super(init); }
 
		private var _popup:Popup;
		private var _manager:StateManager;
		private var _image:Image;
 
		private function init():void {
			_image = new Image("my_picture.jpg", 300, 326);
			_popup = new Popup("Double click to close");
			_popup.autoSize = _popup.shadow = true;
			_popup.addElement(_image);
			_popup.display(30, 30);
			_manager = new StateManager();
			_manager.addEventProducer(_popup, WindowEvent.TITLE_BAR_DOUBLE_CLICK);
			_manager.addActions(close, open);
			_popup.layout.autoSizeAnimated = true;
		}
 
		private function close():void { setHeight(0); }
		private function open():void { setHeight(326); }
 
		private function setHeight(height:Number):void {
			_image.height = height;
			_popup.label = height == 0 ? "Double click to open" : "Double click to close";
		}
	}
}

Result

Get Adobe Flash player

Share this article:

Comments:

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