FlowManager

Enables to navigate a multi-part Flash movie using the principle of deep links.

Introduction

Flow states are represented by site 'sections', using the IFlowSection type. FlowSection inherits from LocalController, but can be assigned to any MovieClip in the site that needs to be navigated to. FlowManager registers FlowSections and uses their names to build a tree-like structure. The syntax to go to a new section is simply: FlowManager.defaultFlowManager.goto("Intro"); FlowManager finds the FlowSection with that name, and finds what sections need to be shown or hidden or even loaded.

Site structure

The structure of the site is defined by hierarchical naming of FlowSections, using dots for each level. An example of a naming structure can be found in the example demo:

public static const SECTION_INTRO:String = "Intro";
public static const SECTION1:String      = "Sections.Section1";
public static const SECTION1_1:String    = "Sections.Section1.Section1_1";
public static const SECTION2:String      = "Sections.Section2";

When going from 'Sections.Section1' to 'Sections.Section2', FlowManager will detect that this is a sibling relationship. The possible types of relationships are defined in FlowOptions. You may also use a dot to indicate a level. In the next list the Section items have a higher depth than Intro:

public static const SECTION_INTRO:String = "Intro";
public static const SECTION1:String      = ".Section1";
public static const SECTION1_1:String    = ".Section1.Section1_1";
public static const SECTION2:String      = ".Section2";

This is useful when you want to let FlowManager automatically load movies based on the section names.

Starting and stopping, or showing and hiding

The default behavior for start is setting the visibility to true; for stop to set it to false. Start and stop are called from the 2 base functions FlowSection.startAction and FlowSection.stopAction. You can override the default behavior of these methods in a subclass. When traversing from one section to the other, it depends if startSection or stopSection is called. When going to a child section, stop will not called on the current section. When going to a sibling section, the current stop will be called, and right after start. Each startAction and stopAction function may return a IAction or a subclass thereof, including an ActionQueue. Any animation is processed sequentially - an ActionQueue is first finished before the next Action is called. In the example demo one of the sections overrides the default startAction - it lets the clip scale from small to large in a elastic manner:

public override function get startAction () : IAction {
var queue:ActionQueue = new ActionQueue("Section1_1 show");
queue.addAction(new AQSet().setVisible(this, true));
queue.addAction(new AQSet().setScale(this, .5, .5));
const CURRENT:Number = Number.NaN;
var effect:Function = Elastic.easeOut;
queue.addAction(new AQScale().scale(this, .8, CURRENT, CURRENT, 1, 1, effect));
return queue;
}

Rules

Sometimes it is desired to manage these start and stop actions from a higher level. For example after the intro animation we want to go to section 1. To do this Rules can be defined. Rules are created with the FlowRule class:

var rule:FlowRule = new FlowRule (
"Intro",
OPTIONS.START_END,
OPTIONS.ANY,
proceedToSection1
);
FlowManager.defaultFlowManager.addRule(rule);

This rule says that for a section with name Intro, when encountering mode START_END (end of the start action), and ANY relationship type, function proceedToSection1 needs to be called. And that function simply has:

protected function proceedToSection1 (inSection:IFlowSection) : void {
FlowManager.defaultFlowManager.goto("Sections.Section1", this, false);
}

You will notice that the current section is always passed to the callback function.

Apply many

It is also possible to set a Rule for multiple sections at once. For example:

var rule:FlowRule = new FlowRule (
null,
OPTIONS.STOP,
OPTIONS.DISTANT|OPTIONS.SIBLING,
doNotHide
);
FM.addRuleForSections (
rule,
[AppSettings.SECTION1, AppSettings.SECTION2, AppSettings.SECTION3, AppSettings.SECTION4]
);

You can define combinations of options using bitwise operators. In the example, OPTIONS.DISTANT|OPTIONS.SIBLING means either a distant relative OR a sibling. Function doNotHide simply voids the default behavior:

protected function doNotHide (inSection:IFlowSection) : void {
// do nothing
}

Enhancing default behavior

As 'man in the middle' you can control what happens before and after a startAction. In the example demo we move the stage right after starting the section. Function moveSection is called because of a Rule:

protected function moveSection (inSection:IFlowSection) : void {
var x:Number, y:Number;
switch (inSection.getName()) {
case AppSettings.SECTION1:
x = 0; y = 40;
break;
// etcetera
}
var queue:ActionQueue = moveQueue(x, y); // creates a moving animation as ActionQueue
FlowManager.defaultFlowManager.addAction(inSection.startAction);
FlowManager.defaultFlowManager.addAction(queue);
}

Automatic loading of missing Sections

When a section is not found, FlowManager will try to load it. Right before loading it will dispatch an event with subtype FlowNavigationEvent.WILL_LOAD. After loading successfully an event with subtype FlowNavigationEvent.LOADED is sent. You may even navigate to a section within a to-be-loaded movie. After loading you can proceed to the nested section by using the destination property of the incoming FlowNavigationEvent.

protected function attachMovie (e:FlowNavigationEvent) : void {
if (section != null) {
// add child clip...
FlowManager.defaultFlowManager.goto(e.destination);
}
}

Note: calls to sections within a to be loaded movie are not supported yet.

Responding to state changes

Before a new state change, an event with subtype FlowNavigationEvent.WILL_UPDATE is sent. After the transition has been complete, an event with subtype FlowNavigationEvent.UPDATE is sent. In the example demo a MenuController listens for state changes. It is subscribed to changes using: FlowManager.defaultFlowManager.addEventListener(FlowNavigationEvent._EVENT, handleNavigationEvent); The receiving method is:

private function handleNavigationEvent (e:FlowNavigationEvent) : void {
switch (e.subtype) {
case FlowNavigationEvent.WILL_UPDATE:
case FlowNavigationEvent.UPDATE:
e.stopImmediatePropagation();
// handle button state
break;
}
}

Because FlowNavigationEvent events bubble through and other classes may deal with update changes as well, chance is that we get stuck in a recursive loop. We end this by writing e.stopImmediatePropagation();.

How to start

• Create a name list of navigatable elements in your Flash site/project.
• I prefer to have a list of consts in data/AppSettings, so when referring to "Intro" I write AppSettings.SECTION_INTRO.
• Section names are hierarchical. Use dots to indicate levels. For example: "Sections.Gallery" and "Sections.Gallery.Latest"
• Normally the main controller for each SWF is a LocalController. Now make it inherit from FlowSection, and pass the name of the section in the super constructor call.
• Other navigatable sections (like nested MovieClips) also need a FlowSection class.
• If your main controller is a FlowSection as well, do not forget to make it visible.
• Now write FlowManager.defaultFlowManager.goto( "My.starting.section" ); (insert your section)