Category Archives: AS3

Estée Lauder win

Update September 25 Turns out Estée won in the “Beauty and Cosmetics” category at the OMMA Awards a few days ago! This thing is a monster.

I’ve found out the site I worked on, Estée Lauder, has won;

two WebAward awards (Outstanding Website, Best Fashion Website)
one Internet Advertising Award (Outstanding Achievement In Internet Advertising)

It’s also an entry at Cannes! (Cosmetics, Beauty & Toiletries)

More after the jump;


Managing a team of five Flash developers and co-ordinating remotely with the New York office was a true test of my managerial abilities. The site went down to the wire, but in all, I was really pleased with the efforts of my team. Todd Fraser and Stephan Tanguay, especially.

Not to mention, it was my very first AS3 project. I’ve learned a ton since then in implementing AS3, but I cut my teeth with this project. My favourite self-built classes, TextFormatter and MainImporter were first coded for Estée Lauder. I owe Organic, a debt of thanks for being able to work on this project.

My focus, beyond management, was the Skin Care Diagnostic Tool


Honestly, what better way to start the day than to find out work you’ve done won awards?

In case I forget, FOTB, here I come!

Facts about Fees

I forgot to blog about the re-release of Fee & Processes on Bank of America. Now known as Facts about Fees.

This had several fun challenges. The flash was loaded and reloaded by the html wrapper every time the user changed sections, so I made extensive use of the SharedObject to store visits. This way, the user gets a different experience from the video on the first visit and subsequent visits. Quite fun.

There were some alterations to my base once I left Organic, but it’s still functioning and I’m quite pleased with the site on the whole. Take note of the Asked & Answered windows with their cross-linking and the control you have over the video, muting, volume, etc.

Plus, I incorporated pre-existing AS2 demos from the original site and brand new demos from the InfoCenter engine. This piece is rife with yummy hugh goodness.

FoTB 30 days away!

Things are really motoring. I’ve moved http://tattoocapture.com over to my friend John Breton’s server. John is a .NET guy and knows his junk, lemmetellya.

I have never done so much using webservices. Registration, login, updating, uploading, friending, messages, world locations, etc, etc. I have exclusively been using Carlo Alducente’s WebService class. It’s been invaluable and I don’t know where I’d be without it.

Soon enough I’ll be making use of Senocular’s Transform Tool.

Interested in being a beta-tester (or as I like to call it, Better Tester)? send me an email. I hope to be ready for full-scale testing in about a week. Many hands make light work, as they say. Many eyes make amazing work, I say.

The end goal for this is to be finished by Flash on the Beach where I am presenting my session The 10 Best Excuses to NOT do Amazing Work. I hope to see you there! I did say I would light a monkey on fire to compete with Quasimondo’s presentation happening at the same time as mine.

I’ve been updates about TattooCapture.com development on Twitter : tattoocapture

Keyboard Events

There was a comment by Muaad for help on how to capture Keyboard Events in AS 3.0. I figured instead of filling up a comment box I’d just go ahead and do a little post on it.

Keyboard Events and capturing them has been around for a long time. I’m going to assume Flash 4 days since I’d built a little animated typer in Flash 4 and can’t recall doing it Flash 3.

Like everything else in AS 3.0, you need to import the appropriate class(es);

For capturing Keyboard Events, you’ll need;

import flash.events.KeyboardEvent;
Add an eventListener to the stage for whatever you want to capture KEY_DOWN, KEY_UP, etc etc.
stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKey);

List of Key Codes on Adobe

Source files

There you go, Muaad.

Aspect Ratio

I’ve been working on a little something and wanted to maintain a 16:9 aspect ratio no matter what size the browser window was.

Essentially, the calculation is this;
multiplier = 16/9 = 1.7777778

In my test, I used the multiplier on the stageHeight and stageWidth to find out

private function maintainAspectRatio(event:Event):void
{
   width16x9 = stage.stageHeight*multiplier16x9
   height16x9 = stage.stageWidth/multiplier16x9
   if(width16x9 < stage.stageWidth){
      height16x9 = width16x9/multiplier16x9;
   }else{
      width16x9 = height16x9*multiplier16x9;
   }
}

So using an EventListener on the stage I can monitor the current stage size.

stage.addEventListener(Event.RESIZE, maintainAspectRatio);

And there you go.

Here’s the test.

Seasons' Greetings from wheniwas19!

While planning our little trip to see family for Christmas, I thought about a little something something to have for anyone who reads this blog.

Because the build is randomly generated, it takes a while to get to something coherent, so here’s a screenshot.

*Edit*
Thanks to a few phrases from my father-in-law, I had to crack this open to make some changes;
1. There’s an initial navigation to choose the animated build over just splashing the page randomly with specific numbers of iterations.
2. You can go back and start over.
3. I used setTint instead of Greensock’s TweenLite to save on processor cycle(s).

Thanks, John. I hate thinking I haven’t done enough. Mind you, there are a few more things I’d like to do but I might save that for another project.

If you do have time on your hands and want to see it in action, click here.

So, Merry Christmas and Happy New Years.

*Edit*
I noticed some weirdness with this thing. Like when it finished it’s loop, it would remove the last item(s) and not add them to the Bitmap Object. Looked into it and discovered I ignore the last set of items and just snapshot the ones before them. Fixed that.

Just to explain what’s going on under the hood;
Step 1. place an MC on the stage. In this case, MERRY *LOGO* CHRISTMAS. Change it’s visibility to false
Step 2. randomly locate a pixel on the stage and sample the color of that pixel.
Step 3. place a random MC on the stage at that location and tint it to the color of the pixel.
Step 4. after 10 iterations, draw those clips to a bitmap and remove them (the clips). Increment a second iteration counter.
Step 5. after 10 iteration on the second counter, draw the bitmaps to an overall bitmap and trash them (the bitmaps)
Step 6. rinse and repeat.

The Art of John Wall

Announcing the launch of The Art of John Wall.

Sometime in May, a friend of mine contacted me asking if I’d be willing to work on his site. “No rush,” he said.

Now unfortunately, I don’t do well with no timelines. So when he followed in June and July with “How’s it going, man?” I would respond with, “Ah, crap. Sorry.”

It’s not intentional, I just need a deadline to motivate me. So when he called in August and I prepared to apologize once again for not working on his site, he asked, “No, no, I was wondering if you might want to work on a second site?”

Usually when I’ve screwed the pooch for so long, a client would be inclined to fire me. Not this guy. To his credit, I think he got it. “This one has to be live by the end of November.”

Sweet mother of pearl. A deadline?!?

I was given a lot of creative license with this site, so I packed it full of things I’ve wanted to try in AS3 but couldn’t seem to talk Organic into trying;

Full-window, liquid layout.
A self-centering content box.
All content in one spot. Text, images, doesn’t matter. One GD spot.
Navigation that goes away when it isn’t needed. Fewer items on the screen, less clutter.

Yes, in essence it’s just another portfolio site. And yes, the concept of next previous buttons in an image isn’t new, but it’s a good idea, so why not do it?

I’m just glad to have been given the opportunity to build something for someone so talented.

Using External Libraries with Flash and Flex

Over the past couple of years, I’ve really been trying to embrace my inner OOP-ness. There’s been figuring things out slowly but surely and my latest wish was to externalize my libraries from my project(s).

I have a few classes here and there that it would be simpler if they were in one spot. Theoretically, if I make an update to one class it’s universally updated across the board. I might need to go into older projects and add an argument here or there if that project needs an update itself, but my classes would never need to move.

Deciding where I’d like these classes to reside is a stressful thing. Forever is a long time, after all. I’ve been using Flex for almost a year now and I don’t know why I was so reluctant to use it. Probably because I heard so many people saying “Oh, you HAVE to use Flex. You HAVE to.” I alway get all obstinate when someone tells me I must do something. I’m crotchety. I tried Flex, and I never looked back.

Anyway, here are the steps. I am sure they’re outlined efficiently elsewhere, but since it’s new to me, it must be new to someone else and I want to save them the effort of looking. As a caveat, I never say this is THE WAY to do things. This is MY WAY to do things.

step 1. create a new project in Flex. Do whatever you do, name it whatever you name it, put it wherever you put it. Don’t hit Finish yet.

step 2. hit Next. Notice the Source Path tab with a big window underneath it? To the right of the window is an Add Folder… button. Click Add Folder… and find your code folder. When you click OK, that library will be added to your project.

step 3. Hit Finish.

Your project will be set up by flex. You’ll see your project folder and inside it is [source path] yourLibrary. In my case, it’s com

That’s not all though. There is a little housecleaning in Flex I find I still need to do. Right-click on your project and choose Properties.

In ActionScript Compiler, deselect Copy non-embedded files to output folder and Generate HTML wrapper file BTW, this is a personal choice. I don’t like them, so I dump them. It’s up to you.

Finally, create a new Flash file and save it to your new src folder. Now we move to;

step 4. Open the Properties panel and under Document Class: enter in the main class. In my case, this is “Temporary_Project”.

step 5. Now, under Settings in the Properties panel, click the Formats tab and change the output location of your swf to ../bin/fileName.swf fileName being the name of your file.

step 6. This is the big final set of steps that made the difference between Flash finding my class files and not. Under Flash, choose Preferences….

step 7. In Categories, choose ActionScript. Click ActionScript 3.0 Settings….

step 8. Click the bullseye and locate your code folder. Once you choose it, the path to your folder will appear in your ClassPath: window.


And that’s it. Flex will auto-complete your paths as normal, the classes will be available to your project and Flash will know where your classes are. It’s a lot of screenshots, I know, but I spent 5 minutes trying to figure this out and was flummoxed at the very end when I neglected to add the Classpath to Flash.

Hope this helps.

Text Selection Discovery

I was wracking my brain on and off for about a week trying to get a field to select all the text in it when it achieves focus. This happens automatically when you tab to it, but when you click in it, it sets the caret wherever you’re clicked.

Initially I was convinced that FocusEvent.FOCUS_IN should do the trick. In fact, I’m still convinced it is, but it doesn’t work.

var tmp:TextField = new TextField();
tmp.addEventListener(FocusEvent.FOCUS_IN,focusText);
tmp.htmlText = “test text”;
tmp.autoSize = “left”;
tmp.selectable = true;
tmp.type = “input”;
tmp.border = true;
tmp.x = 50;
tmp.y = 50;
addChild(tmp);
function focusText(_fevt:FocusEvent):void{
trace(_fevt.target.text);
var tf:TextField = TextField(_fevt.target);
tf.setSelection(0,tf.length);
}

This doesn’t work. Such a shame.

Anyway, Todd Fraser over here at Organic gave me one of those, “wait, MouseEvent.CLICK didn’t work?” with one eyebrow raised. And although I had to admit I hadn’t even bothered with MouseEvent.CLICK because I assumed FocusEvent.FOCUS_IN should work. Don’t discount what you might consider “ol’ timey” ways of doing things.

var tmp:TextField = new TextField();
tmp.addEventListener(MouseEvent.CLICK,focusText);
tmp.htmlText = “test text”;
tmp.autoSize = “left”;
tmp.selectable = true;
tmp.type = “input”;
tmp.border = true;
tmp.x = 50;
tmp.y = 50;
addChild(tmp);
function focusText(_fevt:MouseEvent):void{
trace(_fevt.target.text);
var tf:TextField = TextField(_fevt.target);
tf.setSelection(0,tf.length);
}

Shoot, dawg.