Penn State University -- School of Visual Arts
Fall 2011
ART 416 Advanced Web and Net Art: Multimedia Publishing
Professor: Eduardo Navas (ean13@psu.edu)
T TH 02:30P - 05:30P

Office Hours: Tuesday 12 PM - 2 PM, by appointment
Please contact me via e-mail

Back to 416 Main Page

Weekly Assignment, Introduced Tuesday, October 18, due: Tuesday, October 25, 2010 at 12:00 PM to be uploaded to Angel

Develop an interface in Flash that resembles the interface you developed in php. Create at least three buttons that take the user to three different frames. You should use this Flash Assignment as a way to design your site as you envision it. This is one thing that Flash does offer to developers.

You will have access to a file from which you can take all the necessary code, which is also available below. You will, however, need to spend a lot of time designing the look of each frame to match the vision you proposed for your Second Assignment. Below are basic instructions. Make sure to study the Flash file that I provide on Angel, under Assignments, titled "ThreeButtons.zip"

Basic instructions on how to create these buttons follow below.

Development of assignment:

Create three button instances that take the user to a different frame.
Each frame should present a unique animation.
Each frame must provide buttons that allow the user to go to any of the other two frames.

Hints:
you will need to place a stop(); on each frame in a specially assigned layer named "actions". You should place this layer at the top of your timeline.

Except for your stop();
you should place all code in the first frame in your actions layer.

Look over the Flash animation tutorial for an overview on how to develop simple animations.

-----------

For the three button project you will need to do the following:

Open a flash file

Make sure to have two layers on the main Flash Timeline.

Name the first layer "Actions" and the second "Content".
Create three buttons and place them on Stage (or one button and place three instances on the stage).

On the Properties panel (if not visible access at the top menu bar: Window > Properties > Properties) look for the "Frame" option, right below it give each button the names: "buttOne", "buttTwo", "buttThree" respectively. You must choose each button, and open the properties option for each.

Then create a movie clip (top menu bar: Insert: New Symbol > Movie Clip) and name it "ThreeFrames." This symbol will be blank but not for long!

The empty symbol will have a timeline on the top. Name the first layer "actions" and create a new layer by clicking on the "insert layer icon" on the bottom left of the timeline window. Name the new layer "ThreeFrames".

Create three key frames on both layers(select each frame and right click: choose from the drop down menu: "Insert Key Frame") . On the actions layer place on each key frame the following code:

 

 

stop();

On the ThreeFrames Layer drop one of your three animations that you previously created in separate movie clips (see Flash animation tutorial).

Go back to the main scene. On the top layer, open the actions panel (right click on the key frame and select "actions" at the very bottom of the drop down menu). Drop the following code:

stop();

buttOne.addEventListener(MouseEvent.MOUSE_DOWN, stopHandler);
buttTwo.addEventListener(MouseEvent.MOUSE_DOWN, stopHandler_2);
buttThree.addEventListener(MouseEvent.MOUSE_DOWN, stopHandler_3);

function

stopHandler(evt:MouseEvent): void {

ThreeFrames.gotoAndStop(1);
}

function

stopHandler_2(evt:MouseEvent): void {

ThreeFrames.gotoAndStop(2);
}

function

stopHandler_3(evt:MouseEvent): void {

ThreeFrames.gotoAndStop(3);
}

 

 

If you have not already done so, drop an instance of your movie clip from the library on the stage and on the Properties panel name it "ThreeFrames".

You can publish the fla file and open the html page on a browser. It should work. If it does not, you must debug.

You can compare your file to the example that I make available on Angel titled "ThreeButtons.zip"

You must now work on your design. Make sure your visuals are strong. Fifty percent of your grade will be based on this.