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);
}