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.