Thursday, February 25, 2010

Random Timers Tutorial

Click here to get the .fla file or paste all the information below the symbol "/*" into the first frame of action script in flash for a step-by-step tutorial. I think it is annoying when you can't see exactly what is happening. The comments will reveal your path!

/*
First off, welcome! This tutorial will teach you how to make an object that will travel in
a certain direction over a random distance at random intervals and continue to do so forever,
forever, amen. I would encourage you to imput this data and tweak the values, tweens, and directions
because the use of timers can apply to anything when you want to trigger an event.
*/
/*To start, make at least one symbol, here we named it bloc_mc, and place it in the first frame of
the stage*/

//import the classes we will be using
import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.utils.Timer;
import flash.events.TimerEvent;

/*define a variable for the timer, the first numeral is the time in miliseconds
between each time the timer goes off, the second number is the number of times
the timer will repeat. We want it to repeat forever so we set it to 0, and will
make it repeat later on.*/
var timer:Timer = new Timer(1000,0);
/*Now we set the timer to listen for each time it goes off, and when it goes
off to perform a function, we will call it "doNextTween*/
timer.addEventListener(TimerEvent.TIMER, doNextTween);
//Since we want the timer to go indefinately we need the timer to repeat itself
timer.reset();
//And of course the timer has to start
timer.start();

//this var, lastCall, will be used to trace each time the timer fires
var lastCall:uint = 0;
//this variable will be the y coordinate for the object
var newY:Number = bloc_mc.y;

//Time to set up the function that "plays" each time the timer fires, as a timer event
function doNextTween(e:TimerEvent):void{

/*The object, bloc_mc, needs to move. So we set it to tween between y positions. Object,
direction of the tween, the type of ease, the start point of the animation, the distance, duration
*/
var myTweenBloc:Tween = new Tween(bloc_mc, "y", Bounce.easeOut, bloc_mc.y, newY, 1, true);
//we want the new y position to be different each time, increasing the number we multiply by
//will make the y value higher or lower, I think. you mess with it
newY = (Math.random() * 100);
//just for our sake, to know that the timer is working, this tracks how long each timer cycle took
trace("Time since last call: " + String(getTimer() - lastCall));
//If we don't want the timer to go off at even intervals we set a timer delay, here we make it random
//increasing and decreasing the value we multiply by will speed up or slow down the timer fire
timer.delay = Math.random()*10000;
//this sets up the trace so that AS3 knows that lastCall is to get the timer
lastCall = getTimer();

//Here we added just another object with the same attributes to work at the same time, to form eye brows
var myTweenSquare:Tween = new Tween(square_mc, "y", Bounce.easeOut, square_mc.y, newY, 1, true);
newY = (Math.random() * 100);
timer.delay = Math.random()*10000;
lastCall = getTimer();
}

//THE END

Monday, December 7, 2009

The End


Those three and a half assignments make up what turned out to be the most learning filled class I have had in a long, long time. So, yes, I learned a lot. And it was hard, but awesome. So I'm going to keep making these things and take more classes, and I'm really looking forward to it. And man have I come a long way since this. Click and drag the corner of your window to expand and contract the window and perform amazing action!

Tracking Sasquatch


The site ended up looking almost exactly like I wanted, so that is exciting. It is a very short site, but a lot of work went into it. Flash could be frustrating at times, but once you figure something out you are pretty much good to go, and it's an easy fix. But sometimes the simple fix is so simple you have to curse. The key to the site looking "real" is the ambient animation. The falling snow (the original code made by GalaxyGoo) and subtle effects like pouring water and breath, animate the still images in the background. And everything has an effect when you click, making the interface less digital and more physical. So, here it is.

Upon completion of the animation, there was even less time to complete the flash website. Thank God for Thanksgiving break. The website was supposed to be the equivalent of 5 pages from the html site we made in class, which was supposed to be 15 pages in length. Seeing as my html likely had 100 or so pages, this meant to me that I had a lot of work to do. I wanted to do a website that was different from Hell's How-To but still fun. So I decided to make the site about bigfoot. This was going to be just a fun website with little information, and in the real world maybe a gateway into delving deeper into bigfoot study. Because he is totally real. So the emphasis was on making this a "real" situation. So on the site you kind of take the roll of a camera in the wilderness tracking bigfoot. So the picture above is one of the digital comps made in illustrator. The final site ended up looking almost exactly like the comps, so this one is the one that didn't make in.

Type Animation


After completion of the poster it was time to animate it. Animation took quite some time, and discovering the downfalls of tweening took me far too long. An interesting thing about animating though is how much of a profound effect sound has on what is visual. This being my first flash animation, it is somewhat visually un-impressive. But my choice of quote lends itself real well; and when those last few seconds hit with the uproar of music, man it's just cool. Click here!

Kill Bill Poster


The completed poster illustrates a quote from Kill Bill. My focus here was to make the somewhat monotone voice of Uma a little more visually interesting by illustrating the imagery of what she was saying. I solved the problems I had before by treating the poster as a poster that MIGHT some day be animated and to make the poster easily read from top to bottom. It was also important to tie the imagery in with the movie so I used the Impact font and yellow, black, and red color scheme.

Now Animation! Oh wait, a poster


So now we move on in class to animating in flash. No we are making a poster first. Now this poster is to act as a sort of map to the animation. So you should look at this poster and be able to animate the words in flash. This project is about animating a quote from a movie. And so that is what I started out with, making a poster with animation in mind. This didn't quite work well because, well, posters don't move. So my successes are in the imagery here. In critique we determined that maybe I should forget about animation and just make a poster, but add in some more pizazz to some specific words.