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 consists in 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.
( SPAS 3.0 alpha 3.1 is a major release that fixes garbage collection issues.)
We assume that you are familiar with external files programming and that you already have downloaded SPAS 3.0.
You can download SPAS 3.0 alpha 3.1 release at: http://www.flashapi.org/

1. 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 parameter for the super statement of the constructor function. By doing this, you will let SPAS deal with the entry point without taking care of anything yourself. (This hack prevents any problems that could occur when loading a child application into 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 {
    }
}
}


2. 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 bellow:

private var _popup:Popup;
private var _manager:StateManager;
private var _image:Image;


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

There are several ways to manipulate Image instances. Here we will consider the one which is the closest from the "img" tag in HTML language. This way, we use the three first 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.

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

What we want at this point 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 entire picture. Each state will see the popup titlebar label property change to indicate the user how to proceed to go from the current to the other 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 them corresponding to a specific state action: close() and open().

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


If you are familiar with Actionscript coding, you probably have wrote a lot of similar lines of code. But what is really fastidious 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, to get 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, as shown below:

_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 code above at the end of the “init” function and compile your Flash movie.

4. So now, we have got a full functional and reactive application. But what about adding a ajax-like effect when the popup window is resized?
Lets 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.)

5. 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";
        }
    }
}


I hope you've enjoyed this tutorial.
You can find more resources and tutorials on the SPAS 3.0 Web site at: http://www.flashapi.org/