All you need to do is just TRY their new monthly printed Action Journal called “The Net Effect” - and guess what?…
You get the First Issue of “The Net Effect” for FREE TOO!
You don’t pay anything more than Shipping and Handling, unless you LOVE it and want to get issue 2 a month from now, and then it’s only $39 a month.
That’s NUTS. They are betting the FARM that you will LOVE this stuff and stick around for more. That takes GUTS, and HUGE confidence in the quality of their stuff. They are even throwing in their world famous original “Stomping The Search Engines” series!
They are the guys who organize public speakers, whoever you saw speaking at the last graduation or other ceremony was probably done through the American Program Bureau. They have connections! Many many people, from movie stars, to famous writers, to nobel peace prize winers! So for your next party, give them a try. They had a really old website from about 1999 or so. I was involved with rebuilding it! I did most of the html/css design and flash/actionscript. It was great to work with.
They just launched the site this week, so I’m just celebrating with this post!
See before and after images below:
Old:
The original site was hard to navigate and horrible to look at…
Vs
New:
These are the mock ups, all html/css and the we pushed it into drupal for content management.
APB had the final say on the finishing touches. It came together, although I was suprised that they opted to put so much movement on the page. We set it all up so all speakers have images and videos on their page all in the custom player we built for them… but then they go and embed a youtube video on their homepage… go figure. It came a long way though. Go Web 2.0!
August 1, 2008 at 7:23 pm · 1,303 views · Filed under tutorial
Overview
Allowing users to use the keyboard as well as the mouse is a great way to incite interaction with your flash. This tutorial will show how to code it and what you can do with some keyboard events. This changed with actionscript 3, note this tutorial is AS3.
altKeY (Boolean) Indicates whether the Alt key is active (true) or inactive (false).
charCode (uint) Contains the character code value of the key pressed or released.
ctrlKey (Boolean) Indicates whether the Control key is active (true) or inactive (false).
keyCode (uint) The key code value of the key pressed or released. KeyboardEvent
keyLocation (uint) Indicates the location of the key on the keyboard. KeyboardEvent
shiftKey (Boolean) Indicates whether the Shift key modifier is active (true) or inactive (false).
Steps
import KeyboardEvent,
import flash.events.KeyboardEvent;
assign any keycodes
//keycodes
var left:uint = 37;
var up:uint = 38;
var right:uint = 39;
var down:uint = 40;
function keyDownListener(e:KeyboardEvent) {
trace(e.keyCode.toString());
}
or
function keyDownListener(e:KeyboardEvent) {
if (e.keyCode==left){
ship.x-=10;
ship.rotation = 90;
}
if (e.keyCode==up){
ship.y-=10;
ship.rotation = 180;
}
if (e.keyCode==right){
ship.x+=10;
ship.rotation = 270;
}
if (e.keyCode==down){
ship.y+=10;
ship.rotation = 0;
}
}
Example
Here we have a swf with the keyboard event listener on the stage, and feedback boxes to give us all we can know about the event. It will tell us about certain keys (alt, ctrl (cmd), and shift) with a Boolean, it will tell us the keyCode and the charCode. The keyCode is the number that is tied to the actual button pressed or key, and the charCode relates to the character represented by the button(s) pressed. So hitting ’s’ and then hitting ’shift + s’ will tell you different charCodes, ’s’ and ‘S’. but you’ll see that the s key has the same keyCode (you’ll also see the ’shift’ keyCode as well). If needed you can use the String.fromCharCode function to determine what the charCode for something is. The location on the keyboard is even reported, this helps distinguish between the left shift and the right shift and even the numbers across the qwerty and the numpad on the right of the screen.
July 15, 2008 at 6:54 pm · 439 views · Filed under personal
Ryan has announced a contest to investigate how Google is actually crawling swfs. He introduced the term “fleximagically searchable” to be included in external content, which is then loaded into the Flex swf. Hoping that google will read the external source file through the swf. Also testing how this shows up in the search results. Even though I think there a lot more to SEO than just letting Google crawl your site, there’s the pagerank and everything that Google uses in it’s top secret algorithm to determine search result position ranks.
Here’s the official rules:
It has to be a Flex application
“Fleximagically Searchable” must be dynamically loaded. It can’t be static text inside of your application. - But I don’t care how you load it, in fact that might make a difference in how Google ranks you.
The first link must be deep linked directly into where you load “Fleximagically Searchable” into your application. Feel free to use any deep linking methods out there.
Nothing in your code can dynamically load the phrase automatically. It has to be the result of a user interaction.
You must provide source code and be willing to talk about exactly what you did.
Multiple entries are allowed if you want to try different things.
They seem to be a bit vague in places, but we’ll see if Ryan decides to clarify anything.
More information: I’ve found that’s helpful at Peter Elst’s post. And Ryan explains Google and Flash’s relatoinship development here. Here and here is what Google has officially said. Here is the official press release from Adobe about their new
I’ll have a couple entries I’m sure… and I’ll be sure to post about those as well.
July 14, 2008 at 8:02 pm · 1,101 views · Filed under tutorial
Overview:
Often I’ve had some dynamically created movieclip and then wanted to reference it in my code. This is hard to do if it is named dynamically as well, such as with an incrementing variable. If you use one (or more) variable to name an instance in runtime, you can’t always know what it will be called.
There are two ways (that I know of) to reference these clips, one is the array operator [] and the other is using the eval() function is as2 (but I’ve noticed that as3 has removed the eval function, so I’d recommend getting used to array notation).
Steps:
Create the object dynamically (or with a variable) (_root.myClip.duplicateMovieClip (”myClip”+i, i);)
Reference it with either array notation or with eval. (thisOne = _root["myClip"+i];) or (eval(”myClip” + i))
Example:
I create some movie clips dynamically using a for loop and name them all incrementally with a variable (myClip+i). But then i want to refer to some of them later, specifically. I don’t know what they are named though. They are all myClip1 myClip2 myClip3 and so on. I can use array notation to reference these (or eval). I’ve found it’s easiest to create a reference to the name once and then use it to refer to the clip I want. I imagined a scenario that when you click a mc you would want a different one to be moved. So clicking myClip3 moves myClip4 and so on. I’ve made it wrap so that 5 moves 1… They change the _y property of the next to match the one that’s clicked. Clicking the refresh button will loop through all the clips and (this time using eval) randomize the y coordinate.
this.createEmptyMovieClip("outer_mc", 1); // create a mc called outer_mc
outer_mc.createEmptyMovieClip("inner_mc", 1); // create a mc called inner_mc inside outer_mc
// 3 different ways of targeting inner_mc
trace(outer_mc.inner_mc);
trace(outer_mc["inner_mc"]);
trace(this["outer_mc"]["inner_mc"]);
// all output _level0.outer_mc.inner_mc
TheCanadian@Kirupa states it nicely: The Problem
How can I reference objects using a variable? This is commonly a problem with dynamically created buttons:
The Answer
This is probably the question that gets asked the most. Referencing an object with a variable is done using something called associative array referencing or array notation. The fundamental concept behind this is that:
Are the same thing. Associative array referencing follows the pattern of scope["prop"] where scope is the object which contains the property and prop is the name of the property you wish to reference. Save appearance, array notation works in exactly the same way as dot notation.
Going back to the original, problematic, example, the correct code would look like this:
The button string is concatenated (joined) with the i variable, forming a new reference with each iteration of the loop. First button0, then button1, et cetera.
That’s the quick, but some of you may think that that’s the same notation that is used with instances of the Array class. While that is true, the converse is actually more correct: Array instances use that notation.
Arrays are exactly the same as generic Objects, the only difference is that they have a collection of methods to deal with their properties. And because they require a need for organization, they typically only use numerical properties. Given the array myArray = ["a", "b", "c"], you could theoretically reference the indices using myArray.0, myArray.1 and myArray.2. The reason that we must use array notation is because the compiler doesn’t allow the reference of numerical properties with dot notation.
July 2, 2008 at 6:57 pm · 324 views · Filed under portfolio, work
StomperTools Plugin
StomperLabs is proud to announce another cool, FREE software tool. The StomperTools Firefox plug in! We’re going to pack many tools into this plugin in the future, but to start it off we’ve bundled two functions into this plug in.
StomperNet Ranker
The first is called StomperNet Ranker, and it allows your prospects to quickly survey the rankings for a keyword query. We built an interactive graphical representation of a search showing results from three top search engines: Google, Yahoo and MSN.
How to use StomperNet Ranker?
I’ll give an example… Here’s the page as it loads a search for ‘circlecube’. The green nodes represent Google results, red is Yahoo, and blue is MSN. Each result that is for an identical page is connected with a thin line, and when you hover over a node it will grow and also any nodes for identical pages. Nodes for same domain pages will grow slightly as well to give an idea of the saturation on the search results by the specific domain. Below you can see that I’m hovering over the top-left node (the screen shot helpfully removed my cursor), the title of the page is shown and you can see that the same page (my home page) ir ranked number 1 in Google and MSN (hence the line connecting them, and also they have both grown to be large nodes). Also notice that pages of the same domain (circlecube.com) are at the top 2 slots in Google, the top 3 in Yahoo, and the top 2 in MSN (the medium sized nodes). Hovering over a node displays information to the right of the node chart. Clicking on a node loads that url below the ranker ui. You can also click the Google, Yahoo, and MSN buttons above the chart to see the actual search results at each engine specifically.
Ranker had the potential to become a great comparative tool for search engine optimization and comparison.
Scrutinize This
Not only does StomperTools give you access to Ranker right in your browser, but also you can instantly “Scrutinize” any page you’re viewing right from the browser (once you have the Stomper Scrutinizer tool, so go get it too!) Use the plug in to seamlessly aim your Scrutinizer browser to whatever page you’re browsing in Firefox.
June 25, 2008 at 10:20 pm · 349 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,283 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
Loading ...
