Loading an External SWF with FlashEff effect(s) working after load

Posted by papillion 
Loading an External SWF with FlashEff effect(s) working after load
April 29, 2009 07:42PM
I am quite new to actionscript 3 but I have figured out a quick and dirty method for loading in an external SWF call by a Button and showing it with FlashEff effects working on load. (note:I found little in the forum or tutorials to guide in this... so I am happy to provide this solution as a mini tut if you will)

//I have updated this post after figuring out a few more tricks
There are two methods for loading an external swf file having FlashEff effects working on load
I am using the Adobe included component UILoader components/UserInterface/UILoader
The UILoader does one thing better than the Loader Class... it loads in the external Swf and plays the effect (set in the external swf) without having to import or place in the Library the FlashEff effects being used in the external swf!!! Keeps your Main Swf lighter and less work tracking effects!

This post is the first approach... putting a static UILoader component on the stage and loading into it.

Hope this helps folks,
Papillion

Put both your main swf and the external load swf files into the Samples Folder *(you can call any swf with relative or absolute path)

Drag an instance of UILoader component (in components panel / user interface)
Give it an instance name "load_here"

here is the as3 script of course the button instance name is my_btn

my_btn.addEventListener(MouseEvent.CLICK, startLoading);
function startLoading(e:MouseEvent):void{
load_here.load(new URLRequest("InteractiveButtons.swf"));

}

// note*! When loading more than one Swf into the instance UILoader "load_here"
// it would be good to clear the UILoader of the swf contained there... then only one swf is existing there at time...
// this might be ok for a few pics but can be a problem with swfs...
// the line for unloading a UILoader is:

load_here.unload(); *** "load_here" is the instance name of the UILoader present on the stage

// I haven't really tried the unload script here... and am not sure if it will work... It may just remove the UILoader altogether...
// I moved on the "Method 2" (* see Method 2 post below) which is about dynamically creating the UILoader
// and dynamically unloading it each time I load in another swf... unload works fine in that method!

Load some SWF that has a FlashEff effect on it to see how it works...
I am loading the SWF InteractiveButtons.swf from the FlashEff Samples folder because it has FlashEff effects applied to itself...
in other words the FlashEff effect is working in the loaded swf (if you opened that swf as stand alone the effects work on load)
and gladly the effects work when loaded into the PressAndAminate2.swf as well.

It works! Simple

The Attached File is for Flash CS4
if using CS3 then see the attachment on the next post... or just copy the code, create a button etc...

Next is a bit more complex method... doing everything is Actionscript... creating the UILoader, loading it and centering etc...



Edited 2 time(s). Last edit at 05/04/2009 09:54PM by papillion.
Attachments:
open | download - pressAndAnimate2.fla (854 KB)
Re: Loading an External SWF with FlashEff effect(s) working after load
April 29, 2009 07:43PM
Here is the Flash CS3 version of the the action for loading External Flash with FlashEff effects
* I exported it from CS4 but I think it works in CS3



Edited 1 time(s). Last edit at 05/04/2009 09:31PM by papillion.
Attachments:
open | download - pressAndAnimate2(cs3).fla (842.5 KB)
Method 2~ Loading an External SWF with FlashEff effect(s) working after load
April 29, 2009 11:17PM
Method 2
Using actionscript to dynamically create and load UILoader
FlashEff effects are running on the external Swfs (kept and called from folder "swfs"
I have 3 effects on each external swf which is pretty heavy
I use the PreloaderBar component (Adobe's stock preloader bar)
Also scripted to center the UILoader component (therefore the external swfs) along with a bit of tweening

Repeat: the best thing I like about the UILoader component is that it allows you to load in external swf (having FlashEff effects on the external swfs)
without having to import or include those effects in the Main swfs library. This keeps the Main swf smaller in size and allows you to let the user load
each swf (with effects) as they require.... therefore initial site loading time is less!

This example is more complex.... but hey even I figured it out!!!
The FLA is pretty clearly annotated so check it out

Attached FLA is CS4 only
UPDATE: I have uploaded both CS3 and CS4 versions of this method in this post



Edited 2 time(s). Last edit at 06/13/2009 03:58PM by papillion.
Attachments:
open | download - Load SWF CS3andCS4.zip (2.82 MB)
Re: Loading an External SWF with FlashEff effect(s) working after load
May 06, 2009 06:20PM
Can you post the AS3 for your CS4 version that loads the UILoader & PreloaderBar dynamically?
Re: Loading an External SWF with FlashEff effect(s) working after load
May 11, 2009 06:40AM
Thank you papillion, this is very helpful.
Re: Loading an External SWF with FlashEff effect(s) working after load
May 12, 2009 01:22PM
ao4... See the next post for the AS3 scripting for Dynamic UILoader and ProgressBar !


Thanks for the Thank you Ionut... as I delve more into flash development I am always impressed with how helpful folks are to one another!



Edited 1 time(s). Last edit at 05/12/2009 07:35PM by papillion.
ActionScript (3) code for Loading with UILoader and ProgressBar component
May 12, 2009 07:33PM
// As requested from ao4... here is the actionscript for the example for dynamically loading with UILoader Component and ProgressBar Component...
// this is useful for folks who don't have Flash CS4 and wish to try this process in Flash CS3
// create a new Flash doc and set it for AS3 (i love saying the obvious!)
// Be sure to download the Attached folder and save your New FLA in that folder
// for convenience I am uploading the Example folder here... it, of course has the CS4 version already...
****UPDATE: Finally got around to setting up and uploading the CS3 version... attached with this post


import flash.events.*; // this is for the Centering on Resize
import fl.transitions.Tween; // this is for the Centering on Resize
import fl.transitions.easing.*; // this is for the Centering on Resize
import fl.containers.UILoader;

import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

import flash.display.StageAlign; //this is for the Centering on Resize
import flash.display.StageScaleMode; //this is for the Centering on Resize
import flash.events.Event; //this is for the Centering on Resize

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);
//*note: do not call the resizeHandler on initial load of movie (Null Object Error! the UILoader doesn't exist yet
// therefore it has no size! Call resizeHandler once loading an initial instance of myUILoader is "Complete"
// see completeHandler


//variables for myUILoader centering ease Tween
var xTween:Tween;
var yTween:Tween;


var myProgressBar:ProgressBar = new ProgressBar();
myProgressBar.mode = ProgressBarMode.MANUAL;
addChild(myProgressBar);
//center the progress bar...
myProgressBar.x = (myProgressBar.stage.stageWidth / 2) - (myProgressBar.width / 2);
myProgressBar.y = (myProgressBar.stage.stageHeight / 2) - (myProgressBar.height / 2);


//using the UILoader Component (Components/User Interface/UILoader
// works well for loading external FlashEff swfs because you don't need to import
//or put FlashEff pattens/filters in the Library
//therefore all loading effects for each external swf are in the external files themselves
//keeps the initial Main Swf load small
//Using the Loader import requires importing and putting FlashEff effects in Main SwfLibrary
//and loading all effects you will use in external Swf files... seems like UILoader is more efficient
// and quicker to setup!!!


//initial UILoader setup... places UILoader on stage and loads swf

var myUILoader:UILoader = new UILoader();
myUILoader.autoLoad = true;
myUILoader.scaleContent = false;
myUILoader.load(new URLRequest("swfs/InteractiveButtons.swf"));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
//set start location of myUILoader (any x any y)
// I want it close to center and then it will tween to center once onStage
myUILoader.x = 150;
myUILoader.y = 150;

function progressHandler(event:ProgressEvent):void {
var myUILoader:UILoader = event.currentTarget as UILoader;
myProgressBar.visible = true;

var kbLoaded:String = Number(myUILoader.bytesLoaded / 1024).toFixed(1);
var kbTotal:String = Number(myUILoader.bytesTotal / 1024).toFixed(1);
myProgressBar.setProgress(event.bytesLoaded, event.bytesTotal);
}

function completeHandler(event:Event):void {
myProgressBar.visible = false;
myUILoader.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.removeEventListener(Event.COMPLETE, completeHandler);
xTween = new Tween (myUILoader, "x", Strong.easeOut, myUILoader.x, (stage.stageWidth / 2) - (myUILoader.width / 2), 2, true);
yTween = new Tween (myUILoader, "y", Strong.easeOut, myUILoader.y, (stage.stageHeight / 2) - (myUILoader.height / 2), 2, true);
}
//Above... wait for UILoader to finish loading then do centering tween (or Null error will occur)


//universal function button...
//retrieves instance name of each button and calls swf with that same name
//contained in folder "swfs"
function btnClick(event:MouseEvent):void {
//important to unload UILoader... removes current swf ... then load new
myUILoader.unload();
var newSWFRequest = ("swfs/" + event.target.name + ".swf");
myUILoader.load(new URLRequest(newSWFRequest));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
}

// Btn listeners *note button Instance names match swf files in swf folder ie., buttons1.swf etc...
// add more buttons and eventlisteners here ...

buttons1.addEventListener(MouseEvent.CLICK, btnClick);
buttons2.addEventListener(MouseEvent.CLICK, btnClick);
buttons3.addEventListener(MouseEvent.CLICK, btnClick);

// Learned this Universal Button Funciton from Adam Khoury on www.developphp.com
// search him in the Tutorial Index. Adam does a great job in his video tutorials... he has
// a bit of attitude, and I mean that in a good way!!! so I often find myself smiling while
// I learn from him... he makes things clearer than any other presenter I have come across.




function resizeHandler(event:Event):void {
xTween = new Tween (myUILoader, "x", Strong.easeOut, myUILoader.x, (stage.stageWidth / 2) - (myUILoader.width / 2), 2, true);
yTween = new Tween (myUILoader, "y", Strong.easeOut, myUILoader.y, (stage.stageHeight / 2) - (myUILoader.height / 2), 2, true);
}
//ReSizing!
// the UILoader component
// has a LeftTop Registration instead of center... this can't be changed because it is a component
// so one has to add (myUILoader.width / 2) & (myUILoader.height / 2) to compensate for the LeftTop Registration...



Edited 2 time(s). Last edit at 06/13/2009 04:00PM by papillion.
Attachments:
open | download - Load SWF CS3andCS4.zip (2.82 MB)
Re: Loading an External SWF with FlashEff effect(s) working after load
May 19, 2009 08:05PM
Hi Papillion, I already try the transition effect in cs4, but I cant make the movie to be in the position I want, I change this:

myUILoader.x = 150;
myUILoader.y = 150;

to

myUILoader.x=16;
myUILoader.y=280;

but still moves to the top, what can I do??

thanks!!
Re: Loading an External SWF with FlashEff effect(s) working after load
May 20, 2009 03:43AM
This is great!! I have been getting a small grip on AS3(seems never ending). Been looking for example like this. When I get the tools together, I'll send what I do with it. A basic template makes life easier. Much thanks
Stylie

ps anyone out there reading knowing actionscript is part of designing with Flash, learn it. It will make all of our lives better, and hopefully keep sharing code that works.
Re: Loading an External SWF with FlashEff effect(s) working after load
May 20, 2009 06:52PM
Hey Papillion,
Could you attach one of the external swf's so I can see how that is set up. I tried my simple one I created and nothing is loading. I created a new buttons4 and renamed everything. What was interesting was when I copied buttons3.swf and renamed it buttons4.swf it loaded correctly, so it has to be something I am not doing in my external swf. All of the code makes complete sense. Again Thank you.
Stylie
There's probably no one checking this post anymore but here goes anyway.

I've been designing graphics in Flash for a while, but I've never gotten very far with AS at all. Now I'm determined to learn AS 3.0. Of course I can pretty much learn only when I see something working and then analyze it. Can you tell me exactly what else I need (other than the swf in a folder called swfs) for the above script to produce results? In lieu of further information, I just put a liitle SWF in the "swfs" folder, pasted the script into frame 1, hit cntrl-enter and of course nothing happened. I'm not completely stupid, but I do need to have everything spelled out completely (objects, scripts needed and where they go, etc.)

Thanks,
John
Re: Loading an External SWF with FlashEff effect(s) working after load
June 13, 2009 03:38PM
Hey Style!
Sorry for not responding for a while here... I am a musician and have been traveling a good bit lately.

I am with you on the AS thing... I have been working in Flash for a couple years... mostly on the design and animation side... and am now getting into AS as well... I am jumping right on to AS3 since that is the new standard and actually seems to make more sense to me (as a code). I am glad you got the script working... I am not sure what the problem actually was for you... maybe the naming of the buttons was not exactly right... the Buttons.swf files are just a simple graphic with a Flash Eff effect attached... that's all. then refer to it in the actionscript ...
this function:
//universal function button...
//retrieves instance name of each button and calls swf with that same name
//contained in folder "swfs"
function btnClick(event:MouseEvent):void {
//important to unload UILoader... removes current swf ... then load new
myUILoader.unload();
var newSWFRequest = ("swfs/" + event.target.name + ".swf");
myUILoader.load(new URLRequest(newSWFRequest));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
}

It is important to give the the button on your main flash file an instance name that matches exactly the swf you want to load.
a simpler alternative to this method is to just call the swf you want to load using it's actual name

function btnClick(event:MouseEvent):void {
myUILoader.unload();
var newSWFRequest = ("swfs/yourswf.swf"); // the swfs/ part is the name of the folder the swf you want to load is in of course.
myUILoader.load(new URLRequest(newSWFRequest));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
}

//calling the function with:
buttons1.addEventListener(MouseEvent.CLICK, btnClick);

this is not as efficient as the other method because if you have several buttons you will need to create a function for each
btnClick2, btnClick3 and so on...

function btnClick2(event:MouseEvent):void {
myUILoader.unload();
var newSWFRequest = ("swfs/yourswf2.swf"); // the "swfs/ " part is the name of the folder the swf you want to load is in of course.
myUILoader.load(new URLRequest(newSWFRequest));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
}

buttons2.addEventListener(MouseEvent.CLICK, btnClick2);
buttons3.addEventListener(MouseEvent.CLICK, btnClick3);

I did check the files I uploaded when I first did this posts and it all seemed to be intact and working.... sorry if I left something out...
I find that I learn so much (and retain what I learned) when I work with a script and then have to do a bit of trouble shooting or adapting for my own requirements to make it work... then you find yourself getting into the code on an understanding level!!!

all the best,
Papillion
Re: Loading an External SWF with FlashEff effect(s) working after load
June 13, 2009 03:56PM
johnnyc333 wrote:
There's probably no one checking this post anymore but here goes anyway.

I've been designing graphics in Flash for a while, but I've never gotten very far with AS at all. Now I'm determined to learn AS 3.0. Of course I can pretty much learn only when I see something working and then analyze it. Can you tell me exactly what else I need (other than the swf in a folder called swfs) for the above script to produce results? In lieu of further information, I just put a liitle SWF in the "swfs" folder, pasted the script into frame 1, hit cntrl-enter and of course nothing happened. I'm not completely stupid, but I do need to have everything spelled out completely (objects, scripts needed and where they go, etc.)

Thanks,
John


Hey johnnyc333,
Yes I checked this forum... been traveling and now catching up with this post...
Lynda.com is a great way to learn AS3 and Flash

The CS4 version I uploaded previously is working fine... so I am thinking you are working in CS3... I finally got around to regressing the script to CS3 along with the files and folder I used so I am uploading it here... I just tested it in CS3 and it is working fine so you should now have a working copy of the AS in a CS3 fla.
I agree it is hard to work without a complete example (all set up for you), because just one little omission can spoil the whole gumbo! (I'm cajun).
so try it out and dig around, change things, break things and trouble shoot and fix things... that is one of the best ways to retain what you learn in AS.

bon chance
Papillion
Attachments:
open | download - Load SWF CS3andCS4.zip (2.82 MB)
isabeel wrote:
Hi Papillion, I already try the transition effect in cs4, but I cant make the movie to be in the position I want, I change this:

myUILoader.x = 150;
myUILoader.y = 150;

to

myUILoader.x=16;
myUILoader.y=280;

but still moves to the top, what can I do??

thanks!!


Hi isabeel,
Same apology as above... I hope you worked out the problem or are getting notice of new posts here...

I know the AS I posted is a bit complex as it is also doing stage repositioning and button click function tricks...
I get a bit carried away as I delve into AS3 more....

I am thinking you are trying to place your loaded swf in an absolute position on the stage and have it stay there, am I right?

your code:
myUILoader.x=16;
myUILoader.y=280;



My script has a repositioning function which will move your loaded swf in the UILoader to the center (or it is supposed to go to the center)
when it loads (not matter what position you set) and when the browser window is resized.... I have posted the same AS3 script below and removed the reposition functions. Play with that and see if your loaded swf stays where you want it.
also, I have noted the following thought in the script below concerning position of the progress bar...
You may need to play with the progress bar position since it relates to your UILoader and
you are not auto centering your loaded swf... you may want to set the Progress bar location to an absolute like you are doing with the UILoader
Example:
myProgressBar.x = 16;
myProgressBar.y = 280;
instead of:
myProgressBar.x = (myProgressBar.stage.stageWidth / 2) - (myProgressBar.width / 2);
myProgressBar.y = (myProgressBar.stage.stageHeight / 2) - (myProgressBar.height / 2);
NOTE~ checking a progress bar's position is tricky because it will only show up for an instant when you test from Flash
Test your flash and in flash player under "View" change your download settings to a slower setting and hit return to get a glimpse of your preloader progressbar location.

I have attached a revised version of the method with this post. I have removed all resize/reposition functions.
Hope this helps,
Papillion

Also here is the script below (without the resize/reposition functions)

import fl.containers.UILoader;
import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

var myProgressBar:ProgressBar = new ProgressBar();
myProgressBar.mode = ProgressBarMode.MANUAL;
addChild(myProgressBar);
//center the progress bar... You may need to play with the progress bar position since it relates to your UILoader and
// you are not auto centering your loaded swf... you may want to set the Progress bar location to an absolute like you are doing with the UILoader
//Example:
// myProgressBar.x = 16;
// myProgressBar.y = 280;
// instead of this below:

myProgressBar.x = (myProgressBar.stage.stageWidth / 2) - (myProgressBar.width / 2);
myProgressBar.y = (myProgressBar.stage.stageHeight / 2) - (myProgressBar.height / 2);


//using the UILoader Component (Components/User Interface/UILoader
// works well for loading external FlashEff swfs because you don't need to import
//or put FlashEff pattens/filters in the Library
//therefore all loading effects for each external swf are in the external files themselves
//keeps the initial Main Swf load small
//Using the Loader import requires importing and putting FlashEff effects in Main SwfLibrary
//and loading all effects you will use in external Swf files... seems like UILoader is more efficient
// and quicker to setup!!!


//initial UILoader setup... places UILoader on stage and loads swf

var myUILoader:UILoader = new UILoader();
myUILoader.autoLoad = true;
myUILoader.scaleContent = false;
myUILoader.load(new URLRequest("swfs/InteractiveButtons.swf"));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
//set absolute location of myUILoader (any x any y)

myUILoader.x = 16;
myUILoader.y = 280;

function progressHandler(event:ProgressEvent):void {
var myUILoader:UILoader = event.currentTarget as UILoader;
myProgressBar.visible = true;

var kbLoaded:String = Number(myUILoader.bytesLoaded / 1024).toFixed(1);
var kbTotal:String = Number(myUILoader.bytesTotal / 1024).toFixed(1);
myProgressBar.setProgress(event.bytesLoaded, event.bytesTotal);
}

function completeHandler(event:Event):void {
myProgressBar.visible = false;
myUILoader.removeEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.removeEventListener(Event.COMPLETE, completeHandler);
}


//universal function button...
//retrieves instance name of each button and calls swf with that same name
//contained in folder "swfs"
function btnClick(event:MouseEvent):void {
//important to unload UILoader... removes current swf ... then load new
myUILoader.unload();
var newSWFRequest = ("swfs/" + event.target.name + ".swf");
myUILoader.load(new URLRequest(newSWFRequest));
myUILoader.addEventListener(ProgressEvent.PROGRESS, progressHandler);
myUILoader.addEventListener(Event.COMPLETE, completeHandler);
addChild(myUILoader);
}

// Btn listeners *note button Instance names match swf files in swf folder ie., buttons1.swf etc...
// add more buttons and eventlisteners here ...

buttons1.addEventListener(MouseEvent.CLICK, btnClick);
buttons2.addEventListener(MouseEvent.CLICK, btnClick);
buttons3.addEventListener(MouseEvent.CLICK, btnClick);

// Learned this Universal Button Funciton from Adam Khoury on www.developphp.com
// search him in the Tutorial Index. Adam does a great job in his video tutorials... he has
// a bit of attitude, and I mean that in a good way!!! so I often find myself smiling while
// I learn from him... he makes things clearer than any other presenter I have come across.
Attachments:
open | download - No Reposition.zip (834.6 KB)
Re: Method 2~ Loading an External SWF with FlashEff effect(s) working after load
July 22, 2009 01:57PM
Hi

I have a problem: My FlashEff effects aren´t shown even if I use the exact script and vars of method 2 above. It loads and shows the correct file but no FlashEff stuff. But... If I replace my button1.swf, buttonX.swf with the ones from the example files, their FlashEff effects are shown in my main.swf - so the code in my main.swf can´t be wrong or somehow cancel FlashEff. If I replace the buttonsX.swf in the example file with mine, so that the LoadSWFsCS3.swf from the example runs my swf-files, I can even see my FlashEff effects. Can anyone help me? I use Flash CS3, ActionScript 3 and the free version of FlashEff.

Thanks,
XarX
To XarX
July 23, 2009 05:12PM
Hi XarX,
So let's see... if your external file didn't work but the example external file did... Trying to sort this out...
Forgive my first thought... too obvious, but we all can overlook the obvious from time to time. Your external SWF needs to have a FlashEff effect (test it by itself both in Flash IDE and in the browser)... seems if you have the effect working in the external file it should work when being loaded into your main... also be sure the effect in the external file is set to auto play (Flash Eff Panel settings)... I think that is the default for all effects but ya never know. If your main file is giving you no errors then I would think one of these to be the issue.

Otherwise, I would be happy to look at your files... put them in a folder and zip it and load it up here if you like. Make sure you have all files FLAs and SWFs set to work within that folder.
Papillion
Re: Loading an External SWF with FlashEff effect(s) working after load
August 05, 2009 03:06AM
Hey Papillion,
Thanks for the response. This is kind of off topic, and won't be mentioned again. I don't want to hinder the thread:0) I am a musician as well, what's your flavor. I am starting a new site for my group. Plan on using this code template and flash eff2. Once I am finished I'll post. We're a jazz, funk, fusion style. I compose and arrange most of the music. Touches home when I see other musicians into similar things. Cheers,
Stylie
Re: Loading an External SWF with FlashEff effect(s) working after load
September 08, 2009 09:33AM
hey there, i tryed your first example and it worked but i couldnt change it for more than 1 swf, can u help me plx?
Sorry, you do not have permission to post/reply in this forum.