To help you out on your final flash adventures, here are the examples for the day:
Random Animation
Here are some new flash examples.
Sound with Pause
Input Text

Video

The best way to add video for right now is to import the video through the File>Import> Import to Stage menu into an FLV player (top option in the window that opens). You can then convert this video to a moviclip and target as you would other movieclips.

Preloader

Take a look at the example. Basically, I’ve set it up so that it stops on the first frame and keeps checking to see if the whole movie has been loaded (# of bytes). If it has, it plays. Otherwise, it changes the text and the size of the bar. Make sure to simulate download when checking the preloader.

Loader

This is for loading other swf files and jpgs. It’s really handy because then you can build parts separately and add them as needed. It saves on download time, and is great when working in teams.

Sound: Play and Pause

Here, we add some code to our previous simple_sound file in order to keep track of where the song was when we pause it, and then play it in that spot again.

For next week:

We will start at the beginning of class, so have everything ready to go. Test it out, practice a simple presentation of the project, and think of it as an opportunity to practice presenting yourself to an audience. Good luck! I’m looking forward to seeing everyone’s hard work.

Files for today:

1. Tween and Transition Manager Classes
2. Pong

Buttons

1. Set up your button on the stage and name the instance “myButton_btn.”
2. In a new layer, add an event listener in your actions panel:
   myButton_btn.addEventListener(MouseEvent.MOUSE_OVER, hoverButtonHandler);
3. Create a handler function that will be called up when the mouse is hovered over:
   function hoverButtonHandler(event:MouseEvent) {
trace("Hovered Over Button!");
}

Sound

1. In order to load an external sound file that plays and stops, we need to create 2 objects: a new Sound object and a new Sound Channel Object:
   var mySound:Sound = new Sound();//set up a sound object
/*Save your .mp3 file in a folder called sounds. Here you’re telling Flash where your sound file is located.*/
mySound.load(new URLRequest("sounds/Abort_Mission.mp3"));//load the .mp3
var myChannel:SoundChannel = new SoundChannel();
2. Here’s how you play the sound:
   myChannel=mySound.play();
3. And here’s how you stop the sound:
   myChannel.stop();

Programmed animation

Programming animation requires a different kind of event listener that listens for when the playhead enters each frame. The function below moves the circle one pixel to the right. Tying it to the event frame means that it will move one pixel for every frame.

addEventListener(Event.ENTER_FRAME, moveThatCircle);//this listens for every time Flash enters a new frame
function moveThatCircle(event:Event) { /*this is called an event handler function. it happens everytime the event ENTER_FRAME occurs*/
circle_mc.x+=1;
}

Pong: A game example

Pong utilizes startDrag() and stopDrag(), and hitTestObject(), 3 methods that might be very helpful for you in other applications.

startDrag()

To start dragging an object, all you need is this:

paddle_mc.startDrag();

However, we need to restrict our paddle to one line that goes from the left to the right of the stage. So, we create a rectangle object like so:

var rect:Rectangle=new Rectangle(0,350,450,0); //the numbers correspond to x, y, width, height

and then add a couple of parameters. The first one determines whether the shape centers itself on the mouse when you drag it, the second one registers the rectangle that we just made as the boundaries for dragging:

paddle_mc.startDrag(false, rect);

Try changing the boundaries of the rectangle to get a sense of what they correlate to.

stopDrag()

This is simple: paddle_mc.stopDrag();

hitObjectTest

The hitObjectTest is so much fun. It returns Boolean, so can be used in an If…Then statement. Make sure to put it in a function that is called upon by an ENTER_FRAME event, or it will only happen once.

if (circle_mc.hitTestObject(paddle_mc)) {
//trace("hit!");
circleVert="up";
score+=10;
score_txt.text=String(score);
} else {
}

Tween Class

The tween class allows us to create simple animations based on start, stop, and duration. You may be asking yourself, why so many ways to do the same thing? The tween class simplifies some things that are done very often-bouncing in, changing alpha, rolling around, that kind of thing. In the end, knowing when to use it can save you a lot of time! And, it’s fun.

Here’s an amazing tutorial on the Tween class

Click on the different types of tweening (around the middle of the tutorial) to get a sense for easing options available.

Here’s the basic setup:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent; //these are important. They import the class with all of the methods and properties that go along with it.
var myTween:Tween = new Tween(my_box, "x", Strong.easeOut, 40, 300, 5, true);

Let’s look at the different parts:

var myTween:Tween = new Tween(object, “property”, EasingType, begin, end, duration, useSeconds);

This is an instantiation of a object of the class tween. Here’s what all of the parameters mean:

1. object – This is the instance name of the object which will be animated. Example: my_box, gallery_mc, myTextField_txt.
2. property - This is the name of the property which will be animated, it must be specified as a string (between quotation marks). Example: “alpha”, “scaleX”, “scaleY”, “x”, “y”.
3. EasingType – The easing type will determine how the tween animation will flow. We are going to explain this more in the next section of the tutorial. Examples: Strong.EaseIn, Elastic.EaseOut, Back.EaseInOut.
4. begin – This is the position from which the animation will start, it must be specified as a number.
5. end – This is the position at which the animation will stop, it must be specified at as a number.
6. duration – This is the period for which the animation will run, the default unit for it is frames, however, the unit can be set in seconds if you set the next parameter as true.
7. useSeconds – Set this parameter to true if you want to the duration to be measured in seconds instead of frames.

READ MORE ABOUT THE TWEEN CLASS

TransitionManager Class

This is a friend of the tween class. Think of these like the Ken Burns Effect or transitions in iMovie! They are fascinating at first, but get old if you don’t give them a personal touch. Here’s the basic setup:

import fl.transitions.*;
import fl.transitions.easing.*;
TransitionManager.start(my_mc,{type:Fly, direction:Transition.IN, duration:2, easing:Strong.easeOut})

The breakdown:

TransitionManager.start(target_movie_clip, transition_parameters);

READ MORE AND TRY OUT THE DIFFERENT TRANSITIONS HERE

Download new actionscript examples.

Assignment:

1. Continue working on your prototypes for your final project. Begin working on them in photoshop, indesign, illustrator, or flash, whichever program you feel most comfortable in. Create a mood board with inspirational images and typefaces and begin to layout the visual design.
2. Create a 3 scene story with buttons on the end of each scene that take you to the next, and then back to the beginning.

Download these files. We will use them for today’s lesson.

Download this simplified control mc.

Actionscript

What is it? Actionscript is an object-oriented language specifically designed for web animation. It is an event-based language which means that actions are triggered by particular events. Actionscript 3.0 was modeled on the same standards as Javascript so that it would be more familiar to web designers.

Actionscript can go in many places in your movie. However, it is BEST to keep actions on their own layer in the timeline. This makes it easy to see all of your actions in the same place. This is what your timeline looks like when your actions are in the right place:

To get back to your actions, click on the “Actions-Frame” Tab on the top.

Object-Oriented Programming

As mentioned before, Actionscript is an object-oriented language (click on the link to learn more). so it is based on classes of objects. Each class of objects (nouns) has its own propertes (adjectives) and methods (verbs). Let’s say I have a class of objects called horse. Our horse class has properties: height, width and color. It has methods: run, trot, gallop. If we want to tell our horse, which is named “Abracadabra” to trot, we would write it like this:

Abracadabra.trot();

The () are for parameters. Depending on the method, there are different parameters. In this case, there might be the parameters slow and fast.

Abracadabra.trot(”slow”);

Let’s say we want to get Abracadabra’s height and store it into a variable called Abracadabra_height. We would do it this way:

var Abracadabra_height:Number=Abracadabra.height;

Variables:

A variable is a placeholder for information or data. It can hold a String(ie “Name”), Boolean (true or false), an int (integer or whole number), or a Number (any kind of number), among other things. To declare a variable, use the keyword var and state what kind of variable it is after the colon like above. Refer to the file variables.fla in the download for today. Open it up and change the variables to describe yourself. Play around with the if-then-else statement.

Now, the horse class does not actually exist in Flash. Let’s translate this into a class that does exist, like the MovieClip class.

To tell a movieclip with the name “star” to stop, we would write:

star_mc.stop();

To make it play:

star_mc:play();

To store its height in a variable:

var myStarHeight:Number = star_mc.height;

Properties:

Think of properties as your adjectives. They describe your objects. Refer to the file mc_properties.fla in the download for today for examples of moviclip properties.

Moving around in the main timeline:

Let’s backtrack a little bit to the main timeline. How can we get the main timeline to skip around to different frames? We can use the same methods, but like this:

play();
stop();

Notice we don’t need the “star.” in front. Since the actions are on the main timeline, it understands that it affects the main timeline. We could also write it as:

this.play();
this.stop();

“this” is a reserved word in flash, which roughly means, “whatever I was talking about before, that’s what I’m talking about now.”

You can also be more specific about where the timeline plays or stops with these two methods:

gotoAndPlay(10);
gotoAndStop(10);

Refer to the file timeline_methods.fla for more examples.

Events:

In the example control_mc.fla in the download for today, we explore the mouse events “CLICK” and “MOUSE_OVER.”

Here is the whole list of events:
CLICK, DOUBLE_CLICK, MOUSE_OVER (hover), MOUSE_DOWN (click is depressed), MOUSE_LEAVE (mouse leaves stage), MOUSE_OUT (mouse leaves area of object), MOUSE_MOVE (mouse moves), MOUSE_UP (mouse comes up from being depressed), MOUSE_WHEEL (mouse wheel moves).

Functions:

Functions are sets of commands that can be stored for later. In the example, we make a named function like this:

function myFunction(parameters){
//what happens when function gets called.
}

and then call on the function later like this:

myFunction();

Name the instance of your symbol!

Anytime you are controlling a symbol on the stage with actionscript, you need to name that instance. You can do so by clicking on the symbol, opening the properties panel, and then adding a name. Buttons should be named with the suffix _btn and movieclips with the suffix _mc. This will help you program them by triggering the code hints.

Assignment

1. Begin prototyping your flash site by either creating a paper prototype or a storyboard or both.
2. Create a movieclip that stops on the first frame until you press a button. Use this as your template, but change the movieclip and the button to suit you.

Today, we’ll take a look at Flash’s other symbols. Remember, symbols live in the Library and can be used over and over! The only thing is that if you change the symbol in the library, it changes all of them.

Graphic- The simplest symbol with only one frame. It is necessary to convert an image/drawing to a graphic when creating a motion tween.

Button- A symbol with different states (Up, Over, Down, Hit) that responds to mouse interaction.

Movieclip- A more complex symbol with its own timeline that acts independently of the main timeline.

Also, we’ll look at onion skinning, playing with properties, and simple easing. Here is a tutorial on custom easing.

Take a look at these flash examples for inspiration on making looped movieclips: Paperad, Soda Play, Levitated, Prettysite, Left to My Own Devices, Lilli Carré

Read through and try these tutorial on Custom Easing and 3D Rotation, and 3D Translation.

Assignment:

1. Using tweens, easing and 3D effects, work on making objects fall, rise, and bounce realistically. Create a 200 frame animation that tells a story with these 3 motions. Here are some examples of websites with realistic motion: Drift Lab, Classic Sesame Street Animation, Design Charts, Soda Play, King Tut. Post to your public_html folder and link to it from your blog.
2. Begin to think about your final project. It can take the form of a:

   Website
   Animation with interactive elements
   Game (more advanced)

   Before you begin, you will research 3 precedents for your projects. Make a list on your blog of these with the following:

   What you like about each example.
   What doesn’t work/could be improved.
   What parts of the technology you don’t yet know.

At the same time, it also had its drawbacks!

• Flash requires a plug-in to play, which some users may not have installed on their browsers and may not trouble themselves to install (even though it is free). New versions of Flash require new plug-ins, which means that you are reliant on your user to constantly upgrade.
• Flash usually requires longer to download particularly if it contains a lot of images, sound, and video. If it doesn’t preload, it may stutter when playing (think about trying to watch video on a slow internet connection)
• Flash is typically not SEO (Search Engine Optimization) Compatible, which means that your content may not show up on Google or Search Tools.
• Flash designs are used in ads, so some browsers may be set to block them.

So, be selective about when you use Flash! Good uses for flash are interactive games, animations, a small part of your site that you would like to draw attention to, like a zippy logo or slideshow. Also, consider whether your target audience will wait for the Flash to download. Onward!

Key Terms:

More Flash definitions here.

.fla: editable Flash file. Make sure to backup a copy of this on every project. This is the one that you will want if you ever need to make changes.
.swf : file for view only. This is the file that gets uploaded with and linked from your HTML, kind of like an image file.
Framerate: The rate, stated in frames per second (fps), at which each frame in an animation is played back for the user
Timeline: the part of the Flash workspace that contains the sequence of frames, layers, and scenes composing an animation.

Parts of the Timeline

A. Playhead B. Empty keyframe C. Timeline header D. Guide layer icon E. Frame View pop‑up menu F. Frame-by-frame animation G. Tweened animation H. Scroll To Playhead button I. Onion-skinning buttons J. Current Frame indicator K. Frame Rate indicator
L. Elapsed Time indicator

Keyframe: A frame in which you establish exactly what should appear on stage at that particular time.
Frame-by-frame Animation: Animation using a series of keyframes with no tweening that creates a flipbook-like animation Flash file.
Tween: Used as a verb, “to tween” is to have a change made between two objects. For example, you can use a Shape Tween to morph a solid circle into a doughnut.
Onion Skin Tools: Tools that enable you to edit one keyframe while viewing (dimly) other frames before or after the current frame.
Vector graphic: A vector graphic file contains all the calculations to redraw an image onscreen. A vector graphic’s file size remains small, and the image can be scaled to any size without any degradation to image quality. Flash .swf files are saved as vector graphics.
Bitmap/Raster graphic: An image file format that contains the color information for each pixel. Raster graphics’ file sizes are relatively large.
Symbol: A graphic, Movie Clip, or button that is stored in the Library. This is especially useful because no matter how many instances of a symbol are used, it only has to download once, and changes made to the master symbol are immediately reflected in all instances already used. See also Button symbol; Graphic symbol; Library; Movie Clip symbol.

Assignment:

1. Using our new animation skillz, create a 200 frame animation expressing a certain feeling. Bring the .fla file to class and we will publish them together

• Kelly- surreal
• Philip- twisted
• Aeneas- wavy
• Le’on- hyper
• Bryan- joyous
• Jobana- mad

1. Watch this tutorial on making a tween.
2. Look at some of the websites linked off of Design Charts for inspiration.
3. If you are having difficulty with HTML/CSS, buy this book. If you are struggling with Flash, get this book.

Look back over the post for Week 7 on Javascript.

Today, we’ll put together this simple slideshow using the image gallery that you made over spring break.

We’ll do another version with:

Lightbox

Many of you were asking about adding a lightbox to your websites. This is a great tutorial, straight from the programmer, Lokesh Dhakar. Dhakar has published Lightbox under a Creative Commons Attribution 2.5 License, which means that we can use it as long as we attribute it to him. He is also a designer, just like us, and is asking for donations from those who use lightbox. So if you use it, chip in here.

JQuery

JQuery is a library of Javascript programs that is easily implemented with designers with little javascript experience. You can find the library and support for JQuery here. Take a look through these great JQuery tutorials and try one for yourself. Follow the instructions very carefully, and make sure to download the .js file before beginning. If you have no idea what I am talking about, read through the tutorial again.

Assignment:

1. Work through a JQuery example and upload it to the Pratt server. Link to it from your blog.
2. Add some kind of slideshow/lightbox or JQuery functionality to your website.
3. We are about to begin our unit on creating interactive experiences with Flash. Currently, there is a huge debate going on about whether Flash will continue as a viable program if Apple continues to not support it on the iphone and ipad. Read these two articles about the debate:
   A List Apart
   John Nack on Adobe
4. Consider your future as a designer. My goal as a professor is to arm you with skills that you can use no matter what technology is available, but it is your responsibility to adapt to those changes. Write a 3 paragraph response to the Flash debate and about how you will adapt to changes in technology throughout your career as a designer.

If you need forms for your Studio assignments, here’s a great source: W3Schools tutorial for forms

Javascript!

Javascript is the object-oriented, scripting language of the web. It can add zest, animation, and functionality to your web pages. Like CSS, Javascript can live in many different parts of your page and in external files that end in .js . Unlike CSS, they are enclosed in the tag <script></script>

Here is the basic structure of javascript:

<script type="text/javascript">
document.write("This is my first JavaScript!");
</script>

This will run wherever it is placed in the body, printing the text “This is my first JavaScript!” in that spot. It can also be place in the <head>, where it will print when the page loads.

Javascript is used more effectively to store information in the head of a document that can be accessed later in the document. In this example, we store a function in the head and access it in the body:


<html>
<head>
<script type="text/javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>

<body onload="message()">
<script type="text/javascript">
document.write("This message is written by JavaScript");
</script>
</body>

</html>

Javascript can also be located externally to the html document and accessed by a script tag in the head of the document:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>


We will work through this slideshow example in which we will make a slide show and swap out images.

Unfortunately, we do not have time in this class to cover much Javascript. So, you should go through the W3Schools tutorial to learn more.

JQuery is a library of Javascript programs that is easily implemented with designers with little javascript experience. Take a look through these great JQuery tutorials and try one for yourself. Follow the instructions very carefully, and make sure to download the .js file before beginning. If you have no idea what I am talking about, read through the tutorial again.

Assignment:

1. Go through all of the W3Schools Javascript Tutorials. Get 3 working examples going and upload them to your public_html space. Link from your blog.
2. Don’t forget your xhtml/css over break! make a page with 5 thumbnail images (100px x 100px) about your spring break. We will use these when you return!
3. Extra credit for a working JQuery example, posted online and linked from your blog!

For some of the topics that we didn’t get to last week, skip over to Week 4 post.

• Here’s an example of different ways to style your hyperlinks in the form of a Hyperlink Haiku.
• Here’s an example of using background images to animate menu items.

Assignment:

1. Read the iA article “Web Design is 95% Typography.” and respond on your blogs.
2. Begin structuring your website using xHTML and CSS. Create the home page with working links by next week.
3. Download Firefox and the Firefox Web Developer tool and use it to look at how some of your favorite websites are programmed.

For Week 7 (March 8):

1. Finish the xHTML/CSS build for your website.
2. Publish it to the pratt server and make sure everything works.
3. Post a link from your blog, make sure you are caught up on all blog assignments.

Solutions for the homework: (Take a look and fine tune your version accordingly.)

• Version 1
• Version 2

• If you haven’t done so already, bookmark this CSS Guide
• Also, here is the great Tutorial on positioning with divs.

Review of positioning

• relative vs. absolute
• when to use floats vs. positioning

Box Model

See the blog post from last class for more details

• padding
• border
• margin: top right bottom left

Tables

This is the basic structure of a table:

<table>

<tr>

<td>

</td>

</tr>

</table>

This table would be 1 cell big. Not very exciting, I know. Here’s an example of one that has table headers, colspans, and rowspans.

Thumbnail galleries

Here a couple of examples of thumbnail galleries:

• Gallery 1 (Control image size, borders, grid using styles)
• Gallery 2 (Crop images with CSS and hide overflows)

Images as Backgrounds

Besides giving your page a nice wallpaper background, you can use images as backgrounds to create some nice effects.

• Here is an example
• Here are more examples

Assignment:

• Create a Sitemap for your portfolio. Post it on your blog. Here is a link about sitemaps
• Finish reading Don’t Make Me Think.
• Begin designing your site in photoshop, illustrator or indesign. Grid out your page, laying out areas for text and images. Think about the way that we gridded websites in class today. Don’t worry too much about the way that it looks for right now. Focus on translating your paper prototype to a clean wireframe. Here are some examples to help you out. Post it on your blog.
• Finish the image gallery using images of your own work.