Web-based Interactivity: November 2010

Monday, November 29, 2010

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

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.

Tuesday, November 23, 2010

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

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

Tuesday, November 9, 2010

Fall 2010 week 9:
—11/08/10: Mon. 9:00 - 12: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.

Thursday, November 4, 2010

Fall 2010 week 8:
—11/01/10: Mon. 9:00 - 12: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.

kirupa.com Tutorials

Monday, November 29, 2010

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

Tuesday, November 23, 2010

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

Tuesday, November 9, 2010

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

Thursday, November 4, 2010

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

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

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

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

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