June 25, 2008 at 10:20 pm · 205 views · Filed under portfolio, work
StomperNet now has a site map. Only it’s much bigger than just a site map, we’re calling it Stomper Universe! It contains all the pieces parts that make up StomperNet. It links to different sites, video series, tools, and more by giving a 3D interactive space to inspect the thumbnails and click through to the sites! It will help visitors navigate easily to all areas of StomperNet, whether they are new to them or old favorites.
June 24, 2008 at 10:34 pm · 843 views · Filed under tutorial
Overview
Having things drift around or move randomly has always interested me. Having an animation that is never going to be the exact same thing is very exciting. The focus turns from key-ing exact animations to programming a feel and letting the animations take car of themselves! One type of seemingly random motion is Brownian motion. This gives the movement a random walk wandering look, it will just drift around with no real direction.
Steps
Step by step this process is very simple. In every random motion you create the random number, and apply it to the property. If you want constant random action (motion) rather than just random placement, you repeat that over and over.
Make a random number (random velocity)
Apply the random number (apply velocity to property)
Repeat (if needed)
To create a random number in actionscript, use Math.random(), which creates a random number between 0 and 1. Usually you’ll want to scale it to a range you want to use. If you want a number between 50 and 100, you’d do Math.random() * 50 + 50. *50 to scale it to 0-50, and + 50 to bring it up to 50 - 100. Also if we want to get a 100 range around 0 (-50 - 50) we would do Math.random() * 100 - 50. In the code below I’ve abstracted this to Math.random() * this.randomRange - this.randomRange/2.
Example
Here I’ve got dots created and placed randomly, with randomly set scale and alpha. On every frame each dot has a random velocity applied to it’s x and y coordinates.
The yellow dot is the simple example (code below) and the rest are included in the complex example below.
Actionscript
Simple Example:
dotOne.onEnterFrame = function(){
//create a random velocity for x and y direction
vx = Math.random() * 4 - 2;
vy = Math.random() * 4 - 2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
}
Complex example:
var numDots = 25;
var randomRange = 1;
for(var i=1; i<=numDots; i++){
//create a new dot
duplicateMovieClip(_root.dot, "dot"+i, i);
//save it's ref path for use
theDot = _root["dot"+i];
//give it random coordinates
theDot._y = Math.random() * Stage.height;
theDot._x = Math.random() * Stage.width;
//give each dot a distinct random range
theDot.randomRange = i/numDots;
//give each dot a random size and transparency
theDot._xscale =
theDot._yscale =
theDot._alpha = i*4;
//apply this code on the dot every frame
theDot.onEnterFrame = function(){
//create a random velocity for x and y direction within the specifically created random range for each dot
An interactive link list. Vertically scrolling list of links or just text. Could be used for a nav menu or a link list, or even just a scrolling list. Scroll speed calculated dynamically from mouse position to give not only scrolling control, but also speed control. Reads an external XML file containing just titles and url paths and creates this interactive click-able link list! On click the link is highlighted and on release loads the url either in a blank window or not (configurable). On rollover the list item grows with animation and is highlighted (all configurable, size speed etc). Once end of list is reached scrolling stops, another version is available with a wrap-around feature: Dynamic Scrolling Link List XML driven Auto wrapping
March 14, 2008 at 6:51 pm · 3,692 views · Filed under portfolio, tutorial
I have been thinking of different interactions that are possible with objects. If you’ve read this blog at all you’ll know that I’ve played with physics and gravity and throwing balls and bouncing balls and all sorts. But I hadn’t wrapped my head around an interactive spinner. I know it’d be easy to make a slider or something that would apply a spin to an object, but this just isn’t interactive enough for me.
Circle with slider to rotate and button for random spin:
This attempt at spinning is ok. I mean, it spins the object and it even glides to a stop if you press the button for a random spin… But it’s just not intuitive and not fun. But if you want this, here’s how I did it.
I want to grab it and spin it though. I want to apply the same principles from physics, like acceleration and friction as forces to the object, so I can grab to spin and release to watch it glide gracefully to a stop. I’ve been thinking about this and how I’d have to use trigonometry and stuff to do it. One day I finally had the time and tried it out. It took me a minute but I figured out that what I needed was arctangent. So (with pointers from jbum, thanks Jim!) I came up with this:
Interactive grab-able circle to spin and twirl:
This one is much more interactive and intuitive. I really think this is because there are no sliders or buttons, no controls, just an object to interact with. It’s much more like real life!
Steps:
In order to make a grab and spin object
1. You have to know where you grab. The user clicks on the shape (knob) and you must figure out what degree or rotation point they have started at. (atan2)
2. As the knob is clicked and the mouse moves (dragging), calculate new rotation by mouse position
3. When mouse is released figure out the current speed of rotation and apply it to the knob with friction, so it can be thrown and spun in that way. (Of course this is optional, if you just want to spin it when the mouse is down you’re done at step 2)
Actionscript:
damp = .96; //friction
r = 0; //rotation
accr = 0; //speed of rotation
knob.onPress = function(){
dragging = true;
//find mouse y coordinate in relation to knob origin
a = _root._ymouse - knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse - knob._x;
//using arctangent find the spot of rotation (in degrees)
//find mouse y coordinate in relation to knob origin
a = _root._ymouse-knob._y;
//find mouse x coordinate in relation to knob origin
b = _root._xmouse-knob._x;
//using arctangent find the spot of rotation (in degrees)
r = Math.atan2(a,b)*180/Math.PI;
//use current rotation and previous rotation
//to find acceleration
//averages the acceleration with the
//previous acceleration for smoother spins
accr = ((r - oldr) + accr)/2;
//apply the acceleration to the rotation
knob._rotation += accr;
//remember current rotation as old rotation
oldr = r;
feedbacka.text = a;
feedbackb.text = b;
}
else{
knob._rotation += accr;
//apply friction to acceleration force
//and if acceleration gets tiny, just set it to zero
if(Math.pow(accr, 2) > .0001){
accr *= damp;
}
else{
accr = 0;
}
}
//spit out feedback continuosly
feedbackr.text = knob._rotation;
feedbackaccr.text = accr;
}
I commented the code to explain what is happening, if you need more just post a comment. Let me know if you find this useful and what you end up making with it.
February 6, 2008 at 7:36 pm · 365 views · Filed under portfolio
Gives feel of perspective and depth by reacting to mouse movements. The effect is parallax, read more…
The city images are very choppy and ugly, I know, it’s just a test.
Sample Actionscript. This in on one of the buildings which are separate movie clips. Adjust the equation for different effect.
The basic formula is as follows: this._x = _root._xmouse / (speed) + transform
onClipEvent(enterFrame){
this._x = _root._xmouse/7 - 50;
}
Update: Here’s a similr effect achieved by just negating the relation between the mouse and the building movie clips.
Loading ...