Tuesday, August 10, 2010

new index page: step 1


So I need a new index page. the one i currently have here....sucks. i made this for my first web class almost a year ago, and while it does what it needs to do it is inelegant to say the least. it's taken me a while to decide what i wanted to do for it, and i decided i wanted to work out something similar to a site i'd seen a couple of years ago.

some of you may recall when the film cloverfield came out, there were a number of viral websites that came out ahead of it. the first of these was 1-18-08 which is a stack of photos you can rifle through. mine is going to be a little different in that it needs to function beyond that, so the idea is that when you mouseover a picture it moves to the top of the stack, and when you click on it you can drag it, like on the 1-18 site. whatever picture is on top will activate a button on the sidebar that will take you to that particular page.

the flash for this will be broken down by steps:
step 1, which is in this file, is to create the ability to change the view order of the pictures. click the picture above to see step 1. the code for this is pretty simple:

stop();

mc1.addEventListener(MouseEvent.MOUSE_OVER, restack);
mc2.addEventListener(MouseEvent.MOUSE_OVER, restack);
mc3.addEventListener(MouseEvent.MOUSE_OVER, restack);

function restack(e:Event):void
{
if(e.target == mc1)
setChildIndex(mc1, 2);
if(e.target == mc2)
setChildIndex(mc2, 2);
if(e.target == mc3)
setChildIndex(mc3, 2);
}

for any art students reading this that don't know, but want to know, how this code works, when you have a few movie clips on the stage, they're put in what is called a display container. in this case, there are 3 objects. index positions in computer programming start at 0, not 1 like one might expect, so for 3 objects the indices are 0, 1, and 2.

the sub function setChildIndex() requires 2 paramters; the first is the target, or which movie clip you want to be on top, and the second is the index position. since the last number in the index is on top (just like when you lay cards down on a table, the last one is on top) then that's the number you need for the second parameter. if i added a 4th movie clip, then those three lines would need to read setChildIndex(mc1, 3) and so on.

step 2 will be to make it so you can drag them around
step 3 will be to add some physics so that they don't stop instantly when you stop dragging(inertia)
step 4 will be to change the shapes to images from each linked project
step 5 will be to add a sidebar with buttons that will take you to each project

it won't be quite as professional as the 1-18-08 site, but i am hoping it'll be pretty cool!

No comments:

Post a Comment