Link to home
Start Free TrialLog in
Avatar of Blair Benjamin
Blair BenjaminFlag for United States of America

asked on

Adding relative paths to a Flash action script for random image display

I found a solution here on this forum, but it isn't quite as flexible as I need it to be.  I suspect the fix is rather simple, but I need some help.  This script was offered on another solved topic (Q_21635201.html), but I'll include it here too (my question follows).  In a nutshell, it loads images from a specified directory and cycles through them randomly.  My application here is a header/banner image.

To see this working without doing anything with the code, in the same directory as the published swf, you need a directory "images" and then 4 jpg images numbered img1.jpg / img2.jpg / img3.jpg / img4.jpg.

var mc_container:MovieClip = this.createEmptyMovieClip("mc_container", 0);
// highest numbered img
var highest_num:Number = 4;
var directory:String = "images/";
var naming:String = "img";
// create the image array
var imgArr:Array = new Array();
// for positioning purposes
var img_width:Number = 370;
var img_height:Number = 170;
var interval:Number;
function populateArr(Void):Void
{
      for (var i = 1; i<=highest_num; ++i)
      {
            var img_name:String = directory+naming+i+".jpg";
            imgArr.push(img_name);
      }
}
populateArr();
var currentclip_mc:MovieClip;
var fade_rate:Number = 5;
var firstone:Number = 0;
var count:Number = 0;
function loadImg(mc:MovieClip):Void
{
      clearInterval(interval);
      count++;
      var imgobj:Object = getrange();
      var imgtoload:String = imgobj.imgtoload;
      var depth:Number = imgobj.depth;
      // Load img
      var img_mc_container:MovieClip = mc_container.createEmptyMovieClip("img_mc_container"+count, count);
      var img_load:MovieClip = img_mc_container.createEmptyMovieClip("img_load", 0);
      img_load.loadMovie(imgtoload);
      img_mc_container.currentclip_mc = mc;
      // Center on stage
      img_mc_container._x = (Stage.width-img_width)/2;
      img_mc_container._y = (Stage.height-img_height)/2;
      // hide
      img_mc_container._alpha = 0;
      img_mc_container.onEnterFrame = function()
      {
            if (this.img_load.getBytesLoaded() != 0 && this.img_load.getBytesLoaded() == this.img_load.getBytesTotal())
            {
                  if (this._alpha<100)
                  {
                        this._alpha += fade_rate;
                  }
                  if (firstone>0)
                  {
                        if (this.currentclip_mc._alpha>0)
                        {
                              this.currentclip_mc._alpha -= fade_rate;
                        }
                        else if (this.currentclip_mc._alpha<=0)
                        {
                              this.currentclip_mc.removeMovieClip();
                              interval = setInterval(loadImg, 3000, this);
                              delete this.onEnterFrame;
                        }
                  }
                  else
                  {
                        if (this._alpha>=100)
                        {
                              interval = setInterval(loadImg, 3000, this);
                              firstone++;
                              delete this.onEnterFrame;
                        }
                  }
            }
      };
}
// this function just returns a number between 2 numbers, in this case 0 and myarray's length - 1
function getrange(Void):Object
{
      // length of null array  
      var min:Number = 0;
      // top of the array containing data is always [array length] - 1
      var max:Number = imgArr.length-1;
      var randnum:Number = Math.round(Math.random()*(max-min+1)+(min-.5));
      // get rid of the selection so can't do it again
      var imgtoload:String = imgArr[randnum];
      trace(imgArr[randnum]);
      imgArr.splice(randnum, 1);
      var obj:Object = ({imgtoload:imgtoload, depth:randnum});
      if (imgArr.length<1)
      {
            populateArr();
            for (var i = 0; i<imgArr.length; ++i)
            {
                  if (imgArr[i] == imgtoload)
                  {
                        imgArr.spice(i, 1);
                        break;
                  }
            }
      }
      return obj;
}
// Start App
loadImg();


This script is exactly what I was looking for, but I have encountered one problem with it that I'm hoping someone can help me with.   When I insert the flash file containing this code into my html page, the flash file displays just fine, except that the random image display aspect of it only works if the html file resides in the same physical directory as the .swf file.   This is a bit of a problem because I'd like to include the .swf file in other pages at other levels of my site hierarchy.  But apparently the script looks for the random image folder relative to the html file rather than relative to the .swf file that actually references it.   Does anyone have any tips for how I could resolve this?
Avatar of trigger-happy
trigger-happy
Flag of Philippines image

This is rather tricky since flash really uses the html's current directory for referencing rather than the swf itself. My suggestion is to pass the base directory (probably the directory where the swf file resides in) as a parameter to the swf file. The swf file will then use the passed parameter as the base directory to access the stuff from.

To explain better, suppose that your html file resides in the root directoy and the swf file is in the "stuff" subdirectory. When you embed the swf file into your html page, you normally specify the subdirectory where the file is located together with the swf file name. All you would have to do is add a parameter to the swf being loaded whose value contains the subdirectory where the swf resides. In the swf file, all you have to do is add the value of the passed parameter before the URLs you're after.

--trigger-happy
Avatar of Chinmay Patel
Hi,

I made a Flash App which displayed images but in a controlled manner. I used XML files to get this done. If you are alright with XML then I can send you the code.

Regards,
Chinmay
Avatar of Blair Benjamin

ASKER

Trigger-happy,

Your suggestion sounds like it would be  a perfect solution and make this script do what I need it to do.  Would you be willing to elaborate on the idea of passing parameters to an .swf file?  Is that done in the html itself, or the action script in the .swf, or what?   That concept is a little new to me in the context of flash.  So I'm not sure what this would look like.  I think we're on the verge of a solution here, which is encouraging to me, as this has been a frustration.  I appreciate it!

Blair
ASKER CERTIFIED SOLUTION
Avatar of trigger-happy
trigger-happy
Flag of Philippines image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
trigger-happy,

Thanks for the tip.  I played around with it for a while and was able to have pages in a different level of my site hierarchy succesfully run the flash file and display the random images.  However, if I understand this correctly, I'll have to update those parameters in every .html file that contains/calls the .swf file?  How would this work if this flash file is the main banner image used throughout my site and included in a dreamweaver template?  In such cases, these parameters would typically only be modified in the template itself.  Yes, it is possible to make specific parameters an editable region in a dreamweaver template.  However, is it a pipe dream to think that this flash file could be part of a template and would work on any page where the template was applied without further modification of parameters for each page?   Just wondering.  
Hi,

In this case, you can pass a standard variable to the SWF, say directory and you can change the value of that variable per page. This way the variable's value will change as per the given page.

Regards,
Chinmay
Chinmay,

Thanks for chipping in here.  However, I'm not sure I see how this is any different, but perhaps I'm missing something.  If we have to manually change the value of the variable per page, that's what I already have to do.  Could you elaborate?

Thanks.
If you're using static html pages, then the only possible solution i could think of would be to use javascript. Not sure if its possible but it may be the only option for static pages. If you're using dynamic ones like php then it would be a whole lot simpler... well, in essence...

--trigger-happy
Hi There,

Yeah. Thats it. Thats what I have. Can you use AJAX in this case? I mean your static page will query a dynamic page for a Javascript variable value? So you dont have to convert your pages to dynamic pages.

Regards,
Chinmay
I'll play around with using either javascript or php to perhaps pass some variables to accomplish this.  However, my main concern has been addressed, which was to make my flash project with random images work regardless of what directory the html file is in.  I'm quite grateful for your insights into this matter!  
Just to follow up for anyone else who might ultimately benefit from this thread, I modified the above code in the initial question as follows to make this work:
added the following line:
var directory:String = _root.var1 + directory;
right before the following line:
var naming:String = "img";

In my html page, I added the following line:
<PARAM NAME="FlashVars" VALUE="var1=flash/" />
 inside of the <object> tags.

And also added
FlashVars ="var1=flash/"
as an attribute to the <embed>
tag for the flash file.

These attribute values assume that the html file is at the bottom level of the site hierarchy and the images folder for the random images is within a subfolder called "flash".  If the html file was instead two levels deeper in the hierarchy, the above tags would have attribute values of "../../flash/" instead of just "flash/".

I hope this follow-up can benefit someone else like the others have helped me.