Everything you wanted to know about flash...

Optimization tips.

2005-10-03T10:17:00.000-04:00

Wow, have I been busy as of late. In hopes of maintaining food entering my body and a roof over my head I've been working like a dog as of late. Top that with Flash 8 coming out and I have been a busy boy.

Don't believe me?

Mishka NYC
Self Made TV

Ok, two sites for all this time of absence? I know it doesn't look like a lot, unfortunately, most of my recent work has been cleaning up after people's rather creative Flash skills. As a result I wanted to address some things that you can do to optimize your own work, this way I won't get a call to clean it up =) (wow that was really mean an cocky).

OK optimization:

1. Try to avoid using JPEGs. Its been my experience that JPEGs bloat file sizes. I am uncertain as to what is actually going on, if there is some sort of bug going on with the internal Flash compression battling the JPEG compression for dominance which results in bloated file sizes. Also to make your life easier its better to have a non-compressed file in the Flash movie, so you can adjust the compression across the file as opposed to on an individual basis.

Use PNG files, you'll see a difference. If you don't believe me, experiment for yourself, create two identical Flash files one with a JPEG and one with a PNG and play around with it.

My preference is for PNG files, and I've noticed a considerable size difference, but don't just trust me, see for yourself.

2. Crop and resize bitmap images to the exact size you need. Bitmap files bloat file sizes, the bigger the image, the bigger the file, so if you import a file and then reduce it 50% you still have the file weight if it was at 100%. Also file appearance degrades if you blow up or reduce files. Its best to have them at 100% and cropped. Try to avoid cropping images with masks.

3. Try to use a top left align for your symbols. Believe me, as someone who will have to clean up after you =) its easier for me if you use a top left registration. This will help you in the future when you begin scripting more, its easier to calculate the movieclips position if its registration is at 0,0. It'll take some getting used to but believe me you will appreciate it in the future.

4. Don't use graphic symbols. Graphic symbols have only one purpose I can see, and that is for doing synched animations. If you have a one frame symbol, make it a movieclip. It would also help to get in the habit of giving your movieclip instance names as well, this is more for scripting, since you can control any movieclip that has an instance name.

Graphic symbols are best used when you are hoping to synch audio with visual, for lip synching, or other time oriented animations. You can put all of your animation into a graphic symbol then put that symbol on the stage set to play once in the symbols property window.

5. Try to avoid embedding large audio files. Flash has pretty much mastered loading external MP3 files, take advantage of that. MP3 files can stream on loading, so you won't loose much by loading it as an mp3 file and you will keep the file size down. Loading mp3 files are actually pretty easy, reference the Sound object in the Flash help files.

6. Keep the actions on one layer and at the top. I'm an old school Director programmer, Director has its script channel at the top, it means all the code is in the exact same place all the time. Flash isn't the same.

Because you can put code on any layer, any frame, finding all the code sometimes can be frustrating. Its best to move it all to the top in a layer labeled "Actions" this way not only can you find it, but others will be able to locate it as well.

7. NEVER use gotoAndPlay() to go to a frame number, always give it a frame label. Frame numbers can change when you add or delete frames, once that happens all your code is useless, using frame labels allows you to add and delete frames without having to worry about any code that specifies a specific frame.

To be continued...

What good is reusable code... if you type it in every time.

2005-06-30T14:37:00.000-04:00

And what good is a blog if you never update it?

Saying that I've been busy is an understatement, its like saying el nino was a breeze. Recently I've done several websites:

Gossip Girl
JimKrueger.com

Plus a photo booth kiosk done in Macromedia Director, I love director, its what Flash should be.

Plus various other projects still in the works.

But through out all of this, I've found myself using the same scripts over and over, so I thought I would post those scripts here, mainly for my own purposes, so I can easily cut and paste them (I end up referencing my site quite a bit) but also for those of you out there who would like to benefit from them as well.

XML
I had put off using XML for a long time, mainly because of html formatting issues, well I managed to over come that. It is possible to use html formatting in XML within flash, you just have to use < and > instead of < and > so bold would be <B>. Once I figured out that I love XML, it makes formatting the data so easy. And processing XML in flash is really simple, here is a script I use over and over:

function myLoad(success) {
 if (success) {
  myarray = new Array();
  for (var aNode = this.firstChild; aNode != null; aNode=aNode.nextSibling) {
   myarray.push({});
   var i:Number = myarray.length-1;
   for (var name in aNode.attributes) {
    //trace(name +":"+ aNode.attributes[name]);
    myarray[i][name] = aNode.attributes[name];
   }
  }
 } else {
  trace("failed");
 }
}
var thisXML:XML = new XML();
thisXML.onLoad = myLoad;
XML.prototype.ignoreWhite = true;
thisXML.load("filename.xml");
MovieClip.prototype.clearActions = function() {
 for (name in this) {
  if (typeof (this[name]) == "function") {
   delete this[name];
  }
 }
};

This script will load an XML file and dump all of the xml attributes into an array. The format of the XML file is like so:


<?xml version="1.0" encoding="ISO-8859-1"?>
<entry title="Star Wars" url="http://www.starwars.com" />
<entry title="Star Trek" url="http://www.startrek.com" />
<entry title="Stargate SG1" url="http://www.stargatesg1.com" />

When all is said and done you will end up with an associative array with attributes of title and url, you can access this data by using myarray[0].title.

Another script I use quite a bit is a script that generates buttons for me. Now this script can be used to create the buttons, or to simply activate them. The script creates a "hit area" for the button, so you could just put a list of movie clips with text fields in them, then the script with create the hit area for you so you don't have to.

The key aspect is the myColor part, I use getTransform to get the normal state of the background, so I can revert to it. This is helpful so that if you were to change the background color you wouldn't have to change the code:

var btns:Array = ["Home", "Contact", "Portfolio", "Links"];
var menu:MovieClip = createEmptyMovieClip("menu", getNextHighestDepth());
var x:Number = 0;
var y:Number = 0;
for (var i = 0; ilength; i++) {
 var mc:MovieClip = menu.createEmptyMovieClip("menu"+i, menu.getNextHighestDepth());
 var bg:MovieClip = mc.createEmptyMovieClip("bg", mc.getNextHighestDepth());
 mc.createTextField("title", mc.getNextHighestDepth(), 0, 0, 100, 20);
 var my_fmt:TextFormat = new TextFormat();
 with (my_fmt) {
  font = "Arial";
  size = 12;
  color = 0xFFFFFF;
  align = "left";
 }
 with (mc.title) {
  multiline = false;
  html = false;
  embedFonts = false;
  selectable = false;
  wordWrap = false;
  text = btns[i];
  autoSize = true;
  setTextFormat(my_fmt);
 }
 with (bg) {
  var w = mc._width;
  var h = mc._height;
  beginFill(0xFF0000, 100);
  moveTo(0, 0);
  lineTo(w, 0);
  lineTo(w, h);
  lineTo(0, h);
  lineTo(0, 0);
  endFill();
 }
 mc.onRollOver = function() {
  if (this.myColor == null) {
   this.myColor = new Color(this.bg);
   this.oldColor = this.myColor.getTransform();
  }
  this.title.textColor = 0x00FF00;
  this.myColor.setRGB(0x990000);
 };
 mc.onRollOut = function() {
  this.title.textColor = 0xFFFFFF;
  this.myColor.setTransform(this.oldColor);
 };
 mc.onRelease = function() {
  trace(this._name);
 };
 mc._x = x;
 mc._y = y;
 //y+=mc._height;
 x += mc._width;
}

I'm not done with this entry yet :) I just have a lot of work to do...

The sorting hat... uh... flash

2005-05-10T13:02:00.000-04:00

I had been looking for a way to sort depths based on scale, the smaller mcs being moved to the back and the larger ones moved to the front. I looked and looked and couldn't find anything but I was able to write this:

this.onEnterFrame = function() {
 var temp:Array = new Array();
 for (var name in this) {
  if (typeof (this[name]) == "movieclip") {
   temp.push({mc:this[name], scale:this[name]._yscale});
  }
 }
 temp.sortOn("scale", 16);
 trace(temp.length);
 for (var i = 0; i < temp.length; i++) {
  var mc:MovieClip = temp[i].mc;
  mc.swapDepths(this.getNextHighestDepth());
 }
 updateAfterEvent();
};

Now it is a little buggy, when mcs overlap and they are the same percentage, the "blink" but its enough to get you started if you were looking for something similar :)

Adobe Acquires Macromedia

2005-04-18T10:04:00.000-04:00

Adobe Acquires Macromedia not sure how I feel about this... it could be a good thing or it could pretty much ruin my career...

Action Script 2.0 in the hizzie!

2005-02-27T01:12:00.000-05:00

Ok, so I'm white, aside from that I decided to look into Flash's Action Script 2.0. I had been putting it off for 2 very good reasons:

1. Most of my clients weren't familiar with AS 2.0.
2. I prefered the prototype method over classes.

But I had been getting freelance requests involving AS 2.0 so I figured it was time to venture into it. I had picked up a book: Essential ActionScript 2.0 by Colin Moock as a primer, but I have to admit, the book was a bit confusing. Don't let me stop you from buying it, I've heard its the industry standard, I'm just not a fan.

Anyways, I plowed into AS 2.0 with hesitation, but I have to admit, I am enjoying it so far. In the near future I will write some simple classes for you, my eager viewer, to use as a primer into how to use AS 2.0.

In the meantime, my first attempt at writing a class has yielded my TextScroller Class, its a nifty little code-driven scrollbar for use with text fields. So I spent the weekend working on it, I wrapped it, provided some documentation, and you can download it for free at the link below.

If you like it, please let me know, also I'd love feedback on how to make improvements. I already have ideas for 2 additional scrollbar scripts.

Anyways enjoy :)

-js

TextScroller Class
The TextScroller class lets you create a dynamic scrollbar used for scrolling dynamic and input text fields.
You can modify the attributes of the scrollbar for customization.

I seem to remember something about a blog...

2005-02-02T14:34:00.000-05:00

Ok, so its been SEVERAL months since I last posted, but given my schedule:

James Patterson's Santa Kid (flash production and programming)
Dating Game (flash production and programming)
Marvel Comics: Livewires #1 (letterer)
Fusion Partners (Design, production and programming)

You can see I was a little busy... but to make up for it I have some great new extensions, which I think you'll like:

JS Duplicate Layers
This Extension duplicates the selected layers.

JS Frame Label window
This extension allows you to view all of the frame labels in your flash movie. You can jump to a frame label by clicking once on the name, and edit the frame label by clicking twice.

And some code, some of its mine and some I found on some other site, which was a nice little piece of code:

This code allows you to add custom entries to the context menu when you right click on a Flash 7 movie:

function fbHandler(obj, item) {
getURL("http://www.johnnystorm.com", "_blank");
}
var my_cm = new ContextMenu();
fb_cmi = new ContextMenuItem("v0.3 designed by JohnnyStorm.com", fbHandler, true);
my_cm.customItems.push(fb_cmi);
this.menu = my_cm;
Stage.showMenu = true;
my_cm.hideBuiltInItems();

And this is a loader code I created, which I use over and over again, yet always have to search to find, so I am posting it here so I will always have access to it:

And this is a nifty little prototype that removes all actions from a mc:

MovieClip.prototype.clearActions = function() {
for (name in this) {
if (typeof (this[name]) == "function") {
delete this[name];
}
}
};

Ok that's all for now, I'll be back soon, I promise.

Do androids dream in code?

2004-10-12T13:35:00.002-04:00

Ok, I realize that its been a while since I last posted, I really don't have a great excuse, just that I've been distracted lately. It is now three weeks till the 2004 election, and I've been focusing some of my energies in getting people to register and to vote. I don't want to start a political debate, so I'll just say, I don't care who you vote for, but please vote.

Ok, on to the good stuff. A friend of mine asked me about how to integrate Flash, PHP and MySQL, so I thought I would dedicate this posting to that, so that he alone wouldn't benefit from what I am writing.

For this example you'll need a MySQL database, and an understanding of how to set it up. If you aren't familar with MySQL there are plenty of online resources including http://dev.mysql.com/.

Since this is a portfolio example the TABLE should be portfolio related, I am including the MySQL structure that I am using:

#
# Table structure for table 'portfolio'
#
CREATE TABLE portfolio (
id int(11) DEFAULT '' NOT NULL auto_increment,
category varchar(50) ,
title varchar(50) DEFAULT '' NOT NULL ,
client varchar(50) ,
sub_client varchar(75) ,
position varchar(50) ,
url varchar(200) ,
description text ,
type varchar(50) ,
thumbnail varchar(200) ,
date_added date ,
active int(11) DEFAULT '0' NOT NULL ,
UNIQUE id(id),
KEY title (title)
);

# ----------- Dump ends -----------

So the TABLE structue would have the following fields:

id this is a unique identifier which ensures there are no duplicate entry errors.
category this is used to sort the information, for instance (Flash, Graphic Design, HTML).
title this is the title of the entry ie "My Website".
client this is the client the work was done for.
sub_client this is the client's client, I use this because I do a lot of work for studios who do work for other clients.
position this is is what I did on the project, ie Designer, Programmer, Production.
url the url of the online example.
description a description of the entry.
type the type of the entrie ie: Animation, Graphic Design, Programming.
thumbnail the filename of the related thumbnail ie: mywebsite.jpg.
date_added when I added the entry to the portfolio.
active a true or false value (1 or 0) which indicates wether the entry is active, makes it easier to remove entries without deleting it from the database.

Now the first part we need is a php script that will pull the contents of the TABLE and present it in a format that Flash can use. This is the script I currently use:

<?
/*First we connect to the database, normally have this as a seperate file so that if the information changes I only have to change it in one location*/
include ("connect.php");
/*Select all active entries from the TABLE where the category = $CAT this allow us to only select on category at a time.*/
$sql = "SELECT * FROM portfolio WHERE category = '$CAT' AND active = 0 ORDER BY $FIELD";
$result = @mysql_query( $sql );
$num_rows = @mysql_num_rows( $result );
$error = mysql_error();
/*here we are establishing a counter variable for use in individualizing the entries*/
$int = 1;
/*$num_rows is the number of rows the query returns, if it 0 then no entries were found and so we want the code to stop here*/
if($num_rows != 0) {
/*This code will cycle through each entry the query returns*/
while($row = mysql_fetch_array($result)) {
$id = urlencode($row[id]);
$category = urlencode($row[category]);
$title = urlencode($row[title]);
$client = urlencode($row[client]);
$subclient = urlencode($row[subclient]);
$position = urlencode($row[position]);
$url = urlencode($row[url]);
$description = urlencode($row[description]);
$thumbnail = urlencode($row[thumbnail]);
$output .= "&title$int=$title&\n";
$output .= "&client$int=$client&\n";
if (isset($subclient)) {
$output .= "&subclient$int=" . $subclient ."&\n";
}
/*Some of the values may be empty in those cases we don't want to return a value.*/
if(isset($position)) { $output .= "&position$int=$position&\n"; }
$output .= "&url$int=$url&\n";
if(isset($type)) { $output .= "&type$int=$type&\n"; }
if(isset($thumbnail)) { $output .= "&thumbnail$int=$thumbnail&\n"; }
$output .= "&description$int=$description&\n";
$output .= "&date_added$int=$date_added&\n";
$int++;
}
echo $output;
} else {
/*The var status is used in Flash to determine if an error has occured.*/
echo "&status=error&\n";
exit;
}
/*A little trick I picked up, every time you open a MySQL connection it stays open for several hours. The more connections you have the slower MySQL runs, so its best if you close out the connection manually just as an added precaution.*/
mysql_free_result($result);
?>

So once this is all done you should get the following output:

&title1=title&
&client1=client&
&subclient1=subclient&
&position1=position&
&url1=url&
&type1=type&
&description1=description&
&date_added1=0000-00-00&

Once this is done you can use one of my previous scripts to process the entries. The best approach would be to dump the date into an associative array, this would allow you to access each entry and its properties easily.

Ok, give that a shot, I may come back and add the modified AS code, if you have an comments just let me know.

Can I instant message a flash movie?!?

2004-09-16T13:26:00.000-04:00

Ok, I realize there was no post last week, I am sure the three of you reading this on a weekly basis felt I had let you down. Well, let me assure you, there was a good reason, I quit my job. I felt the demands of my life, including this website, necessitated me quitting my job so I could focus on them instead. Ok, I know what you're thinking, you may know Flash, but I wouldn't quit your day job...

Ok bad puns aside, I am no longer fully employed, but I am taking on projects on a freelance basis, which means I am available for projects, contract work, consultations, and teaching sessions.

Ok, self-promotion aside, let's get into this week's tutorial:

Local Connections
What is a local connection? Well, imagine two Flash movies communicating on a web page without the need of an external scripting language such as javascript. Flash allows you to set up a local connection between multiple flash movies, and guess what, its actually very simple to do.

Simple you say?!? NOTHING is simple in flash... prepare to be stand corrected, I even have sample files.

To set up a local connection you have to identify the movie you want to communicate with, and then set up functions to receive and send information between the two movies.

As you should have noticed, I have two Flash movies that can communicate with each other, one movie acts as the menu, and the other movie acts as the display engine. I intentionally separated the two movies so you can see that they are not one movie.

So here is the code for part 1 movie:

var receiving_lc:LocalConnection = new LocalConnection();
receiving_lc.loadEntry = function(title:String, description:String, thumbnail:String) {
theTitle.text = title;
theTitle.autoSize = true;
theDescription.text = description;
thumbnail_mc.loadMovie(thumbnail);
};
receiving_lc.connect("part1");

Ok the key point to look here is receiving_lc.connect("part1"); this is where we set up the name of the movie that will receive connections. Think of this as an email address or telephone number. You can't call or email someone without using the number or address.

And as you can see we have a function called loadEntry this function is what we will call from our sending movie. As you can see it's set up similarly to how functions normally look.

Here is the code for part 2:

SHOW CODE
function loadEntry(i) {
trace(vendors[i].title);
trace(vendors[i].description);
trace(vendors[i].thumbnail);
var sending_lc:LocalConnection = new LocalConnection();
sending_lc.send("part1", "loadEntry", vendors[i].title, vendors[i].description, vendors[i].thumbnail);
}

Ok I realize that is a lot of code, and you may recognize some of it from one of my previous tutorials. To make things easier I'm only going to focus on the part that matters most, and that would be this part:

function loadEntry(i) {
trace(vendors[i].title);
trace(vendors[i].description);
trace(vendors[i].thumbnail);
var sending_lc:LocalConnection = new LocalConnection();
sending_lc.send("part1", "loadEntry", vendors[i].title, vendors[i].description, vendors[i].thumbnail);
}

This function is activated when you click on one of the buttons, I am using a trace function for development testing, since you can only test the local connection via a web browser. As you can see that the actual connection function is quite simple, I am using ActionScript 2.0 syntax here, but you should be able run it in ActionScript 1.0 by removing the :syntax (sending_lc:LocalConnection).

Since all of the code is handled inside of flash you do not have to do anything special with the html in order for it to work.

From my pov this appears to be pretty straight forward, but I will bounce it off some people and make adjustments as necessary. If you have any comments or questions for elaboration please feel free to contact me.

-js

Move it on over...

2004-09-02T16:31:00.000-04:00

.So here it is, not Monday, again, and no new post. Originally when I started this I had intended it to be a weekly update. The plan was to have something new to read every Monday morning, cause as I learned on my state sponsored holiday, little things like website updates mean a lot. Granted, this ain't no Homestarrunner but new content is new content. Unfortunately my schedule as of late has been a bit demanding, so I'm going to aim for Wednesdays, for a while, it also doesn't help that I write most of this on an iPaq. As I've intimated on several occasions, I'm a Mac guy, so getting data off of the iPaq is a pain in the ass.

SHUT UP ALREADY AND GET TO THE GOOD STUFF!!! ... is ActionScript really the "good stuff"?

Ok, one of the key things to remember about coding, is the relationships. As Joshua Davis once said; If you want a movieclip to move across the screen, the simply find the distance between the two points and divide it in half. Then keep find the distance again, rinse repeat, rinse repeat.

You get the idea. So basically what he said was to treat every situation with a simple solution, use your brain to find solutions you are comfortable with, instead of ones that will impress your sixth grade math teacher, Mr. Frankenfield.

So, following that logic, let's make a movieclip movie across the screen.

Create a movieclip, a box, a square, a picture of Sponge Bob Square-pants, whatever. Give the mc an instance name of "mc1" and apply the following code to the mc, not the frame.

onClipEvent(load) {
this.starty = this._y;
}

Now I try to stay away from using mc code, instead use the onEnterFrame, style instead, but I've had the best luck with this, so why not go with what works. You may also notice I like to use more descriptive names for my variables, this helps to remember what each variable is for especially since I am bad at commenting my code.

So now in the frame script add this:

mc1.onEnterFrame = function() {
this.stopy = this.starty+200;
this._x -= (this._x-this.stopy)/3;
};

Ok, this is the ULTRA basic code. If you test your movie you'll see it move across the screen. As you can see all I am doing is finding the difference, and dividing it into thirds. The reason why I'm doing that is to give it an "eased" effect.

So that's great, you can move stuff around. You can even have the movement happen on a mouse click but let's go one step further. Let's say you want to have something happen once you get from point a to b? You may want to have the clip fade out or maybe movie in another direction, regardless of what you want to have happen when it reaches that point first you need to determine if that point has been reached.

Now I know what you're thinking, why not just test to see if the position has been reached? Test to see if it's greater, lesser, or equal to the new point? Well, since we are dividing the value by 3, we will never get a true value. To test this trace the _x value and you'll see what I mean.

So instead let's look for a value we can test for, in our case we can test the difference. Please modify the script as follows:

mc1.onEnterFrame = function() {
this.stopy = this.starty+200;
this.diff = (this._x-this.stopy)/3;
this._x -= this.diff;
if (Math.floor(Math.abs(this.diff)) == 0) {
trace("delete " + this._name + ".onEnterFrame;");
delete this.onEnterFrame;
}
};

Ok so only two real changes:
1. Addition of the variable diff which we'll use for testing.
2. Addition of an if then statement.

The first is pretty easy to understand, the second I'll explain. Because distance is constantly shrinking eventually it will reach 0, but since we really won't notice much difference with numbers smaller then one, we can use this as our test value. I'm using Math.abs to convert the number to a positive number and Math.floor to round the number to a whole number. For clean up purposes I am deleting the onEnterFrame script. Any other action can happen here. For instance:

mc1.onEnterFrame = function() {
this.stopy = this.starty+200;
this.diff = (this._x-this.stopy)/3;
if (Math.floor(Math.abs(this.diff)) == 0) {
if (this._alpha>0) {
this._alpha -= 10;
} else {
trace("delete "+this._name+".onEnterFrame;");
delete this.onEnterFrame;
}
} else {
this._x -= this.diff;
}
};

Now the clip fades out after sliding to the right.

So what would I use this for? Well on application for this would be, say, having a tabbed menu item that extends on click. It could slide up or out, then the menu items could fade in one by one. Or, for instance, you could have movieclips that slide from left to right one after the other. Basically you can do whatever you want, you only have to imagine it.

Ok that's it for now, hopefully I can finish my next entry earlier then this week, or last week. Enjoy.

Quick like a bunny...

2004-08-26T17:18:00.000-04:00

Ok, I'm going to make this one quick, cause it's thursday and well, its a cool feature but not a lot to say about it.

What I want to talk about is the "apply()" function, very cool. If you have any experience with Macromedia Director "apply()" is akin to the "do" function., essentially you can execute code through "apply()".

Example:

function myFunction() {
trace(arguments);
}

var turtles = new Array("Raphael", "Michaelangelo", "Leonardo", "Donatello");
myFunction.apply(null,turtles);

Ok I lied, its not as akin to the "do" command in Director, but its still cool, essentially you can execute function using "apply()" this is essential, to say, execute a function after an action occurs. For instance:

MovieClip.prototype.fadeOut = function(i, action) {
    var actions = arguments.slice(2, arguments.length);
    this.onEnterFrame = function() {
        if (this._alpha>0) {
            this._alpha -= i;
        } else {
            if(action != null) {
                _root[action].apply(this, actions);
            }
            delete this.onEnterFrame;
        }
    };
};

this is a simple fade out script, it causes the movieclip to fade out, but once the movieclip is finished fading out, you have the option to trigger an event. In this case it would act like:

mc1.fadeOut(10, proceed, 0, 0);

proceed would be the function to execute and the 0, 0 would be arguments to pass onto proceed for it to work effectively (function proceed(x, y)).

For more information (confusing information) check out the entry on LiveDocs.

Hey some of us have to work...

2004-08-24T22:19:00.000-04:00

Its been a really busy week so new post yet, so instead I uploaded a new extension:

JS-Export Bitmap
This extension adds functionality to Flash. It allows you to export selected bitmaps or movieclips as png files with transparencies. This is useful for fla files who's source files are not available.

I haven't tested this on a PC yet, cause I don't have Flash on my PC, so if someone does install it on a PC and it doesn't work... BUY A MAC!!!! HA!

No seriously, if there is a problem do me a favor and shoot me an email.

Thanks

-js

***UPDATE***

I was able to do some testing on a PC and got it working for the most part, there are a few quirks on the PC I may or may not be able to work out. For one you have to include the .png extension when naming your file and for some reason gifs aren't exporting correctly. Everything seems to be working fine on the Mac though.

And now for something completly different... Arrays?

2004-08-16T18:19:00.000-04:00

After finishing my first tutorial involving arrays (thanks to Jason for testing out my code for me) the three individuals who read it (and you know who you are) suggested I write even more about them. As if what the world needed more of was blogs about arrays, but who am I to disappoint my fans... without them I'd... well... I'd sleep more that's for sure.

So what more is there to learn about arrays?
Puuulenty... I had just hit the top of the iceberg, so to speak, and so there is plenty more. If you open the flash help section to arrays, you'll see a plethora of commands and functions. I highly reccomend you go through every entry to help familiarize yourself with the commands and provide another reason not to go outside (does the sun still shine?). To put thing in practical terms let's create a menu similar to my portfolio menu on the main site (insert shameless plug). I use php and mySql to manage my portfolio, but don't worry, for now we'll use a text file.

I should say now, that these examples could use xml as well, but to be honest, I'm not entirely sold on it. Instead we'll use a text file and the name=value pair separated by the &. This is similar to how variables are processed in a form using the get action.

So step one, open your favorite text editor and while your at it go ahead and create a new flash movie. Save both files in the same location and for this exercise name the flash file "loadvars.fla" and the text file "data.ini".

Now your already asking me what the significance is of using the .ini extension, and the answer is easy, there is none. What extension you use is irrelevant, as long as the file is plain text, I just prefer to use .ini.

After you've saved focus on the text file. What we are going to do here is create a file flash can use, which contains the information we want to be populated in our menu.

To do this we are going to format the data in name value pairs which are seperated by the ampersand (&). So to start type the following into the text file:

&title1=Star Wars&

Ok, let's take a look at what we did; the first we did was start the line with an ampersand, because flash parses the information using the ampersand as the item delimiter it is best to start and end each line with one. Also because flash has special use for the ampersand you cannot use it in your text without breaking the code. So instead use a series of characters to represent the ampersand, %26 (this is called unicode which I will go into depth more about later), so for instance:

A&P would be A%26P

The equal sign also has to be converted and it's code is: %00.

So let's get to the meet of it shall we? Make your text file look like the following:

&lname1=Parker&
&lname2=Storm&
&lname3=Richards&
&lname4=Grimm&
&lname5=Storm&
&lname6=Rogers&
&lname7=Stark&
&lname8=Banner&
&lname9=Murdock&
&lname10=Einstein&
&fname1=Peter&
&fname2=Johnny&
&fname3=Reed&
&fname4=Ben&
&fname5=Sue&
&fname6=Steve&
&fname7=Tony&
&fname8=Bruce&
&fname9=Matt&
&fname10=Frank&
&email1=pparker@dailybugle.com&
&email2=jstorm@ff.org&
&email3=rrichards@ff.org&
&email4=bgrimm@ff.org&
&email5=sstorm@ff.org&
&email6=srogers@avengers.gov&
&email7=tstark@avengers.gov&
&email8=bruce.banner@usarmy.gov&
&email9=matt_murdock@murdocknelson.com&
&email10=f.einstein@madman.com&

Wow that's a lot. You may not think so copying & pasting... But I'm writing this on a PDA.

Now thanks to flash, the next part is significantly easier, previously, in flash, you used the "loadvars" command. Now while this was effective at importing information into flash, it was a bit clunky in processing the information, namely when testing if it had loaded or not.

But now in flash MX 2004 you can use the loadVars object to load information, which includes an onloaded event. The beauty of this is you no longer have to test when the load is completed, you just specify what actions to take when it is loaded.

So now focusing on our flash file enter the following into the frame 1 action:

loadVarsText = new LoadVars();
loadVarsText.onLoad = function(success) {
if(success) {
trace("data loaded");
} else {
trace("load failed");
}
}
loadVarsText.load("data.ini.");

Ok, so the first thing we did was establish a new object. Notice the o in object is capitalized, remember that case-sensitivity is very important. The second thing we did was establish what to do once the data is loaded. In this case we are testing to see wether the load was successful or not. We're doing this via the success attribute, which returns a true if successful and a false if not. This is, obviously, useful, especially if your movie is dependant upon external data.

So the next step is to process the data into a useable form. Our end goal is to create a spreadsheet style menu to present our data. To help us in this the first thing we are going to do is transfer our data to an associative array. The reason we are going to do this is simple: sorting.

The most brilliant aspect of using an associative array is the sortOn feature. Now you can sort an array alpha-numerically, but with the sortOn function you can sort an associative array based on a specific property. This is ideal for us since we are importing first and last names, so we can sort on the last name or the first.

Add the following code to your flash file:

vendors = new Array();
for(var i = 1; loadVarsText["iname"+i] != null; i++) {
vendors.push({lname: loadVarsText["iname"+i], fname: loadVarsText["fname"+i], email: loadVarsText["email"+i]});
}

Ok, so now our data is in an array. You'll notice two things here: loadVar[] and != null. Since we are using an object to store the data we have to access it from there as well. This is unlike the previous way which dumped the data into a specified target. Also since we used a naming convention with our data (lname1, lname2, etc...) we use != null to keep the loop going until all the data is processed.

So now it's in an array, let's have some fun, well as much fun can be had with arrays. As an added treat we're giong to use nothing but code, not as a means of showing off, but as a means of showing you what is possible.

As always please enter the following code:

loadVarsText = new LoadVars();
loadVarsText.onLoad = function(success) {
if (success) {
vendors = new Array();
for (var i = 1; this["lname"+i] != null; i++) {
vendors.push({lname:this["lname"+i], fname:this["fname"+i], email:this["email"+i]});
}
vendors.sortOn(lname);
createMenu();
createFields();
createButtons();
} else {
trace("not loaded");
}
};
loadVarsText.load("data.ini");
function createMenu() {
var colX = 0;
var n = 0;
for (var name in vendors[0]) {
createEmptyMovieClip("col"+n, this.getNextHighestDepth());
this["col"+n]._x = colX;
this["col"+n]._y = 0;
colX += 100;
var x = 0;
var y = 0;
for (var i = 0; i<vendors.length; i++) {
if (_root["roll"+i] == null) {
_root["roll"+i] = new Object();
AsBroadcaster.initialize(_root["roll"+i]);
}
if (this["col"+n]["menu"+i] == null) {
this["col"+n].createEmptyMovieClip("menu"+i, this["col"+n].getNextHighestDepth());
this["col"+n]["menu"+i]._y = y;
y += 20;
this["col"+n]["menu"+i].createEmptyMovieClip("bg", this["col"+n]["menu"+i].getNextHighestDepth());
with (this["col"+n]["menu"+i].bg) {
lineStyle(1, 0xCCCCCC, 100);
beginFill(0x000066);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 20);
lineTo(0, 20);
lineTo(0, 0);
endFill();
}
this["col"+n]["menu"+i].createTextField("theText", this["col"+n]["menu"+i].getNextHighestDepth(), 2, 2, 96, 16);
with (this["col"+n]["menu"+i].theText) {
type = "dynamic";
border = false;
background = false;
password = false;
multiline = false;
html = false;
embedFonts = false;
selectable = false;
wordWrap = false;
}
}
var my_fmt = new TextFormat();
with (my_fmt) {
font = "Arial";
size = 10;
color = 0xFFFFFF;
}
this["col"+n]["menu"+i].theText.text = vendors[i][name];
this["col"+n]["menu"+i].theText.setTextFormat(my_fmt);
this["col"+n]["menu"+i].myObj = this["roll"+i];
this["col"+n]["menu"+i].myField = name+"_field";
this["col"+n]["menu"+i].onRollOver = function() {
this.myObj.broadcastMessage("myRollOver");
};
this["col"+n]["menu"+i].onRollOut = function() {
this.myObj.broadcastMessage("myRollOut");
};
this["col"+n]["menu"+i].onRelease = function() {
this.myObj.broadcastMessage("myRelease");
};
this["col"+n]["menu"+i].myRollOver = function() {
this.theText.textColor = 0xCCCCCC;
this.myColor = new Color(this.bg);
this.myState = this.myColor.getTransform();
this.myColor.setRGB(0x0077A3);
};
this["col"+n]["menu"+i].myRollOut = function() {
this.theText.textColor = 0xFFFFFF;
this.myColor.setTransform(this.myState);
};
this["col"+n]["menu"+i].myRelease = function() {
var my_fmt = new TextFormat();
with (my_fmt) {
font = "Arial";
size = 10;
color = 0x000000;
}
_root[this.myField].text = this.theText.text;
_root[this.myField].setTextFormat(my_fmt);
};
_root["roll"+i].addListener(this["col"+n]["menu"+i]);
}
n++;
}
}
function createFields() {
var n = 0;
var textX = 325;
var textY = 5;
for (var name in vendors[0]) {
var fieldHeader = name+"_header";
createTextField(fieldHeader, 50+n, textX, textY+2, 55, 20);
with (this[fieldHeader]) {
type = "dynamic";
border = false;
background = false;
password = false;
multiline = false;
html = false;
embedFonts = false;
selectable = false;
wordWrap = false;
var my_fmt = new TextFormat();
with (my_fmt) {
font = "Arial";
size = 10;
color = 0x000000;
}
text = name+":";
setTextFormat(my_fmt);
}
var fieldName = name+"_field";
createTextField(fieldName, 100+n, textX+45, textY, 150, 20);
with (this[fieldName]) {
type = "input";
border = true;
background = false;
password = false;
multiline = false;
html = false;
embedFonts = false;
selectable = true;
wordWrap = false;
setTextFormat(my_fmt);
}
textY += 25;
n++;
}
}

function createButtons() {
var n = 0;
var x = 0;
var y = 350;
for (var name in vendors[0]) {
createEmptyMovieClip(name+"_btn", 150+n);
this[name+"_btn"]._x = x;
this[name+"_btn"]._y = y;
with (this[name+"_btn"]) {
lineStyle(1, 0xCCCCCC, 100);
beginFill(0x000066);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 20);
lineTo(0, 20);
lineTo(0, 0);
endFill();
}
this[name+"_btn"].category = name;
this[name+"_btn"].createTextField("theText", 5, 2, 2, 96, 16);
with (this[name+"_btn"].theText) {
type = "dynamic";
border = false;
background = false;
password = false;
multiline = false;
html = false;
embedFonts = false;
selectable = false;
wordWrap = false;
var my_fmt = new TextFormat();
with (my_fmt) {
font = "Arial";
size = 10;
color = 0xFFFFFF;
align = "center";
}
text = "sortOn "+name;
setTextFormat(my_fmt);
}
this[name+"_btn"].onRelease = function() {
vendors.sortOn(this.category);
createMenu();
};
x += 105;
n++;
}
}

Ok, I realize there is a lot of code, so hopefully you just copied and pasted it. A lot of this is rather advanced, so for now just ignore the parts you don't understand. I wrote this all in code so that you can test it withouth having to download any .fla files, I will explain everything in time, but for now lets discuss the parts important to what we are doing.

So we imported the data and we populated an array with the information. One of the key things we did was "sortOn", which allowed us to sort the array based on the lName. The code also created three buttons which allow you to sort the array based on each field. If you test the movie you will see what I mean.

I used code to create all of the movieclips, text, etc... so you can see what is possible. Feel free to poke around this code to get an ide of what is possible, but for now let's take a step back.

I want you to recreate what I did using code, create three buttons, with the text "sortOn lname", "sortOn fname", and "sortOn email". Feel free to make these buttons as pretty as you like. Next create three textfields, "lname_field", "fname_field", and "email_field". And finally create a movieclip to be used for the menu items. Include a textfield which has an instance name of "theText", make it dynamic and make sure that it isn't selectable. Also for this exercise please align the movieclip in the upper left corner.

Give the movieclip two frames, be sure to put a stop(); action in frame one and alter the movieclip in frame two to be the rollover state. Under linkage properites check "Export for ActionScript" and set the identifier as "menu". By default "Export in first frame" is checked, so be sure to leave that checked.

Once finished, use the following script, this is just a paired down version of my previous script, I've eliminated all of the code that might be confusing, to give you a better idea of what is going on here.

The biggest difference you'll see in my all code version and this paired down version is that only one menu item hilights at a time. This is because I was using an undocumented function called AsBroadcaster. I've only begun to play around with this myself, and found it rather confusing at first, but I'll go into that later. For now let's take a look at what's going on here:

Essentially what is happening is that I have imported the data, pushed it into an array, and then I created a movieclip for each category, and then a menu item for each entry. So we end up with 27 movieclips. The reason why I used a movieclip for each category instead of just 27 movieclips side by side, is 1. its easier, and 2. if I decide to affect the columns, I can affect them one at a time much easier. For instance, if I wanted to mask it or to fit in a specific area.

Also, when I perform a sortOn, I am not recreating the menu items, just the content in them. This saves times and won't affect any placement settings you have, and since the number of items hasn't changed there is no real reason to remove and recreate them.

Now let's add some code to change the menus on release, this can be later adapted for rollover if desired, but this will be a clunkier way then using the AsBroadcaster method. Append your file accordingly:

This code basically cycles through the all of the columns and rows and either sets them to the clicked state or the unclicked state based on which button has been clicked.

AIGHT! That's it for now... this was a doozy, hopefully next weeks article won't be a severe... speaking of which... guess I better get started... ciao.

An array of this and array of that...

2004-08-09T22:37:00.000-04:00

The whole point of this web site is to present flash from a more every man's... Err... Every person's point of view. For the most part what I've found online and in books is either very technical or very dumbed down. I'm hoping to present a third option, while I plan to be quite technical, I hope to present it in a format that is neither dumbed down, or condescending.

To that end, I thought I would start with arrays: A friend asked me why he should use arrays. It's a fair question, and the reason I would use arrays is different then his need. But since the array concept is sort of central to the whole flash object structure, it's a good concept to familiarize you with.

Think of an array as a list of items separated by commas. The best example of an array can be found in your email client, in the field where you indicate who you want to send an email to. As you add names to the field they are separated by commas and there you have your first array.
Now let's translate that into flash. Open a new flash document and label the first layer "Actions", organization will be extremely useful when editing old files so it's a good idea to start right away.
In frame one of the actions layer and type the following code:

myArray = new Array();

Now my plan here is to explain every line of code so that you don't just mimic what I am doing but rather you understand why it is I am doing what I am doing.

In the first line we have "myArray = new Array();" this is the standard way to set up an empty array. There is another way to set up an array, which is less descriptive, for the sake of completion I will include it, but for my examples I will use the standard way.

The alternative way to establish an array is myArray = [];

Now there are two kinds of arrays, standard arrays, which appear just like lists separated by commas, and associated arrays, which essentially is an array which contains other arrays. Confusing? No doubt, but don't worry about that right now, we're going to focus on the standard array for now and touch on associative arrays later.

The second line of code to enter is:

myArray.push("pparker@dailybugle.com");

There, we've just entered our first value into the array, the "push" command is used to append the entry contained within the parentheses into the list at the very end. Once you've entered the code add the following then test the movie:

trace(myArray.toString());

If everything went well you should notice in your output window pparker@dailybugle.com, now you have an array with one value. Its good to note that Flash MX 2004 is Case-sensitive, so be sure that all of the cases are properly set, if you were to say use myArray = new array(); instead of new Array(), first Flash will yell at you and second your script may not work. So now let's move on to adding another value to the array:

myArray.push("jstorm@ff.org");

put that line between the first push line and the trace line and you should see pparker@dailybugle.com, jstorm@ff.org essentially a list of email addresses separated by commas. I should point out that the "toString()" command takes the Array, which consists of objects, and converts it to a string, if you are curious to see what I mean by objects, remove the "toSTring()" from the trace command and see what I mean.

Now here is the most tricky part of an array, one that still manages to confuse me even though I've been using them for years. Arrays were developed so that you can access the information in them, simply by saying which point in the list you want. This is done by using the brackets: [] and using a number known as the index, to signify which value to retrieve. As an example change the trace action as such:

trace(myArray[1]);

If done correctly it will return jstorm@ff.org. Now you'll notice that I use the number one in the brackets and yet it returned the second value instead of the first. That is because some genius decided to start counting with zero instead of one, thus forever making our lives complicated, as far as arrays go that is. So to obtain the very first value of the array us a zero like such:

trace(myArray[0]);

By using the index to determine where in the array to retrieve information, you can also use the index to specify where to set information. To make your life even more complicated, instead of using the "push()" command to add a value to the array, try this:

myArray[2] = "bgrimm@ff.org";

If you run a trace, you will see that the new value has been added to the end of the list, this is because I told the array I want the third value to be the new information. This is true of editing entries already in the array, if you had but a number one instead of 2 you would see that the second value had been replaced with our new value and two values remain.

Which leads me to my next point, which is, how do you determine how many values are in an array? Well that's easy and complicated at the same time, it's easy because you can use the "length" value to determine how many values are inside, but the length value will always be one number higher then the last index of the array. Have I confused you yet? Well let me show you what I mean.

Add the following code and test the movie:

myArray = new Array();
myArray.push("pparker@dailybugle.com");
myArray.push("jstorm@ff.org");
myArray[2] = "bgrimm@ff.org";
myArray[3] = "rrichards@ff.org";
myArray[4] = "sstorm@ff.org";
trace("length:"+myArray.length);
trace("first value:"+myArray[0]);
trace("last value:"+myArray[myArray.length]);

If properly entered "pparker@dailybugle.com" will be returned for the first value but you will see an "undefined" returned for the last value. To correctly obtain the last value use myArray[myArray.length-1] instead. See, complicated, and easy to forget, especially when you get into dates and you try to pull the month out of the date array.

So keep that in mind that everything in an array is on place lower or one number lower then where logic would dictate it would be.

So now that we've created an array, you're probably still wondering what's all the hub bub? Well it's a valid point, but let's look at it like this. Say you want to create a menu for use in your movie. Your menu has 5 menu items that all look the same, except for the text. Now you could manually create 5 menu items, place them where you want, assign them each code, or, you could use ActionScript to do it all for you, save you some time, and make making revisions easier. Let me show you what I mean.

The worst part of this whole scenario is that I am planning on leaping light years ahead, difficulty wise, to explain this exercise. If for some reason you are unable to understand everything, please, continue on with the exercise, and hopefully everything will make sense by the end. I will lightly touch on things now, but I will revisit them at a later point in time, if for some reason you cannot wait for a full explanation, the Flash in application help is a good source of information and explanations, and is where I learned most of what I know.

First thing I want you to do is set up your array, we're going to make an array with 5 entries, to make it easier, for now, we're just going to change the title of the menu, and leave additional information for later.

myArray = new Array("Home", "Portfolio", "Resume", "About", "Contact");

So we have an array of five objects or 5 entries. Next thing I want you to do is create a simple box on the stage that will serve as our menu, create a text field on top of it centered and be sure to specify "dynamic" in the properties menu. For now no other values are necessary, but feel free to tweak the textfield to your own design. For the sake of this example please select "center" for the text align. Be sure to enter in a name in the instance filed of the properties menu, for the sake of this exercise please use "myText".

Once you are finished select the entire menu box and convert it to a symbol, for the sake of ease choose a top left align, and give the if the button under the cancel button says "advanced" click it to expand to the advanced mode and enter in "menu" into the "Identifier:" field. This will automatically select "Export for ActionScript" and "Export in first frame", leave those settings for now.

Basically what we did was create a shared object in the library that we will be able to use via ActionScript in our movie. What we are doing is similar to the duplicateMovieClip() command, but unlike the duplicateMovieClip() command, this doesn't require the movieclip to be on the stage when the script is executed.

The next thing we are going to do is execute a for loop. The for loop is a really powerful tool in flash, and allows you to do a lot of really cool things, for now we are going to use it to go through every index of the array and retrieve the value. There are other ways to do this, but for now we'll use the for loop.

for(var i = 0; i < myArray.length; i++) {

}

As you can see there are parentheses, curly brackets and semi colons. The parentheses determine what actions the for loop will take, the semi-colon will delineate them, and the curly brackets indicates what actions will happen during each loop;

Now let's break down the for loop:

for(var i = 0; what we've done here is establish the first value of I for the loop. Since we are using an array, this number should be zero to start at the beginning of the array. This is essentially the same as pointing to the pinkie of your left hand before you begin counting to ten. You'll notice the "Var" in there, there are two types of variables in flash, local and global, a local variable is specified by "var" and will only be used in the for loop, a global variable, without the var, can be used by anything in the current timeline, since I is a throw away number or since we won't use it past the for loop, use the var in front, as you begin to code more, you'll find that you will use the same variable names over and over again, so its good to start good practices now.

i < myArray.length; this is probably the only time an array indexing starting at zero comes in handy. Basically we want to loop as many times as there are values in the array. We are going to continue the loop until the I value is less then (<) the length of the array. Because the length number is always one number higher then the last index in the array, we can test for a less then value. If, however, you wanted to manually test it, and use the number of the last index, you would have to use the less then or equal to (<=) because the loop will stop at the number if less then, and you would be one value short.

i++) { this tells the I variable that it should increment itself by one after the loop has completed. It is the equivalent of saying I = i+1 (as in flash 4) to make things easy, you simply use two plus signs to increment by one and two minus signs to decrease by one;

Now everything inside the curly brackets is what we want to have happen during the loop, this takes place after the initial value of I is set and before i is incremented. In this case let's test it out by tracing the value so put the following between the curly brackets:

for(var i = 0; i < myArray.length; i++) {
trace(myArray[i]);
}

If done correctly you will see all the values of your array, if you want to get tricky try adding:

trace(i +":"+myArray[i]);

And this will show you the index in correspondence to its value;

So ready to take it up a notch? Ok, add the following code, don't worry I'll explain it all line by line but for now just enter it as is, its all text on purpose so you can copy and paste it, but it may help to retype it so you can understand what's going on.

myArray = new Array("Home", "Portfolio", "Resume", "About", "Contact");
var x = 100;
var y = 100;
for(var i = 0; i < myArray.length; i++) {
attachMovie("menu", "menu"+i, i+1);
_root["menu"+i].myText.text = myArray[i];
_root["menu"+i].myText.autoSize = "center";
_root["menu"+i]._x = x;
_root["menu"+i]._y = y;
y+=_root["menu"+i]._height;
}

After you finish test the movie, if everything went well you should have a five instances of the menu movieclip, and the text should have changed to reflect the entry of the array. Pretty cool right? Imagine what else you could do, say, pass the menu item information to use on a mouse action, or pass it a color value to use when you rollover the menu. For the sake of this exercise we're going to add one more action, so you can get a feel for what's going on, please append your script to look like this:

If you test the movie, and you probably already did, you'll see that the text in the text field will appear in the output window when you click the menu item, not an elaborate script, but it should give you some idea what is possible with this script. Now let's break it down:

myArray = new Array("Home", "Portfolio", "Resume", "About", "Contact"); This should be easy.

var x = 100; this variable will be used to determine the _x value of the menu option. var y = 100; this variable will be used to determine the _y value of the menu option, and because we are making a drop down menu this variable will be incremented the height of the menu. If you want to experiment you could increment the x the width of the menu instead, to have a top nav instead.

for(var i = 0; i < myArray.length; i++) {
attachMovie("menu", "menu"+i, i+1); ok here is the good
stuff. Remember before I mentioned duplicate movie? Well this is similar except
instead of duplicating a movieclip on the stage, it grabs a movieclip from
the library and puts it on the stage in the (0, 0) position.

_root["menu"+i].myText.text = myArray[i]; this is a textField value of the contents of the textField. We want the values of the arrays in this field so we are individually populating them after creating a new object or movieclip.

Something good to point out now, do you remember when I said arrays were closely tied to flash? Well here is an example, Flash sees the objects or movieclips on the stage as objects in an array. So similar to an array you can access the object not only by their index, but by their name, and thanks to probably THE most innovation of Flash, you can do that by specifying a dynamic variable. A dynamic variable is a variable that can be assigned or accessed by combining two values in this case "menu" + I, a literal translation of this would be "menu0" for the first value and "menu1" for the second, or second time through the loop.

Because of this way of dealing with objects or movieclips, it makes life easy, say when trying to remove any movieclip you created. You can simply test to see if the movieclip exists to continue the loop, like such:

for(var i = 0; _root["menu"+i] != null; i++) {

Here I am simple checking to see if "menu0", "menu1", "menu2", etc… exists and if it exists then execute commands.

_root["menu"+i].myText.autoSize = "center"; this is a bit advanced, so you'd better off looking it up in the help section, but basically it tells the box to shrink or expand based on how much text is in it. In this case it shrinks or expands based on a center alignment;

_root["menu"+i]._x = x; this tells the newly created mc to go to point x;
_root["menu"+i]._y = y; this tells the newly created mc to go to
point y;

_root["menu"+i].onRelease = function() { this may be a bit advanced too but this is the KEY to dynamic movieclip generation. Essentially what I am doing here is assigning a mouse release command via code. This would be the equivalent of putting on(Release) { in a button's script window, but instead this is a movieclip, that I want to act as a button. The beauty of this is I can remove the script simply by saying "delete menu1.onRelease;" and the menu option has been neutered. This is great if you want to have a menu item deactivated after a click, or any other mouse action.

trace(this.myText.text);
}
y+=_root["menu"+i]._height; this increments the y value by the height
of the current menu so the next one will appear underneath it;
}

So as I said, if you have done everything correctly you should have a menu of all the objects in the array.

So what next? Well let's take it up a notch and talk about associated arrays, as I said before these are arrays within arrays, so instead of a list of text separated by commas, this would be a list of lists separated by commas. What is the point of this you may ask? Well imagine you want to add other things to the menu, say for instance, you want to launch a website when you click on it.

There are two parts of the associated array, the identifier and the value, for instance:

myMenu = new Array(); or in this case myMenu = [:];
myMenu.push({name: "Star Wars"});

So what we have here is the beginning of our associated array, we have one entry with a "title" attribute that has a value of "Star Wars". To access this value you would do so via:

trace(myMenu[0].title); this would return "Star Wars".

You can also assign values in the same way:

myMenu[0].title = "Stargate Sg1";

Now we don't just want titles for the menus we also want urls to coincide with them, to this we will add a second value to the array:

myMenu[0].url = "http://www.starwars.com";

We now have an associative array with two attributes title and url, so let's get to the meat of it, copy the following script:

myMenu = new Array();
myMenu.push({title: "Star Wars", url: "http://www.starwars.com"});
myMenu.push({title: "Stargate", url: "http://www.stargatesg1.com"});
myMenu.push({title: "Star Trek", url: "http://www.startrek.com"});
myMenu.push({title: "Babylon 5", url: "http://www2.warnerbros.com/babylon5/"});
myMenu.push({title: "Andromeda", url: "http://www.andromedatv.com/"});
var x = 100;
var y = 100;
for(var i = 0; i < myMenu.length; i++) {
attachMovie("menu", "menu"+i, i+1);
_root["menu"+i].myText.text = myMenu[i].title;
_root["menu"+i].url = myMenu[i].url;
_root["menu"+i].myText.autoSize = "center";
_root["menu"+i]._x = x;
_root["menu"+i]._y = y;
_root["menu"+i].onRelease = function() {
getURL(this.url);
}
y+=_root["menu"+i]._height;
}

The big difference here is that we are accessing the title attribute for the textfield and we are setting a variable inside the movieclip to the url attribute. This will be used to launch the url. There are other ways, more complicated ways to do this, you could always access the array on mouse click, but that may be more confusing later on.

If everything went well you'll have a menu that will launch a series of websites on click. As you can see there is a foundation here to do even cooler and more useful things. Once you throw some loaded variables into the mix, via a text file or php &mySql the uses are unlimited.

There you go, my very first tutorial, hopefully it did its job, I may update it at some point based on feedback and well editing.

...but were afraid to ask...

2004-08-02T22:39:00.000-04:00

So I finally decided to get off my ass and decided to start writing about some of the stuff I have been doing in Flash. Mainly I decided to start this Blog, because when I was doing research, finding information that would answer my questions was extremely difficult. So the idea here is to pass along some of what I've learned and to present articles which will appear in a google search so people don't have to go through all of the trouble I did while I learned what it is I did.

Recently I started playing around with JSFL (JavaScript Flash), a scripting language similar to macros, which allows you to automate actions in Macromedia Flash MX 2004. It also allows you to extend the capabilities of Flash, creating commands, tools, behaviors, etc... JSFL is an incredible scripting language but almost impossible to figure out using online resources.

So first off I would recommend the Extending Macromedia Flash MX 2004: Complete Guide and Reference to JavaScript Flash book, you can even buy it through Amazon and help make me some money. *hint* *hint* also I have created a few extensions available for download, in them you can see examples of JSFL, the XML to UI, and flash interfaces. I plan to make the sources for all of these available, just be patient.

So feel free to download the following extensions, they were developed for Macromedia Flash MX 2004 and requires Macromedia Extension manager to use. There are four available:

JS-Convert To Symbol This extension adds functionality to Flash. Its an extended version of the Flash interface which creates symbols. I added the ability to add instance names, automatically create layers, and name those layers.

JS-Nudge This extension allows you to move selected items using inputed settings.

JS-Create Sized Rectangle This extension allows you to create rectangles using defined settings. You can define the width, height and the corner radius.

JS-Change Case This extension allows you to change the case of text.