Loading images into Flash dynamically from a Smarty template
Another project just had a small problem and I was called in to solve it. The question was how do we load all the images into Flash from a specific directory? The end goal is to setup a nice gallery. Well below is probably the easiest way to do it if not the most beautiful.
We basically find out where we are with the help of the PHP $_SERVER global and assign that information plus the rest of the path to the image directory in the {$image_folder_url} variable. We also assign all the images in the folder to {$image_list} in the form of a “;” delimited list.
<script type=”text/javascript”>
{literal}
function getImages(){
{/literal}
var to_flash = new Array();
to_flash[0] = “{$image_folder_url}”;
to_flash[1] = “{$image_list}”;
return to_flash;
{literal}
}
{/literal}
</script>{$image_list} could look something like: “image1.jpg;image2.jpg” and {$image_folder_url} something like http://localhost/myproject/images.
In flash we call the above Javascript function and split it up. We are now ready to use the imageNames array to load the images with the help of the loadMovie() function. Or maybe the MovieClipLoader class if we want to to do something more fancy:
import flash.external.*;
var info:String = String(ExternalInterface.call("getImages"));
var infoArr:Array = info.split(',');
var basePath:String = infoArr[0];
var imageNames:Array = infoArr[1].split(';');
var upper_limit:Number = 10;
if(imageNames.length < upper_limit)
upper_limit = imageNames.length;
_root.canvas_mc.canvas_target.loadMovie(basePath+imageNames[0]);
for(var i:Number = 0; i < upper_limit; i++){
var cur_image:String = basePath+imageNames[i];
_root["mc_"+i].cur_image = cur_image;
temp = _root["mc_"+i].createEmptyMovieClip("thumb", _root["mc_"+i].getNextHighestDepth());
temp.loadMovie(cur_image);
_root["mc_"+i].onRollOver = function(){
this._alpha = 50;
}
_root["mc_"+i].onRollOut = function(){
this._alpha = 100;
}
_root["mc_"+i].onRelease = function(){
_root.canvas_mc.canvas_target.loadMovie(this.cur_image);
}
}
_root.onEnterFrame = function(){
for(var i:Number = 0; i < upper_limit; i++){
this["mc_"+i]._width = 50;
this["mc_"+i]._height = 50;
}
this.canvas_mc._width = 510;
this.canvas_mc._height = 333;
}This is a really ugly solution. Notice that we scale the image we currently display to 510*333 without any regard for aspect ratio in order to keep the image within bounds (the size of the movie is 510*383).
Related Posts
Tags: actionscript 2.0, flash, PHP, Smarty