Subscribe to Tutorial Feed

Flash and PHP Bible

The Flash and PHP Bible has been released! The book can be found on Amazon or wherever fine books are sold in your area.

The Flash and PHP Bible has a forum for quick support.

Scriptplayground » tutorials » as » Load Images In Flash From PHP

Load Images In Flash From PHP

Load images into Flash from variables in a php file.

This week we will work with loading images in Flash from PHP variables. This basic example can easily be adapted to a full program with database calls and all the bells and whistles.

Source Files and completed project available for download to quickly get started.

You can download the accompanying zip file that contains the starting and completed file. If you choose to use the provided file then just skip on over to the "Coding Fun" section otherwise we will move on to setting up the stage.

Getting Started

  • 'CTRL + N' to create a new flash document with a size of 500x300
  • Create a layer "actions" and lock it, to prevent editing
  • Create a rectangle 'R' and Convert To Symbol 'buttonMC'

Now that we have the basic elements setup we will move on to the code.

Coding Fun
Open the Actions Panel F9 and we will begin going through the code used in this example. You will first see a block of code and then it will be explained.

function loadImage(id:Number) { 
  var resultLv:LoadVars = new LoadVars();
  var sendLv:LoadVars = new LoadVars();
  resultLv.onLoad = function(success) {
     if(success) mcLoader.loadClip(imagePath + this.image, loadContainer);
  }
  sendLv.sendAndLoad(phpPath + "?id=" + String(id), resultLv);
}

This function will load in image, taking an id as an argument. We need to setup 2 loadVars objects. One to load the PHP and another to trap the result from the PHP. Next we have an onLoad function that is called when the PHP file is successfully loaded (this example does not account for errors). Inside this function is where you will find our loadClip() method which we will explain a little later on. Finally we have our sendAndLoad which calls the PHP, passes in the path and the object to store the response.

var loadButtons:Array = new Array('loadBtn1','loadBtn2','loadBtn3','loadBtn4','loadBtn5','loadBtn6');
var loadContainer:MovieClip = this.createEmptyMovieClip("loadContainer", this.getNextHighestDepth());
var siteUrl:String = "http://www.mysite.com/";
var imagePath:String = siteUrl + "path/to/images/";
var phpPath:String = siteUrl + "path/to/loadImages.php";

Most of that is straightforward. We have our array of buttons that we dragged to the stage. An empty movieclip where our loaded image will end up. Then we have 3 variables containing the site path, image path and php path.

var mcLoader:MovieClipLoader = new MovieClipLoader();
var mcLoadObj:Object = new Object();
mcLoadObj.onLoadInit = loadInit;
mcLoader.addListener(mcLoadObj);
loadContainer._x = loadContainer._y = 10;

Next we initialize a new MovieClipLoader and assign our listeners, so let's get started. mcLoadObj is an object that we attach our listener methods to. onLoadInit is called once the image is loaded and visible. addListener accepts one argument which is the object we used to attach our methods to. Finally for visual purposes we nudge the empty clip 10 pixels on both the X and Y axis.

function loadInit(target:MovieClip) {
  trace("File Loaded");
}

A simple function that you can use to preform tasks now that the image is loaded.

function assignButtons() {
  for(var i in loadButtons) {
    this[loadButtons[i]].numberTxt.text = String(Number(i) + 1);
    this[loadButtons[i]].onRollOver = function() {
      this.gotoAndStop(2);
    }
    this[loadButtons[i]].onRollOut = function() {
      this.gotoAndStop(1);
    }
    this[loadButtons[i]].onRelease = function() {
      loadImage(Number(String(this).substring(String(this).length - 1))-1);
    }	
  }
}

This function is semi-advanced and is only used to simplify the proces of assigning rollover, rollout and click events to our buttons. Basically it is an open-ended loop that runs through the loadButtons array and assigns our events as described a second ago. The loadImage function is called within the onRelease function to start the process of loading an image.

assignButtons();

The last step on the Flash side is the magic line that calls the button assignment function.

Next up, PHP Code
Now that we have the Flash portion squared away let's move onto the PHP code.

<?php
$imageId = $_GET['id'];
$images = Array('img1.jpg','img2.jpg','img3.jpg','img4.jpg','img5.jpg','img6.jpg');
if(is_numeric($imageId)) {
  print "image=" . $images[$imageId];
}
?>

This part is simple in the example, but you really should add a lot more security for a live application. We first grab the id from the url using the super variable $_GET. Then we assign a list of images that will match an id. The last step is to send back the image name to Flash from our image array by referencing the id we passed in.

That is basically it for this tutorial. You should now have a fully working image loader that is getting the image name from a PHP file.

I haven't uploaded a working example, but here is a screenshot of the finished application with an image loaded.

Here is a live example use for loading images that I created. It takes this tutorial to a completely new level with dynamic reflections, multiple images and all input for the user to load in their own image.

Follow Scriptplayground on Twitter (@scriptplay)

Comments: Load Images In Flash From PHP

 molly  Wed Apr 25, 2007 9:43 am  
HELP WITH THIS THINGY
 mkeefe  Wed Apr 25, 2007 7:44 pm  
Sure would like to help, but you need to tell me how I can :)
 Someone who gives a shit   Fri Oct 19, 2007 12:22 pm  
Hey listen, how can i make 2 or more MCs, and the images will devied to em all? like, i have pictures named: pic1, pic2, pic3 and so on... and so on....
and i need that pic1 will apper on the first mc, picture 2 on the second mc... how can i do that?
 nico@nicopablo.com  Sat Oct 27, 2007 2:21 pm  
Looks like just what I'm looking for. Thanks for the code.
 poonam  Sat Feb 16, 2008 3:05 am  
Hi,
I found this thing really interested.
But i want some flash when a thumbnail is clicked on my website and then the full image opens.
I hope you understand what i am looking for.
Can you help me in doing that. If you have solution for that please e-mail me webmaster@picsnwallpapers.com
Thanks..
 adriana  Wed Feb 20, 2008 3:22 am  
nice tutorial..Im just so confuse ...Im asking myself i I can use your turorial but, creating a "search" function where the user can select few product.Nobody can help me with this!! it should be not difficult I made it using html with php, now how can I use it In Flash with php??
could u help me, pleasee???
Adriana
 Alex  Fri Jan 16, 2009 9:16 am  
Tks for this tutorial.
Itīs possible with ASP? You know some tutorial? Let me know, please.
tks
Alex
 mkeefe  Fri Jan 16, 2009 9:19 am  
@Alex - I am sure it is possible, but I do not follow ASP. Although PHP and ASP do share similarities so it shouldn't be that hard. If I come across something I will post it.
 Chris  Wed Sep 23, 2009 3:49 pm  
Hi
Thanks for the great tutorial!

I am adapting this for a project. Is it possible to have an image load as soon as the application (flash movie) loads? I need an image to load straight away without using the buttons to start the loadimage function. I dont know how to do this though...Can you help?

Thanks!
 mkeefe  Wed Oct 14, 2009 3:07 pm  
@Chris - Yes, you would want to create an "onLoad" function which would be triggered when the Flash file is loaded. Look into Event.COMPLETE and contentLoaderInfo for more help.
 clentfocs  Thu Jan 14, 2010 8:12 pm  
Sir.. how about loading a variable that contains image from php, to a flash loader..
 mkeefe  Wed Jan 20, 2010 6:17 am  
@clentfocs - Do you mean load the image data from PHP or just dynamically pass the image path?
 liz  Wed Sep 22, 2010 4:16 pm  
Hi.
This tuturiol looks perfect for a new website I'm planning. I'm assuming that the images have already been loaded to the database prior to the php script calling them into flash?
I'm loading images via php - into a MySQL database. Is that correct?
 Jairo  Thu Nov 18, 2010 2:26 pm  
Hi, Do you guys have a tutorial that explains how to use this model to load the images from a MySQL database? Thanks.
Add a comment
The ability to add new comments has been disabled in this archived version.

Loading
Main | Tutorials | Articles