Another goofy MX quesiton regardng preloading for external JPEG's

[aamiic]

I want to preload, and possibly use a transition to bring the image into focus once loaded.. I assume I use the same idea as a preloader for a movie, but need a little guidence?

[aamiic]

Ok, got the image to load dynamically on a button press, now I'd like to know how I'd go about having a 'loading bar' icon for larger images that I'll be displaying..

[aamiic]

No one?

[lostinbeta]

Nope, I don't know. I tried it once before and all mine would do is say 0% then stay there then say 100% and show the picture, so it was pretty useless.

Sorry man.

[pom]

I don't understand your question :beam:

1. Did you solve that "Come into focus" thing?
2. What do you mean a 'Loading Bar' icon? Are you talking about a preloader for you jpegs?

[lostinbeta]

I believe they mean a preloader for your dynamically loaded .jpg images. Where it shows a preloader bar in place of the empty area that normally shows and then shows the image when it is done loading.

Note: I would be INCREDIBLY grateful if you could answer this one Ilyas. As I said about my last one, it failed miserably and I couldn't figure it out, it drove me nuts! And I am really looking for one for something I want to do.

[pom]

Well, it's no different from an swf preloader :trout:

If you have a container clip in your timeline, something like this should work:
this.createEmptyMovieClip("preloader",1000);
container.loadMovie("myJPG.jpg");
container._visible=false;
preloader.onEnterFrame=function(){
var l=container.getBytesLoaded();
var t=container.getBytesTotal();
if (l > 0 && l >= t){
container._visible=1;
delete this.onEnterFrame;
}
else {
// stuff with your loading bar
}
}Am I answering your question? sorry if I'm not, it's still early here :P

[lostinbeta]

It is early here too... 4am. This sounds right though, thanks. For some reason I tried something just like this but it didn't work. I want to try it again now.

[pom]

Get some sleep first :P

[lostinbeta]

Me? Sleep? Whats that?!?!?!

Anywho, it isn't working. It says that container is undefined in the trace window. Now that I have a base (that looks almost exactly like what I had before :-\) I will keep at it.

And yes... i know container is a clip I have to make... before you say something smart...lol.

[lostinbeta]

HEHEHE... got it. Damn typos... switch some letters and it doesn't want to work. What is up with that!?!.... :trout: <-- to me.

[aamiic]

Thanks guys, and yes that's exactly what I was looking for, sorry I didn't explain it more.

I'll try this tommorow!

:)

[pom]

Come on people, let's all :trout: Lost!



:evil:

[Marz]

Allright a ceremonius trout slapping for beta!

:trout::trout: :)

[Fade-away]

may i paticipate? :trout: :trout: :trout:

But, DAMN lost..you are one creative mofo, ill be looking for your name in the future, keep up the good work :trout:

[lostinbeta]

hehehe, I almost forgot about my stupid mistake :trout:

And thanks fade-away :)

[aamiic]

Ok, maybe I'm a bit in over my head, could someone show me how you go about placing the loading bar?

A sample FLA would be greatly appreciated.

Mucho thx.

[lostinbeta]

this.createEmptyMovieClip("preloader", 1000);
this.createEmptyMovieClip("container", 1001);
container.loadMovie("yourImage.jpg");
container._visible = false;
preloader.onEnterFrame = function() {
var l = container.getBytesLoaded();
var t = container.getBytesTotal();
var getPercent = l/t;
loadText = Math.round(getPercent*100)+"%";
loadBar._width = getPercent*100;
if (l>0 && l>=t) {
container._visible = 1;
delete this.onEnterFrame;
}
};

That is the code I used.

loadText is a dyanmic textbox on the stage with the VAR name (not instance name) of "loadText" and it shows the percent loaded.

loadBar is a movie clip on the stage with the instance name "loadBar" and its width increases depending on the amount loaded (note: change the 100 in this line to the final width of your loadBar clip).

EDIT: Here is my code in action. VIEW HERE (http://www.lostinbeta.com/images/dynamicPreloader.html)

[aamiic]

Thanks!!

I noticed it doesn't cache the image? Seems to reload each time.

[aamiic]

Ok, still a little lost, what am I doing wrong?



button.onPress = function () {
this.createEmptyMovieClip("preloader", 1000);
this.createEmptyMovieClip("container", 1001);
container.loadMovie("test.jpg");
// container._x = 250 ;
// container._y = 0 ;
container._visible = false;
preloader.onEnterFrame = function() {
var l = container.getBytesLoaded();
var t = container.getBytesTotal();
var getPercent = l/t;
// loadText = Math.round(getPercent*100)+"%";
loadBar._width = getPercent*500;
if (l>0 && l>=t) {
container._visible = 1;
delete this.onEnterFrame;
}
}
};

[lostinbeta]

My images don't cache because I use non-cache code for them. I did this for testing purposes, I didn't want to keep clearing my cache to test my movie ;)

As for your code, it doesn't work because you are defining everything in the onPress. The only thing you need in the onPress is the loadMovie code... like this...


this.createEmptyMovieClip("preloader", 1000);
this.createEmptyMovieClip("container", 1001);
//container._x = 250 ;
//container._y = 0 ;
container._visible = false;
preloader.onEnterFrame = function() {
var l = container.getBytesLoaded();
var t = container.getBytesTotal();
var getPercent = l/t;
//loadText = Math.round(getPercent*100)+"%";
loadBar._width = getPercent*500;
if (l>0 && l>=t) {
container._visible = 1;
delete this.onEnterFrame;
}
};
button.onPress = function() {
container.loadMovie("test.jpg");
};

[shuga]

hey beta ... i'm using the code you gave in the post at 02-19-2003 01:49 PM

i would like to know how to change the properties of the loaded jpg

_x, _width etc.

thanks

p.s. the preloader doesn't seem to be working although it loads to quickly for me to tell in development mode and i don't have a slow connection to test it on ... i'll post it to the web at http://www.aaronsleeper.com/siteexp.swf and you can get the fla to look at, at http://www.aaronsleeper.com/siteexp.fla

[lostinbeta]

To edit the properties of what you load, just edit the properties of the container clip that holds what you load in. In this case its its the empty movie clip called "container" that is dynamically created.

As for if its working or not, I don't know, I am on cable. I can't find the script anywhere in your .fla, where is it?

[CyanBlue]

Howdy, shuga...

I don't see that script you have mentioned with time and date on this thread... Anyways... You can ONLY change those properties when the file is FULLY loaded... From the lostinbeta's last code, you probably can do this right before you turn the visibility on...

I usually check wth if (container._width > 0) to make sure if it has been loaded into the container movieclip... ;)

[lostinbeta]

Originally posted by CyanBlue
I usually check wth if (container._width > 0) to make sure if it has been loaded into the container movieclip... ;)

Yes, but given the fact that we have a preloader that shows the percent loaded, we can't just do a simple if width>0 deal. It would be different if we weren't going to show exact percent loaded, because then we would just be able to use an if statement to check if the width is 0 and if not, then do whatever.

[shuga]

it's working now .... it's not perfect but i'm getting there. man my fla is a mess. next site i do is going to be a lot more organized. this has been one big learning experience. experimenting and programming as i go.

the path to the code is _root.window.content.techtext ... images layer frame 2

http://www.aaronsleeper.com/site.fla

[lostinbeta]

Shuga: Just tested, your image preloader works just fine.

[shuga]

quote from shuga

it's working now .... it's not perfect but i'm getting there

thanks beta =)

[lostinbeta]

AH, alright. No problem.

[osc]

I know this hread has not been active for a while but I was interedted in the code thta lostinbeta has provided - howvere how do I make sure the pictures cache so I don't have to reload - thta would solve a huge problem I am trying to work out!!

[lostinbeta]

They will automatically cache. The movie I posted a link to has extra no-cache code in it, but the code provided in this thread does not include that extra bit of code.

[osc]

Hello again,

the code works great offline but when I tested by uploading it, the images don't appear to cache as I have to reload the images every time I want to view them. At the moment I have three buttons with the code as follows:

on (release) {
this.createEmptyMovieClip("preloader", 1000);
picture.createEmptyMovieClip("picture", 1);
picture.picture.loadMovie("pic1.jpg");
picture._visible = false;
preloader.onEnterFrame = function() {
var l = picture.picture.getBytesLoaded();
var t = picture.picture.getBytesTotal();
var getPercent = l/t;
loadBar._width = getPercent*100;

if (l>0 && l>=t) {
gotoAndStop(2);
this.onEnterFrame;
}
};
}

[lostinbeta]

Well theres no cache prevention code in that script there so any delay is most likely in Flash interpreting the data and loading it into the .swf.

And this line makes no sense...this.onEnterFrame;

this.onEnterFrame what? you don't delete it, but you don't run anything in it either, so why are you re-initializing it when it is already initialized? ;) If you are loading only 1 picture using that script then I recommend using delete this.onEnterFrame; so that you can stop running the onEnterFrame since it won't be used for anything.

[osc]

Thanks - indeed I had forgotten the 'delete'
After refreshing the browser - the images do cache, so I don't know why it was reloading before (ie load bar moves).

However - I have now got another problem! Because there is a delay in loading the jpg from the cache, my dynamic border has problems!

I have an MC that resizes itself to the size of the loaded jpg in the MC 'picture' However in the short delay it shrinks to a small square and then expands to the correct size when loaded. Obviously offline this does not happen - is there a way I can get the border MC to execute when the jpg is loaded and the dimensions can be read?

would it be a ifFrameloaded task - does this work for jpgs - and indeed what would the path be. I keep confusing myself as to the correct path.
Can you use this function to check loaded frame in another MC from an MC
My resize code is:
onClipEvent (enterFrame) {
w = _root.picture._width;
h = _root.picture._height;
xpos = _root.picture._x;
ypos = _root.picture._y;
speed = 5;
this._width += ((w-this._width)/speed)+8;
this._height += ((h-this._height)/speed)+8;
this._x += ((xpos-this._x)/speed)-4;
this._y += ((ypos-this._y)/speed)-4;
}

[lostinbeta]

ifFramesLoaded is deprecated syntax, you shouldn't use it at all.

As for the width and height of your clip, set that in a variable.

When the image loads, set the variable to the new image width and height. That way when the clip is unloaded the width of the border area will still be the original height instead of shrinking back to 0.


Or something along those lines should do :P

And please use the vbCode AS tags, its a pain to read unformatted code. [<I></I>AS]//codeHere[<I></I>/AS]

[osc]

Thanks for your help so far. I have been trying your suggestion of setting variables - I belive I am doing it correctly but the border MC will do nothing now...
On the loading of the jpg - I have set the variables after the preloader as follows (var x and var y):

//
on (release) {
this.createEmptyMovieClip("preloader", 1000);
picture.createEmptyMovieClip("picture", 1);
picture.picture.loadMovie("pic1.jpg");
picture._visible = 1;
preloader.onEnterFrame = function() {
var l = picture.picture.getBytesLoaded();
var t = picture.picture.getBytesTotal();
var getPercent = l/t;
loadBar._width = getPercent*100;
if (l>0 && l>=t) {
var x = picture._width;
var y = picture._height;
delete this.onEnterFrame;
}
};
}

[osc]

ok I'm new to this forum- but half my message disappeared when I posted!!
Anyway this is the missing bit:

The border MC should in theory use these set variables and resize:
//
onClipEvent (enterFrame) {
w = picture.x;
h = picture.y;
xpos = _root.picture._x;
ypos = _root.picture._y;
speed = 5;
this._width += ((w-this._width)/speed)+8;
this._x += ((xpos-this._x)/speed)-4;
this._y += ((ypos-this._y)/speed)-4;
}

[lostinbeta]

picture.x and picture.y don't exist.

You define them in your script as just x and y, but you call them as picture.x and picture.y. I recommend not applying the variables to the picture clip because I believe when you load something new into that clip those actions will disappear.

[osc]

I have tried all combinations of names - ie x and y instead of picture.x etc but nothing seems to work. But as you say, it could be that the variables are lost when load - but it doesn't work the first time I press load. I have put the script in lots of different places but eith no luck.

How else could I set the variables?

ps I really appreciate the help you are giving me:)

[lostinbeta]

set the variables on the _root...
(edit of a short excerpt of your script...) if (l>0 && l>=t) {
_root.x = picture._width;
_root.y = picture._height;
delete this.onEnterFrame;
}


Then call it in your enterFrame as _root.x and _root.y.

[lbeetles]

Could someone please post the final fla as i can't ge this to work for some reason.

[osc]

Great! setting the variable with _root.x works and solves that problem.

However, checking when the border is the same size as the picture (taking account of the added width) is being problematic. I also have a less than elegant way of checking - but works sort of!

I have the following code in a separate MC with two frames to create a loop. Frame 2 is empty and Frame 1 has the following:


if ((_root.border._width>(_root.picture._width+39)) &&
(_root.border._height>(_root.picture._height+39))) {
_root.picture._visible = 1;
_root.textBox._visible = 1;
}


I have tried to put this on the border MC but it doesn't work.
One problem is that == doeszn't work in the above script - any suggestions? The use of '>' is not ideal and not accurate enough with the timing in making the picture visible.

[lostinbeta]

Frame loops are for Flash 4 :P

onClipEvent(enterFrame) is Flash 5 and Flash MX on a movie clip.

this.onEnterFrame = function() {//code here} is Flash MX on a frame.


As for why == doesn't work, it is because you are using the easing equation and the numbers you get by dividing by the speed aren't going to be exactly equal to the end number.

Maybe try working with Math.floor(), Math.round(), or Math.ceil() to round the number appropriately and possibly fix that problem.





I came up with this for someone at actionscript.org the other day. It was used for scaling fading but still using the easing equation and deletes the onEnterFrame command appropriately (man was that a task). It could be used just for scaling as well though with a little editing (removing anything dealing with alpha)

MovieClip.prototype.initiateFader = function(inOrOut, finalX, finalY, finalA, speed) {
this.onEnterFrame = function() {
if (inOrOut == "fadeOut") {
this._xscale += (finalX-this._xscale)/speed;
this._yscale += (finalY-this._yscale)/speed;
this._alpha += (finalA-this._alpha)/speed;
this.xs = Math.floor(this._xscale);
this.ys = Math.floor(this._yscale);
this.af = Math.floor(this._alpha);
} else if (inOrOut == "fadeIn") {
this._xscale += Math.ceil((finalX-this._xscale)/speed);
this._yscale += Math.ceil((finalY-this._yscale)/speed);
this._alpha += Math.ceil((finalA-this._alpha)/speed);
this.xs = Math.ceil(this._xscale);
this.ys = Math.ceil(this._yscale);
this.af = Math.ceil(this._alpha);
}
trace(this.xs+" : "+this.ys+" : "+this.af);
if (this.xs == finalX && this.ys == finalY && this.af == finalA) {
trace("transition complete");
this._xscale = finalX;
this._yscale = finalY;
this._alpha = finalA;
delete this.onEnterFrame;
}
};
};
HitArea.onRollOver = function() {
this.initiateFader("fadeOut", 75, 50, 50, 6);
};
HitArea.onRollOut = function() {
this.initiateFader("fadeIn", 100, 100, 100, 6);
};

[osc]

Thank you - I will go away and play around with the script you have kindly provided - but I might be back!! ;)

As for the loop - yep - soooo flash 4 - but because I recently upgraded I am learning loads ( this thread alone has made me really try and get to grips with the scripting believe it or not)

As for the == , your explanation makes perfect sense!

Osc

[osc]

Hi again!
Because the macromedia gallery example does not have a preloader - I tried to adapt the scripts from earlier in this thread to make a pseudo back and forward button - it works - I can easily go back and forward - but the preloader part does not work.

Is it possible to have an if within if???

This is the back button example... the _root.b variable is set by the first thumbnail that is pressed - ie so when I delete 1 from n, it will call the previous sibling in the script.


on (release)
{
if ((n>0) && (n<=3)) {
var n = ((_root.b--)-1);
trace("n "+n)
this.createEmptyMovieClip("preloader",1000
_root.picture.picture2.loadMovie(pictures.childNod es[0].childNodes[n].attributes["jpegURL"]);
picture._visible = false;
loadBar._visible = 1;
textBox._visible = false;
preloader.onEnterFrame = function() {
var l = picture.getBytesLoaded();
var t = picture.getBytesTotal();
var getPercent = l/t;
loadBar._width = getPercent*100;
if (l>0 && l>=t) {
trace("loaded back");
textBox.picTitle =
pictures.childNodes[0].childNodes[n].childNodes[0].nodeValue;
picture._visible = 1;
textBox._visible = 1;
loadBar._visible = false;
_root.x = picture._width;
_root.y = picture._height;
delete this.onEnterFrame;
}
}
}

[lostinbeta]

delete this.onEnterFrame;

It stopped working because you made it stop running ;)

[mecha]

Hey All,

This is a very useful thread and I have done a little tweak allowing the loading of random images......(I know, simple stuff!)

All I was wandering is what would I have to tweak in order to have the loaded image/movieclip fade gradually using actionscript.

-----------------------------------------

stop();
footers = 6;
randomnumber = Math.ceil(Math.random()*footers)
this.createEmptyMovieClip("preloader", 1000);
this.createEmptyMovieClip("container", 1001);
container.loadMovie(randomnumber add ".jpg");
container._visible = false;
preloader.onEnterFrame = function() {
var l = container.getBytesLoaded();
var t = container.getBytesTotal();
var getPercent = l/t;
loadText = Math.round(getPercent*100)+"%";
loadBar._width = getPercent*100;
if (l>0 && l>=t) {
container._visible = 1;
delete this.onEnterFrame;
play();
}
};

-----------------------------------------

I know I would have to change _visible to _alpha and maybe use a onEnterFrame command to increase the _alpha - but I am stuck!

Any help would be greatly appreciated!

mecha

[lostinbeta]

http://www.kirupa.com/developer/mx/photogallery.htm :sigh:

[osc]

Hello!

Having got everything to work so far - I seem to have stumbled on an even more elementary problem. The script that you have been helping with works great if the buttom is on the main stage - however, if I try and button the AS in a button in another MC, it doesn't work.

In other words, the picture MC is placed on the main stage, I then have an MC1 with an MC2 within it. The buttons are on MC2 - however, it doesn't work...

even this doesn't work:

_root.picture.picture2.loadMovie(pictures.childNod es[0].childNodes[1].attributes["jpegURL"]);


Surely the _root takes care of the path??

Osc

[osc]

Got it to work - and yes it was obvious - I had forgotten to add the _root to the path for the xml file, and not just the picture MC!!

Osc

[shuga]

just reading through some posts and ... what happened lostinbeta. you seem so bitter now. *sniffle* i miss the old 'happy to help' beta

[lostinbeta]

Originally posted by shuga
just reading through some posts and ... what happened lostinbeta. you seem so bitter now. *sniffle* i miss the old 'happy to help' beta

I'm still that guy.... sometimes (-:

I think here I was just reaching my limit on preloader questions, it's been built up over the past few weeks after mass amounts of preloader questions via the forum, my PM Inbox, and my e-mail. But now I think I am better, as my footer states I don't accept Flash questions in my PM Inbox (defeats the entire purpose of the forum) and I am now officially retired from preloader questions, there is most likely nothing someone can ask about preloaders that they can't find on the forum by searching by now. :cyclops:

[crazysniper22]

Hello guys! I was following your post, but i got lost.

Because my images are in .swf and not jpeg. and also I am a Flash Newbie.

Is there a way to create thesame thing? that when you click on the button, it shows the preloader first before it displays the image to an empty movieclip on another .swf, before it loads to the main movie.

I try another way of creating it but I think its a bit daft. I try adding a preloader on one images, but it doesnt work. the loading animation is still there visible and keeps on playing so i decided to stop. And oh yah... because i had 38 images i think it will take me ages to finish this project.

this might help you what i meant to do. heres the add of my site.

www.metalgurl.tk

noticed the gallery, if you had a DSL connection you'll be alright, but how about our Dial UP friend?

Your help are always appreciated. thanks!

[waztone]

Thnx lost!!

I was trying to get something like this to work.
I forgot working on it but you've inspired me to pick it up again.
I hope I can get it to work. When I do, I'll post an url.

[jamesblue]

Dear Lost in Beta...

Thank you so much for your help

Peace

James

[keitai]

this.createEmptyMovieClip("preloader", 1000);
this.createEmptyMovieClip("container", 1001);
container.loadMovie("yourImage.jpg");
container._visible = false;
preloader.onEnterFrame = function() {
var l = container.getBytesLoaded();
var t = container.getBytesTotal();
var getPercent = l/t;
loadText = Math.round(getPercent*100)+"%";
loadBar._width = getPercent*100;
if (l>0 && l>=t) {
container._visible = 1;
delete this.onEnterFrame;
}
};

That is the code I used.

loadText is a dyanmic textbox on the stage with the VAR name (not instance name) of "loadText" and it shows the percent loaded.

loadBar is a movie clip on the stage with the instance name "loadBar" and its width increases depending on the amount loaded (note: change the 100 in this line to the final width of your loadBar clip).

EDIT: Here is my code in action. VIEW HERE (http://www.lostinbeta.com/images/dynamicPreloader.html)


hmm, i am trying your code and i get NAN and then it jumps to 100% and the loadbar as well. Your code is just on the root, right???

[milesdavis]

Hmm.. I don't get the 'yourImage.jpg'. How does this work exactly -- if you're loading dynamic information into a movieclip? For example - using an infinite menu and XML, it loads jpegs with various names which change, how can we pin it down to 'yourImage.jpg"? I'm confused I think.

Basically, I want there to be a pre-loader that appears as my dynamic jpeg or SWF is being loaded. I tried the above code, no luck.

Thanks for any info!

-md