ModuleManager with ProgressBar and Fade Effect
by jlagunas on Dec.17, 2008, under Actionscript
This examples shows you how you can use the ModuleManager with the ProgressBar and a fade effect.
MXML File
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" pageTitle="Module Manager" width="100%" height="100%" viewSourceURL="srcview/index.html">
<mx:Script source="as/moduleManager.as" />
<mx:Script source="as/effects.as" />
<mx:states>
<mx:State name="progress">
<mx:AddChild relativeTo="{container}" position="after">
<mx:Canvas id="progressCanvas" width="100%" height="100%" backgroundColor="0xffffff" alpha=".5">
<mx:ProgressBar source="{moduleInfo}" horizontalCenter="0" verticalCenter="0" color="0x333333" fontWeight="normal"/>
</mx:Canvas>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox id="container" width="100%" height="100%">
<mx:HBox>
<mx:Button id="loadModule1" label="load module 1" click="moduleHandler('assets/modules/module1.swf');" />
<mx:Button id="loadModule2" label="load module 2" click="moduleHandler('assets/modules/module2.swf');" />
</mx:HBox>
<mx:ModuleLoader id="moduleLoader" width="100%" height="100%" />
</mx:VBox>
</mx:Application>
moduleManager.as
import flash.display.DisplayObject;
import mx.controls.Alert;
import mx.events.ModuleEvent;
import mx.modules.IModuleInfo;
import mx.modules.ModuleManager;
[Bindable]
private var moduleInfo:IModuleInfo;
private var displayObject:DisplayObject;
private function moduleHandler(moduleUrl:String):void
{
if(moduleLoader.numChildren > 0)
{
if(moduleInfo.url != moduleUrl)
unloadModule();
else
return;
}
currentState = "progress";
moduleInfo = ModuleManager.getModule(moduleUrl);
moduleInfo.addEventListener(ModuleEvent.READY, readyHandler);
moduleInfo.addEventListener(ModuleEvent.ERROR, errorHandler);
moduleInfo.load();
}
private function readyHandler(event:ModuleEvent):void
{
displayObject = moduleInfo.factory.create() as DisplayObject;
moduleLoader.addChild(displayObject);
FadeEffect(displayObject, 1000, 0, 0, 1);
currentState = "";
}
private function errorHandler(event:ModuleEvent):void
{
Alert.show("ERROR Loading Module: " + moduleInfo.url, "ERROR");
currentState = "";
}
private function unloadModule():void
{
moduleLoader.removeAllChildren();
moduleInfo.unload();
}
effects.as
import mx.effects.Move;
import mx.effects.Fade;
import mx.effects.easing.Cubic;
public function MoveEffect(target:Object, duration:Number, delay:Number, xStart:Number, xEnd:Number, yStart:Number, yEnd:Number):void
{
var moveEffect:Move = new Move();
moveEffect.end();
moveEffect.target = target;
moveEffect.duration = duration;
moveEffect.startDelay = delay;
moveEffect.easingFunction = Cubic.easeInOut;
moveEffect.xFrom = xStart;
moveEffect.xTo = xEnd;
moveEffect.yFrom = yStart;
moveEffect.yTo = yEnd;
moveEffect.play();
}
public function FadeEffect(target:Object, duration:Number, delay:Number, alphaFrom:Number, alphaTo:Number):void
{
var fadeEffect:Fade = new Fade();
fadeEffect.end();
fadeEffect.target = target;
fadeEffect.duration = duration;
fadeEffect.startDelay = delay;
fadeEffect.easingFunction = Cubic.easeInOut;
fadeEffect.alphaFrom = alphaFrom;
fadeEffect.alphaTo = alphaTo;
fadeEffect.play();
}
7 comments for this entry:
February 22nd, 2009 on 5:14 pm
Hello,
I am attempting to build a showreel with three modules – Audio, Video, and Print – using a ToggleButtonBar and your moduleManager and Effects classes – and I have a copule of problems I do not know how to solve.
1. When exiting the Radio module, and opening another, the module appearss to unload – but the sound continues to play… I don’t know how to kill the sound.
&
2. The video module is an extension and re-skinning of the open source FlexVideoPlayer from http://www.video-flash.de/index.php/flexvideoplayer – which I can open and run but cannot manage to close. When I import my toggleButtonBar controls into the Video Module and call unloadModule() from there,the app. will compile without errors – but I get error 1006:Value is not a function in the FlashPlayer when I try to call the unloadModule method from inside the Videoplayer…
Any tips on how to sort this would be most appreciated…
February 22nd, 2009 on 5:16 pm
Ooops – posted before I meant to. Because I wanted to say thank for the classes anyway – which are almost working for me, and giving me a great looking presentation for my showreel.
February 22nd, 2009 on 5:33 pm
Further to my previous post, when I call
itemclick=” parentApplication.clickHandler();”
from the Video Module to the main App. where clickHandler is:
public function clickHandler(event:ItemClickEvent):void {
_modUrl = “modules/” + event.label + “.swf”;
moduleHandler(_modUrl);
I get no errors – but also no action…
February 23rd, 2009 on 5:57 pm
Sine, here are a few possible solutions to your problems.
1. to kill all sound have you tried using SoundMixer.stopAll();
2. it sounds like your video module is trying to get to unloadModule() when its not there. Try possible using Application.application instead.
3. it seems like the the moduleHandler() is not finding the module, therefore not getting any response.
June 5th, 2009 on 3:52 am
Hi,
The above example loads text based content inside the grid and shows it outside it. How to show small image like icon inside the datagrid and show the big image outside the grid ?
July 1st, 2009 on 8:35 am
Hello Sine and JLagunas thank you very much for this post.. this is what i was looking for.. For the audio to stop playing you have to make some sort of function like
public function unload() : void {
contentService.disconnect();
if (currentState == INTERACTIVE_STATE) {
interactivePlayer.destroy();
} else if (currentState == VIDEO_STATE) {
videoPlayer.destroy();
}
}
and call it on the module tag
Remove is dispatched when you remove your module, so in that moment you have to stop your videos, sounds, etc.
You have to write your destroy() methods..
Hope this works for you..
August 30th, 2009 on 10:38 pm
Hi,thanks for the articles.I want to ask how to do it with ModuleLoader instead of using ModuleManager?Thanks…