# Custom/Masked preloader

**URL:** https://forum.kirupa.com/t/custom-masked-preloader/97066
**Category:** Uncategorized
**Created:** [December 17, 2003, 11:23am UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066 "2003-12-17T11:23:41Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![Jimbob](https://avatars.discourse-cdn.com/v4/letter/j/13edae/32.png) [@Jimbob](https://forum.kirupa.com/u/Jimbob)
#### Post date: [December 17, 2003, 11:23am UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/1 "2003-12-17T11:23:41Z")

</div>

I want to make a percentage preloader where the ‘bar’ can take the shape of anything. I’m sure we’ve all seen the kind where a logo ‘fills up’ with the bar. I would love to make one! Any ideas? Thanks!! :red:

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 12:08pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/2 "2003-12-17T12:08:32Z")

</div>

Just mask the bar with your logo.

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 12:28pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/3 "2003-12-17T12:28:09Z")

</div>

> \*Originally posted by eki \*  
> \*\*Just mask the bar with your logo. \*\*

Sure, but I’m using Kirupa’s preloader componant and it seems hard to get into and change. Would you recommend I make my own preloader from scratch? If so could you point me where to get a good tutorial which doesn’t use components?

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 12:32pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/4 "2003-12-17T12:32:25Z")

</div>

[http://www.kirupa.com/developer/mx/percentagepreloader.htm](http://www.kirupa.com/developer/mx/percentagepreloader.htm)

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 12:37pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/5 "2003-12-17T12:37:25Z")

</div>

yes, we have it all! And if we don’t have something, let us know… because then we’ll add it!

ALL, I say, ALL!!!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 1:59pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/6 "2003-12-17T13:59:26Z")

</div>

> \*Originally posted by Jimbob \*  
> \*\*Sure, but I’m using Kirupa’s preloader componant and it seems hard to get into and change. Would you recommend I make my own preloader from scratch? If so could you point me where to get a good tutorial which doesn’t use components? \*\*

Thanks Eki, this one uses a component I think though. Hmm…

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 2:38pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/7 "2003-12-17T14:38:05Z")

</div>

You’re welcome :beam:

The tutorial from that link doesn’t use a component but if you want to use the component just edit the bar so it’s as tall as your logo and mask the whole component with the logo

SHO

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 2:56pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/8 "2003-12-17T14:56:55Z")

</div>

Hey Eki,

I’m about to try it all out, although I’ve just opened the simplepreloaderbar.fla and it definately has a component, itself named simplepreloader.

What’s the deal with components then?

I’m gonna monkey with it right now, I’ll let you know how I get on!

Cheers!

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 3:08pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/9 "2003-12-17T15:08:59Z")

</div>

Hi,

I’ve just knocked out an example. Have a look or use it as it is. I mask a component.  
You can alter the width and height of the bar by changing the values of the variables lWidth1 and lHeight1 which are in the layer2 ‘inside’ the component.

SHO

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 3:50pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/10 "2003-12-17T15:50:52Z")

</div>

Hey Eki,

Thanks so much!

After seeing what you’ve done I tried it on my own fla. but it just wasn’t showing up. I then copied/pasted your frames into mine and it works great.

One thing though, it seems that the text is only in black. I selected it, wrote a different word and changed the text but it stays black. should that happen?

---

<div class="post-metadata">

### Author: ![system](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/3X/6/2/621e5c11736f46532526e61be85940af4230f3e5.png) [@system](https://forum.kirupa.com/u/system)
#### Post date: [December 17, 2003, 4:02pm UTC](https://forum.kirupa.com/t/custom-masked-preloader/97066/11 "2003-12-17T16:02:47Z")

</div>

change the colour of the bar from the (selected) component parameters in the properties pane:beam: :beam:
