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
