Preloader help

1

Hi all,
How do I make a preloader that uses an image or shape as its percent housing? I’ve tried using the turoial from KIRUPA and modifying it but all I get is a squashed image that eventually corrects itself. Can someone please help? An example of this would be the way Donna Lopez uses the cube as the preloader at her site. www.donnalopez.com

Thanks,
BACALAO

2

Can anyone help with this?

3

Did I post this in the wrong forum?

4

What exactly do you want to achieve ?

5

Thanks V. I was just wondering how I could make a preloader that uses an image instead of a bar. I would believe I need a mask of some sort but I don’t know where to start. Is there a tutorial you could direct me to. Thank again for responding.

6

Yeah well, you could have a mask over an image and then let the mask grow bigger instead of the image itself. Follow the kirupa.com tutorial on how to make a preloader with a preloaderbar, and then modfy the code so it doesn’t change the size of the image, it changes the size of the mask :wink: Make sure your mask has an instance name :slight_smile:

7

This is what I have. (attached)

What I want to do is use an image instead of the load bar. Like on the www.donnalopez.com site where she uses the image of that cube in place of the load bar.

In my code, how would I change it to reflect an image instead of the bar.

[AS]// Specify how many frames to load before playing.
var loadAmount = _totalframes;
// If the required number of frames have finished loading…
if (_framesloaded == loadAmount) {
// …start the movie
gotoAndPlay(“beginMovie”);
} else {
// …otherwise, display the load status
// then go back and check load progress again.
// First, determine the loaded and total kilobytes.
percent = Math.round((loaded/total)100);
loadBar._width = loadBarHousing._width(percent/100);
// Set the width of the loadBar to a percentage of
// the loadBarHousing.
loaded = Math.round(getBytesLoaded()/1024);
total = Math.round(getBytesTotal()/1024);
// Display the loaded kb, total kb, and percentage of
// kb loaded in text fields.
message = "loading… "+loaded+"kb "+"of "+total+“kb”;
// Now go back and check load progress.
gotoAndPlay(“loading”);
}
[/AS]

8

But see, that’s the problem, I don’t see no cube preloader at donnalopez.com. I’m on cable which is quite fast so … can you post an image of that cube you want ?

9

Ok, sorry I’m confusing you. I could see the loader again but I snapped a shop of another site I liked http://www.yamsplayground.com/. The image of his preloader is attached. Thank, Bacalao

10

Yet again, I saw no preloader :-\ And I can’t make much out of the image …

11

What about this image? I apologize for being so confusing!

12

Aaaaah, I see now … Well, lemme think a sec on how to do this…

13

Thanks Voetsjoeba.

14

Well, what I think they did is place a mask, which has the same form as the cube, starting where the cube stands on the ground and ending somewhere above 100. The cube would then be a lot taller, but you would only see a part of it because of the mask. They move the image more up as more is loaded, but because of the mask, it looks like the cube is growing bigger.
What you need to do is modify the preloader code like this:

[AS]
bytes_loaded = Math.round(this.getBytesLoaded());
bytes_total = Math.round(this.getBytesTotal());
getPercent = bytes_loaded/bytes_total;
this.cube._x += getPercentdifferencebetweenoffsetandend;
this.loadText = Math.round(getPercent100)+"%";
if (bytes_loaded == bytes_total) {
this.gotoAndPlay(3);
}
[/AS]

differencebetweenoffsetandend should be the amount of pixels between the cube in 0% loaded position and the cube in 100% loaded position. This is not tested because I ain’t got flash here, so give it a go.

15

You lost me! lol Could you put this into practice for me? Or could you tell me how to set this up? Thanks

16

Well, first of all, you need to understand the mask. I’m gonna make a drawing here, scan it and post it here so you can understand what I mean.

So, look at the left part of the image below. The left part represents the situation at 0% loaded. The mask is the area in which VISIBLE is written. The solid red lines represent the mask. The solid blue lines represent the VISIBLE part of the cube, the “walking-ants” blue lines represent the invisible part of the cube.

Now look at the right part. The right part represents the situation when about 43% loaded. I could’ve drawn it as well for 63% or any other %, it’s just to give you an idea.

The two lines between the two cube states are used to show you that the right cube has moved up.

See how it works ? =)

17

Understand that part about the mask. Now, the code you gave me before… is that incorporated into the test I had? What part?

18

The code I gave you is the one you should instead of the original for the preloader tutorial by Lostinbeta, here.

19

thanks. just got back to work on it. i’ll tell youn how it goes.

20

Worked fine. Thanks for all your help Voetsjoeba!!!