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!

getting close!

So the last meeting we had only generated a couple of changes. In fact, there was really only 2 changes, and a couple of "can we see what this would look like?"

Because there were so few changes, and because I had time between jobs, I took the opportunity to rework the page completely from scratch. I did this for a couple of reasons.

first, to better organize the assets in the flash library for the project. for example, originally i had done each bar seperately, so when i needed to change the colors, i had to do each one individually. in the reworked file, all of the bars are the same graphic, just resized to fit the application, so now the color can be changed once for the entire project.

second, through the course of the project, changes made to show what something would look like to a heavy toll on functionality. you can see this if you try to mouseover the submenu pulldowns. the backings are empty, so it stutters because the functions are coded to pull them out on mouse over and retract them on mouse out, so it gets confused. the movement wasn't great to begin with because of the way i had made the individual movie clips.

the progress of recoding the functionality can be seen below. the finished products are located

here (7)
here (8)
here (9)
here (10)
here (11)
here (12)
and
here (13)

see the comments section for the code as it progressed through versions 7-13.

in version 11, the "previous" button in the "exhibitions" submenu is functional.

a note about the code: there is additional code within each movie clip, so if anyone tries to reproduce this, it's not going to function quite right :)

And so it continues...

The last gallery meeting provided a long list of changes, but they were pretty minor and mostly experimental. The most obvious change is that the bars on the left are now buttons using the social media icons. Time was tight for me during this period because I actually have paying work (yay) so I had to knock out as much as possible in a very short period of time (like that morning before the meeting...I hope noone important reads this...cough) but I got a lot more done than i expected to.

buttons instead of bars
2 different versions: one with the btns in a grid, one in a column
color changes
removed the drop shadows (i liked those :( )

I did not have time to change the sub menu buttons under exhibitions and permanent collection, but i included a couple of different highlighting options as examples.

these pages can be found here: http://www.pixelcola.net/3618/percane/hp5.html
and here: http://www.pixelcola.net/3618/percane/hp6.html