June 25, 2008 at 10:20 pm · 287 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 · 1,175 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
June 16, 2008 at 7:10 pm · 236 views · Filed under personal, work
Serious internet businesses require serious internet tools.
Firefox 3 is a dramatic step forward! Help Mozilla.org set a Guiness Book record by downloading the new release on Tuesday the 17th of June 2008 (11 AM PST).
To celebrate, StomperNet and Appcelerator are hosting a release party in Atlanta at Park Tavern as a part of a world-wide network of celebration Tuesday, June 17th at 7pm. RSVP at upcoming.org.
Join us if you’re in town, otherwise, check the downloads for Firefox 3:
StomperTools with SN Ranker and Scrutinize this, and the recent Scrutinizer 1.0 release.
Park Tavern
www.parktavern.com
500 10th St Ne
Atlanta, GA 30309
(404) 249-0001
The Scrutinizer is a web browser, based upon the Adobe AIR toolkit and the WebKit browser, that offers a simulation of the human visual system. Specifically, it illustrates the distinction between foveal and peripheral vision in visual acuity and color perception. Using this simulation, you can get a better idea of how users interact with your site design. We explain this, and some of the succes we’ve had, in a 30 minute video called Click Fu. It’s also a great tool for observing users interacting with your pages. By slowing them down, the Scrutinizer makes it easier for you to figure out what information the user is consuming and what actions they are considering. Learn about other ways to use the tool at our Top Ten list.
How it Works
The Scrutinizer browser applies a visual filter to where the mouse is located, simulating foveal vision centered around the mouse. For parts of the screen far away from themouse, the display deteriorates into lower resolution, both in detail and color. You can use the browser to get a better understanding of the low level mechanics of how users interact with your site design. Attempting to accomplish a key task on your site using the Scrutinizer can be very enlightening. Watching a user unfamiliar with your site attempt a key task with the Scrutinizer is even better at revealing how your site design affects the way the user extracts meaning from your presentation. Learn more in the Click Fu video, covering practical examples of improved e-commerce, or the 52 second ” Your Vision is an Illusion“, presenting a dramatic illustration of foveal vision. Finally, check out using the Scrutinizer for a findability challenge on Amazon.com.
June 5, 2008 at 8:03 pm · 2,661 views · Filed under tutorial
Overview
In flash you can have text areas that are rendered as html. You can also apply formatting styles to this html. This will show a simple example on how to apply css to html text in flash. I’ll do a simple anchor tag style to show you the ropes. We’ll style a link to be underlined and then when you hover or mouse over it, we’ll change the color. It’s a design style that is widely used online in html, but flash doesn’t natively do it. As a matter of fact, flash doesn’t even natively underline links.
Steps
Import TextField.StyleSheet
create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
Specify your styles: myCSS.setStyle(”a:link”, {color:’#0000CC’,textDecoration:’underline’});
Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;
Example
Actionscript
importTextField.StyleSheet;
myHTMLText = "
<h1>HTML Text (sample header)</h1>
Here is some <em>sample</em> <strong>html text</strong> "+
"filling a text box <a href="http://blog.circlecube.com">this link to circlecube</a> and example headers"+
Loading ...