dynamically loading jpgs and sizing the movie appropriately

[digstance]

Hello everyone. I am creating a site that the client needs to update themselves. The site will showcase a photographers photos. I am going to call all the jpgs in off the server with the loadMovie command and was wondering if it is possible to check the size (pixels) of the jpg and then scale an MC to match it, plus a 20 pixel border of extra space around it?

Am I making sense? Does anyone have any idea how this can be done?

thanks in advance for any replies..

[pellepiano]

On the movieclip you are loading the images into you can have the size changed...

onClipEvent(load){
// Scale loaded image down to 75 % of original size
this._xscale=75;
this._yscale=75;
}

You can use height and width too or have a generic formula for the sizes ).

To have a border, make that a separate movieclip and give it the instance name of canvas and place that also on stage. You can control that from the image movieclip and add some code...something like this...

onClipEvent(load){
// Scale loaded image down to 75 % of original size
this._xscale=75;
this._yscale=75;
_parent.canvas._height=this._height+20;
_parent.canvas._width=this._width+20;
_parent.canvas._x=this._x-10;
_parent.canvas._y=this._y-10;
}

You have to experiment a little with those numbers, depending on where you have your registration point in relationship with the graphics inside the canvas clip.

If you also want movement in resizing and stuff things get a little more complicated but is doable ( example www.maxschultz.com/pp ).

[digstance]

pellepiano, thank you for your reply. The link you included (www.maxschultz.com/pp ), awesome btw, is exactly what I want to do except with the registration point being in the middle, how do I go about this?

thanks again for your reply..

[pellepiano]

Its a little to much to cover here but its basically just 3 movieclips in the whole fla ( thumbnail, container and canvas ). The thumbnail clip is duplicated 20 times and they will each load its thumbnail jpg based on the contents of a textfile with variables for description, image name and so on. The textfile is updated from a administration section within the gallery ( only available if viewed from another html page ). There is also a upload section to upload images without ftp. Its a quite complicated fla.

But basics on resizing ( animating ) the canvas movieclip( or anything ) to the size of the container......


onClipEvent (enterFrame) {
// Make canvas dynamically resize to whatever is loaded in container clip
this._width += (_root.container._width-this._width)/7;
this._height += (_root.container._height-this._height)/7;
}

[digstance]

thanks I will give it a try, is the "/7" what makes it animate to the size?

also assuming I need to leave a little white space around the image does the following code make sense?:

onClipEvent (enterFrame) {
// Make canvas dynamically resize to whatever is loaded in container clip
this._width += (_root.container._width-this._width+20)/7;
this._height += (_root.container._height-this._height+20)/7;
}

[pellepiano]

/7;

That is the speed.

_root.container._width

That is the target width that the canvas will adjust to, so its that you want to give some extra pixels.

[digstance]

ok I got it working and I would like to say thank you. I have been searching the boards and I see allot of threads on this topic and you are in allot of them. I appreciate your patience and willingness to help out the less actioscript inclined people like myself.

That being said I have more questions! How can I get the bg to resize before the jpg gets loaded?

[pellepiano]

You need a preloader to check when the image is loaded. When the image is loaded and the canvas is done resizing, then you would show the image ( wich means you have to make the container _alpha=0; from the start ).

The simplest way to start with I think would be to have this on the container clip. Something like this....

onClipEvent (enterFrame) {
// Make canvas dynamically resize to whatever is loaded in container clip and width and height matches
this._width += (_root.container._width-this._width)/7;
this._height += (_root.container._height-this._height)/7;
// Show container only when something is loaded into it
if (math.round(_root.container._width) == math.round(this._width) && _root.container.getBytesLoaded>1000) {
_root.container._alpha = 100;
} else {
_root.container._alpha = 0;
}
}

[digstance]

thanks so much for all your help. I am going to start trying to put this all together.

Thanks again!

[pellepiano]

Sorry, I meant previous code should be on the canvas clip, of course, not the container clip.

[digstance]

I have this all set up and have encountered a strange problem and was wondering if you could help me a little further..

The jpgs are loading in fine but the issue is with the alpha. It seems as though it's not taking it from 0 to 100 with the code below:

onClipEvent (enterFrame) {
// Make canvas dynamically resize to whatever is loaded in picholder clip and width and height matches
this._width += (_root.picholder._width-this._width+20)/7;
this._height += (_root.picholder._height-this._height+20)/7;
// Show picholder only when something is loaded into it
if (math.round(_root.picholder._width) == math.round(this._width) && _root.picholder.getBytesLoaded>100) {
_root.picholder._alpha = 100;
} else {
_root.picholder._alpha = 0;
}
}

the background which is the MC that this code is placed on is being sized appropriately but the _alpha is not changing from 0 to 100.

Any help is greatly appreciated...

[pellepiano]

Its probably because of the 20 pixels you add to the width.
When you later compare the widths inthe IF statement you dont take the 20 pixels into account.

And there was a () missing in the getByteSloded ( my mistake ). try this...

onClipEvent (enterFrame) {
trace(math.round(_root.picholder._width));
trace(math.round(this._width));
// Make canvas dynamically resize to whatever is loaded in picholder clip and width and height matches
this._width += (_root.picholder._width-this._width+20)/7;
this._height += (_root.picholder._height-this._height+20)/7;
// Show picholder only when something is loaded into it
if (math.round(_root.picholder._width+20) == math.round(this._width) && _root.picholder.getBytesLoaded()>5 ) {
_root.picholder._alpha = 100;
} else {
_root.picholder._alpha = 0;
}
}

Images dimension can not have decimals ( no 403,5 pixels but 403, otherwise the width comparison will fail ).

[digstance]

awesome it's working, thank you so much for your help.

[pellepiano]

I missed a thing a gain...

It should be....

getBytesLoaded()>1000 ) {

[digstance]

the saga continues..

It seems as though I am having another problem. It all works great except for the fact that the bg shrinks itself down to a very small size, then resizes itself to be that of the loaded in pic..

How can I get it to stay at it's current size, then scale to fit the newly loaded pic?

thanks once again for any replay you may offer..

[pellepiano]

It does that because of the moment you load a new image, there is a 10th of a second or so that the container is empty and the canvas follows the containers size at all times. To correct it you have to see to it that the canvas only resizes when there is something loaded into the container.

Its to late for me to think at the moment, but maybe put the whole code inside a getBytesLoaded()<=getBytesTotal() if statement, sort of like a preloader.

[rmmt]

i'm making something similar.. but of course it's not done yet.

www.quirkworks.net - photography

been trying to figure out a way to speed up the resizing when the pictures are 20 or more.. it slows down like heck.

of course, i'm gonna add code which allows the person to view the larger pic.. but i'm grilling myself (and people here in flashkit) to find out how to optimize the code first before i go any further.

[leftfootleashed]

Pellepiano,
Thanks for your previous replies to this thread they have been very helpful. However I have a question: going back to simply loading the jpgs into a mc, is it possible to resize them individually without creating a different variable for every jpg?
Thanks in advance,
Dan

[pellepiano]

I dont follow. There is no variable that is unique for every imge, is there? Only the image name differs.

[leftfootleashed]

Sorry, you're right, I didn't make sense. What I could do is create a variable and change it each time I load a new jpg, which I could then use to resize a jpg depending on which one it is. Is there an easier way to do this?

Might be clearer if I put it into code:
where the jpg is loaded:
loadMovie("woteva", "targetmc");
picId = "thispic"

in the mc that the jpgs are loaded into:
if(picId = "thispic"){
this._x=123
this._y=123
}

this is fine but I would have to put else if statements in for all the pictures (I have about 100 and aim to have more) if there is no other way of doing it.
Thanks for your help
Dan