Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Need Flash Help Fast


  • Please log in to reply
&nsbp;

#1 adamdyson

adamdyson

    Apprentice Designer

  • Designer
  • 29 posts

Posted 30 March 2004 - 10:35 AM

Hi all you Flash experts out there.
I am trying to create a website for my self, (getting to the point) I am looking for a preloader, that as it preloads it shows the percentage but also shows an animation, im guessing using a mask i know I am probably making no sence to you all so I have found a website that will hopefully point you all in the right direction.

http://www.metajive.com/

Pleeeeaaassssse Help me :confused:

#2 AMPlified

AMPlified

    Apprentice Designer

  • Designer
  • 42 posts

Posted 30 March 2004 - 02:11 PM

Use "getBytesLoaded" and "getBytesTotal" along with Math() to get your percentage.

For example: (where "percent" is the variable for your dynamic text box)

kbloaded = this.getBytesLoaded();
kbtotal = this.getBytesTotal();
kbloaded = Math.ceil(kbloaded / 1024);
kbtotal = Math.ceil(kbtotal / 1024);
percent = Math.ceil((kbloaded / kbtotal) * 100);

And you can put any animation you want within the frames for the preloader.


Hi all you Flash experts out there.
I am trying to create a website for my self, (getting to the point) I am looking for a preloader, that as it preloads it shows the percentage but also shows an animation, im guessing using a mask i know I am probably making no sence to you all so I have found a website that will hopefully point you all in the right direction.

http://www.metajive.com/

Pleeeeaaassssse Help me :confused:



#3 adamdyson

adamdyson

    Apprentice Designer

  • Designer
  • 29 posts

Posted 01 April 2004 - 12:49 AM

I feel a little confused but i'll give it a go. If anyone could explain this in more detail that would be great. I will let you know if i get it working. :confused:

#4 AMPlified

AMPlified

    Apprentice Designer

  • Designer
  • 42 posts

Posted 01 April 2004 - 05:14 AM

Okay, you need to have the first 2 frames of your animation exclusively for the preloader. Once you've got the rest of your animation set to occur starting in frame 3 instead of frame 1, you can start to design your preloader.

Now you need to make a text box for your percentage to display in. Make a new layer, and put a text box on that layer, type something in to it (so you can see it). Make a new keyframe on this layer so that the textbox doesn't display past frame 2 (because if you don't, your percentage will show up during your animation and not just in the preloader). In the properties panel for the text box, change the alignment to right instead of the default left. Also in the properties panel, change the dropdown box that says "static text" to "dynamic text". When you do this, a new field in the properties panel will appear which is labeled "var:". In the "var:" type "percent". What you've done here is made it so that the text in your text box can be altered and updated by using script. Whatever the value of the variable "percent" equals is what will be displayed in the text box. So for example if percent="hello"; then the text in your text box will change to read "hello". But what we want to do is have it so that the text box will display the percent of the movie that's been loaded. So make a layer called "scripts" (if you don't already have one), and make a keyframe on that layer at frame 1. Click the keyframe and hit F9 to bring up the action script panel. Then type the following script into it:

kbloaded = this.getBytesLoaded();
kbtotal = this.getBytesTotal();
percent = Math.ceil((kbloaded / kbtotal) * 100);

The first line of script finds out how much of the movie has currently been loaded and saves that information in a variable called "kbloaded". The second line finds out how big the animation file is and saves that information in a variable called "kbtotal". The third line divides the amount that's been loaded by the total file size, which gives you the percentage loaded, then multiplies that by 100 so that you have a number like "67" instead of ".67". It saves the answer in the "percent" variable, which will atomatically update your text box to display the percentage of the movie that's currently been loaded.

Now make yet another layer and name it "labels". Make a keyframe on this layer at frame 3. Click on this keyframe and then in the properties panel change where it says "<Frame Label>" to "go". Click on frame 1 of the same layer, and where it says "<Frame Label>" in the properties panel type "start".


Now, back on the "scripts" layer, add a keyframe on frame 2, click on the keyframe, and hit F9. In the action script panel type in the following code:

if (kbloaded == kbtotal) {
gotoAndPlay("go");
} else {
gotoAndPlay("start");
}

What this does is, everytime the animation gets to frame 2 it finds out whether or not the movie has been completely loaded. If it has, it goes on to frame 3, which you've labeled "go". If the movie hasn't completely loaded it jumps back to frame 1, which you've labeled "start". So as long as the movie hasn't finished loading yet, it will keep looping. Each time it loops back to frame 1, it finds out the percentage and changes your text box to read the correct percentage loaded. You'll probably want to add another text box, this one static (not dynamic) and type into it the "%" symbol and place it so it is next to the other text box.

As for the animation part, is the animation supposed to be tied to the loading progress, like in your example site? Reavealing half of an image when the movie is half way loaded, etc.? Or do you just want something to display while waiting for it to load?

#5 adamdyson

adamdyson

    Apprentice Designer

  • Designer
  • 29 posts

Posted 04 April 2004 - 11:56 AM

Thanks for all the effort you put in for me. I am going to give it a try now. I will let you know how I go. Thanks again :D

#6 adamdyson

adamdyson

    Apprentice Designer

  • Designer
  • 29 posts

Posted 04 April 2004 - 03:51 PM

Hi Amplified i tried the tutorial you wrote and it works fine, thanks. As for the animation I would like it load half way like you said. ( just like on the example site ) i have up loaded my site that i created, if you go to "Portfolio" you will see what I am trying to do

this is the link http://www.geocities.com/adamdysonau

#7 AMPlified

AMPlified

    Apprentice Designer

  • Designer
  • 42 posts

Posted 04 April 2004 - 06:12 PM

Your portfolio loaded a little too fast for me to really see the preloader, but if you want something similiar to the sample site then here's the easiest way to do it:

Your going to need 2 layers, one for your image (let's say for demonstration's sake that the image measures 200 pixels by 200 pixels), and another layer for a shape to cover up your image (again 200 pixels by 200 pixels). The shape to cover up the image should be the same color as your background so that it's appears to be invisible. Position it exactly over the image and note the x and y coordinates of it (let's say for this example that they're x=10 y=10). So now the image should be completely hidden by the shape. Now convert your shape to a movieclip, and give it an instance name in the properties panel. I'll use the instance name "shape" for demonstration purposes. We'll use this instance name to refer to the shape when we do our scripting -- which is how we're going to move the shape as the movie loads.

Now on the "scripts" layer I had you make the last time, click on frame 1, and hit F9 to bring up the action script panel. All the code which determines the value of "percent" should still be in there. We're going to use the value of "percent" to calculate how much to move the shape each time the preloader loops.

Now if we use the dimensions and positions that I made up for this example, we want to move the shape 2 pixels (along the y-axis) for every percentage point (because the image is 200 pixels high and 200/100=2). Now, I said that the shape is located at x=10 y=10 according to the properties panel. But that's actually the location of the upper-left-corner of the shape, and in script we need to use the location of the center of the shape instead. So for the purpose of scripting, our shape is located at x=110 y=110. (So for your actual image and shape, your going to have to figure the position of the center of the shape and how much it needs to move per percentage point yourself.)

Anyway now that we know what numbers we need to work with we can add the script. You need to add the following lines of script after the other script we previously wrote for frame 1 of the "scripts" layer.

move_y = Math.ceil(2 * percent);
move_y = 110 - move_y;
setProperty(this.shape, _y, move_y);

Okay the first line figures how many pixels we need to move the shape from its original position and saves that info in a variable I called "move_y". So for example, if percent=40 then it's going to move the shape 80 pixels, revealing the first 40% of your image. The second line takes that number and subtracts it from the shapes original position. By subtracting we're revealing your image from the bottom up, to do it from the top down you would add instead of subtract, and to do it from left-to-right or right-to left you would use x instead of y. Anyway, the third line is the one that actually moves the shape. This line changes the y position coordinate of the movie clip (which we gave the instance name "shape") to equal whatever "move_y" equals. So when the percentage loaded equals 100 then the shape will have moved up 200 pixels from it's original position, completely revealing your image.

Hope this helps,
-AMP :)

#8 MILI

MILI

    Apprentice Designer

  • Designer
  • 22 posts

Posted 08 April 2004 - 05:15 PM

hey
dont lose hope lol

ill get back to this threat soon : ) got somem tips for ya : )

#9 adamdyson

adamdyson

    Apprentice Designer

  • Designer
  • 29 posts

Posted 09 April 2004 - 10:19 AM

yeah thanks mate that would be good :D

#10 AMPlified

AMPlified

    Apprentice Designer

  • Designer
  • 42 posts

Posted 09 April 2004 - 07:03 PM

yeah thanks mate that would be good :D


Does that mean you're having trouble with the animation? What's not working?

-AMP

#11 flakedb

flakedb

    Apprentice Designer

  • Designer
  • 1 posts

Posted 11 May 2004 - 03:06 AM

adamyson,
thanks for liking my preloader..I hope you like my site too. let me know if you are still having trouble with the preloader but it seems like these guys have you covered...but I amalways happy to answer any questions...how did you hear about my site.
_DB




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users