Actionscript to Reference Dynamically created instances Flash Movie Clip | Array notation | 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 run time, 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:

  1. Create the object dynamically (or with a variable) (_root.myClip.duplicateMovieClip (“myClip”+i, i);)
  2. Reference it with either array notation or with eval. (thisOne = _root[“myClip”+i];) or (eval(“myClip” + i))

Example:

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/07/reference-dynamically-named-clips.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”500″]

Get Adobe Flash player

[/kml_flashembed]

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.

Actionscript:

[cc lang=”actionscript” tab_size=”2″ lines=”40″]

var myLimit = 5;
//myClip._visible = false;

for(var i=1; i<=myLimit; i++) {
_root.myClip.duplicateMovieClip (“myClip”+i, i);

thisOne = _root[“myClip”+i];
thisOne._y = Math.random() * Stage.height;
thisOne._x = Stage.width/(myLimit+1) * i ;
thisOne.id = i;
thisOne.idDisplay.text = i;

thisOne.onRelease = function() {
nextOne = (this.id == myLimit) ? _root[“myClip”+1]: _root[“myClip”+(this.id+1)];
nextOne._y = this._y;
}
}

myClip.onRelease = function() {
for (var i=1; i<=myLimit; i++) {
eval(“myClip” + i)._y = Math.random() * Stage.height;
}
}

[/cc]

Download:

Source fla file: download

Reference:

Nuno Mira shows a good example:

[cc lang=”actionscript”]
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
[/cc]

TheCanadian@Kirupa states it nicely:
The Problem
How can I reference objects using a variable? This is commonly a problem with dynamically created buttons:

ActionScript Code:
for(i = 0; i < 3; i++) { button+i.someProp = "Hello World!"; //error }

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:

ActionScript Code:
myObject.prop = "value"; //and myObject["prop"] = "value";

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:

ActionScript Code:
for(i = 0; i < 3; i++) { this["button"+i].someProp = "Hello World!"; }

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.

StomperNet's Stomper Universe | Interactive Flash Site Map

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.

So go check out the StomperNet Universe now!

Stompernet universe thumbnail

Brownian Movement in Actionscript | Random Motion 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.

  1. Make a random number (random velocity)
  2. Apply the random number (apply velocity to property)
  3. 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

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/06/randomMotion.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”500″]

Get Adobe Flash player

[/kml_flashembed]

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:
[cc lang=”actionscript”]
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;
}
[/cc]

Complex example:
[cc lang=”actionscript”]
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
vx = Math.random() * this.randomRange – this.randomRange/2;
vy = Math.random() * this.randomRange – this.randomRange/2;
//apply velocity to coordinates
this._x += vx;
this._y += vy;
}
}
[/cc]

Download

randomMotion.fla

StomperNet's Scrutinizer Update v1.0

StomperNet‘s Scrutinizer has recieved some updates!

  • New help documentation
  • Keyboard Shortcut Functionality
    • saving a screenshot
    • bookmarking a page
    • toggling the visualization
    • toggle auto-zoom
  • Aesthetic improvements
  • Performance optimizations
  • Improved auto-update.

If you’re wondering what the heck StomperNet‘s Scrutinizer is:

What is it?

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.

Top Ten Things You Can Do with the Scrutinizer

  1. Simulate eye tracking in a usability task
  2. Assess the ease of use of multi-step processes
  3. Give your designer a fresh pair of eyes
  4. Find out what “pops� in your design
  5. Conduct findability challenges
  6. Ask: does your visual grid work?
  7. Evaluate your site’s contrast levels
  8. Insure learnability in your template
  9. Avoid button gravity errors
  10. Tell the story of how your eyes work

Style htmlText with CSS in your Actionscript | Flash/CSS 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

  1. Import TextField.StyleSheet
  2. create a style sheet object: var myCSS:StyleSheet = new StyleSheet();
  3. Specify your styles: myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’underline’});
  4. Ensure that the text box is html enabled: myHTML.htmlText = myHTMLText;
  5. Apply the style sheet object to your html text box: myHTML.styleSheet = myCSS;

Example

[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/06/flashhtmlcss.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”250″]

Get Adobe Flash player

[/kml_flashembed]

Actionscript

[cc lang=”actionscript”]
import TextField.StyleSheet;

myHTMLText = ”

HTML Text (sample header)

Here is some sample html text “+
“filling a text box this link to circlecube and example headers”+

Header h1

Header h2

“;

//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle(“body”, {fontSize:’15’,color:’#000066′});
myCSS.setStyle(“h1”, {fontSize:’25’,color:’#000000′});
myCSS.setStyle(“h2”, {fontSize:’19’,color:’#000000′});
myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’none’});
myCSS.setStyle(“a:hover”, {color:’#0000FF’,textDecoration:’underline’});
myCSS.setStyle(“b”, {fontWeight:’bold’});
myCSS.setStyle(“em”, {fontWeight:’bold’});

//ensure html support and apply css to it
myHTML.html = true;
myHTML.styleSheet = myCSS;
myHTML.htmlText = myHTMLText;
//resize the textbox to exact fit the text in it
//myHTML.autoSize = “left”;
[/cc]

Download

open source flashhtmlcss.zip

Calling actionscript functions through HTML text | asfunction Tutorial

Add this to the list of things I should have already known!

Story

I’ve got an html enabled text box and was trying to devise a way that I could have a hyperlink anchor tag not link to a webpage but actually do something flash. It didn’t seem possible, and I looked through all the different html css combinations I could think of. I finally resorted to trying to use some component like Deng or FlashML. FlashML had a smaller footprint and seemed to do more what I wanted, so I started investigating it. To my dismay, the support for it was few and far between. I found an older version that came with an example file and then a newer one with some documentation but no example and I found no examples any where else. So Lee, if you ever read this, some new examples could be nice. In the documentation I was reading about a functino called AddASFunction and the example html line was very interesting:
[cc lang=”html”]
link
[/cc]
I started looking through the rest of the documentation to find this asfunction use. But all it had was:
The href attribute can include the asfunction string which allows the link provided by the anchor to call a function in Flash. More of this can be found within the addASFunction definition in this help document.
I knew I was on to something, asfunction. So a quick google search and I found the official doc! I was shocked that I had the tool to do this the whole time! Well, shocked and feeling like an idiot for never having heard of it before. I knew it could be done somehow, but had no idea that it was already a feature of htmlText in flash! So now that you know my embarrassing story, I’ll let you in on the secret.

Overview

In flash, you can allow html text within a text area. You either set the text html property as true with actionscript (my_txt.html = true;) or click the ‘Render text as HTML’ button in the properties window of the text area. You cannot enable html text on static text areas however. You can have links and various html elements (but not full html). Usually links have a url in the href attribut of the anchor tag, but flash will read a special value of ‘asfunction’ which specifies that an actionscript function is to be called rather than a url. The correct syntax is asfunction followed by a colon and then the name of the actionscript function to be called, optionally followed by a comma and a possible single argument to be passed to the specified function (href=”asfunction:functionName,argument”).

Steps

  1. Enable html in the text box.
  2. Have your function (ex: functionName) ready to be called from the html link.
  3. Give the href attribute of the anchor tag a property “asfunction:functionName,argument” Notice that the official documentation calls for spaces after punctuation, but any space you put after the colon (:) or comma (,) will be sent to the function in the argument, or will expect a space in the function name and give you a headache.

Example

In this example I’ve got an html enabled text box with 4 links. The first is a standard link (I hope you know what that does). The next link calls an actionscript function with asfunction. The third link sends a single argument to another function. And the last link sends multiple arguments to yet another function. Wait! Multiple arguments? I thought I said only one was supported, well this example shows how to send multiple arguments disguised as a single param and parse them. It’s pretty simple actually.
[kml_flashembed fversion=”9.0.0″ movie=”https://circlecube.com/circlecube/wp-content/uploads/sites/10/2008/05/asfunction.swf” targetclass=”flashmovie” publishmethod=”dynamic” width=”500″ height=”375″]

Get Adobe Flash player

[/kml_flashembed]

Actionscript

[cc lang=”actionscript” lines=”40″]
import TextField.StyleSheet;

myHTMLText = “Sample text in an html enabled text box. “+
“Here’s a normal link to circlecube! “+
“And some more links that don’t go anywhere, they call functions in actionscript. “+
Click this one, “+
“to see the actionscript function called from the html text box. “+
Click this too, “+
“and see that the actionscript function you’re calling can have an argument passed to it. And “+
click me three and four “+
“to see a way to send multiple arguments from your htmlText. “+
“Also, one last example of what not to do “+
Click for nothing“;

//create and initialize css
var myCSS:StyleSheet = new StyleSheet();
myCSS.setStyle(“a:link”, {color:’#0000CC’,textDecoration:’none’});
myCSS.setStyle(“a:hover”, {color:’#0000FF’,textDecoration:’underline’});

myHTML.html = true;
myHTML.htmlText = myHTMLText;
myHTML.styleSheet = myCSS;

//function to be called from html text
function clickLink() {
giveFeedback(“Hyperlink clicked!”);
}

//another function to be called from html text, recieves one argument
function clickWithArg(arg) {
giveFeedback(“Hyperlink clicked! Argument: “+arg);
}

//a simple trick to allow passing of multiple arguments
function clickWithMultipleArgs(args) {
giveFeedback(“Hyperlink clicked! Multiple arguments passed: “+args);
argArray = new Array();
argArray = args.split(‘,’);
for (i = 0; i < argArray.length; i++) { giveFeedback("arg "+i+": "+argArray[i]); } }function giveFeedback(str) { trace(str); feedback.text += str +"\n"; feedback.scroll = feedback.maxscroll; } [/cc]

HTML

[cc lang=”html”]
Sample text in an html enabled text box.
Here’s a normal link to circlecube!
And some more links that don’t go anywhere, they call functions in actionscript.
Click this one,
to see the actionscript function called from the html text box.
Click this too,
and see that the actionscript function you’re calling can have an argument passed to it. And
click me three and four
to see a way to send multiple arguments from your htmlText.
Also, one last example of what not to do
Click for nothing
[/cc]

Download Source

asfunction.zip

Intro to Flashvars | Passing variables to actionscript from the html embed | Tutorial

I’ve had a couple special requests to explain flashvars and how to use it and show it in action.

Overview

The property “FlashVars” can be used to import root level variables to the flash movie or swf. The flashvars propery is used in codes for embedding flash in the html page. The string of variables passed in as flashvars, will be imported into the top level of the movie when it is first instantiated. Variables are created before the first frame of the SWF is played. The format of the string is a set of name=value combinations separated by ampersand (&) symbols.

Steps

  1. Include the flashvars property in your embed codes and voila! You have these variables to use in your swf.
  2. That’s the one step

Code

HTML Embed Codes

[cc lang=”html” tab_size=”2″ lines=”40″]
Here’s some sample embed codes, including object and embed tags:

[/cc]

Actionscript using flashvars

[cc lang=”actionscript” tab_size=”2″ lines=”40″]
//flashvars=”var1=val1&var2=val2&var3=val3″;

display(“var1 = “+ var1);

display(“var2 = “+ var2);

display(“var3 = “+ var3);

display(“var4 = “+ var4);

function display(todisplay:String){
feedback.text += todisplay+”\n”;
trace(todisplay);
}
[/cc]

Example

Page 1 (var1=val1&var2=val2&var3=val3)
Page 2 (var1=here&var2=are&var3=my&var4=flashvars)

Source

Download the html files and the fla and swf in this flashvars.zip

Adobe Flash Player 10 | Astro | Beta Release

As you may have heard today Adobe released Astro, Flash Player 10 Beta!

    Highlight Features:

  • Create Custom Filters and Effects (with Pixel Blender)
  • Performance Boosts (GPU blitting and compositing)
  • Drawing API Enhancements
  • Vector Data Types
  • New Highly Flexible Text Engine
  • 3D Support and Effects
  • Automatic Variable Bitrates for video streams
  • Larger Bitmap Support
  • Better File Reference (user uploading)
  • Context Menu Enhancements
  • UBUNTU

Press Release
Official Download at Adobe Labs of Flash Player 10 Beta code named Astro
Official Release Notes
Also released is Pixel Blender (Hydra) – which allows custom filter and effect creation!

Adobe is also reworking the Sound API as well, here’s an example from Keith and Tinic’s Posts (as always with much detail): Adobe is Making Some Noise Part 1, Part 2, and Part 3!

Dont forget to visit the official Demos at Adobe Labs – Flash 10 Demos at Adobe Labs

If you have other article to link to don’t hesitate to add them in the comments!

Going Natural 3.0 at StomperNet

Here’s a new site and series from StomperNet called Going Natural 3!
It’s a bit of free videos made and released to showcase the talents and business of what StomperNet is about and what they do for their clients. They’re ‘moving the freeline’ so to speak…

The first video series begins with Dan Thies talking about his ‘Crazy Theory’ for AdWords.

On signing in there are a couple BONUS videos for you as well. So go check them out as well!
Watch Going Natural 3 – Adwords Triangulation Method and more

[kml_flashembed movie=”http://beta.stompernet.net/goingnatural3/files/gn3Players.swf” height=”338″ width=”450″ fvars=” playlistURL = http://beta.stompernet.net/goingnatural3/files/playlist/vid1_adwords_triangulation_method.dhtml.xml ; autoplay = false ; awiz = 1126 ; embed = 1″ allowfullscreen=”true” fversion=”9″ useexpressinstall=”true” allowscriptaccess=”always” /]

This site contains the latest flash video player built by yours truly. I also did the design of the site: involving html, css, php, javascript and dealing with drupal too!

iKill Flash Game Art

iKill_1

iKill: Pick Fruit, Be Happy, Keep Killing

iKill_5I developed this game for my Digital Media Thesis. I wanted to do a project that was interactive, and enjoying flash I decided to create it in the form of a game. The project called “iKill’ is Installation Game Art, and is also available online. It explores multiple these, such as man in nature, globalization, fast food, economics, etc. The game was part of an installation for the Digital Media Exit show of Spring 2007. I kept progress of the game online at my digmeexit blog with incremental demo versions of the project. The installation had a fully interactive game and used game controller to play. In the game you play the generic man and work through the work week. Your job is to pick fruit as it grows on the trees. You receive your wages according to your harvest and at the end of the day you “cash out” and earn your happiness (how else but with Happy Meals). You do encounter obstacles and must kill the bugs before they deprive you of your happy harvest! It is pretty simple critique on a culture that equates unhealthy food to happiness without regard to the environment, and equates a mindless 40 hour work week and competitive salary to a full life. For more details visit the development blog (digmeexit.blogspot)
iKill_6
iKill_4iKill_3iKill_2

Play Online Version of iKill

Use the arrows to move, space bar to pause, ‘z’ to jump and ‘x’ to swat.