AnimationLayouts are an important part of SILEX; they determine how the content will actually be displayed.

AnimationLayouts can be created with the Flash IDE or via some code. Recently, we’ve added a Library to help you getting started with creating a new AnimationLayout with haXe.

The Layout Library

You can find the Layout library in the SVN respository under trunk/framework/hx. The base package for it is org.silex.animationLayouts. The main class you’re going to use is AnimationLayout ; it represents an AnimationLayout and can easily be extended since it provides several helper functions and pointers to often used objects such as the silex API. Now, let’s have an overview of how AnimationLayouts work in SILEX.

Overview

There are 3 core classes involved into the management of AnimationLayouts: the first one is the Application class, the second one is the Layout class, and the third and last one is the Sequencer class.

The Application class

The Application class (org.silex.core.Application) is the class that commands the behavior of the application. It is this class that launches the process of opening a new section when you click on an icon.

This class also has the “unregisterLayout” function that allows you to remove your Layer from the list of currently opened Layers (this is the list seen in the WYSIWYG).

The Layout class

The Layout class (org.silex.core.Layout) is the class that ensures communication between the application and the AnimationLayout’s SWF. It’s in this class that AnimationLayouts register their animations and it’s this class that pushes AnimationLayout’s animation into the Sequencer. To do that, the Layout class uses the addItem function of the Sequencer class.

Note that as a default, the Layout class automatically links some MovieClips from the AnimationLayout’s SWF to animations. Clips that are automatically linked have the following instance names :

• ANIM_NAME_PRELOAD
• ANIM_NAME_SHOW
• ANIM_NAME_TRANSITION_CLOSE
• ANIM_NAME_TRANSITION
• ANIM_NAME_CLOSE

It is possible to deactivate this behavior by setting a allowAutomaticAnimDetection variable to false on the AnimationLayout’s timeline. If the variable is set to any other value or if it’s not set, the automatic linking will take place.

This class has the “doUnloadLayoutCallback” function that has to be called in order to remove your AnimationLayout from the scene (it will also dispatch the HIDE_CONTENT event).

The Sequencer class

The Sequencer controls the sequence of animations that have to take place. An animation is basically a reference to an object implementing the play function. In the Sequencer all animations are played one after the other. It’s the Sequencer that is going to call the show animation of a Layer for example.

Writing a simple Layout

We’ve quickly seen which parts of SILEX make AnimationLayouts work, now let’s see how to create one.

The AnimationLayout class

In the haXe Library there’s a org.silex.animationLayouts.AnimationLayout class, you can subclass it to implement your own Layout.

Registering SubLayers

This class provides you with a registerSubLayer function that takes a MovieClip and a String as parameters. It allows you to register and name a SubLayer for it to appear in the WYSIWYG. Your AnimationLayout must have at least one SubLayer. Creating a SubLayer simply consists in adding a MovieClip to your stage and designating it as the holder for your SubLayer.

So adding a SubLayer is as simple as:

var content_mc = timeLine.createEmptyMovieClip("content_mc", timeLine.getNextHighestDepth());
this.registerSubLayer(content_mc, "fade");

As you can guess, this SubLayer will be named “fade”.

Another important helper in the AnimationLayout class is the registerChildLayer function that takes a MovieClip as a parameter. You should use it to tell Silex in which MovieClip a child Layer should be loaded.

Once you have subclassed the AnimationLayout class, you should create an instance of your class in your main function and add it to your stage.

Animations

To create an animation you can extend the Animation class. You should override the play function since it’s the one that’s going to be called when your animations has to start playing.
Once it’s been called, it’s up to you to handle the updating of your animation. When your animation ends, you have to call the nextSequence function of the Sequencer. Doing so will tell the Sequencer that your animation is finished and that it can start the next animation. Forgetting to call this will result in the application being blocked.

Before an Animation can be played, it has to be registered, to do so, you can use the AnimationLayout’s addAnimation, that takes your animation and the kind of animation it is used for as parameters. The second parameters is a value of the AnimationType enum.

Closing the Layout

When the user navigates away from the current Layer, the CLOSE animation of your Layout will be called. In this case, you should play your closing animation, tell the Sequencer when it is finished and unregister your Layout from the application using Application.unregisterLayout and then unload it using layout.doUnloadLayoutCallback.

hxLayout.sequencer.nextSequence();
hxLayout.silex.application.unRegisterLayout(layout);
layout.doUnloadLayoutCallback();

Where hxLayout the object of type org.silex.animationLayouts.AnimationLayout and layout is the object of type org.silex.core.Layout.