Tuesday, February 23, 2010

Flash CS3 Movie with Interactive Arrow Keys

Through this tutorial I will show step by step how to move an object in Flash by using the arrow keys on the keyboard. I will be using Flash CS4 and ActionScript 3.0.

Step One:

The first thing you need to do is to open a new flash document. Then, import an image that we will move around or create your own. You can import an image by selecting File >Import > Import to Stage.

Step Two:

Once it is in place, convert it into a Movie Clip symbol by selecting the image and then choosing Modify > Convert to Symbol and then selecting Movie Clip and hitting OK.

Step Three:

Also, you need to name the instance in the properties panel "square_mc" (to access the properties panel you must have the MC selected). We will be referencing the Movie Clip by "square_mc" in ActionScript.

Step Four:

In the timeline create a new layer and name it "actions" and rename layer 1 "images".

Step Five:

Next, click on the first frame of the "actions" layer and open the actions panel.

Step Six:

Type the following in the actions panel:

var speed = 5;

this will store the variables speed so that when a key is hit the image will move 5 px. Then add an event listener to the stage by typing:

stage.addEventListener(keyboardEvent.KEY_DOWN, moveSquare, false, 0,true);

this tells Flash to listen for a keyboard event.

Step Seven:

After that we need to create a function to listen for the key strokes. Usually listeners are applied to an object but this one we will apply to the stage by typing:

function moveSquare(square:KeyboardEvent):void{
if (square.keyCode == keyboard.RIGHT){
square_mc.x += speed;

this moves the image to the right 5 px each time the right arrow key is hit.

Step Eight:

repeat the code in the function for up, down, and left as it is shown below

Now, your image should be able to move around the page by using the arrow keys on your computer! Now all you need to do is publish it.

Well done!

click here to see it in action.



For the first project in this class I created a commerce website selling designer ties. I wanted to show both the professional and serious aspects of wearing ties but also have a sense of excitement. I thought that ties that featured different cities would be somewhat of a collectors item and would be something people would enjoy other that just a pattern on silk, yet would still be elegant enough to wear. These are a couple of screen shots from the site. click to check it out.

Our first assignment for graphic interface design this semester was to do an animation volley. Which basically means that we worked with a partner to create an animation that would loop when it was done. One person did the first five seconds of animation and then the second person did the next five and then back to the first person and so on. I got to work with Kara Singleton, we used all of our own work, and this is what we came up with. Hope you enjoy it!

Monday, December 7, 2009

here is the home page for my flash website and a couple of other pages within the site.
these are a couple of my scrap pieces of paper that i was brainstorming on. I had decided that I wanted to do a flash website that dealt with playing the piano so I wrote down whatever came to my mind. Now it is kind of a mess but that's how my brain works I guess... anyway, this is where i started out with my flash website.

after making the poster for the 30 seconds of a movie clip I created the animation to go along with it. My movie clip is from Back to the Future if anyone was wondering. If you want to watch it here is the link:

sorry it isn't quite perfected. the end is off a little...but nevertheless, i hope you enjoy it!!

this is an attempt at creating a poster for a typographic animation assignment. I ended up doing quite a few of these, but i won't show them all because a lot of them are pretty similar. Anyway, here are a few of them.