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

The End of June

The last meeting (and the next one for that matter) provided a TON of feedback on various things they wanted to see and try.

The updated SWFs can be found here and here.

• try different shades of red/magenta


• for the drop down menus, have the words float instead of in grey boxes


• make the drop down options look like the sliders on mouseover


• retract all bars, both sides on mouseover


• make the middle section wider


• try different backgrounds


• add drop shadows to add depth

The functionality isn't completely added, most of the work is to just show what it would look like with the requested changes. more changes coming for the next meeting.

too.....much....pink.....(week of 6-6)

So this week we switched gears to focus on the opening page for the gallery, which is a good break from redoing slide show templates. These images are graphics designed by Ian describing the desired functionality for the entry page. Clicking either image will take you to the interactive SWF file. After seeing this at the next meeting, we all agreed: that's WAY too much pink...

Actionscript follows in the comments. for those interested, creating conditional statements using the e.target keyword is just about the must useful thing you'll ever find if you have a page with lots of buttons. If it wasn't for that, I'd have had to write over 30 gunctions instead of the 5 that I have.

week of 5-30

Not much to report for this week. Created a third template. The changes this time are strictly superficial though. Ian wanted to see how it would look if the pictures were treated as polaroids, and we experimented with using the concept of the TAG as a container for the artists' info. no significant changes on the code side.

SWF can be found here.

after this we put the templates on hold and switch over to the homepage design

notes about computer code for art majors not into computer code

Hey guys,

I'd like to take a second to mention a few things here that might make the code part of Flash a little easier to understand. I know that for a lot of folks the coding can be very intimidating, but it's really not that hard. The main thing is to learn the format. Once you have the format down, then you can look at it, and if not understand immediately what each bit does, at least understand how it fits in with the other bits.

actionscript is pretty much a necessity if you want interactivity in Flash. so here are some basics:

there are 4 basic elements that go into code in actionscript(AS);
instance names
event listeners
variables
functions

when you create a button or movieclip you can create an instance of that item by giving it a name. when you click on an object you have placed on the stage, in the properties window you will see a field that says "instance name." this allows you to create a single button or movieclip and have like 5 or 6 of it on the stage and have each one work independently. take space invaders. you can create a single space invader, then place 50 instances of it on the stage, and that way when you blow one up, only that one disappears.

AS is considered an "event driven" language. this means that it is waiting for things to happen. events. keyboard events, mouse events, timed events, etc. therefore, one of the basic elements of the code is the creation of listeners that wait for these events to occur.

variables are basically storage containers for information. they are mostly important for tracking and looping. say you have 10 buttons, and you want a different thing to happen when each one is clicked. you COULD write 10 different functions, one for each button, or you could write ONE function using a variable to store which button has actually been clicked (check the two previous posts and notice the "e.target == btn1" type statements) they are also useful as counters for creating loops (when you want something to occur a certain number of times) judicious use of variables can cut down the amount of code you have to write by a TON

finally there are functions. these are the parts of the code that actually DO something. they have a name and all the code fits within curly brackets {}

so here is an example:

btn1 --there's an instance name for a button

btn1.addEventListener(MouseEvent.CLICK, playMovie);

you take the instance name, and you add an event listener. the first thing inside the parenthesis is the type of event. in this case, for someone to click on the mouse button. the second item in the parenthesis is the function you want to run when the mouse button is clicked

function playMovie(e.MouseEvent): void
{
gotoAndPlay(2);
}

you declare that this is a function, give it a name. inside the parenthesis you show the type of event(this needs to match the event being listened for. if you put in (e.Event) it would not work because you added the MouseEvent listener to btn1 above) void is a computer code thing that means it doesn't return a value (like a bank account program returning a dollar amount) we won't go into detail here, just put it in there. inside the curly brackets is the actual work. in this case, when you click the button, the Flash document will advance to the second frame and play from there.

two additional important notes:

capitalization is VERY important. stop(); will work. Stop(); will not. if your button is named btn1, and you put in an event listener for Btn1, it won't work.

most (but not all) lines of code require semicolons at the end. that's probably the #1 thing you'll mess up when beginning, leaving off semicolons.

when you code within flash (and in most programming development programs) the program will color code the words for you. this helps greatly for a couple of reasons. first, you'll know right away if you misspell certain words because they'll be the wrong color, and second, certain words are reserved and can't be used as functions or variables. for example you cannot create a function called stop because stop is already used.

Week of May 23rd

Finished a new version of the gallery template, this time fading in thumbnails instead of having them move. It's less dynamic, but more like the Flickr galleries it will be replacing. We also had our first group meeting where we hashed out my need for design guidance (in terms of the aesthetics desired for the art gallery) so that what I create is actually what they want. This template can be found here.

code can be found in the comments section. removing the movement reduced the amount of code from around 300 lines to around 100 lines.

Introduction and work from the week of 5-9-2010

My project for the summer is to continue work begun in the Advanced web for designers class and create a website for the university art gallery (TAG). This is a collaborative effort between myself and Donald Hill, with art design assistance from Ian Lett, Amy Bowman, Joseph Herring, Richard Humphreys and Felicia Batzloff.

My primary responsibility is to provide the Flash framework for the homepage and creating a template to highlight works from each show to replace the archived galleries on Flickr.

For this first week I created a basic slideshow template with scrolling thumbnails. The thumbnails were created using ezthumbs.

Because the goal is to create a template that can be easily updated with limited flash knowledge, I am creating most of the functionality through the actionscript instead of using tweens in movie clips. this results in a great deal of code for the movement. Functions are required to move one set of images on, another to move them off to the left, off to the right, etc and so on. The code follows below. Here is the first template.

stop();
import flash.display.*;
import flash.utils.*;

var preview;
var numClips:int = 10;
var gallery:Array = new Array(numClips);

btn1.visible = false;
btn2.visible = false;
btn3.visible = false;
btn4.visible = false;
btn5.visible = false;
btn6.visible = false;
btn7.visible = false;
btn8.visible = false;
btn9.visible = false;
btn10.visible = false;

stage.addEventListener(Event.ENTER_FRAME, createArray);
stage.addEventListener(Event.ENTER_FRAME, initialize);
next_btn.addEventListener(MouseEvent.CLICK, moveOffStage);
next_btn.addEventListener(MouseEvent.CLICK, releaseClips);
prev_btn.addEventListener(MouseEvent.CLICK, moveOffStage2);
prev_btn.addEventListener(MouseEvent.CLICK, releaseClips2);
hld6.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld7.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld8.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld9.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld10.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);

function createArray(e:Event): void
{
gallery[0] = new mc001();
hld1.addChild(gallery[0]);
gallery[1] = new mc002();
hld2.addChild(gallery[1]);
gallery[2] = new mc003();
hld3.addChild(gallery[2]);
gallery[3] = new mc004();
hld4.addChild(gallery[3]);
gallery[4] = new mc005();
hld5.addChild(gallery[4]);
gallery[5] = new mc006();
hld6.addChild(gallery[5]);
gallery[6] = new mc007();
hld7.addChild(gallery[6]);
gallery[7] = new mc008();
hld8.addChild(gallery[7]);
gallery[8] = new mc009();
hld9.addChild(gallery[8]);
gallery[9] = new mc010();
hld10.addChild(gallery[9]);
stage.removeEventListener(Event.ENTER_FRAME, createArray);
}
function initialize(e:Event):void
{
hld1.addEventListener(Event.ENTER_FRAME, moveClips);
hld2.addEventListener(Event.ENTER_FRAME, moveClips);
hld3.addEventListener(Event.ENTER_FRAME, moveClips);
hld4.addEventListener(Event.ENTER_FRAME, moveClips);
hld5.addEventListener(Event.ENTER_FRAME, moveClips);
stage.removeEventListener(Event.ENTER_FRAME, initialize);
}
function moveClips(e:Event):void
{
if(hld1.x > 25)
{
hld1.x -= 2.5;
if(hld1.x == 25)
{
hld1.removeEventListener(Event.ENTER_FRAME, moveClips);
btn1.visible = true;
btn1.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn1.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld2.x > 175 && hld1.x < 625)
{
hld2.x -=2.5;
if(hld2.x <= 175)
{
hld2.removeEventListener(Event.ENTER_FRAME, moveClips);
btn2.visible = true;
btn2.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn2.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld3.x > 325 && hld1.x < 475)
{
hld3.x -=2.5;
if(hld3.x == 325)
{
hld3.removeEventListener(Event.ENTER_FRAME, moveClips);
btn3.visible = true;
btn3.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn3.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld4.x > 475 && hld1.x < 325)
{
hld4.x -=2.5;
if(hld4.x == 475)
{
hld4.removeEventListener(Event.ENTER_FRAME, moveClips);
btn4.visible = true;
btn4.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn4.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld5.x > 625 && hld1.x < 175)
{
hld5.x -=2.5;
if(hld5.x == 625)
{
hld5.removeEventListener(Event.ENTER_FRAME, moveClips);
btn5.visible = true;
btn5.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn5.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
}
function moveClips2(e:Event):void
{
if(hld6.x > 25)
{
hld6.x -= 2.5;
if(hld6.x == 25)
{
hld6.removeEventListener(Event.ENTER_FRAME, moveClips);
btn6.visible = true;
btn1.visible = false;
btn6.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn6.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld7.x > 175 && hld6.x < 625)
{
hld7.x -=2.5;
if(hld7.x <= 175)
{
hld7.removeEventListener(Event.ENTER_FRAME, moveClips);
btn7.visible = true;
btn2.visible = false;
btn7.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn7.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld8.x > 325 && hld6.x < 475)
{
hld8.x -=2.5;
if(hld8.x == 325)
{
hld8.removeEventListener(Event.ENTER_FRAME, moveClips);
btn8.visible = true;
btn3.visible = false;
btn8.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn8.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld9.x > 475 && hld6.x < 325)
{
hld9.x -=2.5;
if(hld9.x == 475)
{
hld9.removeEventListener(Event.ENTER_FRAME, moveClips);
btn9.visible = true;
btn4.visible = false;
btn9.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn9.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld10.x > 625 && hld6.x < 175)
{
hld10.x -=2.5;
if(hld10.x == 625)
{
hld10.removeEventListener(Event.ENTER_FRAME, moveClips);
btn10.visible = true;
btn5.visible = false;
btn10..addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn10.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
}
function moveClips3(e:Event):void
{
if(hld5.x < 625)
{
hld5.x += 2.5;
if(hld5.x == 625)
{
hld5.removeEventListener(Event.ENTER_FRAME, moveClips3);
btn5.visible = true;
btn10.visible = false;
btn5.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn5.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld4.x < 475 && hld5.x > 25)
{
hld4.x +=2.5;
if(hld4.x == 475)
{
hld4.removeEventListener(Event.ENTER_FRAME, moveClips);
btn4.visible = true;
btn9.visible = false;
btn4.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn4.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld3.x < 325 && hld5.x > 175)
{
hld3.x +=2.5;
if(hld3.x == 325)
{
hld3.removeEventListener(Event.ENTER_FRAME, moveClips);
btn3.visible = true;
btn8.visible = false;
btn3.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn3.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld2.x < 175 && hld5.x > 325)
{
hld2.x +=2.5;
if(hld2.x == 175)
{
hld2.removeEventListener(Event.ENTER_FRAME, moveClips);
btn2.visible = true;
btn7.visible = false;
btn2.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn2.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
if(hld1.x < 25 && hld5.x > 475)
{
hld1.x +=2.5;
if(hld1.x == 25)
{
hld1.removeEventListener(Event.ENTER_FRAME, moveClips);
btn1.visible = true;
btn6.visible = false;
btn1.addEventListener(MouseEvent.MOUSE_OVER, openPrev);
btn1.addEventListener(MouseEvent.MOUSE_OUT, closePrev);
}
}
}
function moveOffStage(e:MouseEvent):void
{
hld1.addEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld2.addEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld3.addEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld4.addEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld5.addEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld6.addEventListener(Event.ENTER_FRAME, moveClips2);
hld7.addEventListener(Event.ENTER_FRAME, moveClips2);
hld8.addEventListener(Event.ENTER_FRAME, moveClips2);
hld9.addEventListener(Event.ENTER_FRAME, moveClips2);
hld10.addEventListener(Event.ENTER_FRAME, moveClips2);
}
function moveOffStage2(e:MouseEvent):void
{
hld1.addEventListener(Event.ENTER_FRAME, moveClips3);
hld2.addEventListener(Event.ENTER_FRAME, moveClips3);
hld3.addEventListener(Event.ENTER_FRAME, moveClips3);
hld4.addEventListener(Event.ENTER_FRAME, moveClips3);
hld5.addEventListener(Event.ENTER_FRAME, moveClips3);
hld6.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld7.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld8.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld9.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld10.addEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
}
function releaseClips(e:MouseEvent):void
{
hld1.removeEventListener(Event.ENTER_FRAME, moveClips3);
hld2.removeEventListener(Event.ENTER_FRAME, moveClips3);
hld3.removeEventListener(Event.ENTER_FRAME, moveClips3);
hld4.removeEventListener(Event.ENTER_FRAME, moveClips3);
hld5.removeEventListener(Event.ENTER_FRAME, moveClips3);
hld6.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld7.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld8.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld9.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
hld10.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage2);
}
function releaseClips2(e:MouseEvent):void
{
hld1.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld2.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld3.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld4.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld5.removeEventListener(Event.ENTER_FRAME, moveClipsOffStage);
hld6.removeEventListener(Event.ENTER_FRAME, moveClips2);
hld7.removeEventListener(Event.ENTER_FRAME, moveClips2);
hld8.removeEventListener(Event.ENTER_FRAME, moveClips2);
hld9.removeEventListener(Event.ENTER_FRAME, moveClips2);
hld10.removeEventListener(Event.ENTER_FRAME, moveClips2);
}
function moveClipsOffStage(e:Event):void
{
if(hld1.x > -125)
hld1.x -= 2.5;
if(hld2.x > -125)
hld2.x -= 2.5;
if(hld3.x > -125)
hld3.x -= 2.5;
if(hld4.x > -125)
hld4.x -= 2.5;
if(hld5.x > -125)
hld5.x -= 2.5;
}
function moveClipsOffStage2(e:Event):void
{
if(hld6.x < 775)
hld6.x += 2.5;
if(hld7.x < 775)
hld7.x += 2.5;
if(hld8.x < 775)
hld8.x += 2.5;
if(hld9.x < 775)
hld9.x += 2.5;
if(hld10.x < 775)
hld10.x += 2.5;
}
function openPrev(e:MouseEvent): void
{
if(e.target == btn1)
preview = new tc001();
if(e.target == btn2)
preview = new tc002();
if(e.target == btn3)
preview = new tc003();
if(e.target == btn4)
preview = new tc004();
if(e.target == btn5)
preview = new tc005();
if(e.target == btn6)
preview = new tc006();
if(e.target == btn7)
preview = new tc007();
if(e.target == btn8)
preview = new tc008();
if(e.target == btn9)
preview = new tc009();
if(e.target == btn10)
preview = new tc010();
loadWindow.addChild(preview);
}
function closePrev(e:MouseEvent): void
{
loadWindow.removeChild(preview);
}