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.

Code:
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.

Code:
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,

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]

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:

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]

Saidur Reply:

When we uses _width & _height property it does not worked properly on AS2. This property perfectly worked on AS3. So that u can use _xscale for chage width and _yscale for change height.

Thanks

[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:

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:

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]

Mardok Reply:

There are two ways to do this. Neither are simple because of the nature of PHP and Flash. PHP is script run on the server and ActionScript is run from the client. Without a Dameon (Script running on your server to listen to requests from the client) to listen to the client you would have to reload the page every time you load a picture to make a new request to the PHP script.

If your going to run a Dameon, which is hardcore scripting, here are some sites that will help. Make sure that your server you are hosting through allows socket connections and the running of Dameon scripts.

http://flashmog.net/index.php
http://amfphp.sourceforge.net

Or you could reload the page with each new pic, which will not look as good.

Good Luck

Mardok

[Reply]

HI, mattg : Try using ONEnterFrame event in AS3.

Thank you

[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 Eric_kung:

canyou explain your problem a little more

Thank you

[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:

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:

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:

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]

stimulate suit that it is feasible to use for paraphernalia growing thin?
viagrafix

[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]

How to communication between flash & php?

Regrads
Md. Saidur Rahman
Flash Web Developer

[Reply]

Fahim Akhter Reply:

@Saidur , try AMFPHP or local connections

[Reply]

Hi,

I have an old code in ActionScript 2.0 that I want to translate to ActionScript 3.0 but taking me real hard times to do - can anyone kind to help? Here’s the old code:

function showNext()
{
imgList.push(imgList.shift());
al.load(imgList[0]);
} // End of the function
imgList = ["img1", "img2", "img3", "img4", "img5", "img6"];
setInterval(showNext, 9000);

Thanks,

eric

[Reply]

hey im making an image gallery and i don’t know how to remove pictures that i have loaded already. how do i make them disappear? haha

[Reply]

I am getting a policy file issue how to resolve it?

[Reply]

HI.. and i change the loading clour please help

Regards,

Vini

[Reply]

Ive got a problem.
Ive got a program in AS 2. But i need to import something useful in AS 3 How can i do it?

[Reply]

Thank you for all.

[Reply]

How can I add a dynamic image to a pdf using ColdFusion 8? I do have the image stored in the database as binary. I would like to use the <cfpdfformparam capability sending the binary to a named form field if possible? If not, can you direct me to some simple action script where it can pick up the jpg from the web site? ANY - ALL help would be appreciated.

[Reply]

Hi!
Nice code, work well :)
I need help to import the clip not in a new movieclip but inside another one because i don’t want the loaded clip to be above the others…
Can you help me out ?

Thanks!!

[Reply]

Hi ..

thanks

but i didn’t understand it very well

My problem is i want to load a SWF file when click on a button (SCRIPT 3 )

i tried many ways but i couldn’t find the right one ..

PLEASE HELP !

THANK YOU

[Reply]

same problem, how to make it work on click?

[Reply]

Hi this is a great bit of code!,
i also would like to do what Vanessa was saying in the earlier post! ie. it was something like this

for(i=0;i<val.length-1;i++){
var im1+[i]:imageContainer=new imageContainer(50,50,”image”+”i”+.jpg”,”loader.swf”);
var child = addChild(im1+[i])
}
i am having trouble with it though… i used to use “baseurl” for this type of thing but as3 won’t seem to allow!
please help
thanks in advance
Gavin

[Reply]

hi Everyone,
great bit of code and very self explanatory, sorry i knw this is a few months old … maybe someone can help me.
the loader is always off centre but when i look at the code it shouldn’t be. the loader.swf always seems to orient it’s top left, to the image container’s centre.
but in the .as file it does say this.

preLoader.x = Imagewidth/2-preLoader.width/2;
preLoader.y = Imageheight/2-preLoader.height/2;

so why is it not working?
i’m publishing to flash player 9 as3 and took off the “match contents attribute” from the document properties.
to no avail..
please help
Thanks
Gavin

[Reply]

Extremely Helpful…….. loading external images is really a big problems for beginners like me……… I had been looking for this solution for many days and finally found it. after that i changed it according to my needs.

[Reply]

hello, can you make it unload as well?

[Reply]

Leave a comment

(required)

(required)