Image load issue

1

I’m having trouble with some code which works within Flash but stops working when opened in a browser. At the moment, i want flash to load an image and dynamically draw a border around it. This is what i’m trying to do:

  1. Draw rectangle - which will eventually display the preloading status
  2. Preload image
  3. Get image attributes and resize rectangle accordingly to create border
  4. Fade in image

It works when i’m testing it in Flash but refuses to work in a browser situation. I’m pretty sure it’s trying to resize the rectangle before the image is loaded but i’m not sure why. Here’s the code:

//prepare picture frame
function pFrame() {
createEmptyMovieClip(‘pf’, 1000);
pf._x = 0;
pf._y = 0;
drawInitFrame();
preLoadImage();
}

//draw initial picture frame
function drawInitFrame() {
with (pf) {
beginFill(0xFFFFFF, 100);
lineStyle(1, 0xFFFFFF, 100);
moveTo(0,0);
lineTo(60,0);
lineTo(60,40);
lineTo(0,40);
lineTo(0,0);
endFill();
}
}

//preload the image
function preLoadImage() {
createEmptyMovieClip(‘pic’, 1001);
pic._alpha = 0;
pic._x = pf._x+5;
pic._y = pf._y+5;
pic.loadMovie(image[p], 1);
this.onEnterFrame = function() {
filesize = pic.getBytesTotal();
loaded = pic.getBytesLoaded();
if (loaded != filesize) {
statusTxt.text = "LOADING “+loaded+” / "+filesize;
}
else {
expandFrame();
this.onEnterFrame = null;
}
}
}

//load the image
function loadImage() {
this.onEnterFrame = function() {
filesize = pic.getBytesTotal();
loaded = pic.getBytesLoaded();
if (loaded != filesize) {
statusTxt.text = "LOADING “+loaded+” / "+filesize;
}
else {
expandFrame();
this.onEnterFrame = null;
}
}
}

//expand picture frame to fit image
function expandFrame() {
textarea = 50;
pW = pic._width+((pf._width/pf._height)*10); //frame width needs correction relative to image width for some reason
pH = pic._height+textarea;
pf.onEnterFrame = function() {
if (pf._width < pW) {
pf._xscale += (pW-pf._width)/5;
}
if (pf._height < pH) {
pf._yscale += (pH-pf._height)/5;
}
else {
pf.onEnterFrame = null;
pFade();
}
}
}

//fade image in
function pFade() {
pic.onEnterFrame = function() {
if (pic._alpha < 100) {
pic._alpha += 10;
}
else {
pic.onEnterFrame = null;
}
}
}