Load External Image and SWF Flash Action Script 3
Hi, every one here goes another article. I will sure come up with flash action script 3 MP3 player Part 2 soon. Let us focus on loading external images in flash action script 3. For the beginners its a huge problem to load external images and swf file into a flash Movie clip and and flash action script 3. Some time people consider it hard to attach a pre loader on the loading external image in flash action script 3. I was working on an flash image gallery project and came across the same problem. What i was planning to have a flash action script 3 class to do my external image loading. I thought of an idea to make this class a reusable utility to load external image in flash action script 3 and built in support for a preloader. I have defined a class named ImageContainer. Image Container class is inherited from MovieClip class. This class support dynamic loading of external image and swf file into flash. In the attached sample i have loaded a JPEG file and a SWF file dynamically into flash.
Here goes the code for the Image Container class.
package image{
import flash.display.MovieClip;
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.display.Loader;
import flash.net.URLRequest;
import fl.transitions.*;
import fl.transitions.easing.*;
public class imageContainer extends MovieClip {
public var imageURL:String;
public var urlRequest:URLRequest;
public var imageLoader:Loader;
public var imageWidth:Number;
public var imageHeight:Number;
public var preLoader:Loader;
var mcImage:MovieClip=new MovieClip();
public function imageContainer(Imagewidth:Number,Imageheight:Number,url:String,path:String) {
preLoader=new Loader();
preLoader.load(new URLRequest(path));
preLoader.scaleX=2;
preLoader.scaleY=2;
preLoader.x=Imagewidth/2-preLoader.width/2;
preLoader.y=Imageheight/2-preLoader.height/2;
addChild(preLoader);
imageURL=url;
imageWidth=Imagewidth;
imageHeight=Imageheight;
loadThumb(url);
}
public function loadThumb(url:String) {
urlRequest=new URLRequest(url);
imageLoader=new Loader();
imageLoader.load(urlRequest);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,funcComplete);
function funcComplete(e:Event) {
removeChild(preLoader);
trace("Successfully Loaded");
imageLoader.content.width=imageWidth;
imageLoader.content.height=imageHeight;
mcImage.addChild(imageLoader.content);
TransitionManager.start(mcImage,{type:Fade, direction:Transition.IN, duration:3, easing:Regular.easeIn});
addChild(mcImage);
}
}
}
}
I have applied transition effect after loading of external image is completed. This class will help you save time in loading external images and applying pre loader to Flash action script 3.
Here goes the code for Using the Image Container class.
import image.imageContainer;
//Loading SWF
var im:imageContainer=new imageContainer(200,200,"001.swf","loader.swf");
addChild(im)
//Loading Image
var im1:imageContainer=new imageContainer(200,200,"Sunset.jpg","loader.swf");
var child = addChild(im1)
child.x = 300;
Kindly Let me know about your remarks if this article is being helpful in solving your problem.
Download Sample Project : Load Image Source Code
A running sample can be viewed at the following link
www.imaginationdev.com/actionscript-blog/samples/LoadImage/LoadImage.swf
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
Comments
hi ,
Its not a hard thing to do. Are you making it for learning purpose or you want to use it on a website.
Are you an action scripter or website developer.
Any ways i will prepare a sample slide show and will update the link here today
thank you
[Reply]
I have tried to load an external swf file and I have send the variables needed but the returned swf is huge the code is
import image.imageContainer;
//Loading
var im:imageContainer=new imageContainer(200,200,”index.swf”,”loader.swf”);
addChild(im)
var im1:imageContainer=new imageContainer(200,200,”Sunset.jpg”,”loader.swf”);
var child = addChild(im1)
child.x = 300;
the index file that I see at the projector is not 200X200 pixels
[Reply]
Saidur Reply:
December 21st, 2009 at 1:35 am
better if u can follow the following ways :
this.createEmptyMovieClip(”canvasname”,0);
canvasname.loadmovie(”swffile_name”,0);
canvasname._width=200;
canvasname._height=200;
okay thanks
[Reply]
Thanks for that.
I try with some .swf file. Some file show correct with width and height but some incorrect width.
Can you tell me why?
[Reply]
Try adjusting the hieght width in the load complete event manually.. still if you have problem send me screen shots on my email mentioned in above comments
Kindly send me your problem screen shots
to my email info@imaginationdev.com
Thank you
[Reply]
Thanks a lot for the code!
How would you go about removing a previously loaded swf/jpg? I spent hours on this and still cannot get it done and there is probably a simple solution to it.
thanks!
[Reply]
It is to hard to understand how to use pre-loader for a beginner. People spent hours to find good tutorial on “how to use Action script 3″. I suppose that the tutorial will definitely help in solving there problem.
[Reply]
Dear Admin,
Thanks for the code, what I wait for recently.
I still have my problem to implement into my flash
1) Can it work on Actionscript 2 ?
Caused I had the AS2 written dynamic text input from user. When I implement as attached flash child, the dynamic text does not show…………..
2) If I insert a picture, I want to rotate it to 45′C, What should I do ???
Eric
[Reply]
Razib Reply:
October 20th, 2009 at 8:42 pm
u can load dynamic text following way:
1. create a dynamic textbox with instance name “myloadtext”
2. create a external text file and write keep=ur text, then save it with urtext.txt name.
mydata=new Loaddata();
mydata.load(”urtext.txt”);
mydata.onLoad=function(a){
if(a==true)
{
myloadtext.html=true;
myloadtext.htmlText=this.keep;
}
}
[Reply]
Saidur Reply:
December 21st, 2009 at 1:39 am
1. create a dynamic textbox with instance name “myloadtext”
2. create a external text file and write keep=ur text, then save it with text.txt name.
mydata=new XML() // XML function variable
mydata.load(”text.txt”);
mydata.onData=function(data) //for load data
{
data=data.split(”\r\n”).join(”\r”);
myloadtext.text=data;
}
okay thanks
Saidur
From SWC
Bangladesh
[Reply]
can i import Eps, wmf, emf, pdf, ai, cdr files in swf dynamically using Action Script 3.
[Reply]
I’m new to AS3 and flash but have programming experience.
I want to use your code to run every “X” frame. I would like AS3 to call a php script that returns the path(text) to the next new image to be displayed. This make sense?
Basically a simple slide show that calls my php script to get the path to next photo…
Example:
- Flash movie begins….
- call php script via AS3, it returns “images/photo1.jpg”
- display “images/photo1.jpg” (with a nice fade effect).
- call php script via AS3, it returns “images/photo2.jpg”
- display “imges/photo2.jpg” (with fade effect).
- and on and on and on…… in a loop.
Thanks for any advice.
[Reply]
No you cannot import Eps, wmf, emf, ai, cdr files in swf dynamically using Action Script 3.
pdf might be imorted .. I guess we can import PDF files
[Reply]
Hi, Thanks for the cool flash stuff. I’m new in flash and i’m trying to make a small website just to learn flash. I’ve 4 sections, home, portfolio,products, contact etc.
in my portfolio page i wanted to load photogalley.swf and the following codes load the file but i also see ‘home’ ’s content as well. How do i hide ‘home’ page content so only photogallery.swf should show.
var imageRequest:URLRequest = new URLRequest(”MyPhotoGallery.swf”);
var imageLoader:Loader = new Loader();
menu.b2.addEventListener(MouseEvent.CLICK,b2Listener);
function b2Listener(event:MouseEvent):void {
sections.gotoAndStop(”portfolio”);
imageLoader.load(imageRequest);
addChild(imageLoader);
}
thanks
tim
[Reply]
Hi All,
Can any one tell me how can I call the btn1 action on click btn2?
E.g. There are tow buttons on the stage named btn1 and btn2.
btn1.addEventListener(MouseEvent.CLICK, btn1_clicked)
function btn1_clicked(e:MouseEvent):void{
trace(’you have clicked’);
}
btn2.addEventListener(MouseEvent.CLICK, btn2_clicked)
function btn2_clicked(e:MouseEvent):void{
//???? Here I want to call btn1 action. Can you tell me???????
}
Thanks,
Uday Singh
uday_sgh@yahoo.com
[Reply]
Hi Tim, make you home page content visible property to false
mcHome.visible = false
some thing like that
Thanks
Billy
[Reply]
Hi uday see the change i have done in your code .. if that can help ..
btn1.addEventListener( MouseEvent.CLICK, btn2_clicked )
function btn1_clicked(e:MouseEvent):void{
trace(’you have clicked’);
}
btn2.addEventListener(MouseEvent.CLICK, btn2_clicked)
function btn2_clicked(e:MouseEvent):void{
//???? Here I want to call btn1 action. Can you tell me???????
}
[Reply]
Hi,
You helped me with the script.
Thank you very much.
[Reply]
In looking over the code you presented I ws able to resolve issues experienced with a class I have been working on. My question:
As related to this line…
var child = addChild(im1);
Can the child be added from within the ImageContainer class? Why or why not?
Thanks.
[Reply]
Hi Thanks a lot for sharing!
But I would like to know how to declare and load dynamic numbers of images?
//Loading Image
var im1:imageContainer=new imageContainer(200,200,”Sunset.jpg”,”loader.swf”);
var child = addChild(im1)
child.x = 300;
//into
for(i=0;i<val.length-1;i++)
{
var im1+[i]:imageContainer=new imageContainer(200,200,”Sunset.jpg”,”loader.swf”);
var child = addChild(im1+[i])
}
I would like to do like this , but that cannot work , so could I know how to get that dynamic loading process?
Thanks in advance.
[Reply]
Razib Reply:
October 20th, 2009 at 8:37 pm
i thnk uu can load ur external image on the following way:
1. make a movie clip with inatance name myimage.
2. now write the codes on layer-2
myimage.loadMovie(”urimage.jpg”);
3. You can also set the property for ur loaded image:
sepProperty(myimage,_width,300);
sepProperty(myimage,_height,300);
sepProperty(myimage,_x,150);
sepProperty(myimage,_y,120);
sepProperty(myimage,_rotation,20);
sepProperty(myimage,_alpha,20);
[Reply]
Hi Mingus , Yes dynamic child can be added with in the class as the class is inherited by MOvieClip Class .. I guess that covers your question.
[Reply]
Hi Venassa yah that is totally possible. But you cannt just loop it around. To do that you need to controll the loading by using loadComplete Event. You have to load images one by one. Image container has a load complete event try handling that event in case you find it difficult email me at mbilal@imaginationdev.com
[Reply]
Fantastic code! It’s nice to see an ActionScript example that adheres to what I consider standard coding conventions… this actually answered a lot of my questions about AS3 since I’m new to it but have a lot of experience with ECMA. Kudos again!
[Reply]
hello,
how to play action script 2.0 file to action script 3.0
or how we can call action script 3.0 swf file to action script 2.0 should be run properly and i also attached the XML file to that AS 3.0 file.
Pls help me….
Thanks
[Reply]
admin Reply:
June 18th, 2009 at 2:17 pm
Please explain a bit more. Loading an swf file in flash as is easy see this post
http://actionscript-blog.imaginationdev.com/19/load-external-image-and-swf-flash-action-script-3/
for as2 there should be no problem as well.
[Reply]
GAngadhar Reply:
June 18th, 2009 at 11:07 pm
i made a file using action script 3.0 and i want when i click on AS3 file button then AS2 swf file should be loaded.
pls help me…
Thnks
Gangadhar…
[Reply]
Plz solve my probs :
1. load a external image like the following way:
movieclip_name.loadMovie(”image.jpg”);
now i want to animated this loaded image. how it it possible ?
[Reply]
praise to your greatness. took me so fucken!!!!!!! long to find a working as3 transition
[Reply]
Hi,
I noticed one particularly annoying error when utilizing this code online. During image load, because there is an assumption that images load immediately (during the imageContainer constructor), the Flash object emits an IOError.
The fix is simple: Add an IOError handler inside the class.
Immediately after the following line:
preLoader = new Loader();
Add the following:
preLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
function ioErrorHandler(event:IOErrorEvent):void
{
trace(”ioErrorHandler: ” + event);
}
This captures the error, preventing the end-user from seeing the popup.
Thanks!
- Peter
[Reply]
Thank you for the code Admin!
I’m trying to preload a SWF. The SWF contain a FLV. I follow your instructions to preload a SWF and looks fine. I guess that is the same for mp3 or another stuff, isn’t it?
Thank you ![]()
[Reply]
How to communication between flash & php?
[Reply]

Hi,
Thanks for that. (I sort of understand it!)
I am trying to make a flash slide show that can take 3 or 4 jpegs, repeating with dissolves in between. I want to load the images using Actionscript,, so that the viewer will see something as soon as first image is loaded, and have the images stored so that they do not have to be downloaded repeatedly.
Is that very hard to achieve?
Thanks,
Eoin
[Reply]