# Preloader help
**URL:** https://forum.kirupa.com/t/preloader-help/24497
**Category:** Uncategorized
**Created:** [July 1, 2003, 2:02pm UTC](https://forum.kirupa.com/t/preloader-help/24497 "2003-07-01T14:02:38Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@bacalao](https://forum.kirupa.com/u/bacalao)
#### Post date: [July 1, 2003, 2:02pm UTC](https://forum.kirupa.com/t/preloader-help/24497/1 "2003-07-01T14:02:38Z")
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](http://www.donnalopez.com)
Thanks,
BACALAO
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:39am UTC](https://forum.kirupa.com/t/preloader-help/24497/2 "2003-07-02T02:39:15Z")
Can anyone help with this?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 12:04pm UTC](https://forum.kirupa.com/t/preloader-help/24497/3 "2003-07-02T12:04:30Z")
Did I post this in the wrong forum?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 12:11pm UTC](https://forum.kirupa.com/t/preloader-help/24497/4 "2003-07-02T12:11:20Z")
What exactly do you want to achieve ?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 12:24pm UTC](https://forum.kirupa.com/t/preloader-help/24497/5 "2003-07-02T12:24:28Z")
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.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 12:34pm UTC](https://forum.kirupa.com/t/preloader-help/24497/6 "2003-07-02T12:34:51Z")
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](http://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 😉 Make sure your mask has an instance name 🙂
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 1:16pm UTC](https://forum.kirupa.com/t/preloader-help/24497/7 "2003-07-02T13:16:31Z")
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](http://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]
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 1:23pm UTC](https://forum.kirupa.com/t/preloader-help/24497/8 "2003-07-02T13:23:57Z")
But see, that’s the problem, I don’t see no cube preloader at [donnalopez.com](http://donnalopez.com). I’m on cable which is quite fast so … can you post an image of that cube you want ?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 1:39pm UTC](https://forum.kirupa.com/t/preloader-help/24497/9 "2003-07-02T13:39:50Z")
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/](http://www.yamsplayground.com/). The image of his preloader is attached. Thank, Bacalao
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:06pm UTC](https://forum.kirupa.com/t/preloader-help/24497/10 "2003-07-02T14:06:50Z")
Yet again, I saw no preloader :-\ And I can’t make much out of the image …
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:11pm UTC](https://forum.kirupa.com/t/preloader-help/24497/11 "2003-07-02T14:11:18Z")
What about this image? I apologize for being so confusing!
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:42pm UTC](https://forum.kirupa.com/t/preloader-help/24497/12 "2003-07-02T14:42:43Z")
Aaaaah, I see now … Well, lemme think a sec on how to do this…
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:46pm UTC](https://forum.kirupa.com/t/preloader-help/24497/13 "2003-07-02T14:46:25Z")
Thanks Voetsjoeba.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 2:53pm UTC](https://forum.kirupa.com/t/preloader-help/24497/14 "2003-07-02T14:53:03Z")
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 += getPercent_differencebetweenoffsetandend;
this.loadText = Math.round(getPercent_100)+"%";
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.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 3:19pm UTC](https://forum.kirupa.com/t/preloader-help/24497/15 "2003-07-02T15:19:44Z")
You lost me! lol Could you put this into practice for me? Or could you tell me how to set this up? Thanks
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 4:08pm UTC](https://forum.kirupa.com/t/preloader-help/24497/16 "2003-07-02T16:08:06Z")
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 ? =)
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 4:27pm UTC](https://forum.kirupa.com/t/preloader-help/24497/17 "2003-07-02T16:27:16Z")
Understand that part about the mask. Now, the code you gave me before… is that incorporated into the test I had? What part?
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 5:42pm UTC](https://forum.kirupa.com/t/preloader-help/24497/18 "2003-07-02T17:42:54Z")
The code I gave you is the one you should instead of the original for the preloader tutorial by Lostinbeta, [here](http://www.kirupa.com/developer/mx/percentagepreloader.htm).
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 2, 2003, 9:25pm UTC](https://forum.kirupa.com/t/preloader-help/24497/19 "2003-07-02T21:25:21Z")
thanks. just got back to work on it. i’ll tell youn how it goes.
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [July 3, 2003, 1:13pm UTC](https://forum.kirupa.com/t/preloader-help/24497/20 "2003-07-03T13:13:36Z")
Worked fine. Thanks for all your help Voetsjoeba!!!