Animate in Exile

Metamorphosis Game Demo: A Study in Bitmap Collision Detection

2009-03-23T21:48:00.001-07:00

It's been a while since I mentioned Bitmap Collision Detection and I thought a game demo was in order. As I mentioned earlier Bitmap Collision Detection works by taking a small sample area and seeing if it contains certain colors or if it's colors reach a set threshold. Below is a demo of a game I'm working on called Metamorphosis (inspired by Kafka's work of the same name). To play you simply make your way through the maze of dark objects without touching any of them.

So far this game runs very well. The only problem I've found with it is that if you move the mouse very quickly you are sometimes able to skip over dark sections. This is more due to sample rate rather than the type of the detection. Regardless of it's shortcomings, Bitmap Collision Detection has worked very well in my tests and it has the benefit of creating new levels with minimal code. In the Metamorphosis demo adding a new level is a simple matter of adding a reference to the movie clip containing the level art to an array which keeps track of the levels. The game plays through the level and once it is passed, moves on to the next level on the list without any additional collision detection code.

A couple small tips

2008-09-30T20:11:00.000-07:00

Recently I had a problem with tweens not completing their animations. I did some testing and found the reason that my tweens were stopping was that they were prematurely garbage collected. The way to fix this is to store a reference to them in a global variable (I used a dictionary). Since the dictionary is a global variable it is not garbage collected, there is always a reference to the tween so it is not garbage collected.

Another small problem I've encountered involves using movie clips as buttons. In order to get the hand icon to appear when the cursor mouses over the movie clip be sure to set the move clip's buttonMode=true.

Bitmap Collision Detection

2008-08-06T11:54:00.000-07:00

Since I got into bitmap data manipulation I've been coming up with some pretty strange ideas of what to do with it. Bitmap collision detection was something I thought up a couple months ago and was curious to see if it was possible.

The basic idea is that you are taking a snapshot of the screen on every frame (or whenever you want to detect collisions) and then using a very small sample area you check for colors or a range of colors. If you find the colors, then a collision occurs.

I made a basic demo of the idea for you to play with here: http://www.sizzlepopboom.com/toys/bitmap_collision_demo.html

Draw some lines by dragging the circles around. When you mouse over red, green, or blue, it will display a hit detected result. The sample area used for detection is a 12x12 pixel square centered on the mouse. This square is displayed in the demo at the top left.

This demo shows how you can detect not only collisions but colors of collisions. Taking the example of a sidescroller, you could set red to mean fire, blue to mean water, and use green for walls. When a character traveling through the sidescroller encounters one of these colors they could respond by burning up, drowning, or coming to rest after a jump or fall.

The best part about using bitmap collision detection in this sidescroller example is that to create a new level, you could just make new art and not do additional programming. Also as demonstrated in the demo, you can draw new collision areas during runtime.

In order to make the levels look nicer another trick could be used. First you create the final art for the level, then using that as guide to draw a piece of art the same size draw in the collision areas. Then when you play move the two pieces together but detect collision only on the hidden piece. This way you can use any colors you want for the final art and still have the ease of drawing in collision areas.

Bitmap collision detection also has the benefit being independent from the shape of the object being detected. Because there is no need to worry about bounding boxes, complex shapes (spiral) and simple shapes (rectangle) are detected using the same technique.

Using bitmap detection it would be possible to make a sidescroller template that would allow users to add their own custom artwork and make it playable without any coding on the user's part. Bitmap Detection so far hasn't been too processor intensive but should it prove to be a problem, things could be made more efficient by checking every other pixel in the 12x12 sample area.

Acessibility in AS3

2008-07-22T11:31:00.000-07:00

I've recently finished up a batch of Flash projects that were written using AS3 and needed to be 508 compliant (government-mandated accessibility). Since virtually everything I make at work must be accessible, I made a class to make adding accessibility much easier. Over the past couple of months I've been using it and refining it to handle all the problems I've come across. Now in hopes of encouraging accessibility and simplifying the process of learning how to do it, I'm making my accessibility class open source (GNUv3 license). You can download the accessibility class at:
http://code.google.com/p/accessible/

I've also included some great links are there for finding most anything you might need to know about accessibility. Documentation is also available on the wiki and as a .pdf in the download.

You can see my earlier post on Accessibility for some information on doing accessibility in As2.

If you want to get started in accessibility I highly recommend reading Bob Regan's whitepaper.
It covers AS2 but the issues with accessibility are pretty much the same. Then download my Accessible class for AS3 and look through the links on my wiki. Finally if you need to look up something specific try my Flash Developer Search, it only searches sites with Flash related content and is one of my favorite tools as a Flash Developer.

As far as the features I've given the Accessible class, my favorite is automatic assignment and organization of tabIndexes. It also will format text to be read properly by a screen reader and provides tools such as keyTrace which make looking up key codes very simple. I wrote this class to reduce the problem of spaghetti code that often is created by adding accessibility to existing projects. It does a good job of reducing the lines I need to write but always take time to thoroughly test your projects using a screen reader and the keyboard for navigation. Often it is when I turn of my monitor and try to play one of my games I realize how adding simple things like audio cues can make a game much more easy to play.
You can see some of my accessible projects at the MedlinePlus interactive world map and the games for the National Library of Medicine's exhibit "Against the Odds". Without a screen reader you will be able to navigate using a keyboard, and with an active screen reader you will hear audio cues and descriptions to help you play the games.

WeatherBug API Part 2: A lesson in Regular Expressions

2008-07-11T11:48:00.000-07:00

Since my last post I've been working on a WeatherBug widget. I had some extra time to work on it so I thought I'd do something cool and make a series of particle behaviors to illustrate different weather patterns. You can see the finished product here: http://www.sizzlepopboom.com/open_source/weatherBug_2.html

This widget animates the weather patterns, allows you to change location by entering in a zip code, links to the forecast page for that area, and in the event of a weather alert, a button will appear which when clicked will open a page for the weather alerts in that area. (I've been using the recent California fires to test the alert system.) This widget is also accessible to the vision and mobility impaired (still testing to ensure ease of use).

Once I created my particles and their behavior patterns, I needed some way to parse through the 176 documented types of weather conditions that were published by WeatherBug and create appropriate behavior for each condition.

I did this by using a series of regular expressions. I made a dictionary set of regular expressions and the results I wanted them to return if there was a positive match. Then I made a function that goes through each expression in a specific order to test the weather. When it tests positive it stops the testing. This is important because changing the order will change which weather pattern is chosen when certain words are searched for. For example if there is a thunderstorm, I want rain and lightning, while if there is a chance of storms I would want rain alone. To make sure thunderstorm is chosen before my rain behavior I put its regular expression before the one for rain. If no matches are found, I default to sunny weather.

Here is a snippet of code:

//tells what type of particles to make
var behavior:String;
//store the search expressions
var tests = new Dictionary();
tests["snowReg"] = /(snow|sleet|freez|frozen|flurr|snowstorm)/i;
tests["snowReg"].result = "snow";
tests["sunReg"] = /(sun|clear|fair)/i;
tests["sunReg"].result = "sunny";
tests["thunderReg"] = /(thunder|lightning)/i;
tests["thunderReg"].result = "thunder";
tests["rainReg"] = /(rain|storm|drizzle|hurricane)/i;
tests["rainReg"].result = "rain";
tests["cloudReg"] = /(cloud|smoke)/i;
tests["cloudReg"].result = "cloudy";
tests["windReg"]= /(wind)/i;
tests["windReg"].result = "windy";
tests["fogReg"] = /(fog)/i;
tests["fogReg"].result = "fog";
tests["hazyReg"] = /(haz)/i;
tests["hazyReg"].result = "hazy";

//store the order you want to test for weather
var testList = new Array("sunReg","thunderReg","rainReg","snowReg","cloudReg","hazyReg","windReg","fogReg");

for (var i = 0; i<testList.length; i++) {
if (tests[testList[i]].exec(condition)!=null) {
behavior = tests[testList[i]].result;
break;
//if no matches then use the default sunny behavior
} else {
behavior = "sunny";
}
}

Here is the list of documented weather conditions.

As I was working on this widget I noticed two things. First there are more weather patterns than what is on this list ("Light Thunderstorms" and "Smoke" are not on the list). Second when you are testing weather patterns, Flash may cache the information so that you don't seem to be getting accurate information. I noticed this when I was working on the widget and a thunderstorm began, but the widget said it was partially cloudy. Restarting Flash solved the problem. Remember this while developing; once the widget is online the weather info will not be cached.

Another thing I did to make the widget cooler was to do another testing of the weather condition to see the magnitude of the weather. I set up three different magnitudes: light, average, and heavy. Then I searched through the weather conditions for words that indicated the amount (heavy, chance, light, etc.). Using this information I changed the number of particles to use for each weather pattern and so the animations change to match both the weather and the amount of precipitation. For a few weather patterns I further manipulated the magnitude to ensure a better looking animation.
Here is the code for determining the magnitude:

//now test the amount of precipitation

var strength:String;
var amount:Dictionary = new Dictionary();
amount["mildReg"] = /(light|chance|scatter|partly)/i;
amount["mildReg"].result ="mild";
amount["midReg"] = /(mostly|increas)/i;
amount["midReg"].result = "average";
amount["heavyReg"] = /(heavy|hurricane|smoke)/i;
amount["heavyReg"].result = "heavy";
var magnitude:Array = new Array("mildReg","midReg","heavyReg");
for (var j = 0; j<magnitude.length; j++) {
if (amount[magnitude[j]].exec(condition)!=null) {
strength = amount[magnitude[j]].result;
break;
} else {
strength = "average";
}
}
//adjust the amount of particles to use

var numParticles:uint;
switch (strength) {
case "mild" :
numParticles = 50;
break;
case "average" :
numParticles = 100;
break;
case "heavy" :
numParticles = 300;
break;
default :
numParticles = 100;
}

A widget and my updated open source WeatherBug class are available here:
http://www.sizzlepopboom.com/open_source/weatherbug.zip

For more information on how to use regular expressions in flash check out Adobe's Regex page: at:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/RegExp.html

To learn more about writing regular expressions here is a good reference:
http://www.regular-expressions.info/reference.html

Finally here is an excerpt from an accessibility class I'm working on. This function prepares text for screen readers by stripping out any tags and capitalizing all lone "a"s and "i"s so screen readers will pronounce them correctly.

//remove any html tags from text so the tags will not be read by the screen reader

function stripTags(htmlText:String) {
var parseText = htmlText;
//Capitalize all a and i for screenreader correctness
parseText = parseText.replace(/\sa\s/," A ");
parseText = parseText.replace(/\si\s/," I ");
//strip tags
return parseText.replace(/<.*?>/g,"");

}

WeatherBug API: A lesson in XML

2008-06-11T11:08:00.000-07:00

Recently I was asked to make a WeatherBug widget for my company's local intranet. Making the widget was easy enough, I wrote a class that connects to WeatherBug and retrieves the current weather conditions. The tricky part was parsing the XML in Flash since it has many levels of nested nodes and some of those nodes use a namespace. Because it took me a while to work through parsing the XML I've decided to make my code open source.

The WeatherBug class and the .fla file I've made which demonstrates its use may be downloaded here: http://sizzlepopboom.com/open_source/weatherbug.zip
You can see the widget in action here:
http://sizzlepopboom.com/open_source/weatherbug.html

Don't forget to register to get you WeatherBugAPI Key and put it in the WeatherBug.as file otherwise it will not work.

Here's a bit of advice on traversing the XML. There are three main issues I encountered in parsing my XML: 1. How do you access nodes within a namespace?, 2. How do you access nodes with names that use restricted characters?, 3. What's an easy way to traverse the XML without having to know the entire heirarchy of a node?

Here are my answers:
1. To access nodes within a namespace make a namespace object for the XML you are using:
ex: var weatherNS:Namespace = new Namespace("http://www.aws.com/aws");

Then use the format:
namespace::nodeName
namespace::@attributeName
ex: var highTemp = weatherXML..weatherNS::["temp-high"];

Here's a tricky one to show you an attribute "hour-24" within the node "hour":
ex: var riseHour = weatherXML..weatherNS::sunrise..weatherNS::["hour"].@["hour-24"];

2. Use brackets when you are trying to access nodes whose names use reserved characters; in fact if you want you can use brackets for regular names to if you want things to look consistent.
ex: var monthlyRain = weatherXML..weatherNS::["rain-month"];
var link = weatherXML..image["link"]; //without a reserved character

3. Use .. to search through the entire XML document without knowing the exact heirarchy; this is similar to the // used in XPath
ex: var link = weatherXML..image["link"];
var monthlyRain = weatherXML..weatherNS::["rain-month"]; //within a namespace

-When you are using .. be sure to check your results, if there are multiple nodes with the same name within an XML document you might end up with the values of several nodes. When there are multiple nodes, be sure to reference the parent of your target node to ensure you get only its value as a result. See the link tag in the example above.

Hopefully this helps you solve any of the tricky problems you may have using WeatherBug's API. If you do have more questions about using XML in Flash look at the source code I've provided and check out these sites:
http://www.kirupa.com/developer/flashcs3/using_xml_as3_pg1.htm
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/XML.html

plus there is a whole chapter on XML in Colin Moock's excellent book: Essential Actionscript 3

Now that you know how to get WeatherBug information into Flash, I'd like to suggest some interesting ways you might be able to use the information.

I come from a background of making games so I've been intrigued with the idea of using real-world information in the form of XML feeds (like WeatherBug's) to control and influence elements within a game. The first thing I thought of was getting the current weather conditions and then replicating them within the world of the game. If you are playing on a rainy day, it will be raining in the game world. This becomes more interesting if you have characters, abilities, paths that are effected by the weather. A character could act more depressed if it's raining. Electric shock powers would be more powerful in very dry weather and more conductive in rainy weather. A path over a bridge could be flooded and inaccessible on rainy days.

Weather could also be used to drive a game's economy (especially in agrarian societies). Good weather means higher yield of crops and lower prices. This way you would have realistic variation in your economy without having to make it very intelligent.

Weather patterns can also be used to make cultural assumptions which can be useful in increasing the immersion of a player in the game. For example, if there has been a heavy snow children in a game might be staying at home instead of at school. The children would act happier being able to play all day and the adults would be more stressed from dealing with increased traffic. If the temperature has been exceptionally high characters in the game might go swimming more and as a consequence be tanner or sun-burnt. As you see, many assumptions can be made by analyzing weather patterns. Using these assumptions in a game environment will create much more realistic patterns of behavior with less complex AI. The use of weather information and the assumptions that can be made by analyzing it will greatly increase the sense of immersion in games as well as the overall cool factor of games seeming to know about the real world around it.

If you are interested in parsing weather conditions with WeatherBug's feed here's a link to all the possible weather descriptions:

http://weather.weatherbug.com/corporate/products/API/Cond_Icon_Desc.txt

There are about 178 possible descriptions so here is my suggestion for parsing the information to something more manageable:

Use indexOf to search a string for:
Cloud

Snow
Frozen
Flurry
Sleet

Rain
Storms
Thunder
Showers

Windy

Fog

Hazy

Clear

Searching for these words ought to give you a fair idea of what the weather is doing in most of the 178 different options. You can use sunny as the default weather.

Yahoo Pipes is Awesome!

2008-03-10T12:57:00.000-07:00

For anyone who hasn't tried Yahoo Pipes yet check it out. Pipes allows you to create custom RSS feeds. This is very cool for making complex mash-ups. For example, a friend of mine is looking for an audio position in New York City. I created a simple pipe that uses Google's Job Search and the keyword audio and out came a list of job postings that were mostly relevant. After you make a pipe you can save it to your Yahoo or Google homepage, or access it as an RSS feed, etc.

I heard about Yahoo Pipes from an installation artist who was searching news feeds for different words and then applying that data to a device that dripped paint on a canvas depending on the amount of data received. I was really impressed how easy it was for him to parse so much data down to a single feed.

After playing with Pipes, I think it may be a good solution to an experiment I've been wanting to try. The idea is to get all sorts of real-world data into Flash, use that data to make inferences based on culture and psychology and then have it influence an interactive pet's emotion engine. More simply, if I know it's been rainy and there are a lot of negative keywords in the news the pet could be sadder than usual. If it is close to a cultural, religious, federal holiday the pet could be happier. It is my hope that by creating an emotion engine fed by this data, and then creating a personality that reacts to this data in a certain way, much more realistic virtual characters and environments could be created. Best of all if I use Pipes, I can keep most of the complex parsing out of Flash and use a single feed to get all the information I need.

Making games accessible

2008-03-06T14:37:00.001-08:00

Recently I've been making some games I've been working on accessible to the mobility and vision impaired to satisfy 508 compliance. This usually involves setting up tabIndex attributes and adding tags that screen readers can pick up.

Here's a quick overview for adding accessibility using AS2

Adding tabIndex is easy; just write:
someObject.tabIndex = 3;
to change it simply reassign the tabIndex a new value

Adding alt tags for screenreaders requires a little bit more code;
someObject._accProps = new Object();
someObject._accProps.name = "Text for the screen reader";
Accessibility.updateProperties();

The last line updates the alt text; so if you want to change the alt text after setting it once:
someObject._accProps.name = "Next alt text";
Accessibility.updateProperties();

That's about it, not too hard but the key is to test it out. Tabbing is easy enough you can test it straight from Flash, just make sure the Control>>Disable Keyboard Shortcuts is turned off

Testing the alt tags is trickier. You'll need screenreading software. I use a demo version of Windows Eyes. JAWS has also been recommended to me.
The demo only lasts about 30 min every time you open it, so I have it in a virtual machine which I restart whenever I need without rebooting my computer.

So far I've found one bug with tabbing. If you have tabbed onto an object and then set its ._visible = false; the tabbing order (sometimes) will skip ahead of the expected next object. I did some testing and so far I've found that if you use unloadMovie instead of _visible there is no problem.

FYI if you remove an object that you are currently tabbed to, the expected result of removing it or making it's tabindex = undefined is that the next object will be the one with the lowest tabIndex (the first object in the tabbing list).

To remove tabbing from an object:
someObject.tabIndex = undefined;

To stop alt text from being read by a screen reader, either
someObject._accProps.name = "";
Accessibility.updateProperties();

or

someObject._accProps._silent = true;

Here are some techniques I use for controlling accessibility:

I make variables to act as switches for tabbing and screen reader accessibility.

The tabbing var I set to false, then if tab is pushed I switch it to true.
The screen reader var I set to false and then set to true using Accessibility.isActive();

I usually set the screen reader switch within a keypress handler or some other function that runs soon after the movie is loaded. I do this because if you check Accessibility.isActive(); first thing, you may get a false negative.

Here are some useful links for reading up on Flash accessibility:
AS2:
http://livedocs.adobe.com/flash/8/main/wwhelp/wwhimpl/common/html/wwhelp.htm?context=LiveDocs_Parts&file=00001895.html
(try the white paper below for a better list)

AS3:
http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/accessibility/AccessibilityProperties.html

For a good source of accessibility answers for Flash check out:
http://www.adobe.com/accessibility/

The white paper by Bob Regan is an excellent read for getting a better understanding of what accessibility means and how to make Flash accessible.

I ♥ caller

2008-01-10T09:28:00.000-08:00

Since I posted about the wonderfulness of the Delegate class for AS2 I've learned a little bit more useful info I'd like to pass on. As you may remember, the Delegate class is very useful for managing the scope of your code. The biggest problem I still ran into though was passing and accessing variables from my the custom handlers I made with the Delegate class. Thankfully , there is an easy way to pass variables. Simply add it as an attribute to the event handler.
E.G.

//import the Delegate class
import mx.utils.Delegate;

//add a variable to pass to your handler
something.onPress = Delegate.create(this, someHandler);
something.onPress.myVariable = "pass me";

//now to access that variable use caller
function someHandler(){
var passedVar= arguments.caller.myVariable;
trace(passedVar);
}

Voila! Now you can enjoy the satisfaction of passing variables to your custom handlers.

Chumby

2007-11-21T21:35:00.001-08:00

Recently I came upon a device called the Chumby. If you haven't heard of it, the Chumby a compact computer that displays information from the web via wireless. It has a touchscreen, 2 usb 2.0 ports, an accelerometer and a squeeze sensor. Best of all, it is designed to be easily hacked both for software and hardware. Anyone can make widgets for the Chumby using Flash Lite 3.0 as well as a variety of other languages (Chumby is Linux based). The screen is 320*240 and the recommended framerate is 12fps. Looking over Chumby.com's wiki, it looks like things are very well documented with example files to download and try out.

I think the idea of the Chumby is very cool and I'm excited to try it out for myself. At $179.95 it is a little pricey but, it is exactly what could integrate the internetin new ways to affect our daily lives (especially with web 2.0 technology like RSS). Imagine having a Chumby in your kitchen, you could get recipes off the intenet, watch online video, listen to internet radio, check the weather and traffic while you have breakfast, and read the daily news. I myself would be interested in a Skype widget so I could use it like a phone.

There's a bunch of cool widgets and features already available for the Chumby at the official website: www.chumby.com.
So check it out for yourself.

Making Flash games for the Wii

2007-11-12T20:43:00.001-08:00

Recently I was shopping at Circuit City and found something interesting. It was a program called my Wii Manager. This software that allows you to download, edit, and share your Mii characters; so far you might not be impressed. But what the software actually is, is much different. It includes a programmable input emulator with an archive of programs for using the Wiimote on the computer. So it allows you to relatively easily connect your Wiimote to your computer and receive and use its serial input to control your mouse. It runs without a UV sensor so all moving is done by tilting the Wiimote; the cool bit is that it can detect tilt, thrust, and some other movement as well as make the Wiimote vibrate and light up its LEDs.

The real reason why I bought the software was that it came with a Bluetooth dongle and the whole thing cost about $20. When I was searching for a single Bluetooth dongle, the prices were usually closer to $30. So with this software you not only get the dongle but the emulator with program archive and some documentation. For my money, this is a pretty good deal. The main thing that had been keeping me from playing with making Flash games for the Wii, was that it was too much work to figure out how to set everything up and get it working reliably before I could get to making games. So if you're curious about making Flash games for the Wii, check out my Wii Manager.

After setting everything up (took about half an hour of reading and fiddling about) I played with a couple of old Flash toys I made. The results were pretty encouraging. A while ago I started working on a gesture class that maps various types of mouse movement to specific gestures. The goal was to add a greater sense of immersion to gameplay through more familiar and intuitive interactions. When I tried playing with the old toys I made using this class, they mapped wonderfully to the Wiimote and the interaction felt nice. So I've decided to slowly make a bunch of minigames using the class which later on I'll put together in one larger game. This will take a while though since I'm still in the middle of redesigning my website. Hopefully I'll be able to squeeze in a minigame or two along the way. Once I've finished a couple of minigames, I'll post the code and the games at my website.

The Delegate Class: Brother where have you been?

2007-10-25T10:46:00.000-07:00

Eureka! I've had a specific problem when writing AS2 classes for some while now. Namely, whenever I use code to make an interactive element (Let's say a movie clip that bounces away when you click on it), I have to nest the event handler's method. The problem is that this changes the scope and so the handler method can't access my classes base methods. The way I used to fix this was by making the methods I want to access Static, and accessible by anything in my class. The problem with this is that if I make a method static I have to make its variables static, and that can create a domino effect of making things static just to solve the original problem. This is pretty wordy so I'll post code that is easier to follow. Here's the old way I did things:

class SomeClass {
//constructor
public function SomeClass(someMC) {
//initialize object
initialize(someMC);
}
//this is static so the onPress method can access it
private static function doSomething() {
trace("Ok, I'm doing something");
}
private function initialize(someMC) {
trace(someMC);
//define what it needs to do when it loads
someMC.onPress = function(){
doSomething();
}
}
}

This is a very simple version of the problem. In reality the method my handler calls would probably be called by other methods and use variables that all would need to be made static. I knew this was not a good way to do things but until now I didn't know what else I could do.

Thanks to the Delegate class though, I'm able to specify the scope and therefore access the methods at my class' base level. Here's the same code as above but made with the delegate class:

//import the Delegate class
import mx.utils.Delegate;
class SomeClass{
//constructor
public function SomeClass(someMC) {
//initialize object
initialize(someMC);
}
private function pressHandler() {
trace("You pressed it.");
}
private function initialize(someMC) {
//define what it needs to do when it loads
someMC.onPress = Delegate.create(this, pressHandler);
}
}

Now there is no need for static so things are much easier when I need to tweak things later on.
While I was researching how to solve this problem I found other possible solutions but this was the one I understood best and was able to easily implement.

You can read all about the Delegate Class here: http://www.actionscript.org/resources/articles/205/1/The-Delegate-Class/Page1.html

This is all great to know but this problem has been resolved in Actionscript 3 thanks to its addEventListener method. Still if you're using on Flash Lite or like me your work doesn't want you to use AS3 until the Flash PLayer 9 adoption rate is higher you may find this very useful.

Good luck using the Delegate Class, and if you have other solutions I'd love to see what you have come up with.

Tip for Text in Flash

2007-10-23T11:51:00.000-07:00

I was working my way through the hefty, 900+ page book Essential Actionscript 3.0 with the hopes of finishing it by the month's end when I learned something new. It has happened to me before that I wanted to use some dynamic text as part of something that rotated, skewed, or changed transparency. This never seemed to work so I always resorted to breaking the letters apart into graphics and abandoning the idea of dynamic text. Today, as I was reading page 705, I learned that dynamic text can be used in all these wonderful effects as long as you embed it. I did some tests and it is indeed true. Just make sure that you embedded all the symbols necessary, otherwise your text might be missing things when you render the swf.

You can see this in action in the new widget I've made for this blog, my Flickr Image viewer. This widget gets the 20 most recent pictures I've uploaded to my Flickr account and makes a cross-fading slide show with captions. As you can see I have embedded the font I use so the text as well as the images fade in and out. I made this widget with the help of the SWX technology created by Aral Balkan which allows Flash to easily access Flickr API (and others) easily without writing any server-side code.

Back in a strange new place

2007-10-17T07:00:00.000-07:00

It's been a while but I've decided to keep this blog going. I've started working at a new job since my last post and moved to a new city. I'm very happy to say that my new job sent me to FlashForward 2007 in Boston, and I had a great time! There was so much there that inspired me that once I got home I felt overstimulated. There was too much for one post, so I'll be spreading things out over several posts.

Let me tell you about animation. The best things I learned for animation probably came from Chris Georgenes' talk. He went over some animation tricks and showed us some nice animation clips. I found the tips on lipsynching especially useful. Here's the gist:

1. Make a mouth graphic symbol (it must be a graphic).
2. In the symbol draw all the mouth shapes you want to use. You can use onion skinning to help you position the mouths.
3. Go back to the main timeline and add a keyframe, click on the mouth symbol, make sure single frame swapping is selected, and then enter the number of the frame with the mouth shape you want.
4. Continue as desired and that's it. You've learned single frame swapping.

You can watch a video tutorial of this as well as several other useful Flash animation tutorials by Hayk Manukyan at his blog: http://moolt.blogspot.com/2007_09_01_archive.html

I like this feature but it can get confusing remembering the frame numbers if you have many shapes. Once things ease up at work I think I will make a Flash extension for lipsynching that uses this feature but adds visuals so there will be no need to memorize the shapes.

Some pictures I took

2007-05-30T10:20:00.001-07:00

I just wanted to share some nice pictures I took. The one below is a pregnant doe that I managed to get close to.

This next picture is of of a moth that was resting on the window of my office.

The area where I live has many redwood trees. In case you don't know, redwood trees tend to grow in circles around a "father tree". This is a picture of the remains of the "grandfather tree" from which all the redwoods in my area were grown. The trunk is about 21 feet around and is hollow because it was burned by fire several years ago, possibly because it was struck by lightning.

The website went live

2007-05-26T10:42:00.000-07:00

It's been a while since my last post so let me catch up on what I've been up to. The biggest thing that happened was that the website I was working on finally went live. I'm glad it did because now I can get back to animating. I'm sort of glad I got to work on the website because I had an excuse to learn PHP and SQL. Now I'm planning on redoing my portfolio site while everything is fresh in my mind. Besides learning server-side scripting, I also learned AJAX (Asynchronous Javascript and XML). If you're not familiar with it, AJAX lets you call functions on your server after a page is loaded, and then update your page without reloading it. I used AJAX to make a live search feature which gives you suggestions for searching while you are typing. My live search is mostly based on Google Suggest.

Since my last post I have also done a couple things to entertain myself. A couple weeks ago I decided that I needed a hat and since I know how to crochet, I decided to make one myself. But, instead of buying a crochet hook, I thought it might be interesting to make one myself. So I went into the woods and found a thick branch and started carving it with a box-cutter knife. It took two evenings and two attempts but, I created a hook. After I sanded it a bit with a nail file I found it was reasonably smooth and worked like a charm. I made a hat with some wool I got from a nearby town. After it was done I decided it looked more like a woman's hat and I gave it to a friend.

Another day I decided to make a Tomato Soup Cake to have a bit of fun. It was a real scavenger hunt when I tried to find all the ingredients I needed. Sugar was especially hard to come by, but I managed to get everything I needed. It was delicious ( tastes like a spice cake).

In need of more excitement

2007-05-03T11:22:00.000-07:00

It looks like our website if finally about to go live. I'm glad because I would rather start working on the animation again. I believe I finally came up with the best way to make all the character keys for the animation. I create layers for the base colors of each key, and then I put them into folders and add layers to my heart's content. The biggest problem making the rabbit was that I didn't label all the layers I made (and I make a good deal of them). So now, once I'm done, I just collapse the contents of each folder and viola! I've got a leg, or ear, etc. ready to be rigged for animation. Another problem I am facing in animating is rigging. I'm very happy to be using Anime Studio Pro, which is the best 2D animation software I've ever used, but using bones to get raster images to deform perfectly is tricky. I may end up cutting the legs up a little so they don't looked so scrunched up when they deform.

I'm always happy to be finished after work but lately, I think I need to find something new to do. I have a book by F. Scott Fitzgerald to read but, I would rather read something else. It may just be time to take a weekend trip to the city to get a better book and buy some music. I need music becuase I didn't have a chance to transfer my collection to my laptop before I left. I'm just glad there is internet radio, though it sounds like there might not be for much longer.

Finally here's a bit of excitement: Yesterday morning I found a scorpion in my yert. Check it out! It was sitting right inside my door, in fact the wood you see in the picture is part of my doorframe. I got it out by picking it up with a stick. It was pretty angry though and started attacking the stick. Luckily, this type of scorpion isn't very poisonous, but I still don't want living in my house.

Here's another picture I took near my house. Though it's less exciting. These two deer live in the woods next to my house so I've seen them a couple times. I think the female is pregnant.

Sites and Sights

2007-04-24T23:32:00.000-07:00

I'm still working a lot implementing new content on a website. It's not bad, but I realize I like making interactive content much more than web pages. One cool thing I stumbled upon was Google Co-op and Statistics. Google Co-op is a service that let's you and up to 99 of your closest friends create a search engine customized to fit your needs. I've been using it to make a search engine that return results only from our affiliated sites. It works pretty well, though if you add content to your site you need to get Google to update their database before it will show up in your engine. One thing I had to do was to make a hack so the results would show up integrated properly in our web page. Since we use PHP to generate or webpages, it was a little trick. The hack was to send the results to a content page and then call that page from a .php page that was identical to our index.php except the default content loaded was the page containing the search results. Kind of tricky but it looks like it works.

On the less technical side, I took a long walk to the beach on the weekend. The walk takes about an hour and a half. Going there is fine but, coming back is harder because it's all uphill. The beach was breathtaking! It looks like something out of a movie. Other people must think that too because when I went there, everyone on the beach had expensive looking cameras. I thought perhaps it was a photography club out on a picture taking excursion. When I got to the beach my legs were tired and since the water is really cold I decided to wade in it. I learned a while ago on a trip that if you are hiking and then wade in really cold water, it stimulates your circulation and makes your aching legs feel much better. It worked pretty well though I think other people on the beach thought I was crazy to get in the water. I walked around the beach for a while taking pictures, then I climbed up the cliff to take some more. I still wasn't wearing shoes when I climbed the cliff and when I got to the top I found out there were a lot of thorny shrubs. There was a path though, so I stuck to it and tried to minimize my stepping on spiny plants. The view from the cliff was spectacular. When I walked down the cliff I realized there was a path to go up it, and I didn't need to climb like I did coming up. There's always a lot of big bits of seaweed on the beach in this area. I remember coming here years ago and enjoying the sound of hitting the hollow tube seaweed against rocks. The beach was fun and I found two seashells which is a feat considering most west coast beaches I go to don't have any seashells.

The walk back was slow and by the time I got home I had eaten most of my king sized bag of trail mix. The next day I was also surprised that I was not as sore as I thought I would be.

PHP keeps animation at bay

2007-04-18T23:49:00.000-07:00

I've taken a hiatus from working on the animation for a while. It looks like I would be more useful working on updating webpages here. I don't mind because I was thinking I needed a break from painting art all day; plus to make it worth my while, I decided I would trade work with the web designer. She's working on the art while I work my way through pages of PHP.
I'm happy because she's doing a good job, I just hope I can get all these pages under control.

Yesterday I realized an inconvenience of living in a yert. I was taking out my contact lenses with the case on my knee and it slipped off. Normally that wouldn't be a big deal but, the lens fell through the crack between the wall and the floor and landed outside on the dirt ground. It's pretty cold here at night so I had to put on warm clothes to go out and get it and then, to wash it off I had to walk through the woods to the bathroom. I'm starting to have more and more respect for indoor plumbing.

Wild Animals

2007-04-13T22:32:00.000-07:00

I spent all day perfecting the art for the rabbit. I think I've figured out the best way to make art so all of the 5 or so other characters should go more smoothly. It's hard to judge whether making art digitally is going to be better than scanning in painted art. So far it doesn't seem any quicker, but I am very happy with the quality of the art. After painting all day I was pretty tired, so after work I went across the street to the kitchen to get some dinner. But on the way there I ran into a herd of wild pigs. I think there were about 10 of them. They were running around and making a lot of noise. Their footsteps almost sounded like the waves on a beach. Since I am used to the woods most wild animals don't bother me, but pigs are the exception. I think it's because when I was younger I used to play a game where you had to get past some wild boars by spearing them on horseback. If you lost the boar would knock you off your horse and kill you. I don't know too much about how dangerous a wild pig is, but they do have tusks and I'm keeping away from them.
As I was walking back home after dinner, I was still a little paranoid about running into the herd of pigs. So when I suddenly heard a scrambling noise I jumped a little bit. The noise was the fox I saw before. This time he was inside of a parked pickup truck. The owners had left their window open about 6 inches and the fox squeezed through and was looking around the inside of the cab. He must have gotten freaked out at being in the cab because he jumped out in a hurry. Then he stood there and looked at me for a while. I told him that he looked busy and he trotted off.

Living in a yert

2007-04-12T22:49:00.000-07:00

Now that I have been settled in enough to realize I am neglecting my blog let me tell you what it's like to live here. I live in a yert, that is a Mongolian tent home. Here's a picture of it. It's actually pretty comfortable besides being chilly. There are a number of bugs that live in it with me but, I don't really get bitten so it doesn't bother me. In fact living with some bugs around can be kind of cool if the bugs are moths and they look pretty. Check out this one I found on a window at my workplace.

The main thing I miss is indoor plumbing. The first couple of days after I arrived I had food poisoning and there's nothing like vomiting in the woods a couple of times to make you homesick. After I recovered it was much more pleasant. Another strange thing about living in the woods is the giant slugs that you sometimes find. I remember the first time I saw one I thought it was some fresh animal dung but then it started to move. When you need to go to the bathroom in the middle of the night you have to be careful not to step on them. Just to give you an idea of how big these slugs really are I made this handy picture of one next to a new number 2 pencil. In fact I think this slug was longer than the pencil, but when you get near them their heads suck up into their bodies so they look fatter and smaller.

One thing I love about living in it is the sounds I hear at night. Since I live in a forest full of wildlife there is a full chorus of night sounds to listen to while I lay in bed. Now you may think you know what a forest sounds like but it's nothing compared to what it sounds like late at night. All sorts of night creatures wake up that you have never heard in the daytime. It reminds me of the sounds you would hear in an old Disney cartoon if the characters went into a jungle.

I've begun working on my animation at last. I am animating a story called "The Rabbit Who Overcame Fear", it's like Chicken Little, with a rabbit and a falling mango that scares him. It's a Jataka Tale, which is one from a collection of stories of the past lives of the Buddha. As I was researching the story I was surprised to find that many of the Jataka Tales are the basis for modern children's stories. It seems that after the Jataka Tales were created, they spread to Persia and then through Alexander the Great to Europe. It's pretty funny to see the changes that each culture made to the stories. I read several versions of the rabbit story and in each one the falling mango was replaced with a new type of fruit. I think if I were retelling my version of the story I'd make the fruit a Durian. With all those spikes I bet they could do some real damage. My old roommate used to call them the king of the fruit.

Here's an in-process picture of the rabbit I am making for the animation. I think the animation will look pretty nice, though I wonder how long it will take to make the art. After all, this story has as many characters a Chicken Little, they just don't have clever names like Turkey Lurkey and Goosey Loosey.

Go west my man.

2007-04-09T22:16:00.000-07:00

Hey I'm Luftbuefel, LB for short and I'm an animator and programmer that decided to take a break from stresses of everyday life to go do some volunteer work in the middle of nowhere in California.

So I've lived in California before so it's no big surprise to me but I still find the differences to be very noticable. For instance, on the way to where I was going from the airport I stopped by the supermarket to get some soap and shampoo. Then I realized that the store sold only organic products. I have nothing against organic stuff, I just don't care too much about it either way, and with my current lack of income I don't want to pay more for organic. Either way, I got some shampoo, conditioner, soap, and since they didn't have any rags I got a body scrubber ball. That's all I bought and when I got to the cashier she asked me if I was doing some deep cleansing. Not really knowing what else to say, I told her I was and she smiled. I'm not really sure that I had a reason to be, but I was embarassed.

The great thing about the trip up to where I'm staying was that we stopped again at another store which was very Californian but in a different way. The store had a wooden porch on it and looked a lot like a building you would see in an old western. Best of all it has two signs: one advertising rabbit meat at $5.99 a pound, and another for a sale on buffalo burgers.

Also pretty close to this store was Bodega Bay. This was where Alfred Hitchcock filmed his excellent film "The Birds". There weren't too many birds around when I was there, but where I'm living there are some pretty huge ravens that look like they could take on a man.

Anyway, where I'm living now is ridiculously beautiful, there are wild animals everywhere and they're not to used to humans. So it is pretty easy to get close to them to take good pictures. Here are some deer I saw as I was walking home from work. A couple of days ago I counted all the deer I could see in the field I was in and I got all the way to 15. Besides all the deer, so far I've seen several flocks of wild turkey, a family of quail, lots of ravens, a tree frog, some monster slugs, and a red fox carrying something that looked like a white pipe in his mouth.