Web-based Interactivity

Fall 2010 week 13:—12/06/10: Mon. 9:00 - 12:00

2010-12-12T19:44:00.000-08:00

Hi Everyone,

You should work on these new things in class on Monday, week 13.

You will find additional pieces of code that we have not covered in class, a few new things that you will have to add to your project. These are the if/else statement, a switch statement, and a toggle button that turns music on and off.

That last thing is considered your final exam, so you should definitely do your own work. Everyone's should look different. Doing this well, will definitely separate the good projects from the truly excellent projects.

Projects are due no later than 10:00AM, Monday, 20 December 2010.

Carter-

WEEK 13

Final Project:

PART I

Declarations: You should always start out your code at the top with your declarations. What this means is that you are announcing to AS3 that you are going to be using some variables or other data storage devices, and that you are going to use certain objects in your script down below. For our script, you will need to start out with two Arrays, and then a number of ColorTransform objects. If we need any others later, we will return to the top of the script and add them.

Array Objects

Text Array

First, an array is a particular kind of object in Flash and ActionScript, and all objects begin as variables. These variables, however, are then modified so that they take on additional properties that ordinary variables do not possess.
Second, remember that an array is an object, much like a variable, which holds data. However, an array is able to hold many, many data items, unlike variables which may only hold onto one data element.
The first array that we need is the array that we will use to add text to the buttons. These elements must simply state whatever label you want to appear in your buttons.
Each data item held in an array is indicated by a number. these numbers are known as index numbers, and they always begin counting with the number zero (0).

var txtArray:Array = new Array();

txtArray[0] = "bio";
txtArray[1] = "art";
txtArray[2] = "galleries";
txtArray[3] = "gallery 1";
txtArray[4] = "gallery 2";
txtArray[5] = "movement";
txtArray[6] = "resources";

Another, shorter way of giving an array data, which is what we just did above (we put strings, pieces of text with quotation marks around them) and otherwise known as populating an array is here:

var txtArray:Array = new Array("bio, "art", "galleries", "gallery 1", "gallery 2", "movement", "resources");

Yet another, even shorter and more efficient way of populating an array is what is known as literal notation:

var txtArray:Array = ["bio, "art", "galleries", "gallery 1", "gallery 2", "movement", "resources"];

Any of these is acceptable when declaring and populating an array. They all do exactly the same thing. It is simply a matter of preference.
Now, assuming that you've already created your buttons, you need to apply the text to them. Recall, the way that you should have created your buttons are as MovieClip instances, and that this button movieclip must contain 2 additional movieclips within it, a stroke_mc movieclip for the stroke and a fill_mc for the fill. It should also contain a dynamic text box.
Each of these three items that are inside of your button movieclip should have instance names. I have givem them the instance names of stroke, fill, and btn_txt.
You might also want to take note that for the instance names for the button movieclips, I have started with btn_00. I have done this to match the counting of the array which also begins at 0.

btn_00.btn_txt.text = txtArray[0];
btn_01.btn_txt.text = txtArray[1];
btn_02.btn_txt.text = txtArray[2];

Furthermore, you must remember that the buttons of the drop-down menu are INSIDE another movieclip which, in class, I named options:

btn_00.btn_txt.text = txtArray[0];
btn_01.btn_txt.text = txtArray[1];
btn_02.btn_txt.text = txtArray[2];
options.btn_03.btn_txt.text = txtArray[3];
options.btn_04.btn_txt.text = txtArray[4];
btn_05.btn_txt.text = txtArray[5];
btn_06.btn_txt.text = txtArray[6];

URL Array

The second array should be typed below the first and is going to be used for the URLs for when we need to request the content files, also known as the external .swf files. Whichever mode of creating and populating an array that you used above, you could use here as well. Consistency in a script is always best and helps to avoid confusion later on. However, since each item in our array is also a URLRequest object, the best way to type it is as follows:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("bio.swf");
urlArray[1] = new URLRequest("art.swf");
urlArray[2] = ...etc...

If you want to put your content pages in a separate sub-folder named content, for example, you would type your array slightly differently as below:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("content/bio.swf");
urlArray[1] = new URLRequest("content/art.swf");
urlArray[2] = ...etc...

ColorTransform Objects

New Colors

ColorTransform objects are really just what their name suggests they might be: they are objects which have the ability to change the color of something. In this case, we want to change the color of a movieclip from its current color to a new color. For that, we need to create a ColorTransform object and then apply it to the item that we wish to transform.
The first color object I have down below will be attached to my stroke so that I can modify the color of my stroke to a new color. Thus, in front of the c, I have put the letter s, referring to stroke.
Also, notice down below that the way we create this object is virtually identical to the way that we created our arrays:

var sc_new:ColorTransform = new ColorTransform();
sc_new.color = 0x990000;

Next, is the new color for the fill movieclip, for which I follow exactly the same procedure, except instead of the s in front of the c, I have placed an f to refer to fill:

var fc_new:ColorTransform = new ColorTransform();
fc_new.color = 0xffaaaa;

Many of you have also created a ColorTransform object for your text:

var tc_new:ColorTransform = new ColorTransform();
tc_new.color = 0x660000;

Old Colors

The next set of colors are, for lack of better terminology, are the old colors. These are the original colors that our buttons began with and which they should return to once the user stops interacting with them. If you have three new colors, you should also have 3 old colors:

var sc_old:ColorTransform = new ColorTransform();
sc_old.color = 0x000000;

var fc_old:ColorTransform = new ColorTransform();
fc_old.color = 0xffffff;

var tc_old:ColorTransform = new ColorTransform();
tc_old.color = 0x000000;

Functions: After our declarations above, we will start with our functions. I want to start from the simplest and then progress to the more advanced. At the same time, I would like to start with the general functions, the ones that affect many objects and move to the more particular functions, the ones that affect fewer objects.

Color Modification Function

New Stroke Color

The first function we will try is the function that will change the colors of the buttons. To start this out, however, instead of trying to change all three colors for the stroke, the fill, and the text all at once, it's always better to do one thing at at time. Then, once you get that one thing to function, you can add additional features. Let's start with getting the stroke color for ONE of the button movieclips to change.

function overIt(evt:MouseEvent):void{

btn_00.stroke.transform.colorTransform = sc_new;

}

That's very simple, but it won't work at all until we add a listener to call on this function when we MOUSE_OVER the button.

btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);

Multiple Button Color Change

Now, when you mouse over the first button, the stroke should change colors. There is a problem with this, however: you should notice that inside the function that I used a particular instance name, btn_00. Therefore, this will only work for that one button. If you try mousing over any of the other buttons, it doesn't work at all on them.
Using this logic, then, we'd have to write a separate function for each button just to change the color of each button. That is too much typing to do something simple.
This means, to be more efficient, we have to think of something that allows us to change the color of whatever button that the user happens to be mousing over at any given time. How can we pinpoint a particular button, the button the user is mousing over at any given moment, without actually calling it by name? Because if we call it by name, that means we'll have to go through each one and call each one by name one at a time. This is not efficient at all.
The answer is in the little variable in the function declaration, evt:MouseEvent. There, the term evt (an abbreviation of the word event), is actually a variable. As you should know, a variable is a data container. In this case, this variable contains a particular kind of data. The word after it MouseEvent tells you what kind of data is contained within that variable, information about a event that occurs with the mouse. Whenever the user mouses over the button, information about the button and the event is stored in that variable.
This means, that that variable, evt, contains information about whatever button that the user happens to be mousing over at any given time, and we can access that information.
One of the properties of a MouseEvent is currentTarget. The word target is whatever happens to be the target of the user's attention with the mouse. If the user is mousing over a button, that button is the currentTarget.
Let's try something: let us put a trace in our function and for the moment disable our statement by commenting it out. We are going to trace the name of the current target.

function overIt(evt:MouseEvent):void{

//btn_00.stroke.transform.colorTransform = sc_new;
trace(evt.currentTarget.name);

}

Now, let's add listeners for the remaining buttons:

btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_01.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_02.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_03.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_04.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_05.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_06.addEventListener(MouseEvent.MOUSE_OVER, overIt);

You should see now, that when you test your movie you the name of the button you are mousing over, of WHICHEVER button you are mousing over, pops up in the output window.
So, let's apply that to the color change:

function overIt(evt:MouseEvent):void{

btn_00evt.currentTarget.stroke.transform.colorTransform = sc_new;

}

New Fill Color

We can apply the same technique to making the color of the fill and text change:

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;

}

Original Stroke & Fill Colors

Now that we have changed the color, let's make it change back. We'll begin this by creating a new function:

function outIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_old;
evt.currentTarget.fill.transform.colorTransform = fc_old;
evt.currentTarget.btn_txt.transform.colorTransform = tc_old;

}

And then the listeners:

btn_00.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_01.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_02.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_03.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_04.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_05.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_06.addEventListener(MouseEvent.MOUSE_OVER, outIt);

Great, now it changes back and forth easily from one set of colors back to the original set of colors. Great, now onto the next job, opening and closing the drop-down menu.

Drop-Down Function

Close Menu

The first thing we need to do is close the menu so that when we first open our site it is NOT opened with all of the buttons underneath it showing. We don't want those buttons showing until we mouse over the top button of the menu, the only one that should be showing. All the others, remember, are inside another movieclip that we named options.
That's very easy, at the very top of your script in the actions window, type the following line of code:

this.options.visible = false;

And that's it for that. When you test the movie, you'll see those buttons are gone

Open Menu

But now, we want to make them appear when we mouse over the top button. That's easy enough. All we would have to do is create a function so that when you MOUSE_OVER the top button of the menu, the other buttons below it become visible.
If you recall, however, we already have a listener for the MOUSE_OVER event, and it calls our first function, overIt. That means we have to put this part within that function.

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
this.options.visible = true;

}

Aha! If you tested that, you found that it didn't quite work. It opens when you mouse over ANY of the buttons, not only the one with the menu. That's a problem. We ONLY want it to open when we mouse over the top button with the menu and ONLY that button, none of the others.
To do that we'll need to learn about a new type of statement, a conditional statement. We also call these if/else statements.
In an If/else statement, you can pinpoint an action that you want to have happen only IF a certain condition is met.
Our condition is if the user mouses over the top button of the menu. In my script, my top button has an instance name of btn_02, so that will be my condition:

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
if (evt.currentTarget.name == "btn_02") {

this.options.visible = true;

}

}

To make certain that the menu stays open so long as we are mousing over ANY of the buttons of the menu, not just the top one, but also the others below it, we must add some conditions to our statement.
Not only do we want it to remain open IF we mouse over the top button, but we want it to remain open if we mouse over the top button OR the 2nd button, OR the 3rd button, OR the 4th button. The way we includ the OR OPTIONS is with the || characters, which are located at the SHIFT - \.

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
if (evt.currentTarget.name == "btn_02" || evt.currentTarget.name == "btn_03" || evt.currentTarget.name == "btn_04") {

this.options.visible = true;

}

}

Now, the menu will remain open until you mouse over another button. This isn't a perfect solution, but it is fine for now. I will give extra credit to anyone who comes up with a solution in which the menu closes when you mouse off any of the buttons, without having to wait until you mouse over another button before it closes. Don't spend a lot of time and don't write a lot of code to solve this. It isn't that important. Other things in this project are much more important.

Loading External Files

Loader Object

We left off at the beginning one of our objects, and that is the Loader object. This is essential for placing external files within another main file.
We have our URLRequest objects that request a particular file. Now we need to place the requested file within an object that will actually do the job of loading it, of bringing it from outside the current (index) .swf file and preparing it for placement onto the current file. If you recall my gun analogy from class, the URLRequest is the external file, so it is like a bullet. The loader, then, is the gun that will deliver our bullet.
The next two jobs then are to create the loader and then place the bullets inside our gun. Our gun, however, is a special sort of gun that can only hold and fire one bullet at a time. That means it is like most shotguns: we have to reload it with a new shell each time we shoot with it.
First let's create the loader at the top, in the declarations section of our code. We can place it beneath the array with the URLRequests:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("bio.swf");
urlArray[1] = new URLRequest("art.swf");
urlArray[2] = ...etc...

var swfLoader:Loader = new Loader();

Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.

function loadIt(evt:MouseEvent):void {

}

Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.

function loadIt(evt:MouseEvent):void {

swfLoader.load(urlArray[0]);
box.addChild(swfLoader);

}

Create a listener grouped at the bottom with all of the other listeners. Since we are trying to load the first item of our array, this means we want the listener to relate to the first button.

btn_00.addEventListener(MouseEvent.CLICK, loadIt);

This is very nice and all, but we have a similar problem that we did above when we wanted to change the colors of the different buttons. If you look in our function, you will see that it will only add the first item of the array, and none of the others. If we followed this logic, as with the color function, we'd have to write one function for every button. That is terribly inefficient, and there is a better way.
Once again, we need to rely on that little variable named evt within the parentheses in the function declaration.
Like we did with the colors, we'll use it together with the currentTarget property:

function loadIt(evt:MouseEvent):void {

//swfLoader.load(urlArray[0]);
//box.addChild(swfLoader);
trace(evt.currentTarget.name);

}

Now, when you click on the first button, in the output window, you'll see the name of the button. So, let's add the listeners for all of the other buttons:

btn_00.addEventListener(MouseEvent.CLICK, loadIt);
btn_01.addEventListener(MouseEvent.CLICK, loadIt);
btn_02.addEventListener(MouseEvent.CLICK, loadIt);
options.btn_03.addEventListener(MouseEvent.CLICK, loadIt);
options.btn_04.addEventListener(MouseEvent.CLICK, loadIt);
btn_05.addEventListener(MouseEvent.CLICK, loadIt);
btn_06.addEventListener(MouseEvent.CLICK, loadIt);

Notice that I have a line through the listener for btn_02 (the third button). That is because it is the one with the drop-down menu. It doesn't load external files, so we don't need to include it in this function.
Now, when you click on the individual buttons, you see their names pop up in the output window.
Next, let's load a file, but to do so we'll have to learn a new type of statement. As above with the drop-down menu, we have conditions. In this case, we don't have only ONE condition OR another. No, in this case we have MULTIPLE CONDITIONS.
We could still use the If/else statement, but when you have many conditions, it is better to use the switch statement.
In our situation, we have several buttons and each of those buttons loads a different file. IF we mouse over one button, THEN we must load a certain file. Otherwise, IF we mouse over another button, THEN we must load another file; and so on for several buttons.
The variable, evt allows us to capture which button the user happens to be mousing over or clicking on at any given moment. Once again, this is very useful to us. This time, like before, we are going to capture the instance name of the button; but in addition, we are going to store it in a new variable within the function:

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box.addChild(swfLoader);
//trace(evt.currentTarget.name);

}

With this variable, you will see that it contains the necessary information. If we put the variable within the trace you will see that it traces the same info as before here: trace(evt.currentTarget.name);

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box.addChild(swfLoader);
trace(btnName);

}

As you can see if you try that out, nothing has changed with the addition of that variable.
Now, we can use that variable, btnName to determine which button the user happens to be mousing over. And then, once we determine which case it is, we'll tell actionscript to load one file or another.
In the case of btn_00, then Flash should load the first file; in the case of btn_01, then Flash should load the second file; and so on for all the files.

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

do something;
stop;

case "btn_01" :

do something else;
stop;

case "btn_03" :

do this other thing;
stop;

case "btn_04" :

do yet another thing;
stop;

case "btn_05" :

blah blah blah;
stop;

case "btn_06" :

yadda yadda yadda;
stop;

}

}

So, what we actually want to tell the switch statement to do is to load different files depending on which button is clicked:

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

swfLoader.load(urlArray[0]);
box.addChild(swfLoader);
break;

case "btn_01" :

swfLoader.load(urlArray[1]);
box.addChild(swfLoader);
break;

case "btn_03" :

swfLoader.load(urlArray[2]);
box.addChild(swfLoader);
break;

...etc...

}

}

In addition, we want to make certain that the drop-down menu closes when you click on any of the buttons that are within the menu. In my case, in the drop-down menu that I've created here, that would be the 4th, and 5th (btn_03 & btn_04).

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

swfLoader.load(urlArray[0]);
box.addChild(swfLoader);
break;

case "btn_01" :

swfLoader.load(urlArray[1]);
box.addChild(swfLoader);
break;

case "btn_03" :

swfLoader.load(urlArray[2]);
box.addChild(swfLoader);
this.options.visible = false;
break;

case "btn_04" :

swfLoader.load(urlArray[3]);
box.addChild(swfLoader);
this.options.visible = false;
break;

...etc...

}

}

PART II

Music: For the last part of this project, you will need to do two things: create what's known as a toggle button, which is a button that has an ON position and an OFF position. When you click on it once it turns ON, and then when you click on it again, it turns OFF.

Toggle Button:

As with the other buttons, this button will be a nested set of movieclips. This simply means that you will have movieclips within movieclips.
For example, perhaps you will have a shape that looks like a speaker for your ON position, and then a red slash that appears over the speaker for your OFF position.
So, your first job is to draw a side-view of the way a speaker looks: ( http://www.tuaw.com/2007/09/12/access-your-macs-super-quiet-mode/ ). That is an example.
Once you do that, convert it into a movieclip symbol.
Next, draw a diagonal red slash over the top of it and conver it into a movieclip as well.
Both of these movieclips should have instance names.
The speaker I will call sndON, and the slash I will call simply sndOFF.
Now place the red slash on top of the speaker if you haven't already.
Select them both and convert them into another symbol named sndBtn.
Enter into edit mode for this new symbol and then select both objects.
Right-click on your selection and select distribute to layers.
Delete the blank layer and exit edit mode.
Give your symbol the instance name of snd.

Toggle Button Actions:

This button is very similar to the drop-down menu: first we have to hide the red slash. Therefore, at the very top of your code, on the 2nd line, type the following line of code:

this.snd.sndOFF.visible = false;

Since the sndOFF movieclip, the one of the red slash is going to be INvisible, the visibility is FALSE, then all the user will see is the speaker. This means that the movie will start off with the sound playing. The default is to have music. The user will have to turn it off if he/she wishes.
Now, we need to create a function that switches the visibility of the slash from false to true. This will signify that the sound has stopped and no longer playing because the speaker will have a VISIBLE red slash over the speaker.

function sndOnOff(evt:MouseEvent):void {

this.snd.sndOFF.visible = true;

}

Following this, you will need to add the listener for the snd movieclip:

snd.addEventListener(MouseEvent.CLICK, sndOnOff);

The problem with this function is that it only turns the sound ON. It would be better if the function turned it both on AND off. To do that we will need another if/else statement. This statement will simply determine if the red slash is visible or invisible. If it is visible, then the sound is OFF; and if it is invisible, then the sound is ON.

function sndOnOff(evt:MouseEvent):void {

if(snd.sndOFF.visible == false) {

snd.sndOFF.visible = true;

} else {

snd.sndOFF.visible = false;

}

}

Music File:

Now, in your main folder, create another folder named music.
Within that folder, you need to place a music file. This music file MUST be an .mp3 file.

Music Actions:

In order to have this button place music into your site, you will first need to declare three objects. Therefore, scroll UP to the declarations section of your code at the top.
The first object is the sound object and it contains the music sound itself.
The second object is the sound channel object and it controls the behavior of the sound, whether it is playing or not.
The third object is the URLRequest object, which, like any of our other request objects, requests an external file and prepares it for loading into the main .swf movie file.

var sndMus:Sound = new Sound();
var sndChan:SoundChannel = new SoundChannel();
var sndReq:URLRequest = new URLRequest("song.mp3");

Next, you have to load the requested file:

var sndMus:Sound = new Sound();
var sndChan:SoundChannel = new SoundChannel();
var sndReq:URLRequest = new URLRequest("song.mp3");
sndMus.load(sndReq);

Now, you have to create a function to play the loaded file; but that doesn't make any sense: we already have a function that operates the button. We can just add some actions to that function:

function sndOnOff(evt:MouseEvent):void {

if(snd.sndOFF.visible == false) {

snd.sndOFF.visible = false;
sndChan = sndMus.play();

} else {

snd.sndOFF.visible = true;
sndChan.stop();

}

}

Fall 2010 week 12:—11/29/10: Mon. 9:00 - 12:00f

2010-11-29T09:21:00.000-08:00

Hi Everybody,

Seems that many of you who have been stumped are finally starting to get how all this work. There are only two weeks remaining, so make the most of the little time you have.

ALL BUTTONS SHOULD BE MOVIECLIPS. YOU WILL HAVE TO COMPLETE RE-DO THEM.

YOU WILL NEED AT LEAST ONE DROP-DOWN MENU, PROBABLY FOR YOUR GALLERY BUTTON (GALLERY 1, GALLERY 2) IN YOUR INDEX FILE. EXTRA POINTS TO ANY ADDITIONAL DROP-DOWNS YOU USE, BUT DON'T USE A DROP-DOWN IF IT IS NOT NECESSARY.

Carter-

WEEK 12

Homework

Continue working on your final projects, re-making your buttons from scratch as MovieClips, and including a drop-down menu, probably in place of your 2 Gallery buttons.

Classwork

LINK This week's class files

Below is the work that we began in class this week. Please review it if you feel you require extra practice, and come to class with any questions you may still have. This will be required for you final project.

Continue on with the drop-down menu that you started last week.
Type following object type known as an array at the very top of your actions:

var txtArray:Array = new Array();
txtArray[0] = "menu";
txtArray[1] = "one";;
txtArray[2] = "two";
txtArray[3] = "three";
txtArray[4] = "four";
txtArray[5] = "five";

Now, change the following code:

btn_00.btn_txt.text = txtArray[0];
options.btn_01.btn_txt.text = txtArray[1];
options.btn_02.btn_txt.text = txtArray[2];
options.btn_03.btn_txt.text = txtArray[3];
options.btn_04.btn_txt.text = txtArray[4];
options.btn_05.btn_txt.text = txtArray[5];

Now, let's create another array object right below the first:

var swfArray:Array = new Array();
swfArray[0] = "one.swf";
swfArray[1] = "two.swf";
swfArray[2] = "three.swf";
swfArray[3] = "four.swf";
swfArray[4] = "five.swf";

Next, change the next bit of code:

var req_01:URLRequest = new URLRequest(swfArray[0]);
var req_02:URLRequest = new URLRequest(swfArray[1]);
var req_03:URLRequest = new URLRequest(swfArray[2]);
var req_04:URLRequest = new URLRequest(swfArray[3]);
var req_05:URLRequest = new URLRequest(swfArray[4]);

Now look at your functions. At this point you should have 17 functions in total. That results in a lot of code, much of which is redundant. We can simplify it.
Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
Here is what you do: Except for the functions for the top button, you should delete the Mouse Over and Mouse Out functions for EACH button. I’d named mine newColor_01 through newColor_05 and deleted all of those.
You should also delete the listeners for those functions.
When you're finished deleting, you should be left with 2 functions for the first button and 1 function for each of the options. That will be a total of 7 functions and 7 listeners. Unfortunately, now only the top button changes colors. We have to create a new function now that makes ALL the buttons change colors.
Type the following code:

function newColor_opt(evt:MouseEvent):void
{

trace(evt);

}

Now, create five listeners for the MOUSE_OVER event which calls this new function, newColor_opt at the end of it. We want this so that when we mouse over each of the buttons they call the SAME function, this new one.
Test the movie.
What you'll get when typing that is information about the MouseEvent. If you look in your code, in between the parentheses of the function, you will see that EVT is there. It is a variable that contains information about the MouseEvent. That is why when we do a trace(), we see the information that is held in that evt variable.
Now change the trace to the following:

function newColor_opt(evt:MouseEvent):void
{

trace(evt.currentTarget);

}

What you'll see now, is information that tells you what you have moused over is a MovieClip. Mouse over each of the options and you should get the same thing.
Current Target refers to the thing that you as the user are currently touching or mousing over with your mouse at that moment.
We can even output the NAME of the button that you mouseOver:

function newColor_opt(evt:MouseEvent):void
{

trace(evt.currentTarget.name);

}

But we don't need the name. What we do need is to change the stroke and fill and text colors:

function newColor_opt(evt:MouseEvent):void
{

evt.currentTarget.stroke.transform.colorTransform = s_newC;
evt.currentTarget.fill.transform.colorTransform = f_newC;
evt.currentTarget.btn_txt.transform.colorTransform = s_newC;

}

Now, we need a new function and set of listeners so that when you mouse off EACH button, they change back to their original colors:

function oldColor_opt(evt:MouseEvent):void
{

evt.currentTarget.stroke.transform.colorTransform = s_oldC;
evt.currentTarget.fill.transform.colorTransform = f_oldC;
evt.currentTarget.btn_txt.transform.colorTransform = s_oldC;

}

Don't forget to type the listeners, one for each button for the MOUSE_OUT for this function.

Fall 2010 week 11:—11/22/10: Mon. 9:00 - 12:00f

2010-11-23T07:26:00.000-08:00

Hi Everybody,

Good Work, yesterday! Let's keep it up.

Work hard this week. Make certain that you get the drop-down menu functioning as you will be required to have one in the final project.

The steps below outline what we have done in the last couple of weeks, including the additional steps that I included in class on Monday.

The 2nd exercise are some additional steps you should take.

Carter-

WEEK 9

Homework

For your final project, you will have to include a drop-down menu. My suggestion is that you use the gallery for this. Since you have two galleries already, make a drop-down menu to select one or the other.
You will also have to make all buttons into movieclips.

Classwork

LINK This week's class files

Below is the work that we began in class this week and last. Please review it if you feel you require extra practice, and come to class with any questions you may still have. This will be required for you final project.

Create a new folder for today's work, and open a new Flash file. Save the first file as index.fla.
Create a single rectangular movieclip symbol with a 3pt stroke, and with the following dimensions:

width: 125px
height: 25px

Now, give it the instance name, btn_00 and move it to the upper-left corner.
Enter into edit mode for this new symbol (double-click on it). Look in the upper-left corner and make certain you see the name of your symbol there. This tells you that you are in edit mode for that symbol.
Select only the stroke and convert it into another movieclip named stroke_mc.
Give it the instance name of stroke.
Now, select only the fill and convert it into another movieclip named fill_mc.
Give it the instance name of fill.
Now, select everything, both the stroke and the fill movieclips on the stage.
Right-click on your selection and select Distribute to Layers.
Delete the empty layer at the top that results in doing this, and drag the fill layer to the bottom.
Create a new layer named text and make certain it is at the top of the stack.
Choose Classic text in the options and Dynamic.
With the Type tool (T) draw a text box that is almost (but not quite) the same width and height as the rectangle directly on top of this rectangle.
Make the font Arial, Bold, 12pt, and center it, but do NOT type anything in this box. This will be done with ActionScript.
Give the instance name btn_txt to this text box.
Exit edit mode.
Name the first layer btns, lock it, and add a 2nd layer named as for actions.
The first thing you should type is the code to put text into your text box. To do this you type the name of the button, followed by a dot and the name of the text box:

btn_00.btn_txt.text = "menu";

Underneath that, you will need to create the four color transform objects, two objects to transform the fill and the stroke to new colors, and two objects to transform them back to their original colors. If my rectangle were white with a dark gray stroke and I wanted to transform the colors to red with a black stroke, this is how they would be created:

var s_oldC:ColorTransform = new ColorTransform();
s_oldC.color = 0x666666;

var f_oldC:ColorTransform = new ColorTransform();
f_oldC.color = 0xffffff;

var s_newC:ColorTransform = new ColorTransform();
s_newC.color = 0x000000;

var f_newC:ColorTransform = new ColorTransform();
f_newC.color = 0xff0000;

Now, I must create the function that will change the colors of the rectangle to new colors:

function newColor_00(evt:MouseEvent):void
{

btn_00.stroke.transform.colorTransform = s_newC;
btn_00.fill.transform.colorTransform = f_newC;

}

The listener that I want to go with this function will activate it with a Mouse Over event when the user mouses over the WHOLE BUTTON:

btn_00.addEventListener(MouseEvent.MOUSE_OVER, newColor_00);

Now I will type the function and listener that will be used to change the colors BACK to their original colors when the user MOUSES OFF of the button:

function newColor_00(evt:MouseEvent):void
{

btn_00.stroke.transform.colorTransform = s_newC;
btn_00.fill.transform.colorTransform = f_newC;

}

function oldColor_00(evt:MouseEvent):void
{

btn_00.stroke.transform.colorTransform = s_oldC;
btn_00.fill.transform.colorTransform = f_oldC;

}

btn_00.addEventListener(MouseEvent.MOUSE_OVER, newColor_00);
btn_00.addEventListener(MouseEvent.MOUSE_OUT, oldColor_00);

Now that you have the first button functioning properly, let's do the remaining buttons: lock all layers, create a new layer named options, and drag 5 more instances of the button movieclip from your library onto the stage directly under the first one and line them up perfectly WITHOUT any space between them.
Give them the instance names of btn_01, btn_02, btn_03, btn_04, and btn_05.
It took 2 functions and 2 listeners to get the first movieclip to change colors. To do the other 5 buttons you will need TWO FUNCTION & TWO LISTENERS FOR EACH, one each for mouse over and one each for mouse out. The should be exactly the same as the first two, but they should have different names.

When you get all six of the buttons working properly so that they change colors back and forth when you mouse on and off each one, then select the 5 lower buttons.
Convert them into a new MovieClip named options_mc and give it the instance name of options.
When you do this, the ActionScript will no longer function because all the lower buttons have been moved to a new location. In order to make it work properly again, in front of the instance name of each button, you must type the instance name of the new movie clip followed by a dot WHEREVER YOU HAVE TYPED THE BUTTONS INSTANCE NAMES:

options.btn_01

Once you get the colors working properly, you will need to put text inside these buttons as well. Since they are the SAME movieclip as the first button, all you have to do is TYPE CODE TO DO THIS, so go to your actions and type the following:

btn_00.btn_txt.text = "menu";
options.btn_01.btn_txt.text = "one";
options.btn_02.btn_txt.text = "two";
options.btn_03.btn_txt.text = "three";
options.btn_04.btn_txt.text = "four";
options.btn_05.btn_txt.text = "five";

That should place text in all of your buttons; but now we want to make the options disappear. Since this is going to be a drop-down menu, we want the user to only see the first button, and then when he/she mouses over it, the other buttons appear. To do this, underneath the code above, type the following:

btn_00.btn_txt.text = "menu";
options.btn_01.btn_txt.text = "one";
options.btn_02.btn_txt.text = "two";
options.btn_03.btn_txt.text = "three";
options.btn_04.btn_txt.text = "four";
options.btn_05.btn_txt.text = "five";

options.visible = false;

When testing this movie at this point, nothing will appear except the top button. When you mouse over it, its colors should still change, but the other buttons remain invisible. Therefore, what you will need to do is make the OPTIONS movieclip to appear when you mouse over the top button. This new line of code should be within the first function that you've already written:
1. function newColor(evt:MouseEvent):void
2. {
3. }
Make certain you save your document, and then open a new one.
Inside this document you should ONLY place a single image and a piece of text.
Save it with the name of one.fla in the same folder as the other and then generate the .swf file (cmd-enter).
Repeat that with 4 more files and name them two.fla, three.fla, four.fla, and five.fla.
Back in your index.fla file, lock all your layers and add a new layer named box.
Drag this layer under the as layer.
Draw a rectangle in this layer, convert it into a movieclip named box_mc and give it an instance name of box.
Draw a rectangle in this layer, convert it into a movieclip named box_mc and give it an instance name of box.
Place it directly to the right of your drop-down menu.
Enter into edit mode for this new rectangular movieclip.
Once inside it, delete the rectangle that you see there on the stage (but NOT from the library).
Exit edit mode. If you recall, we did this for the Midterm in the first half of the term. The box movieclip is still there, but it is now what is known as an EMPTY movieclip because it is blank.
If you haven't done so yet, give it the instance name of box.

The next step is to load those external .swf files into this box. For that, you will need to do two things:

Create a new Loader object:

var myLoader:Loader = new Loader();

Create new URLRequest objects, one for EACH external file. Below is an example of one:

var reqOne:URLRequest = new URLRequest("someFile.swf");

Create a new a function for EACH external file to load it into the box movieclip on the stage:

function loadOne(evt:MouseEvent):void
{

myLoader.load(reqOne);
this.box.addChild(myLoader);

}

Create a new event listener for EACH function that will load the file when the user CLICKS on the buttons in the drop-down menu

options.btn_01.addEventListener(MouseEvent.CLICK, loadOne);

Fall 2010 week 9:—11/08/10: Mon. 9:00 - 12:00

2010-11-09T06:52:00.000-08:00

Hi Everybody,

Good Work, yesterday! Let's keep it up.

Many of you are having trouble with this class and the coding, but that's all right. Learning how to script and code is NOT an easy thing; however, you have to TRY. Even if you know you're not going to be successful, you have to make a SINCERE effort. That means spending MORE THAN A HALF HOUR on the homework.

And many of you are spending FAR LESS than that. That is exactly the WRONG THING TO DO, unless you like me so much you want to spend another semester in this class with me. I'm flattered, but perhaps you want to move on with your lives and on to the next class. You can always come back and visit if you like me THAT MUCH.

Okay, well, there's homework this week, and extra credit. Have a nice week and work hard.

Carter-

WEEK 9

Classwork

LINK This week's class files

Below is the work that we completed this week in class. Please review it if you feel you require extra practice, and come to class with any questions you may still have.

Create a new folder for today's work, and open a new Flash file.
Create a single rectangular movieclip symbol (without a stroke) with the following dimensions:

width: 100px
height: 25px

Now, give it the instance name, one.
From your library, drag 4 more instances of this movieclip onto your stage.
Give them the instance names of two, three, four, and five.
Name the first layer rects and add a second named as.
In your new AS layer, type the following code:

one.width = 250;
two.height = 185;

Save and test. You should see that two of your rectangles changed according to the instructions given by the code.
Now, we'll change the third one with code:

three.width = 300;
three.height = 50;

Once again, save and test your movie.
In this case, we changed TWO properties, both the width AND the height for the same movieclip. Now, type the following code changes:

one.width = 250;
two.height = 185;

//the following two sections perform the same tasks

/* one
three.width = 300;
three.height = 50;
*/

// two
with(three)
{

width = 300;
height = 50;

}

The above changes to the code for the THIRD movieclip will not cause anything new to happen. It is simply another way to type the previous code. Notice, that you only have to type the INSTANCE NAME (three) one time instead of two times as you did previously. If there were a dozen or more lines of code where we were modifying many properties of the same object, this would be a much more efficient way of doing it, especially if the object were NESTED inside of other movieclips.
Now type the code for the last two movieclips, for ROTATION and ALPHA:

four.rotation = 45;
five.alpha = 0.2;

Save and test your movie. You will see that one rotated 45 degrees and that the other became more transparent.
For ROTATION, you can type a number anywhere between 0 and 360.
For ALPHA, you can type a number anywhere between 0.00 and 1.00.

All of this code happens automatically. That is because code runs immediately from top to bottom when you test a movie UNLESS you type it within a function. This is what we will do next, so type the following code modifications:

function chgRects(evt:MouseEvent):void
{

one.width = 250;
two.height = 185;

//the following two sections perform the same tasks

/* one
three.width = 300;
three.height = 50;
*/

// two
with(three)
{

width = 300;
height = 50;

}

four.rotation = 45;
five.alpha = 0.2;

}

Notice, we only typed the first line new and then enclosed the other lines of code that we'd already typed between curly brackets. If you save and test your movie now, you'll see that nothing happens.
Now, all we need as far as code goes is a listener:

six.addEventListener(MouseEvent.CLICK, chgRects);

The listener above tells us three things:

The first term, six, tells us that there must be some object on the stage with the INSTANCE NAME of six which the user must interact with;
The fourth term, CLICK, tells us that the user must CLICK on that object named six in order to make something happen;
The last term, chgRects, tells us that once the user clicks on that object named six, the chgRects function will be activated.

Therefore, you will need a SIXTH movieclip on your stage, and it must have the INSTANCE NAME OF six before this will function properly.
Once you do that, save and test your movie.

Homework

exercise 1— Making a Movie-Clip behave as a button:

Draw a rectangle with the following characteristics:

width: 150px;
height: 25px;
fill color: light gray;
stroke color: dark gray;
stroke width: 5px;

Select the fill (NOT the stroke).
Convert it to a movie-clip named rFill_mc.
Temporarily, cut and Paste it into its own layer.
Give it the instance name of rFill.
Move this layer below the first layer and lock it.
Select the entire stroke and convert it to a movie-clip named rStroke_mc.
Give it the instance name of rStroke.
Unlock both layers, and select both the stroke and the fill on the stage.
Convert them together into another movie-clip named btn_mc.
Give it the instance name of rect.
Delete the blank layer.
Enter into edit mode for the rectangle.
Once inside the rectangle movie-clip, select both the fill and the stroke on the stage.
Then, right-click on top of your selection and choose distribute to layers. Make sure the stroke layer is on top.
Delete the blank layer, and exit edit mode.
What you have now is a set of nested movie-clips: you have the main movie-clip named rect, and the nested movie-clips inside, stroke and fill.

Your job for homework is to make ONLY THE STROKE change to RED when the user mouses over; and then, when the user mouses off, for the color to go back to its original dark gray.

extra credit: Using BUTTON SYMBOLS as buttons (and NOT movie-clips as buttons), together with the VISIBLE property, create the most simple drop-down menu that you can with a total of 5 buttons in it.

Fall 2010 week 8:—11/01/10: Mon. 9:00 - 12:00

2010-11-04T10:31:00.000-07:00

Hi Everybody,

Please make sure you come to class next week with your projects in working order and with the homework down below.

Carter-

WEEK 8

Classwork 1:

This past class we had a test. It examined your practical knowledge of the code we have learned thus far, as well as your ability to understand the terminology in order to do something new.

If you had a difficult time with the exam, you should follow the steps below until you understand and can complete it to functioning order. Practice makes perfect.
1. Create a folder with your name as its name.
2. Open a new file in Flash.
3. Save it with the name of your first initial, last name, using camel case; and then an underscore and finally fa10 (e.g. cJohnson_fa10).
4. In this exercise, make sure you name all your layers properly.
5. Draw a rectangle on the upper-left corner your stage with a width of 100px, and a height of 200px.
6. Convert it into a movieclip with whatever symbol name you want, but it should have something to do with what this object is or what it looks like.
7. Next, give it an appropriate instance name.
8. Now, from the library, drag a 2nd instance of this rectangle onto the bottom-center of the stage.
9. Give it the instance name of btn_mc.
10. Save this file and then create another new file.
11. In this 2nd file, type the following aligned right in the upper-right corner of the stage:
12. Save this file as two.fla, then generate the .swf file.
13. You are finished with the 2nd file, so you may close it if you wish.
14. I For the following 2 parts, you will be typing ActionScript in the first file.
Classwork 2: LINK Here are the files with the code and function Flash files.
Homework 1:
As you should've done last week, take a look at your projects and do as much as possible to complete & improve them by next week. We will continue working on these projects for the Final Project, so you don't want to start out the rest of the term behind by having to fix what you have and then implementing all the many new items of ActionScript that we will be adding over the coming weeks.
Homework 2:
1. In a new file, create a rectangle WITHOUT a stroke and convert it into a movieclip.
2. Using what you know from what we did in class this week, create a function that is triggered when the user mouses over this movieclip.
3. The movieclip should get a little bit wider and have a slight reduction in height when the user mouses over it.
4. You should also create a 2nd function that is triggered when the user mouses off of this movieclip.
5. In this function, the movieclip should change back to its original color and have a return to its original height when the user mouses off of it.

Fall 2010 week 7:—10/25/10: Mon. 9:00 - 12:00

2010-10-26T06:22:00.000-07:00

Hi Everybody,

So you can all breathe a sigh of relief: one way or another, you got through the midterm push.

Whether you did well at midterm or poorly is irrelevant at this point. You should behave as if you're starting fresh, almost as if we're starting a new semester. What you should all consider, however, is HOW you want to start off the rest of the term next week. IF YOU REALLY WANT TO START OFF ON THE RIGHT FOOT, THEN MAKE SURE YOU COME TO CLASS NEXT WEEK WITH YOUR PROJECTS ***WORKING PERFECTLY*** AND LOOKING GREAT!.

So that means that some of you will have to push a bit more this week to get your projects working. We are going to continue with the same projects, but with MANY modifications for the final.

WEEK 7

Homework 1:
Take a look at your projects and do as much as possible to improve them by next week. We will continue working on these projects for the Final, so you don't want to start out the rest of the term behind by having to fix what you have and then implementing all the many new items of ActionScript that we will be adding over the coming weeks.
Homework 2:
LINK This is an example of a quiz that I gave last semester. Next week at the beginning of class, I will give a quiz VERY SIMILAR to this one. Make certain you can do it.

Fall 2010 week 6:—10/18/10: Mon. 9:00 - 12:00

2010-10-21T10:26:00.001-07:00

Hi Everyone,

A lot of you are very behind and, I suspect, didn't do anything during the three weeks before our last class that we did not meet. Please, try not to miss anymore classes or forget to do your homework.

Complete the entire site by next week for your midterm project. Even if you do not have time to get it perfect, complete all the pages. Trying to do something, wrong or not, is always better than giving me something that is incomplete.

Have a nice week.

WEEK 6

Syllabus

LINK class syllabus

Classwork

LINK These files are similar to what we produced in class this week and last. Please make sure that you understand the construction and the code as YOU MUST DO the same thing for your midterm projects.

Homework

exercise 1:
A few of you have not yet sent me your intended subjects for your midterm projects. As of this past Monday, they were late. I suggest you email me IMMEDIATELY:
exercise 2:
FINAL PROJECTS DUE MONDAY:
1. Pietr Mondriaan - De Stijl -->Jennifer De Los Santos
2. Theo van Doesburg - De Stijl
3. Joan Miro - Surrealism -->Julian Fagan
4. Max Ernst - Surrealism -->Christopher Batiz
5. Georges Braque - Cubism -->Giovanni Diaz
6. Juan Gris - Cubism
7. Umberto Boccioni - Futurism
8. Carlo Carrà - Futurism -->Cory Jeminez
9. Kazimir Malevich - Suprematism -->Mark Little
10. El Lissitzky - (Russian) Constructivism -->Gabriel Ruiz
11. Man Ray - Dadaism -->Carlos Lopez
12. Hannah Höch - Dadaism -->Pablito Mirón
13. Henri Matisse - Fauvism
14. André Derain - Fauvism -->Jaron Harris
15. Paul Cezanne - Post-Impressionism -->Acheson Phillips
16. Vincent van Gogh - Post-Impressionism -->Christopher Breland
17. Wassily Kandinsky - Expressionism -->Randy Brodie
18. Otto Dix - Expressionism -->Kenneth Jean
19. Jackson Pollock - Abstract Expressionism -->Andrew Mazowiecki
20. Willem De Kooning - Abstract Expressionism -->Dwight McLaurin
21. Dan Flavin - Minimalism -->Julio Perez
22. Agnes Martin - Minimalism -->Frank Crichlow
23. Sol Lewitt - Conceptualism -->Daniel Thomas
24. Marcel Duchamp - Conceptualism -->Michael Foster
25. Roy Lichtenstein - Pop -->Eddie Jemmott
26. Claes Oldenburg - Pop -->Janelle Yarn
If you are not certain which one to choose, then ask your art history instructor (Miguel Arisa, Dan Kadish, Vahan Nahabedian, Steve Tecson) or me for suggestions, or consult an art history book. You must come to class prepared to tell me your idea no later than next Monday.THE FIRST TO COME GETS FIRST CHOICE OF A PARTICULAR ARTIST, so I suggest that you email me your decision.
exercise 3:
As instructed in class this week, you must make the initial page load up AUTOMATICALLY, before the user clicks on a button. The reason we want this is so that the user doesn't see a blank page when the site starts up. You must do the same thing for your gallery pages so that when the user goes to those pages, there is already the FIRST image there showing up large. The code below is something like what you should have in your own index file right now, BEFORE you make any additions:
1. // below is the variable that is converted into a request object;
2. var oneRequest:URLRequest = new URLRequest("one.swf");
3. var twoRequest:URLRequest = new URLRequest("two.swf");
4. var threeRequest:URLRequest = new URLRequest("three.swf");
5. var fourRequest:URLRequest = new URLRequest("four.swf");
6. // below is the variable that is converted into a loader;
7. var myLoader:Loader = new Loader();
8. myLoader.load(oneRequest);
9. // below is the function named loadOne & its contents are between the { }
10. function loadOne(event:MouseEvent): void {
11. };
12. function loadTwo(event:MouseEvent): void {
13. };
14. function loadThree(event:MouseEvent): void {
15. };
16. function loadFour(event:MouseEvent): void {
17. };
18. /* below is the listener which is waiting for the user to click on the button named one_btn;
  and, when he/she does,
  the function named loadOne is activated).*/
19. one_btn.addEventListener(MouseEvent.CLICK, loadOne);
20. two_btn.addEventListener(MouseEvent.CLICK, loadTwo);
21. three_btn.addEventListener(MouseEvent.CLICK, loadThree);
22. four_btn.addEventListener(MouseEvent.CLICK, loadFour);
As it is right now if everything functions properly, your projects load up the content from the external .swf files only when you click on a button. Clicking on the buttons activates one of the functions that loads the external file into the index file. The code in the function only runs when the function is called. This means that we need to run that same code, but without using a function because the function keeps it from running automatically, and only allows it to run when the function is called. See the code below for a function as it currently is:
1. function loadOne(event:MouseEvent): void {
2. };
Those two lines of code inside of the function are what we are looking for. They are the two lines that are actually responsible for loading the first external .swf file into the index. This means that you must not only have those two lines here inside the function, but also OUTSIDE OF THE FUNCTION as well. This will cause the first page to load automatically AND also when the user clicks on its button.
exercise 4:
Do the same thing for your gallery files so that the first image in each loads up automatically as well as when the button for it is clicked by the user.

Midterm Requirements:

page size: 1000px X 700px
page number: 6 pages

bio:
this page is about the artist and should include sufficient text, and then enough accompanying images to help explain or demonstrate the text.
art:
this page is about his/her art, and should, like the bio page, contain sufficient text and images to accompany the text for us to have a basic understanding of the art.
movement:
this page is about the art movement that he/she participated in, and should, like the other two pages, contain sufficient text and images to accompany the text for us to have a basic understanding of the art: in this page, you MUST INCLUDE AT LEAST 2 IMAGES FROM DIFFERENT ARTISTS IN THE SAME MOVEMENT.
gallery 1 & 2:
these pages should contain thumbnail images which, when clicked on, cause a larger image to show up with a caption below it—the best way to do this is to place the large image in a separate Flash file and type some text below or beside it. Each page must have at least 4 images and each should show up with a unique caption to go with it.
bibliography:
this page contains a list of links and a brief description of at least 10 online resources that have information or images. Also, list some recent books or films about the artist and/or his/her work. This should include who wrote it and when it was published it if is a book; or who directed it and when it was released if it is a film.

Midterm Grading:

topic: 5pts—
this is a giveaway of points (5% - a half of a letter grade - of the final grade of the project) if you all follow the topics you chose;
color: 5pts—
this has to do with whether you've seriously chosen your color scheme: if you choose too many colors or if they simply don't go together, points will be taken off; so, if you're not sure, keep it really minimal, or use the COLOR INDEX;
images: 5pts—
another point giveaway if you use enough images AND if you DO NOT DISTORT THEM; and also if you don't use images more than once in such a small website;
text: 5pts—
once again, another giveaway of points if you use enough text and if you spend a little time formatting it: a couple suggestions are that you should NOTstretch text all the way across the page, but break it up into a couple columns instead; also, like color, make sure you do not use too many fonts, especially multiple decorative fonts together;
layout, positioning, & alignment: 20pts—
you should carefully consider the organization of each of your pages and, especially, keep in mind that consistency from page to page is very important. USE RULERS & GUIDES!!!!;
title: 5pts—
make certain that there is a title and that it is present (in the same spot) no matter what the user does;
buttons: 5pts—
buttons should be fully functional, should have 4 frames in which the hit frame is a simple gray rectangle, and they should be designed well&#a hint here: students often make their buttons too large;
content: 5pts—
yet another point giveaway and it is simply points to determine whether you have enough content in each page;
movie-clip container: 5pts—do you use a movieclip container (box_mc for the index and bigImg_mc for the gallery, for example)?;
initial load: 15pts—
when the user first opens up your site using the index, does content AUTOMATICALLY LOAD as it should, or does the user have to click on a button to make something appear when the page loads up initially?—this also pertains to the gallery pages;
button loading: 20pts—
this simply refers to the functions connected to the buttons on the stage: does content load when you click on all your buttons?
folder organization: 5pts—
the folder that you give me next week should be organized, meaning that images should be in one folder. Also, right before you give me your project, put your .fla files into a separate folder as well. You should also remove any images or other files that are not being used.

Fall 2010 week 5:—10/11/10: Mon. 9:00 - 12:00

2010-10-14T06:47:00.000-07:00

Hi Everybody,

I'm sorry about the last two weeks. The week before last I was ill and then this week, of course, we had the problems with the administration not wanting to negotiate a new contract with us like adults. Luckily, all that has been resolved and I am not sick anymore. Please see the following exercises for your homework due Monday (along with the homework that was due last week).

Your mid-term projects will be due in three weeks; however, by next week you must have a partial rough draft to show me. This means you have to have the first two "pages" of the site done by next week. That DOES NOT mean they have to be perfect, as we will continue working on them two more weeks to get them into better condition. Moreover, we will continue working on them throughout the rest of the semester, adding features and editing what you already have. These projects will be the same projects that you give to me for the final as well.

The most important part of this project is to get the ACTIONSCRIPT to work. Design is very important, but should take a backseat if you have to make a choice.

WEEK 5

Syllabus

LINK class syllabus

Classwork

LINK This week's class files

Homework

exercise 1:
Many of you have not yet sent me your intended subjects for your midterm projects. As of this past Monday, they were late. I suggest you email me immediately:
1. Pietr Mondriaan - De Stijl -->Jennifer De Los Santos
2. Theo van Doesburg - De Stijl
3. Joan Miro - Surrealism -->Julian Fagan
4. Max Ernst - Surrealism -->Christopher Batiz
5. Georges Braque - Cubism
6. Juan Gris - Cubism
7. Umberto Boccioni - Futurism
8. Carlo Carrà - Futurism -->Cory Jeminez
9. Kazimir Malevich - Suprematism -->Mark Little
10. El Lissitzky - (Russian) Constructivism -->Gabriel Ruiz
11. Man Ray - Dadaism -->Carlos Lopez
12. Hannah Höch - Dadaism -->Pablito Mirón
13. Henri Matisse - Fauvism
14. André Derain - Fauvism -->Jaron Harris
15. Paul Cezanne - Post-Impressionism -->Acheson Phillips
16. Vincent van Gogh - Post-Impressionism -->Christopher Breland
17. Wassily Kandinsky - Expressionism -->Randy Brodie
18. Otto Dix - Expressionism -->Kenneth Jean
19. Jackson Pollock - Abstract Expressionism -->Andrew Mazowiecki
20. Willem De Kooning - Abstract Expressionism -->Dwight McLaurin
21. Dan Flavin - Minimalism -->Julio Perez
22. Agnes Martin - Minimalism -->Frank Crichlow
23. Sol Lewitt - Conceptualism -->Daniel Thomas
24. Marcel Duchamp - Conceptualism -->Michael Foster
25. Roy Lichtenstein - Pop -->Eddie Jemmott
26. Claes Oldenburg - Pop -->Janelle Yarn
exercise 2: Complete THE FIRST TWO PAGES of your midterm project by next week to present to me a partial rough draft. This means that you MUST COMPLETE THOSE TWO PAGES BY NEXT WEEK. I will then comment on what you show me and you will have two more weeks to improve it and smooth out all the rough edges.

Midterm Requirements:

page size: 1000px X 700px
page number: 6 pages

bio:
this page is about the artist and should include sufficient text, and then enough accompanying images to help explain or demonstrate the text.
art:
this page is about his/her art, and should, like the bio page, contain sufficient text and images to accompany the text for us to have a basic understanding of the art.
movement:
this page is about the art movement that he/she participated in, and should, like the other two pages, contain sufficient text and images to accompany the text for us to have a basic understanding of the art: in this page, you MUST INCLUDE AT LEAST 2 IMAGES FROM DIFFERENT ARTISTS IN THE SAME MOVEMENT.
gallery 1 & 2:
these pages should contain thumbnail images which, when clicked on, cause a larger image to show up with a caption below it—the best way to do this is to place the large image in a separate Flash file and type some text below or beside it. Each page must have at least 4 images and each should show up with a unique caption to go with it.
bibliography:
this page contains a list of links and a brief description of at least 10 online resources that have information or images. Also, list some recent books or films about the artist and/or his/her work. This should include who wrote it and when it was published it if is a book; or who directed it and when it was released if it is a film.

Midterm Grading:

topic: 5pts—
this is a giveaway of points (5% - a half of a letter grade - of the final grade of the project) if you all follow the topics you chose;
color: 5pts—
this has to do with whether you've seriously chosen your color scheme: if you choose too many colors or if they simply don't go together, points will be taken off; so, if you're not sure, keep it really minimal, or use the COLOR INDEX;
images: 5pts—
another point giveaway if you use enough images AND if you DO NOT DISTORT THEM; and also if you don't use images more than once in such a small website;
text: 5pts—
once again, another giveaway of points if you use enough text and if you spend a little time formatting it: a couple suggestions are that you should NOTstretch text all the way across the page, but break it up into a couple columns instead; also, like color, make sure you do not use too many fonts, especially multiple decorative fonts together;
layout, positioning, & alignment: 20pts—
you should carefully consider the organization of each of your pages and, especially, keep in mind that consistency from page to page is very important. USE RULERS & GUIDES!!!!;
title: 5pts—
make certain that there is a title and that it is present (in the same spot) no matter what the user does;
buttons: 5pts—
buttons should be fully functional, should have 4 frames in which the hit frame is a simple gray rectangle, and they should be designed well&#a hint here: students often make their buttons too large;
content: 5pts—
yet another point giveaway and it is simply points to determine whether you have enough content in each page;
movie-clip container: 5pts—do you use a movieclip container (box_mc for the index and bigImg_mc for the gallery, for example)?;
initial load: 15pts—
when the user first opens up your site using the index, does content AUTOMATICALLY LOAD as it should, or does the user have to click on a button to make something appear when the page loads up initially?—this also pertains to the gallery pages;
button loading: 20pts—
this simply refers to the functions connected to the buttons on the stage: does content load when you click on all your buttons?
folder organization: 5pts—
the folder that you give me next week should be organized, meaning that images should be in one folder. Also, right before you give me your project, put your .fla files into a separate folder as well. You should also remove any images or other files that are not being used.

Fall 2010 week 4:—10/04/10: Mon. 9:00 - 12:00

2010-10-05T08:54:00.001-07:00

Hi Everyone,

I'm sorry that I wasn't in class on Monday, but I've been a little ill since the weekend. I will undoubtedly be in class next week. You must, however, despite my absence, continue working on your projects. Please make certain that you bring all of the work that I ask for below to our class next week.

Have a nice week.

WEEK 4

Syllabus

LINK class syllabus

Classwork

LINK These files are similar to what we produced in class last week. Please make sure that you understand the construction and the code as YOU will be doing the same thing for your midterm projects.

Homework

exercise 1:
Many of you have not yet sent me your intended subjects for your midterm projects. As of this past Monday, they were late. I suggest you email me immediately:
1. Pietr Mondriaan - De Stijl -->Jennifer De Los Santos
2. Theo van Doesburg - De Stijl
3. Joan Miro - Surrealism -->Julian Fagan
4. Max Ernst - Surrealism -->Christopher Batiz
5. Georges Braque - Cubism
6. Juan Gris - Cubism
7. Umberto Boccioni - Futurism
8. Carlo Carrà - Futurism
9. Kazimir Malevich - Suprematism
10. El Lissitzky - (Russian) Constructivism
11. Man Ray - Dadaism -->Carlos Lopez
12. Hannah Höch - Dadaism -->Pablito Mirón
13. Henri Matisse - Fauvism
14. André Derain - Fauvism
15. Paul Cezanne - Post-Impressionism
16. Vincent van Gogh - Post-Impressionism -->Christopher Breland
17. Wassily Kandinsky - Expressionism
18. Otto Dix - Expressionism -->Kenneth Jean
19. Jackson Pollock - Abstract Expressionism
20. Willem De Kooning - Abstract Expressionism
21. Dan Flavin - Minimalism -->Julio Perez
22. Agnes Martin - Minimalism
23. Sol Lewitt - Conceptualism -->Daniel Thomas
24. Marcel Duchamp - Conceptualism -->Michael Foster
25. Roy Lichtenstein - Pop -->Eddie Jemmott
26. Claes Oldenburg - Pop -->Janelle Yarn
If you are not certain which one to choose, then ask your art history instructor (Miguel Arisa, Dan Kadish, Vahan Nahabedian, Steve Tecson) or me for suggestions, or consult an art history book. You must come to class prepared to tell me your idea no later than next Monday.THE FIRST TO COME GETS FIRST CHOICE OF A PARTICULAR ARTIST, so I suggest that you email me your decision.

exercise 2: Make certain that you have at least three resources to do your research and get your images. These may be either books or websites, and you must come with them written down ready to show to me first thing in class.

exercise 3: Last week, I asked you to do TWO MOCKUPS for the first page of your website. If you hadn't done those by yesterday (Monday), then you got a break. They will be due next Monday. A mockup is a "fake" website, or an image that simply "poses" or "pretends to be" a website. You will use Photoshop or Illustrator, or both, to do your mockups. They must look EXACTLY as you intend them to look when you actually make your websites in Flash. Choose your color scheme, your fonts and your layout. You should also design your navigation: will you utilize graphic buttons, or will you use simply text links to click on to go from page to page?

exercise 4: You should create your INDEX file in FLASH. Recall my discussion on the separation of interface elements from content elements. In your index you should ONLY place navigation (buttons and/or links) and those items that will remain visible to the user at all times, such as the title of the site or the background. THERE SHOULD BE NO CONTENT AT ALL IN THIS FILE. If you're not certain, email me and ask me if one thing or another belongs. This file should be similar to the INDEX files we produced last week in class together.

Fall 2010 week 3:—9/27/10: Mon. 9:00 - 12:00

2010-09-28T07:58:00.001-07:00

Hi Everyone,
I know this is not easy stuff and that it can sometimes be frustrating, but it seems to me that all of you are actively really trying to figure things out. This is what is important, not whether you get it right 100% of the time. I don't want to run this point into the ground, but it's worth mentioning again, so good for you. The main thing you should take out of this class is learning how to figure this stuff out, when you have an error or a problem that you want to solve, how is it that you go about figuring out how to do that: spending time with the problem and making a concerted effort to working it out.

Carter-

WEEK 3
1. Classwork
2. Homework

Fall 2010 week 2:—9/20/10: Mon. 9:00 - 12:00

2010-09-23T07:34:00.000-07:00

Hi Everyone,
For everyone who was new this week in class, this is the home of the blog for this class. Please visit each week to find out what will be due the following week in class, and to help you recall what we covered in class.

Please review here what we did in class yesterday (Monday). Each week, I will post two things:

the files that we produced in class that week; and,
the homework that will be due the following week.

WEEK 2

Syllabus

LINK class syllabus

Classwork

LINK This weeks classfiles (same as last week's)

Homework

exercise 1:
Today, in this week's class, you completed a very basic animation with a few small bits of code to add interactivity; for example, making the animation stop when you clicked on your button, and making it resume when you click on the 2nd button. Next, what you will do is make it skip to frame 25 when you click on a 3rd button.
1. What I would like you to do next is to add a third button instance to the stage beside the other two that you have put there.
2. You should next select the button and give it the instance name of three.
3. Then, in your actions panel, below the 2nd function, you will need to type a third function:
  1. function jumpIt(evt:MouseEvent):void{
  2. }
4. Then, below the 2nd eventListener, you will have to type a 3rd one. It should look just like the other two, but should have the instance name of the third button and it should activate the third function.
5. Once you do that, save and test your movie.
6. You should try to clear up any errors you have before you move on. If, however, you just cannot find them, go ahead and do the remaining parts of this homework and try to come back later and find your errors.
7. Put a 4th button on the stage beside the other two.
8. Give it an instance name as you have done for the other three.
9. For this new button, we are going to have it cause the user to advance 10 frames in the animation each time the user presses on it. So, create a 4th function below the third one. It should be named skipIT.
10. The actions inside this function should simply read:gotoAndStop(currentFrame + 10);
11. Save and test your movie. Clear up any errors you have
12. Open a new file.
13. Create a simple 200 frame animation.
14. Now, create a basic button rectangular button symbol.
15. Next, from your library, take 4 instances of your button symbol and arrange them horizontally along the bottom the stage.
16. Give them the instance names of pt1_btn, pt2_btn, pt3_btn, and pt4_btn.
17. Create an actions layer, and type a stop(); action in frame one.
18. Now, using what you understand about the actionscript we have already typed in the previous file, try to make the 1st new button go to frame 2 and start playing. Then, make the 2nd new button go to frame 51 and start playing, the 3rd go to frame 101 and start playing, and the 4th go to frame 151 and start playing.
19. HINTS: you will need 4 functions, 4 listeners, and inside those 4 new functions, you will need gotoAndPlay(); actions.
20. Oh, and remember, COPY & PASTE is your friend. Just make certain you don't copy and paste mistakes, because then you multiply your mistakes.

Summer 2010 week 13:—8/2/10: Mon. 9:00 - 12:00

2010-08-05T15:24:00.000-07:00

Hi Everyone,

Okay Everyone, here we go, the last final week, the final push until, well, the final is due. What you will find here is a painstaking list of all the code and explanations that you will need for your final project. You will also find an additional aspect, a new thing, that you will have to add to your project, a toggle button that turns music on and off. This is not worth the most points, so everything else in the project is definitely more important, but doing it will definitely separate the good projects from the truly excellent projects.

What I'm trying to say here is that you should do everything else first, and then if you have time, work on the music toggle. Good luck, and let me know if you have any questions. Don't wait until the last minute.

Don't forget: I am going to be at TCI around 11am tomorrow. The school closes at 3pm, so I will remain as long as students need me. If you come, you should come early, because once I am no longer needed, I will leave. See you there!

Carter-

WEEK 13

Final Project:

PART I

Declarations: You should always start out your code at the top with your declarations. What this means is that you are announcing to AS3 that you are going to be using some variables or other data storage devices, and that you are going to use certain objects in your script down below. For our script, you will need to start out with two Arrays, and then a number of ColorTransform objects. If we need any others later, we will return to the top of the script and add them.

Array Objects

Text Array

First, an array is a particular kind of object in Flash and ActionScript, and all objects begin as variables. These variables, however, are then modified so that they take on additional properties that ordinary variables do not possess.
Second, remember that an array is an object, much like a variable, which holds data. However, an array is able to hold many, many data items, unlike variables which may only hold onto one data element.
The first array that we need is the array that we will use to add text to the buttons. These elements must simply state whatever label you want to appear in your buttons.
Each data item held in an array is indicated by a number. these numbers are known as index numbers, and they always begin counting with the number zero (0).

var txtArray:Array = new Array();

txtArray[0] = "bio";
txtArray[1] = "art";
txtArray[2] = "galleries";
txtArray[3] = "gallery 1";
txtArray[4] = "gallery 2";
txtArray[5] = "gallery 3";
txtArray[6] = "resources";

Another, shorter way of giving an array data, which is what we just did above (we put strings, pieces of text with quotation marks around them) and otherwise known as populating an array is here:

var txtArray:Array = new Array("bio, "art", "galleries", "gallery 1", "gallery 2", "gallery 3", "resources");

Yet another, even shorter and more efficient way of populating an array is what is known as literal notation:

var txtArray:Array = ["bio, "art", "galleries", "gallery 1", "gallery 2", "gallery 3", "resources"];

Any of these is acceptable when declaring and populating an array. They all do exactly the same thing. It is simply a matter of preference.
Now, assuming that you've already created your buttons, you need to apply the text to them. Recall, the way that you should have created your buttons are as MovieClip instances, and that this button movieclip must contain 2 additional movieclips within it, a stroke_mc movieclip for the stroke and a fill_mc for the fill. It should also contain a dynamic text box.
Each of these three items that are inside of your button movieclip should have instance names. I have givem them the instance names of stroke, fill, and btn_txt.
You might also want to take note that for the instance names for the button movieclips, I have started with btn_00. I have done this to match the counting of the array which also begins at 0.

btn_00.btn_txt.text = txtArray[0];
btn_01.btn_txt.text = txtArray[1];
btn_02.btn_txt.text = txtArray[2];

Furthermore, you must remember that the buttons of the drop-down menu are INSIDE another movieclip which, in class, I named options:

btn_00.btn_txt.text = txtArray[0];
btn_01.btn_txt.text = txtArray[1];
btn_02.btn_txt.text = txtArray[2];
options.btn_03.btn_txt.text = txtArray[3];
options.btn_04.btn_txt.text = txtArray[4];
options.btn_05.btn_txt.text = txtArray[5];
btn_06.btn_txt.text = txtArray[6];

URL Array

The second array should be typed below the first and is going to be used for the URLs for when we need to request the content files, also known as the external .swf files. Whichever mode of creating and populating an array that you used above, you could use here as well. Consistency in a script is always best and helps to avoid confusion later on. However, since each item in our array is also a URLRequest object, the best way to type it is as follows:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("bio.swf");
urlArray[1] = new URLRequest("art.swf");
urlArray[2] = ...etc...

If you want to put your content pages in a separate sub-folder named content, for example, you would type your array slightly differently as below:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("content/bio.swf");
urlArray[1] = new URLRequest("content/art.swf");
urlArray[2] = ...etc...

ColorTransform Objects

New Colors

ColorTransform objects are really just what their name suggests they might be: they are objects which have the ability to change the color of something. In this case, we want to change the color of a movieclip from its current color to a new color. For that, we need to create a ColorTransform object and then apply it to the item that we wish to transform.
The first color object I have down below will be attached to my stroke so that I can modify the color of my stroke to a new color. Thus, in front of the c, I have put the letter s, referring to stroke.
Also, notice down below that the way we create this object is virtually identical to the way that we created our arrays:

var sc_new:ColorTransform = new ColorTransform();
sc_new.color = 0x990000;

Next, is the new color for the fill movieclip, for which I follow exactly the same procedure, except instead of the s in front of the c, I have placed an f to refer to fill:

var fc_new:ColorTransform = new ColorTransform();
fc_new.color = 0xffaaaa;

Many of you have also created a ColorTransform object for your text:

var tc_new:ColorTransform = new ColorTransform();
tc_new.color = 0x660000;

Old Colors

The next set of colors are, for lack of better terminology, are the old colors. These are the original colors that our buttons began with and which they should return to once the user stops interacting with them. If you have three new colors, you should also have 3 old colors:

var sc_old:ColorTransform = new ColorTransform();
sc_old.color = 0x000000;

var fc_old:ColorTransform = new ColorTransform();
fc_old.color = 0xffffff;

var tc_old:ColorTransform = new ColorTransform();
tc_old.color = 0x000000;

Functions: After our declarations above, we will start with our functions. I want to start from the simplest and then progress to the more advanced. At the same time, I would like to start with the general functions, the ones that affect many objects and move to the more particular functions, the ones that affect fewer objects.

Color Modification Function

New Stroke Color

The first function we will try is the function that will change the colors of the buttons. To start this out, however, instead of trying to change all three colors for the stroke, the fill, and the text all at once, it's always better to do one thing at at time. Then, once you get that one thing to function, you can add additional features. Let's start with getting the stroke color for ONE of the button movieclips to change.

function overIt(evt:MouseEvent):void{

btn_00.stroke.transform.colorTransform = sc_new;

}

That's very simple, but it won't work at all until we add a listener to call on this function when we MOUSE_OVER the button.

btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);

Multiple Button Color Change

Now, when you mouse over the first button, the stroke should change colors. There is a problem with this, however: you should notice that inside the function that I used a particular instance name, btn_00. Therefore, this will only work for that one button. If you try mousing over any of the other buttons, it doesn't work at all on them.
Using this logic, then, we'd have to write a separate function for each button just to change the color of each button. That is too much typing to do something simple.
This means, to be more efficient, we have to think of something that allows us to change the color of whatever button that the user happens to be mousing over at any given time. How can we pinpoint a particular button, the button the user is mousing over at any given moment, without actually calling it by name? Because if we call it by name, that means we'll have to go through each one and call each one by name one at a time. This is not efficient at all.
The answer is in the little variable in the function declaration, evt:MouseEvent. There, the term evt (an abbreviation of the word event), is actually a variable. As you should know, a variable is a data container. In this case, this variable contains a particular kind of data. The word after it MouseEvent tells you what kind of data is contained within that variable, information about a event that occurs with the mouse. Whenever the user mouses over the button, information about the button and the event is stored in that variable.
This means, that that variable, evt, contains information about whatever button that the user happens to be mousing over at any given time, and we can access that information.
One of the properties of a MouseEvent is currentTarget. The word target is whatever happens to be the target of the user's attention with the mouse. If the user is mousing over a button, that button is the currentTarget.
Let's try something: let us put a trace in our function and for the moment disable our statement by commenting it out. We are going to trace the name of the current target.

function overIt(evt:MouseEvent):void{

//btn_00.stroke.transform.colorTransform = sc_new;
trace(evt.currentTarget.name);

}

Now, let's add listeners for the remaining buttons:

btn_00.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_01.addEventListener(MouseEvent.MOUSE_OVER, overIt);
btn_02.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_03.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_04.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_05.addEventListener(MouseEvent.MOUSE_OVER, overIt);
options.btn_06.addEventListener(MouseEvent.MOUSE_OVER, overIt);

You should see now, that when you test your movie you the name of the button you are mousing over, of WHICHEVER button you are mousing over, pops up in the output window.
So, let's apply that to the color change:

function overIt(evt:MouseEvent):void{

btn_00evt.currentTarget.stroke.transform.colorTransform = sc_new;

}

New Fill Color

We can apply the same technique to making the color of the fill and text change:

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;

}

Original Stroke & Fill Colors

Now that we have changed the color, let's make it change back. We'll begin this by creating a new function:

function outIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_old;
evt.currentTarget.fill.transform.colorTransform = fc_old;
evt.currentTarget.btn_txt.transform.colorTransform = tc_old;

}

And then the listeners:

btn_00.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_01.addEventListener(MouseEvent.MOUSE_OUT, outIt);
btn_02.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_03.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_04.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_05.addEventListener(MouseEvent.MOUSE_OUT, outIt);
options.btn_06.addEventListener(MouseEvent.MOUSE_OVER, outIt);

Great, now it changes back and forth easily from one set of colors back to the original set of colors. Great, now onto the next job, opening and closing the drop-down menu.

Drop-Down Function

Close Menu

The first thing we need to do is close the menu so that when we first open our site it is NOT opened with all of the buttons underneath it showing. We don't want those buttons showing until we mouse over the top button of the menu, the only one that should be showing. All the others, remember, are inside another movieclip that we named options.
That's very easy, at the very top of your script in the actions window, type the following line of code:

this.options.visible = false;

And that's it for that. When you test the movie, you'll see those buttons are gone

Open Menu

But now, we want to make them appear when we mouse over the top button. That's easy enough. All we would have to do is create a function so that when you MOUSE_OVER the top button of the menu, the other buttons below it become visible.
If you recall, however, we already have a listener for the MOUSE_OVER event, and it calls our first function, overIt. That means we have to put this part within that function.

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
this.options.visible = true;

}

Aha! If you tested that, you found that it didn't quite work. It opens when you mouse over ANY of the buttons, not only the one with the menu. That's a problem. We ONLY want it to open when we mouse over the top button with the menu and ONLY that button, none of the others.
To do that we'll need to learn about a new type of statement, a conditional statement. We also call these if/else statements.
In an If/else statement, you can pinpoint an action that you want to have happen only IF a certain condition is met.
Our condition is if the user mouses over the top button of the menu. In my script, my top button has an instance name of btn_02, so that will be my condition:

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
if (evt.currentTarget.name == "btn_02") {

this.options.visible = true;

}

}

To make certain that the menu stays open so long as we are mousing over ANY of the buttons of the menu, not just the top one, but also the others below it, we must add some conditions to our statement.
Not only do we want it to remain open IF we mouse over the top button, but we want it to remain open if we mouse over the top button OR the 2nd button, OR the 3rd button, OR the 4th button. The way we includ the OR OPTIONS is with the || characters, which are located at the SHIFT - \.

function overIt(evt:MouseEvent):void{

evt.currentTarget.stroke.transform.colorTransform = sc_new;
evt.currentTarget.fill.transform.colorTransform = fc_new;
evt.currentTarget.btn_txt.transform.colorTransform = tc_new;
if (evt.currentTarget.name == "btn_02" || evt.currentTarget.name == "btn_03" || evt.currentTarget.name == "btn_04" || evt.currentTarget.name == "btn_05") {

this.options.visible = true;

}

}

Now, the menu will remain open until you mouse over another button. This isn't a perfect solution, but it is fine for now. I will give extra credit to anyone who comes up with a solution in which the menu closes when you mouse off any of the buttons, without having to wait until you mouse over another button before it closes. Don't spend a lot of time and don't write a lot of code to solve this. It isn't that important. Other things in this project are much more important.

Loading External Files

Loader Object

We left off at the beginning one of our objects, and that is the Loader object. This is essential for placing external files within another main file.
We have our URLRequest objects that request a particular file. Now we need to place the requested file within an object that will actually do the job of loading it, of bringing it from outside the current (index) .swf file and preparing it for placement onto the current file. If you recall my gun analogy from class, the URLRequest is the external file, so it is like a bullet. The loader, then, is the gun that will deliver our bullet.
The next two jobs then are to create the loader and then place the bullets inside our gun. Our gun, however, is a special sort of gun that can only hold and fire one bullet at a time. That means it is like most shotguns: we have to reload it with a new shell each time we shoot with it.
First let's create the loader at the top, in the declarations section of our code. We can place it beneath the array with the URLRequests:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("bio.swf");
urlArray[1] = new URLRequest("art.swf");
urlArray[2] = ...etc...

var swfLoader:Loader = new Loader();

Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.

function loadIt(evt:MouseEvent):void {

}

Now, at the bottom, in the functions section of our code, let's start with a new function for loading the external .swf files.

function loadIt(evt:MouseEvent):void {

swfLoader.load(urlArray[0]);
box_mc.addChild(swfLoader);

}

Create a listener grouped at the bottom with all of the other listeners. Since we are trying to load the first item of our array, this means we want the listener to relate to the first button.

btn_00.addEventListener(MouseEvent.CLICK, loadIt);

This is very nice and all, but we have a similar problem that we did above when we wanted to change the colors of the different buttons. If you look in our function, you will see that it will only add the first item of the array, and none of the others. If we followed this logic, as with the color function, we'd have to write one function for every button. That is terribly inefficient, and there is a better way.
Once again, we need to rely on that little variable named evt within the parentheses in the function declaration.
Like we did with the colors, we'll use it together with the currentTarget property:

function loadIt(evt:MouseEvent):void {

//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
trace(evt.currentTarget.name);

}

Now, when you click on the first button, in the output window, you'll see the name of the button. So, let's add the listeners for all of the other buttons:

btn_00.addEventListener(MouseEvent.CLICK, loadIt);
btn_01.addEventListener(MouseEvent.CLICK, loadIt);
btn_02.addEventListener(MouseEvent.CLICK, loadIt);
options.btn_03.addEventListener(MouseEvent.CLICK, loadIt);
options.btn_04.addEventListener(MouseEvent.CLICK, loadIt);
options.btn_05.addEventListener(MouseEvent.CLICK, loadIt);
btn_06.addEventListener(MouseEvent.CLICK, loadIt);

Notice that I have a line through the listener for btn_02 (the third button). That is because it is the one with the drop-down menu. It doesn't load external files, so we don't need to include it in this function.
Now, when you click on the individual buttons, you see their names pop up in the output window.
Next, let's load a file, but to do so we'll have to learn a new type of statement. As above with the drop-down menu, we have conditions. In this case, we don't have only ONE condition OR another. No, in this case we have MULTIPLE CONDITIONS.
We could still use the If/else statement, but when you have many conditions, it is better to use the switch statement.
In our situation, we have several buttons and each of those buttons loads a different file. IF we mouse over one button, THEN we must load a certain file. Otherwise, IF we mouse over another button, THEN we must load another file; and so on for several buttons.
The variable, evt allows us to capture which button the user happens to be mousing over or clicking on at any given moment. Once again, this is very useful to us. This time, like before, we are going to capture the instance name of the button; but in addition, we are going to store it in a new variable within the function:

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
//trace(evt.currentTarget.name);

}

With this variable, you will see that it contains the necessary information. If we put the variable within the trace you will see that it traces the same info as before here: trace(evt.currentTarget.name);

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
trace(btnName);

}

As you can see if you try that out, nothing has changed with the addition of that variable.
Now, we can use that variable, btnName to determine which button the user happens to be mousing over. And then, once we determine which case it is, we'll tell actionscript to load one file or another.
In the case of btn_00, then Flash should load the first file; in the case of btn_01, then Flash should load the second file; and so on for all the files.

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

do something;
stop;

case "btn_01" :

do something else;
stop;

case "btn_03" :

do this other thing;
stop;

case "btn_04" :

do yet another thing;
stop;

case "btn_05" :

blah blah blah;
stop;

case "btn_06" :

yadda yadda yadda;
stop;

}

}

So, what we actually want to tell the switch statement to do is to load different files depending on which button is clicked:

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

swfLoader.load(urlArray[0]);
box_mc.addChild(swfLoader);
break;

case "btn_01" :

swfLoader.load(urlArray[1]);
box_mc.addChild(swfLoader);
break;

case "btn_03" :

swfLoader.load(urlArray[2]);
box_mc.addChild(swfLoader);
break;

...etc...

}

}

In addition, we want to make certain that the drop-down menu closes when you click on any of the buttons that are within the menu. In my case, in the drop-down menu that I've created here, that would be the 4th, 5th, and 6th buttons (btn_03 - btn_05).

function loadIt(evt:MouseEvent):void {

var btnName:String = evt.currentTarget.name;
//swfLoader.load(urlArray[0]);
//box_mc.addChild(swfLoader);
//trace(btnName);
switch (btnName) {

case "btn_00" :

swfLoader.load(urlArray[0]);
box_mc.addChild(swfLoader);
break;

case "btn_01" :

swfLoader.load(urlArray[1]);
box_mc.addChild(swfLoader);
break;

case "btn_03" :

swfLoader.load(urlArray[2]);
box_mc.addChild(swfLoader);
this.options.visible = false;
break;

case "btn_04" :

swfLoader.load(urlArray[3]);
box_mc.addChild(swfLoader);
this.options.visible = false;
break;

...etc...

}

}

PART II

Music: For the last part of this project, you will need to do two things: create what's known as a toggle button, which is a button that has an ON position and an OFF position. When you click on it once it turns ON, and then when you click on it again, it turns OFF.

Toggle Button:

As with the other buttons, this button will be a nested set of movieclips. This simply means that you will have movieclips within movieclips.
For example, perhaps you will have a shape that looks like a speaker for your ON position, and then a red slash that appears over the speaker for your OFF position.
So, your first job is to draw a side-view of the way a speaker looks: ( http://www.tuaw.com/2007/09/12/access-your-macs-super-quiet-mode/ ). That is an example.
Once you do that, convert it into a movieclip symbol.
Next, draw a diagonal red slash over the top of it and conver it into a movieclip as well.
Both of these movieclips should have instance names.
The speaker I will call sndON, and the slash I will call simply sndOFF.
Now place the red slash on top of the speaker if you haven't already.
Select them both and convert them into another symbol named sndBtn.
Enter into edit mode for this new symbol and then select both objects.
Right-click on your selection and select distribute to layers.
Delete the blank layer and exit edit mode.
Give your symbol the instance name of snd.

Toggle Button Actions:

This button is very similar to the drop-down menu: first we have to hide the red slash. Therefore, at the very top of your code, on the 2nd line, type the following line of code:

this.snd.sndOFF.visible = false;

Since the sndOFF movieclip, the one of the red slash is going to be INvisible, the visibility is FALSE, then all the user will see is the speaker. This means that the movie will start off with the sound playing. The default is to have music. The user will have to turn it off if he/she wishes.
Now, we need to create a function that switches the visibility of the slash from false to true. This will signify that the sound has stopped and no longer playing because the speaker will have a VISIBLE red slash over the speaker.

function sndOnOff(evt:MouseEvent):void {

this.snd.sndOFF.visible = true;

}

Following this, you will need to add the listener for the snd movieclip:

snd.addEventListener(MouseEvent.CLICK, sndOnOff);

The problem with this function is that it only turns the sound ON. It would be better if the function turned it both on AND off. To do that we will need another if/else statement. This statement will simply determine if the red slash is visible or invisible. If it is visible, then the sound is OFF; and if it is invisible, then the sound is ON.

function sndOnOff(evt:MouseEvent):void {

if(snd.sndOFF.visible == false) {

snd.sndOFF.visible = true;

} else {

snd.sndOFF.visible = false;

}

}

Music File:

Now, in your main folder, create another folder named music.
Within that folder, you need to place a music file. This music file MUST be an .mp3 file.

Music Actions:

In order to have this button place music into your site, you will first need to declare three objects. Therefore, scroll UP to the declarations section of your code at the top.
The first object is the sound object and it contains the music sound itself.
The second object is the sound channel object and it controls the behavior of the sound, whether it is playing or not.
The third object is the URLRequest object, which, like any of our other request objects, requests an external file and prepares it for loading into the main .swf movie file.

var sndMus:Sound = new Sound();
var sndChan:SoundChannel = new SoundChannel();
var sndReq:URLRequest = new URLRequest("song.mp3");

Next, you have to load the requested file:

var sndMus:Sound = new Sound();
var sndChan:SoundChannel = new SoundChannel();
var sndReq:URLRequest = new URLRequest("song.mp3");
sndMus.load(sndReq);

Now, you have to create a function to play the loaded file; but that doesn't make any sense: we already have a function that operates the button. We can just add some actions to that function:

function sndOnOff(evt:MouseEvent):void {

if(snd.sndOFF.visible == false) {

snd.sndOFF.visible = false;
sndChan = sndMus.play();

} else {

snd.sndOFF.visible = true;
sndChan.stop();

}

}

Summer 2010 week 12:—7/26/10: Mon. 9:00 - 12:00

2010-07-27T07:07:00.001-07:00

Hi Everyone,

As you have seen from class this week, we are beginning our final project. This means that what we will be doing until the last class is revising our midterm projects and applying what we have learned since midterm to them.

At this point in the term, I have shown you almost everything that I want you to know, save for one last item, which is how to attach music files to your Flash movie, and then how to stop and restart them. We will do this part next week for homework. In class for next week what we will be doing is simply working on your projects. I will go around and speak to you individually and speak to you about what needs to be done to bring them to the next level regarding both design and technical issues.

For this week's homework, therefore, you will see a list of items that you need to have complete for your project when you give it to me in 2 weeks. You should do most of this, however, because as I mention above, I will be assigning the sound next week, and you'll need some time next week to complete that rather than working on revising the design of your projects and resolving technical issues.

Carter-

WEEK 11
1. Classwork (7/14)
2. Homework:

Summer 2010 week 11:—7/19/10: Mon. 9:00 - 12:00

2010-07-19T10:38:00.001-07:00

Hi Everybody,

I'm sorry that I wasn't in class today. I have been a bit ill all weekend since Friday, so I thought it better that I not go in to class today. However, it's nearing the end of the term, so we haven't any time to waste. Below you will see the steps that I want you to complete and bring to class next week ALONG WITH THE HOMEWORK FOR THIS WEEK, so don't forget. BOTH HOMEWORKS (last week's and this weeks) WILL BE DUE NEXT WEEK!!!

WEEK 10

Syllabus

LINK class syllabus

Classwork

LINK No class files this week;

Homework

exercise 1:

Create a drop-down menu as we did last week in class. This time, however, put only 3 movie-clip buttons in the part that appears and disappears.
The instance names for the 4 movieclips which function as buttons should be btn_01, btn_02, btn_03, andbtn_04.
The instance name of the movieclips which contains the 3 options should be options .
This drop-down menu should function exactly the way they did in class last week. Also, make sure that, as per last week's homework, when you mouse off the menu, the menu options should disappear.
In addition, use an array to make the text show in the 4 movie-clips as instructed in last week's homework.
Create another array named urlArray:

var urlArray:Array = new Array();

Next, as indicated in last week's blog entry, below the previous code, we need to put data into the array. We call this process populating the array. An array is similar to a variable in that it contains data; however, it is much more powerful in that, unlike a variable, it DOES NOT hold only ONE element of data. Instead, it may hold many, MANY DATA ELEMENTS. Each of these data elements is indicated by a number, and the counting starts at 0:

urlArray[0] = new URLRequest("http://dma-205.blogspot.com");
urlArray[0] = new URLRequest("http://www.actionscript.org");
urlArray[0] = new URLRequest("http://www.kirupa.com");

Now, we have to modify the code that we created last week. As you may have noticed last week, the code is very, very long to do simple things. We have 2 functions for each of our buttons just to make the colors chane when we mouse-over them. It can be greatly simplified. In fact, all we really need is one function for that activity. What we are going to do is create 4 functions in total instead of 2 functions per button situation that we have now. The first two we'll work with are for the opening and closing of the menu:

Comment out all the functions which pertain to the changing of the colors and the opening and closing of the menu. You should also comment out the listeners. Do not delete these functions & listeners, however, until you get the replacement functions working properly.
Create a new function and name it menuOpen.

function menuOpen (evt:MouseEvent):void {

}

Next, create another function namedmenuClose.

function menuClose (evt:MouseEvent):void {

}

Eventually, in a future class, we will combine these two functions using what's known as an if/else statement, but for now we'll keep them as 2 separate function. Right now, however, they have nothing inside of them, so let's put some actions in the first one:

function menuOpen (evt:MouseEvent):void {

options.visible = true;

}

Now, modify the listener for the first button to read as follows:

btn_01.addEventListener(MouseEvent.MOUSE_OVER, menuOpen);

Save and test your movie and it should open up.
Next, we will put some actions in the second function:

function menuClose (evt:MouseEvent):void {

options.visible = false;

}

And modify the mouse-over listener for the first button to read as follows:

btn_01.addEventListener(MouseEvent.MOUSE_OUT, menuClose);

For now, we are not quite ready, however, for the above listener, so let's comment it out for the time being. We will come back to this later. This means that the menu will not yet close:

//btn_01.addEventListener(MouseEvent.MOUSE_OUT, menuClose);

Next, we'll modify the code to make the buttons change colors again, but with much less code:

Create a new function and name it colorFun_01. With this function we must do TWO things: (1) determine which button the user is mousing over, and (2) make that button change its colors.

function colorFun_01 (evt:MouseEvent):void {

btn_01.stroke.transform.colorTransform = sColor_new;
btn_01.fill.transform.colorTransform = fColor_new;
btn_01.btn_txt.transform.colorTransform = sColor_new;

}

The problem with this function, of course, as some of you will probably have noticed is that it will only change one button, the one that is named using its instance name, btn_01. Therefore, we have to figure out a way to select whichever button we happen to mouse-over
The answer to this is contained within evt. I mentioned it once before, but that little statement that is in between the parenthesis, is actually a variable and the type of information that will be contained within the variable: (evt:MouseEvent), where evt is the variable name, and MouseEvent is the type of information held within it.
If you look in your listeners, you will see that term again, MouseEvent. When the listener calls on the function, the information of WHICH particular button the user happens to be interacting with is being stored by that variable evt. That means, that evt knows which button is currently being moused-over or clicked on or whatever at any given moment.
This means that we do NOT have to be specific by naming a particular button's instance name, all we have to do is invoke evt.
Now, because evt contains MouseEvent information, it also possesses a new property. That property is known as currentTarget, in which the current target is whatever is the movie-clip that the user happens to be interacting with at any given moment.
Let us test this, so first, temporarily comment out the code in the function:

function colorFun_01 (evt:MouseEvent):void {

//btn_01.stroke.transform.colorTransform = s_new;
//btn_01.fill.transform.colorTransform = f_new;
//btn_01.btn_txt.transform.colorTransform = s_new;

}

Now, add the following line of code:

function colorFun_01 (evt:MouseEvent):void {

trace(evt);
//btn_01.stroke.transform.colorTransform = s_new;
//btn_01.fill.transform.colorTransform = f_new;
//btn_01.btn_txt.transform.colorTransform = s_new;

}

Next, modify your listener for the first movieclip button to call this function instead of the old color change function.

btn_01.addEventListener(MouseEvent.MOUSE_OVER, colorFun_01);

Save and test your movie.
Mouse-over on your button and look at your output window. If you don't have any errors, what it will do is tell you something about a movieclip.
Now, let's add a name to that movieclip.

function colorFun_01 (evt:MouseEvent):void {

trace(evt.currentTarget.name);
//btn_01.stroke.transform.colorTransform = s_new;
//btn_01.fill.transform.colorTransform = f_new;
//btn_01.btn_txt.transform.colorTransform = s_new;

}

Save and test the movie again. Now, when you click on the button, you should see the instance name of it inside the output window.
Modify all the listeners that pertain to the old color change functions for the MOUSE_OVER actions. When you mouse over each of them, they the output should indicate which one you have moused-over by its instance name.
This tells us for certain that, instead of typing a particular instance name, we can just use the generic term, currentTarget after the variable name, evt. Let us now do that. First, comment out the trace and remove the comments from the other lines of code, modifying the instance name to add evt.currentTarget instead.

function colorFun_01 (evt:MouseEvent):void {

evt.currentTarget.stroke.transform.colorTransform = s_new;
evt.currentTarget.fill.transform.colorTransform = f_new;
evt.currentTarget.btn_txt.transform.colorTransform = s_new;

}

Good, now that that works, let's see if we can create the function to make the color change back:

function colorFun_02 (evt:MouseEvent):void {

evt.currentTarget.stroke.transform.colorTransform = s_old;
evt.currentTarget.fill.transform.colorTransform = f_old;
evt.currentTarget.btn_txt.transform.colorTransform = s_old;

}

Do not forget to modify the listeners for all the movieclips so that they call this function when the user mouses-off of them.

exercise 2:

Next, let's make the links in the drop-down menu active:

To start, then, we'll put to use that new array that we created in the beginning of this homework:

var urlArray:Array = new Array();

urlArray[0] = new URLRequest("http://dma-205.blogspot.com");
urlArray[0] = new URLRequest("http://www.actionscript.org");
urlArray[0] = new URLRequest("http://www.kirupa.com");

Let's start putting these URLs to work for us by creating a new function called linkfun:

function linkFun(evt:MouseEvent):void {

}

Next, inside that function, first, I'd like to create a variable to store the name of the particular movieclip that is moused-over or mouse-out of at any given moment:

function linkFun(evt:MouseEvent):void {

var mcName:String = evt.currentTarget.name;

}

We are going to use this string inside what's called a switch statement. This statement allows a script to select from several possibilities, or cases. Think of it this way. We have 3 buttons, and therefore there are 3 possible outcomes. The user could click on one of the buttons, or the user could click on one of the others. Depending on which button the user actually clicks on, 3 different things could happen. THOSE ARE OUR 3 CASES. The way we are going to tell Flash to determine if it's one movieclip or another is by its instance name. Recall, the instance name is going to be stored in our new variable, whichever movieclip button the user happens to have moused-over:

function linkFun(evt:MouseEvent):void {

var mcName:String = evt.currentTarget.name;
switch(mcName) {

case "btn_02" :

do something;

case "btn_03" :

do something;

case "btn_04" :

do something;

}

}

The way the above statement works is this: recall, mcName contains the name of the particular movieclip that the user mouses-over. Actionscript is then going to look at each of the 3 cases. It will then compare the name that is inside mcName with the strings that you see there in each case, "btn_02", "btn_03", or "btn_04". Whichever one matches, the script then does what the next line tells it to do.
What we want it to do is to open up a new web-page:

function linkFun(evt:MouseEvent):void {

var mcName:String = evt.currentTarget.name;
switch(mcName) {

case "btn_02" :

navigateToURL(new web address);

case "btn_03" :

navigateToURL(new web address);

case "btn_04" :

navigateToURL("new web address");

}

}

Obviously, we couldn't just type do something, so we replaced it with the action navigateToURL();
What we didn't do is type in a particular web address. We could do that, but it'd have to be a string like so: "http://www.google.com".
However, we do not have to do that. We have already created the array above, and inside each numbered element of the array, is a particular URL address. Therefore, all we really have to do is type the NAME OF THE ARRAY followed by its INDEX NUMBER:

function linkFun(evt:MouseEvent):void {

var mcName:String = evt.currentTarget.name;
switch(mcName) {

case "btn_02" :

navigateToURL(urlArray[0]);

case "btn_03" :

navigateToURL(urlArray[1]);

case "btn_04" :

navigateToURL(urlArray[2]);

}

}

The last step is to type the three listeners for the three movieclips, each which corresponds to a different case:

options.btn_02.addEventListener(MouseEvent.CLICK, linkFun);
options.btn_03.addEventListener(MouseEvent.CLICK, linkFun);
options.btn_04.addEventListener(MouseEvent.CLICK, linkFun);

Next, go to the FILE menu, and select Publish Settings.
Make certain that both .swf and .html are selected.
Then at the bottom, click publish and okay.
Open up your folder, and notice that you have an .html file there. Open it up in your browser and try it out.
The links may not function as you may get a notice in your browser saying that it is a potentially unsafe action. That is okay. We will deal with that another time. Just click okay as that tells us that it is at least trying to open up an outside web-site.

exercise 3: EXTRA CREDIT

Instead of linking to other web-sites, try to get other .swf files to load into the page when you click onto the buttons in the pull-down menu.

Summer 2010 week 10:—7/12/10: Mon. 9:00 - 12:00

2010-07-13T15:40:00.001-07:00

Hi Everybody,

This week's class was the tenth one of the term. There are 4 more classes until it's all over. Please make the most of the time that you have remaining. Sometime, during this week before our next class, I'll be emailing you detailed evaluations of your midterm projects. Also, I'll be putting up here the requirements for the final project due in on the last day of class.

Have a good week. Carter-

WEEK 10

Syllabus

LINK class syllabus

Classwork

LINK This is this week's class file

Homework

exercise 1:

Complete the file that we were working on in class if you have not already. If you are not certain, download the file above with the instructions and read through ALL of them to make certain you have done it all.

exercise 2:

Once you get all of your code functioning above, you're going to make some modifications.

Instead of the way I instructed you to type the text into the buttons in class, you're going to use what is known as an array. First, delete the text and the quotes that you typed in class. Leave it blank following the equal sign (=) for the moment until I tell you what to type there.
Next, type the following at the very top of your code to create the array object:

var txtArray:Array = new Array();

Next, below that, we need to put data into the array. We call this process populating the array. An array is similar to a variable in that it contains data; however, it is much more powerful in that, unlike a variable, it DOES NOT hold only one element of data. Instead, it may hold many, many data elements

txtArray[0] = "MENU";
txtArray[1] = "one";
txtArray[2] = "two";
txtArray[3] = "three";
txtArray[4] = "four";

Now, we have to assign the individual dynamic text boxes that are inside our movieclips the text that is inside the array elements:
1. btn_01.btn_txt.text = txtArray[0];
2. btn_01.btn_txt.text = txtArray[1];
3. btn_01.btn_txt.text = txtArray[2];
4. btn_01.btn_txt.text = txtArray[3];
5. btn_01.btn_txt.text = txtArray[4];

exercise 3:

Attempt to get the 4 options to disappear again ONLYwhenever you do one of these 2 things:

click on one of the buttons; or
mouse outside of the 4 options

Summer 2010 week 8:—6/28/10: Mon. 9:00 - 12:00

2010-06-29T06:17:00.000-07:00

Hi Everybody,

Have a good week. We are more than halfway through the term now. Try not to melt in the heat and humidity before the end of summer.

WEEK 8

Syllabus

LINK class syllabus

Classwork

LINK These are this week's class files;

Homework

exercise 1:
Complete the classfile that we were working on before I sent you home by using ActionScript to change the color of the rectangle.

exercise 2:
1. In a new file, create a rectangle WITHOUT a stroke and convert it into a movieclip.
2. Using what you know from what we did in class this week, create a function that is triggered when the user mouses over this movieclip.
3. The movieclip should change colors and have a reduction in height when the user mouses over it.
4. You should also create a 2nd function that is triggered when the user mouses off of this movieclip.
5. In this function, the movieclip should change back to its original color and have a return to its original height when the user mouses off of it.

Summer 2010 week 7:—6/21/10: Mon. 9:00 - 12:00

2010-06-21T20:06:00.000-07:00

Hi Everybody,
So you can all breathe a sigh of relief: you got through the midterm push. Whether you did well at midterm or poorly is irrelevant at this point. You should behave as if you're starting fresh, almost as if we're starting a new semester. What you should all consider, however, is HOW you want to start off the rest of the term next week. IF YOU REALLY WANT TO START OFF GOOD, THEN MAKE SURE YOU COME TO CLASS NEXT WEEK WITH YOUR PROJECTS WORKING PERFECTLY AND LOOKING GREAT!. So that means that some of you will have to push a bit more this week to get your projects working. We are going to continue, but with the same projects and with MANY modifications for the final.

WEEK 7

Homework 1:
Take a look at your projects and do as much as possible to improve them by next week. We will continue working on these projects for the Final, so you don't want to start out the rest of the term behind by having to fix what you have and then implementing all the many new items of ActionScript that we will be adding over the coming weeks.
Homework 2:
LINK You also need to complete the classwork quiz that we did today if you weren't able to in class.

Summer 2010 week 6:—6/14/10: Mon. 9:00 - 12:00

2010-06-15T06:47:00.001-07:00

Hi Everybody,

Okay, less than one more week to go before you must have your mid-term projects completed to give to me next Monday. For a few of you, I'm rather comfortable in the states that your projects are in; for most of you, however, I am seriously concerned.

As is always the case, if you do not do your homework, it comes back to you in the end; and here we are nearing the end, and as I saw in class Monday, a number of you still seem to have no idea what you're doing. Doing homework does three things:

It gives you practice,
Prepares you for the mid-term and final projects, and
Shows you where your weak points lie, and therefore for what you require extra help.

I wonder why none of you have asked me for help before yesterday. There are others of you who seem to understand, more or less, but who just hadn't done anything. Both cases are sad.

For all of you in particular who didn't have much to show me yesterday (but this is for EVERYONE), I highly recommend that you find me this week and show me your work to get my input one last time before you give me your project on Monday. I say this because DESIGN IS 30% OF THE GRADE, not just if it functions properly.

Nonetheless, the most important part of this project is to get the ACTIONSCRIPT to work. As you can see, design is very important, but should take a backseat if you have to make a choice.

WEEK 6

Syllabus

LINK class syllabus

Classwork

LINK These are the same as last week's class files because there are no NEW files for this week;

Homework—There are two small things that you must complete for the project next week for it to be wholly complete.

exercise 1:
You must make the initial page load up AUTOMATICALLY, before the user clicks on a button. The reason we want this is so that the user doesn't see a blank page when the site starts up. You must do the same thing for your gallery pages so that when the user goes to those pages, there is already the FIRST image there showing up large. The code below is something like what you should have in your own index file right now, BEFORE you make any additions:
1. // below is the variable that is converted into a request object;
2. var oneRequest:URLRequest = new URLRequest("one.swf");
3. var twoRequest:URLRequest = new URLRequest("two.swf");
4. var threeRequest:URLRequest = new URLRequest("three.swf");
5. var fourRequest:URLRequest = new URLRequest("four.swf");
6. // below is the variable that is converted into a loader;
7. var myLoader:Loader = new Loader();
8. myLoader.load(oneRequest);
9. // below is the function named loadOne & its contents are between the { }
10. function loadOne(event:MouseEvent): void {
11. };
12. function loadTwo(event:MouseEvent): void {
13. };
14. function loadThree(event:MouseEvent): void {
15. };
16. function loadFour(event:MouseEvent): void {
17. };
18. /* below is the listener which is waiting for the user to click on the button named one_btn;
  and, when he/she does,
  the function named loadOne is activated).*/
19. one_btn.addEventListener(MouseEvent.CLICK, loadOne);
20. two_btn.addEventListener(MouseEvent.CLICK, loadTwo);
21. three_btn.addEventListener(MouseEvent.CLICK, loadThree);
22. four_btn.addEventListener(MouseEvent.CLICK, loadFour);
As it is right now if everything functions properly, your projects load up the content from the external .swf files only when you click on a button. Clicking on the buttons activates one of the functions that loads the external file into the index file. The code in the function only runs when the function is called. This means that we need to run that same code, but without using a function because the function keeps it from running automatically, and only allows it to run when the function is called. See the code below for a function as it currently is:
1. function loadOne(event:MouseEvent): void {
2. };
Those two lines of code inside of the function are what we are looking for. They are the two lines that are actually responsible for loading the first external .swf file into the index. This means that you must not only have those two lines here inside the function, but also OUTSIDE OF THE FUNCTION as well. This will cause the first page to load automatically AND also when the user clicks on its button.
exercise 2:
Do the same thing for your gallery files so that the first image in each loads up automatically as well as when the button for it is clicked by the user.

Midterm Requirements:

page size: 1000px X 700px
page number: 5 pages

bio:
this page is about the artist and should include sufficient text, and then enough accompanying images to help explain or demonstrate the text.
art:
this page is about the art, and should, like the bio page, contain sufficient text and images to accompany the text for us to have a basic understanding of the art.
gallery 1 & 2:
these pages should contain thumbnail images which, when clicked on, cause a larger image to show up with a caption below it—the best way to do this is to place the large image in a separate Flash file and type some text below or beside it. Each page must have at least 4 images and each should show up with a unique caption to go with it.
bibliography:
this page contains a list of links and a brief description of at least 10 online resources that have information or images. Also, list some recent books or films about the artist and/or his/her work. This should include who wrote it and when it was published it if is a book; or who directed it and when it was released if it is a film.
index:
although not technically a page, you will still need a primary file which will load all of the external "pages" or .swf files.
img01_index & img02_index:
although not technically pages, you will still need two primary image files which will load all of the external "images" or .swf files for your two gallery pages

Midterm Grading:

topic: 10pts—
this is a giveaway of points (10% - a whole letter grade - of the final grade) if you all follow the topics you chose;
color: 5pts—
this has to do with whether you've seriously chosen your color scheme: if you choose too many colors or if they simply don't go together, points will be taken off; so, if you're not sure, keep it really minimal, or use the COLOR INDEX;
images: 5pts—
another point giveaway if you use enough images AND if you DO NOT DISTORT THEM; and also if you don't use images more than once in such a small website;
text: 5pts—
once again, another giveaway of points if you use enough text and if you spend a little time formatting it: a couple suggestions are that you should NOTstretch text all the way across the page, but break it up into a couple columns instead; also, like color, make sure you do not use too many fonts, especially multiple decorative fonts together;
layout: 10pts—
you should carefully consider the organization of each of your pages and, especially, keep in mind that consistency from page to page is very important;
title: 5pts—
make certain that there is a title and that it is present (in the same spot) no matter what the user does;
buttons: 5pts—
buttons should be fully functional, should have 4 frames in which the hit frame is a simple gray rectangle, and they should be designed well&#a hint here: students often make their buttons too large;
content: 5pts—
yet another point giveaway and it is simply points to determine whether you have enough content in each page;
movie-clip container: 5pts—do you use a movieclip container (box_mc for the index and bigImg_mc for the gallery, for example)?;
initial load: 15pts—
when the user first opens up your site using the index, does content AUTOMATICALLY LOAD as it should, or does the user have to click on a button to make something appear when the page loads up initially?—this also pertains to the gallery pages;
button loading: 20pts—
this simply refers to the functions connected to the buttons on the stage: does content load when you click on all your buttons?
folder organization: 5pts—
the folder that you give me next week should be organized, meaning that images should be in one folder. Also, right before you give me your project, put your .fla files into a separate folder as well. You should also remove any images or other files that are not being used.

Summer 2010 week 5:—6/07/10: Mon. 9:00 - 12:00

2010-06-08T06:06:00.000-07:00

Hi Everybody,

Your mid-term projects will be due in two weeks; however, by next week you must have a complete rough draft to show me. This means you have to have all of the work done by next week. That DOES NOT mean they have to be perfect, as we will continue working on them one more week to get them into better condition. Moreover, we will continue working on them throughout the rest of the semester, adding features and editing what you already have. These projects will be the same projects that you give to me for the final as well.

The most important part of this project is to get the ACTIONSCRIPT to work. Design is very important, but should take a backseat if you have to make a choice.

WEEK 5

Syllabus

LINK class syllabus

Classwork

LINK This week's class files

Homework

exercise 1: Complete your midterm project by next week to present to me a rough draft. This means that you MUST COMPLETE THE ENTIRE SITE BY NEXT WEEK. I will then comment on what you show me and you will have one more week to improve it and smooth out all the rough edges.

Midterm Requirements:

page size: 1000px X 700px
page number: 5 pages

bio:
this page is about the artist and should include sufficient text, and then enough accompanying images to help explain or demonstrate the text.
art:
this page is about the art, and should, like the bio page, contain sufficient text and images to accompany the text for us to have a basic understanding of the art.
gallery 1 & 2:
these pages should contain thumbnail images which, when clicked on, cause a larger image to show up with a caption below it—the best way to do this is to place the large image in a separate Flash file and type some text below or beside it. Each page must have at least 4 images and each should show up with a unique caption to go with it.
bibliography:
this page contains a list of links and a brief description of at least 10 online resources that have information or images. Also, list some recent books or films about the artist and/or his/her work. This should include who wrote it and when it was published it if is a book; or who directed it and when it was released if it is a film.

Midterm Grading:

topic: 5pts—
this is a giveaway of points (5% - a half of a letter grade - of the final grade of the project) if you all follow the topics you chose;
color: 5pts—
this has to do with whether you've seriously chosen your color scheme: if you choose too many colors or if they simply don't go together, points will be taken off; so, if you're not sure, keep it really minimal, or use the COLOR INDEX;
images: 5pts—
another point giveaway if you use enough images AND if you DO NOT DISTORT THEM; and also if you don't use images more than once in such a small website;
text: 5pts—
once again, another giveaway of points if you use enough text and if you spend a little time formatting it: a couple suggestions are that you should NOTstretch text all the way across the page, but break it up into a couple columns instead; also, like color, make sure you do not use too many fonts, especially multiple decorative fonts together;
layout, positioning, & alignment: 20pts—
you should carefully consider the organization of each of your pages and, especially, keep in mind that consistency from page to page is very important. USE RULERS & GUIDES!!!!;
title: 5pts—
make certain that there is a title and that it is present (in the same spot) no matter what the user does;
buttons: 5pts—
buttons should be fully functional, should have 4 frames in which the hit frame is a simple gray rectangle, and they should be designed well&#a hint here: students often make their buttons too large;
content: 5pts—
yet another point giveaway and it is simply points to determine whether you have enough content in each page;
movie-clip container: 5pts—do you use a movieclip container (box_mc for the index and bigImg_mc for the gallery, for example)?;
initial load: 15pts—
when the user first opens up your site using the index, does content AUTOMATICALLY LOAD as it should, or does the user have to click on a button to make something appear when the page loads up initially?—this also pertains to the gallery pages;
button loading: 20pts—
this simply refers to the functions connected to the buttons on the stage: does content load when you click on all your buttons?
folder organization: 5pts—
the folder that you give me next week should be organized, meaning that images should be in one folder. Also, right before you give me your project, put your .fla files into a separate folder as well. You should also remove any images or other files that are not being used.

Summer 2010 week 4:—6/04/10: Fri. 9:00 - 12:00

2010-06-05T09:14:00.000-07:00

Hi Everyone,
Good Class yesterday. Keep up the good work. Not much homework, so I expect everyone to have it in class on Monday.

Have a nice weekend!

WEEK 4

Syllabus

LINK class syllabus

Classwork

LINK This week's class files

Homework

exercise 1: Choose a topic for your MIDTERM PROJECT. This should be a visual artist from the 20th Century SINCE 1960. This may include the following:
- Painters
- Sculptors
- Video Artists
- Conceptual Artists
- Installation Artists
- Photographers (NOT fashion photography)
- Performance Artists (NOT actors or musicians)
If you are not certain which one to choose, then ask your art history instructor (Miguel Arisa, Dan Kadish, Vahan Nahabedian, Steve Tecson) or me for suggestions, or consult an art history book. You must come to class prepared to tell me your idea, or you will not get credit for your homework. THE FIRST TO COME GETS FIRST CHOICE OF A PARTICULAR ARTIST. So come early, or have a second and third choice ready as there will only be one student per artist.
exercise 2: Make certain that you have at least three resources to do your research and get your images. These may be either books or websites, and you must come with them ready to show to me first thing in class.

Summer 2010 week 3:—5/24/10: Mon. 9:00 - 12:00

2010-05-25T06:18:00.000-07:00

Please review here what we did in class yesterday (Monday). Each week, I will post two things: (1) the files that we produced in class that week; and, (2) the homework that will be due the following week.

This week, you will have to complete what we began in class, and then read further for additional assignments.

WEEK 3

Syllabus

LINK class syllabus

Classwork

LINK This weeks class-files: read the text file included here for an explanation of the ActionScript

Homework

exercise A:

In this week's class, you completed a very basic website in Flash, making an external file load when you clicked on your button, and then making another one load when you click on a second button.

What I would like you to do next, if you hadn't done so in class, is, first to create the external flash files for the 3rd, 4th, and 5th buttons. All you need to do is type some text, put a picture, or draw something in those files. Nothing more than that.
Next, make certain that you export the .swf file (ctrl-enter) for each of those new pages.
Also, make sure that all the files, both the .fla files AND the .swf files are all in the same folder.
Now, you'll have to go back to the index and give the other 3 buttons Instance Names.
Then, go to the actions panel, and type the new code to load those pages when you click on the proper buttons.

NEW CODE

You will need 3 more functions, and inside those 3 new functions, you will need the same actions that the other two functions have.
You will also need 3 more URLRequest objects, 3 more loader objects, and 3 more listeners.
For each of these new lines of code, make certain that you do NOT name the functions with the same names, and that you NOT name the request and loader objects with the same name.
HINTS:

name the functions with names such as loadOne, loadTwo, loadThree, loadFour, and loadFive
name the requests with names such as myReq_01, myReq_02, myReq_03, myReq_04, and myReq_05.
name the loaders with names such as myLoad_01, myLoad_02, myLoad_03, myLoad_04, and myLoad_05.

exercise B:
1. What you see now that you have completed the previous exercise is a bunch of code. You have 5 of everything, and that is VERY inefficient. It could be done in a much better way with less code.
  
  What I would like you to do, is to type somewhere in a blank page, in Microsoft Word or even in TextEdit on a Mac or Notepad on a PC, what you think could be done to make it more simple. You DON'T have to know how to do this, just what you think should be done. This could be one thing, or it could be several things. I just want to see how you're thinking about the code.
extra credit:
1. Make the code you typed for exercise 1 more simple by reducing the amount of code that is typed and still have it function properly.

Summer 2010 week 2:—5/17/10: Mon. 9:00 - 12:00

2010-05-18T07:53:00.001-07:00

This week, I am assigning the same homework as last week for the new students. Last week, it was for extra credit. This week, however, it is not for extra credit. It is required for EVERYONE! There is also additional work you must do.

WEEK 2

Syllabus

LINK class syllabus

Classwork

LINK This weeks classfiles (same as last week's)

Homework

exercise 1:
Today, in this week's class, you completed a very basic animation with a few small bits of interactivity, making the animation stop when you clicked on your button, making it resume when you click on the 2nd button, and making it skip to frame 100 when you click on the 3rd button.
1. What I would like you to do next, if you hadn't done so in class, is to modify the actions for the 3rd button to the following: gotoAndStop(currentFrame + 10);
2. Next, from your library, take 4 more instances of your button symbol and arrange them next to your others on the stage.
3. Give them the instance names of pt1_btn, pt2_btn, pt3_btn, and pt4_btn.
4. Using what you understand about the actionscript we have already typed, try to make the 1st new button go to frame 1 and start playing. Then, make the 2nd new button go to frame 51 and start playing, the 3rd go to frame 101 and start playing, and the 4th go to frame 151 and start playing.
5. HINTS: you will need 4 more functions, 4 more listeners, and inside those 4 new functions, you will need gotoAndPlay(); actions.
6. Oh, and remember, COPY & PASTE is your friend. Just make certain you don't copy and paste mistakes, because then you multiply your mistakes.

Summer 2010 week 1:—5/10/10: Mon. 9:00 - 12:00

2010-05-10T12:54:00.001-07:00

Hi Everyone,
This is the home of the blog for this class. I've sent an email out to the person that has already reserved DMA205.blogspot.com to see if he'll allow me to take over that name, but until then, I will be using DMA-205.blogspot.com.

Regarding this week's work, please make certain you understand most of what we did in class today (Monday). Each week, I will post two things: (1) the files that we produced in class that week; and, (2) the homework that will be due the following week.

Since I was late to class today and some students left before I arrived, I will count as extra credit (one assignment's worth) anyone who completes this week's homework by our next class.

Next week, I will assign the same homework, but it will not be for extra credit, but required; and I will also assign additional work next week. Therefore, it's in your best interest to go ahead and give it a try. One person has already completed it!

Since I am just now starting this blog, it will take me some time to get it into shape. So, if you have any difficulties with it, please let me know.
Carter-

WEEK 1

Syllabus

LINK class syllabus

Classwork

LINK This weeks classfiles

Homework

exercise 1:
Today, in this week's class, you completed a very basic animation with one small bit of interactivity, making the animation stop when you clicked on your button.
1. What I would like you to do next, is to add a 2nd button (you may use the same button from the library that you already created, just drag another instance onto the stage next to the first one.
2. Select this 2nd button by clicking on it one time, and in the properties, give it an instance name of play_btn.
3. Lock the buttons layer, and then click in frame one of the actions layer (make certain it is not locked). Then, here in the actions layer, open up the actions panel and look at the actionscript you already have. You have a function named stop_it with one action, the stop(); action, and you have a listener, the last line of the code.
  
  Those things make the button work, make it stop the animation from playing. What we need to add is a set of code that may make the animation play again. We want to do this with the 2nd button you just added to the stage.
4. Highlight the lines of code that are already there and copy them. Then, click at the end of the code, hit enter a couple of times to add some space, and paste the code you copied. This will give you 2 bits of code that are exactly the same.
5. To make the animation play again with the 2nd button, you will have to change a few things: the name of the function, the stop() action, and the name of the button.
  
  In the first line of code that you pasted, change the name of the function from stop_it to play_it first.
6. Change the name of the function in the last line of code that you pasted too, from stop_it() to play_it().
7. Next, change the stop() action to a play() action.
8. And then, finally, change the instance name of the button in the code from stop_btn on the last line, to play_btn.
9. If you have errors that appear, preventing it from working properly, try to read and see if you understand what the errors say. If you double-click on the text of the error, it will automatically take you too the line of code where you have the problem. Look at the code I have given you and see if you can identify any mistakes.

exercise 2:
Similar to this week's in-class exercise, I would like you to create a brief little animation. Please do not spend too much time on this animation, but at the same time it shouldn't be a big ugly mess. This animation should have 200 frames. Also like our in-class exercise, you should have two fully-functioning buttons, play & stop, which should similarly stop, and play the animation.

In addition, however, you should have a 3rd button. This button should use what we call a gotoAndPlay(); action instead of stop(); or play();. Look in the book exactly how to use this action, and I would like you to make it go to frame 100 and start playing from there when you click on it.

Fall 09 week 13:—12/07/09: Wed. 9:00 - 12:00

2009-12-11T09:31:00.001-08:00

Hi Everybody,
It has been a nice term and I've enjoyed teaching you this semester. I hope you feel that you've learned a little about how to begin creating interactive content with Flash. I'm pleased at how well you all have seemed to pick it up, and am confident that you'll do well the remaining terms you have here at TCI.

I'll be gone for the Spring term on sabbatical and won't return until May, so there may be a few of you that I won't see again. It's been a real pleasure teaching you, and good luck in the Future!

Please email me before our next class if you need any final assistance before you turn you project in. I will be available to come in to TCI on Saturday as well if any of you require it. Just let me know.
Carter-

WEEK 13

Final Requirements

NOTE— Please look at your midterm project and make some modifications to your menu. You should include the TWO drop-down menus that I ask for below. The function for these menus should follow my guidelines in last week's posting. Please note below one modification that you will have to make to that code. The requirements below were put in the week 9 posting of this blog. I am repeating them here this week so that you have all the requirements. The one modification that I am making to the requirements I stated that week is that the Video page is entirely for extra credit. If you get it to stop as stated previously when you click on other pages, then that will be additional extra credit:

PAGES: Make certain that your INDEX FILE has a total of at least six links in your menu. These links must include the following:

Home;
Bio/Biography;
an Image Gallery (of Art Works)—This should be a drop-down menu with at least 3 links and each page should have 8-10 images;
Video—This page is entirely for extra credit. If you get it to stop as stated previously when you click on other pages, then that will be additional extra credit
Your own link—depending on who your artist is and what he/she does, you should come up with an idea for an additional page all your own. This should NOT include a contact page;
Information: This should be a DROP-DOWN MENU which contains two buttons—
1. Information about gallery or museum Exhibitions or Collections;
2. Information about your research and what can be discovered about the artist: this is known as a Bibliography—This part of nearly everyone's project was VERY weak. Please make sure that you use good sources both online and, I advise, offline; and then, make certain that you document where you got your information. This page should be thorough: all of you have chosen famous artists, so make sure you do some research and put a list of sources for more information here. Also, categorize them according to whether they are books, articles websites, or something else.
  
  Other good sources of information are your Art History teachers, or me;

SIZE: If it is not already, make sure that the size of your pages is at least 800px X 600px landscape. Larger is fine if you like, but careful not to make it too much beyond 1000px X 700px as most computer users will not see some of your page if you make it larger than that.

AUDIO: As mentioned in class and in previous postings, please create a toggle button and add background music that may be turned on and off with that button. Check last week's posting for additional information, or look in the text for this class.

CODE TIP:
In the code that I offered you in last week's posting, near the bottom I typed an action known as navigateToURL. This action is to be used ONLY for EXTERNAL LINKS. External links are only for pages OUTSIDE of your website, not pages within your website.

You already know how to "link" to pages within your own website. To do this, for the last 10 weeks, we have been using URLRequests and Loaders. You must also do that for your drop-down menus.

I only used navigateToURL as an example, and also to show you a new action, how to make your links in your bibliography actually link to external sites. Please make sure you adjust the code for your drop-down menus accordingly.

Fall 09 week 12:—11/30/09: Wed. 9:00 - 12:00

2009-12-06T09:39:00.000-08:00

In the tutorials below, there are two things covered: the first, much longer tutorial completes your drop-down menus and makes them fully functional; the second shorter tutorial at the bottom, shows you the code for creating sound objects, and then playing and stopping the audio.

LINK—Completing the Drop-Down Menu
LINK—Adding Sound Functionality

DROP-DOWN
First, if you wish to experiment on my file first before implementing on your own, download the following flash file. It is set up exactly the way that we have been working with in class: LINK

Second, we'll go about writing the code for the drop-down menu from scratch, beginning with the text that will fit inside of the buttons. The first line creates the array for that text; and the second line places the first text element (txtArray[0]) inside the text box of the main button. The next three lines places the next three text elements of the array (txtArray[1], txtArray[2], txtArray[3]), inside the text boxes of the option buttons. And finally, the last line, although unrelated to the text array, sets the default for the visibility of the options of the drop-down menu to false, making it invisible:
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. menu.options.opt_01.btn_txt.text=txtArray[1];
4. menu.options.opt_02.btn_txt.text=txtArray[2];
5. menu.options.opt_03.btn_txt.text=txtArray[3];
6. menu.options.visible = false;

But already, despite the fact that the above code is pretty straightforward, there's a better, somewhat more efficient way of writing it, and that is using a new Actionscript element: a with statement. What this statement allows you to do is eliminate some repeated paths. In the above code where we placed text inside the option buttons, we repeated parts of the path 3 times. Such examples of repeatedly typing identical code increases the possibility of making errors, so therefore we must reduce and make it efficient here and wherever else we can. One way of doing this is using the with statement as suggest, allowing us to type that repeated part of the path only one time. See the following example:
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. menu.options.opt_01.btn_txt.text=txtArray[1];
4. menu.options.opt_02.btn_txt.text=txtArray[2];
5. menu.options.opt_03.btn_txt.text=txtArray[3];
6. with(menu.options) {
7. opt_01.btn_txt.text=txtArray[1];
8. opt_01.btn_txt.text=txtArray[2];
9. opt_01.btn_txt.text=txtArray[3];
10. }
11. menu.options.visible = false;

Next, we have to add a new array. This array will contail multiple URLs. Here, in this example, I will just put a few random web addresses, but what you should use for your own projects is the file path to your various pages, the external .swf files.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");

Following this, we will create two color objects, one for the original color of the text and outline, and the other for the new color that they will change into when the user mouses over the buttons.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;

Now, in order for us to make use of those two colors, we have to create our first functions. These functions will do a few things. Most importantly, they will open and close the menu. We have done this before, and it simply entails setting the visible property to true for it to open, and then to false for it to go back to being closed.

In addition to this, we want to change the colors of the main button (the button on top), the one that is always open and which triggers the opening and closing of the menu. When we mouse over it, we want the stroke color and the color of the text to change to a new color, and then, when we mouse off of it, we want those two elements to go back to their original color.

You'll notice, however, that once the menu opens, that the other buttons do not change colors. We'll have to create another set of functions for that.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }

The only thing missing from the script above and which is keeping it from fully functioning are the Event Listeners. We'll create two, one for the MOUSE_OVER mouse event, and the other for the MOUSE_OUT mouse event.

What is important here is WHICH object you choose. The mouse over listener is rather simple: currently, we really only have one object on the stage, and that is the main button; but the main button is inside of the menu. Since there is nothing else inside the menu currently visible for the user to interact with (not the options, nor the various buttons within the options), then which object we should choose is simple, the menu. That is what I put in front of the listener as done so below.

Which object to choose for the second listener is a little more difficult since the whole menu is visible for this event. We could choose from any of the buttons available, the main, or any of the options. The difficulty is deciding which one would work the best. We can rule out the indvidual option buttons because we cannot put three objects in a listener and there'd be no logical to choose opt_01 over opt_02 or opt_03. That leaves us with the main button, the options movieclip or the whole menu movieclip. It doesn't make sense to choose the main button since the moment we'd mouse off of it to choose one of the options, the whole menu would close. With the options movieclip, recall that we created an transparent area that encompassed the entire menu and also hung off the edges of the menu. It's alpha is 0%, but that doesn't mean it isn't there, so its area is taken into consideration. This means that the area of the options movieclip is roughly the same as the menu as a whole. In fact, you could choose either object and the drop-down menu would work the same. For my own purposes, I'll choose the options object because the reason for opening the menu is to choose an option; and if I read that in the listener, it makes it more clear to me that it closes when I mouse off the options.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }
27. menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
28. menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);

Now that we've successfully opened and closed the menu, we need to make the option buttons inside function properly: we first need to create functions that make the colors of the buttons change when we mouse on and off of them. The first function changes the colors of the stroke and the text to the new color, and the second function changes them back.

A new term you will find here is the use of evt.currentTarget. The term evt is a kind of variable. Its first usage is inside the parentheses after the name of the function and before the term MouseEvent. What this variable contains IS the mouse event itself, and the mouse event happens to a particular object. By typing evt.currentTarget, we are selecting whatever the mouse happens to be targeting at that moment.

Since the OPTIONS movieclip is what the user mouses on top of originally, something inside that movieclip is going to be the currentTarget, and that leaves us with 3 possibilities, one of the three buttons within it, opt_01, opt_02, or opt_03. So, depending on which one the user is on top of, THAT will be the currentTarget. Using this piece of code prevents us from having to write two functions for each button. Instead of writing six functions, all we have to write is two.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }
27. function option_over(evt:MouseEvent):void{
28. evt.currentTarget.stroke.transform.colorTransform=btnC_02;
29. evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
30. }
31. function option_out(evt:MouseEvent):void{
32. evt.currentTarget.stroke.transform.colorTransform=btnC_01;
33. evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
34. }
35. menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
36. menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);

What we do have to type a lot of are listeners. Since we have 3 option buttons, and since we have two events for each (MOUSE_OVER & MOUSE_OUT), we have to type six listeners for these two functions.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }
27. function option_over(evt:MouseEvent):void{
28. evt.currentTarget.stroke.transform.colorTransform=btnC_02;
29. evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
30. }
31. function option_out(evt:MouseEvent):void{
32. evt.currentTarget.stroke.transform.colorTransform=btnC_01;
33. evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
34. }
35. menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
36. menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
37. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
38. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
39. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
40. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
41. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
42. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);

At this point, we've gotten the menu to open and close, we've gotten the buttons to change colors when you mouse on and off of them, but we haven't gotten it to DO anything. The whole point of a drop-down menu is for the user to have a series of link options that bring up new 'pages' or take the user to different content. Therefore, the very last thing we must do is utilize those URLs that we put inside of that array near the beginning of this script.

We will do this with a new statement type known as the switch statment. The switch statement functions similarly to an if/else conditional statement; but whereas the if/else statement has two conditions (if or else), the switch statment may have many different conditions. This is perfect for the use of a drop-down menu. Our menu only has three options, but some drop-down menus contain many more options.

The conditions in a switch statement are known as cases, and they operate sort of like common speech as such:

In the first case, do THIS
In the second case, do THAT
In the third case, do this OTHER THING.

It really is this simple. We start by creating a variable which will contain the instance name of whichever button the user clicks on:

  var optionBtn:String = evt.currentTarget.name;

Next comes the switch statment with 3 cases, one for each button which have the instance names of opt_01, opt_02, and opt_03. Depending on which one of those buttons the user mouses over, its instance name will be stored in the variable. Which switch case is selected depends on which name is contained in the variable. If it finds "opt_01" inside that variable, then the switch statement goes with case 1; if it finds one of the other instance names inside, then it goes with the corresponding case, either the 2nd or the 3rd.

switch (optionBtn) {
  case "opt_01" :
    trace(optionBtn);
    break;
  case "opt_02" :
    trace(optionBtn);
    break;
  case "opt_03" :
    trace(optionBtn);
    break;
}

Whichever switch case is selected, the function is going to set off a trace action, and this action will tell us what is inside of the variable optionBtn. What we hope will come out is the name of the button that you click on. The break action is necessary to stop the switch once a case is selected. This is just a temporary set of actions. We will modify them once we are certain the switch functions properly. If we can get a different button instance name each time we click on a different button, then we know the switch is working properly and we will be able to remove the trace actions and put in the right ones.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }
27. function option_over(evt:MouseEvent):void{
28. evt.currentTarget.stroke.transform.colorTransform=btnC_02;
29. evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
30. }
31. function option_out(evt:MouseEvent):void{
32. evt.currentTarget.stroke.transform.colorTransform=btnC_01;
33. evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
34. }
35. function option_click(evt:MouseEvent):void{
36. var optionBtn:String = evt.currentTarget.name;
37. switch(optionBtn) {
38. case "opt_01" :
39. trace(optionBtn);
40. break;
41. case "opt_02" :
42. trace(optionBtn);
43. break;
44. case "opt_03" :
45. trace(optionBtn);
46. break;
47. }
48. }
49. menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
50. menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
51. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
52. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
53. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
54. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
55. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
56. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);
57. menu.options.opt_01.addEventListener(MouseEvent.CLICK, option_click);
58. menu.options.opt_02.addEventListener(MouseEvent.CLICK, option_click);
59. menu.options.opt_03.addEventListener(MouseEvent.CLICK, option_click);

Now that you know the switch statement is functioning properly in that when the user clicks on a button, whichever one of the three buttons that is, a different case is chosen, we can replace the trace() actions with real actions telling the script to do something. What we want to tell the script to do is something with those URLs in the array.

Ultimately, what you should want it to do is load one of your pages, perhaps gallery one or gallery two, depending on what you have in your drop-down menus; however, what we will do here is simply make it load external websites. The code to load external websites is simple, we just have to tell flash to navigate to a web address, known in web parlance as URLs.
1. var txtArray:Array = new Array("main, "one", "two", "three");
2. menu.main.btn_txt.text=txtArray[0];
3. with(menu.options) {
4. opt_01.btn_txt.text=txtArray[1];
5. opt_01.btn_txt.text=txtArray[2];
6. opt_01.btn_txt.text=txtArray[3];
7. }
8. menu.options.visible = false;
9. var address:Array = new Array();
10. address[0] = new URLRequest("http://lipsum.com");
11. address[1] = new URLRequest("html-color-codes.com");
12. address[2] = new URLRequest("http://dma-205.blogspot.com");
13. var btnC_01:ColorTransform = new ColorTransform();
14. btnC_01.color=0x330066;
15. var btnC_02:ColorTransform = new ColorTransform();
16. btnC_02.color=0x3399cc;
17. function menu_open(evt:MouseEvent):void {
18. menu.options.visible=true;
19. menu.main.stroke.transform.colorTransform=btnC_01;
20. menu.main.btn_txt.transform.colorTransform=btnC_01;
21. }
22. function menu_close(evt:MouseEvent):void {
23. menu.options.visible=false;
24. menu.main.stroke.transform.colorTransform=btnC_02;
25. menu.main.btn_txt.transform.colorTransform=btnC_02;
26. }
27. function option_over(evt:MouseEvent):void{
28. evt.currentTarget.stroke.transform.colorTransform=btnC_02;
29. evt.currentTarget.btn_txt.transform.colorTransform=btnC_02;
30. }
31. function option_out(evt:MouseEvent):void{
32. evt.currentTarget.stroke.transform.colorTransform=btnC_01;
33. evt.currentTarget.btn_txt.transform.colorTransform=btnC_01;
34. }
35. function option_click(evt:MouseEvent):void{
36. var optionBtn:String = evt.currentTarget.name;
37. switch(optionBtn) {
38. case "opt_01" :
39. trace(optionBtn);
40. navigateToURL(address[0]);
41. break;
42. case "opt_02" :
43. trace(optionBtn);
44. navigateToURL(address[1]);
45. break;
46. case "opt_03" :
47. trace(optionBtn);
48. navigateToURL(address[2]);
49. break;
50. }
51. }
52. menu.addEventListener(MouseEvent.MOUSE_OVER, menu_open);
53. menu.options.addEventListener(MouseEvent.MOUSE_OUT, menu_close);
54. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OVER, option_over);
55. menu.options.opt_01.addEventListener(MouseEvent.MOUSE_OUT, option_out);
56. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OVER, option_over);
57. menu.options.opt_02.addEventListener(MouseEvent.MOUSE_OUT, option_out);
58. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OVER, option_over);
59. menu.options.opt_03.addEventListener(MouseEvent.MOUSE_OUT, option_out);
60. menu.options.opt_01.addEventListener(MouseEvent.CLICK, option_click);
61. menu.options.opt_02.addEventListener(MouseEvent.CLICK, option_click);
62. menu.options.opt_03.addEventListener(MouseEvent.CLICK, option_click);

ADDING SOUND
Creating a Sound object is much the same as creating a URLRequest, an Array, or a Color object. You follow the same syntax in which you create a variable and then occupy it with a new sound object:

var myMusic:Sound = new Sound();

Next, you must create a URLRequest object in order to request an external audio file. Finally, you load the audio file into your sound object, and then you're able to play and stop it at will:

var musicReq:URLRequest = new URLRequest("audio/mySong.mp3"); <-- type YOUR song title (must be .mp3 file) and its location, properly segregated into its own folder.
myMusic.load(musicReq); <-- this loads a particular song file into the sound object;
myMusic.play(); <-- this plays the song; and
myMusic.stop(); <-- this stops the song.
You must use these actions together with a toggle button (one that has only two positions, on/off, and in which we know from looking at it whether it is on or whether it is off, to make music play and to enable the user to turn it on and off at will.