GraphNick Design

Web Design of the Year 2009

2010-04-23T14:21:00.003-07:00

O.C. Tanner had its annual Designing in the Trenches year-end competition a little while back. The winner for the Print category for the Design of the Year was Dave Clark for some Amtrak collateral pieces. The competition was tough for the Non-Print/Web category. Some designers had multiple pieces submitted, while I only had one design that was as finalist. When they called the winner they announced the designer with the piece that was designed. When the piece was unveiled, I knew right away they made a mistake. Somehow they announced the right designer but wrong developer. Mike Overton was the designer, who had submitted another piece with Chase Maxfield, another Flash Developer, but that was not the piece that was unveiled. The winning design was for Roche, the one I did the development on with Mike as the Designer.

I was at a loss what I should do. Chase had already made his way to the front and was being handed the trophy. I leaned over to those at my table and said, "That is the one I did!" I then decided to walk up to the front to tell our VP that he had made a mistake. It was a little embarrasing for both of us. I had to take the trophy away from Chase, a trophy that did have my name already engraved on it.

In addition to receiving the trophy and gaining the Web Design of the Year title (for the second year in a row now), I also received a gift of my choosing. I picked a nice Dyson vacuum. It was a nice honor to be given this opportunity to win two years in a row. Is everyone tired of me winning yet?

Odd TypeErrors When Loading and Parsing XML in AS3

2010-01-07T15:21:00.003-07:00

Recently I was running into this issue with three TypeErrors when loading an XML file. The following errors were:

TypeError: Error #1088: The markup in the document following the root element must be well-formed.
TypeError: Error #1089: Assignment to lists with more than one item is not supported.
TypeError: Error #1090: XML parser failure: element is malformed.

The errors that were getting thrown were not consistent and made no sense as the XML file was, in fact, well formed.I did a bit of research and found some interesting things out on the erros. The most common errors were #1088 and #1090, but each time the Flash was published, it hit a little differently. At times it would even parse correctly and may data could be used as desired.

At first I thought it was occuring upon the load of my XML file. I attempted to use xmlLoader.addEventListener(ErrorEvent.ERROR, xmlError); However, the error was never being traced within the Loader Error handler. I then did further tests to see when at which point it was actually happening. It was definitely not an IO_Error that was occuring either, for the XML file was being seen and always loaded. The error turned out to be not on the load of the XML, but after it was fully loaded.

So, on the xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded), I found that something was happening when putting the data into the XML Object:

function xmlLoaded(evt:Event):void {

trace(evt.target.data) // data shows up

programXML = XML(evt.target.data);

// error gets thrown here

}

My Solution for Bad Parsing

I thought there was an Asynchronous way to add an event listener to an XML object llike you can with a Loader object to listen for an error, but there is not. It must be done in a synchronous way. In other words you cannot put a listener on an XML Object to listen for an Error Event. It must be done as a synchronous catch event:

function xmlLoaded(evt:Event):void {

try{

programXML = XML(evt.target.data);

setData(programXML);

} catch (error:TypeError){

xmlLoader.load(xmlURL);

//trace("A TypeError has occurred : \r\t" + error);

}

Since it made no sense to me why it was so buggy I decided to reload the XML file and try to parse it into the XML Object until there was no errors. Granted, this could end up being an infinite loop if the XML at some point ended up being malformed. Therefore, it would be a good idea to put a timout or counter on the loop to stop trying to reload the XML file and do something else. I'm not sure this is best practice, but it was a way around this crazy error that would sometimes hit and sometimes run just fine.

Conclusion

Strange things happen when trying to parse a simple XML file. It is a good idea to use a catch in your code, especially when the code must be run in a syncrynous order. When you have a bug, the error is not always where you think it is coming from.

Designing in the Trenches Web Design Winners

2009-11-01T21:36:00.006-07:00

Recently we had the quarterly "Designing in the Trenches" competition at O.C. Tanner. The competition was as always tough as we have many great designers at Tanner's. Through a joint effort with Mike Overton as the key designer and myself as the Flash Animator, we pulled off a win in the non-print category of the competition.

The Design

The design was for the global pharmaceutical company F. Hoffmann-La Roche (aka Roche). It includes interactive rollover to engage the user with different typography as they explore the various programs within the navigation. It was a solution that wouldn't have been pulled off as well without the strong typography the rollover effects created.

View Site

All in all, everything came together well as Mike and I collaborated on this project. Thank you all who participated in this quarter's tough competition. Everyone's work was outstanding.

Actionscript 3: reference to stage is null

2009-10-23T12:58:00.006-07:00

While writing a custom Class in Actionscript 3 today I came across an issue that took me a little bit to figure out where the compile error was coming from. I was getting the wonderful error:

TypeError: Error #1009: Cannot access a property or method of a null object reference.

After a bit of troubleshooting I discovered that a reference to the stage in my Class was returning null. I did some research and found that the stage is really a DisplayObject's reference to the stage DisplayObject.stage. However, if that DisplayObject is not yet added to the stage, the stage of the DisplayObject is not instantiated yet and returns a null value. In my case, the class was a Sprite I was adding to the stage at runtime.

I then discovered that my Class shouldn't get initialized until it was fully added to the stage since I had calls to the the stage class such as stage listeners and stage properties. I then determined that it was essential to add an event listener for my Sprite to be added to the stage:

...

public function myClass()
{

addEventListener(Event.ADDED_TO_STAGE, init);

}

...

Once the Object is added to the stage, you can initialize the rest of the Class. This was an easy fix to the issue that I hope others find useful.

Flash AS3 Garbage Collection

2009-08-24T13:19:00.014-07:00

New developers and/or Flash designers make the mistake of forgetting to clear an object when it is finished being used so that it is available for garbage collection. Many noobs simply don't understand the importance and/or rules behind the Flash Player Garbage Collector. Some think that if you simply remove a child object from the stage, or simply made an object null, all is done and memory is automatically freed up. This is a misnomer and if you continually add large objects at runtime, especially with bitmaps and video, you quickly see a performance hit to the processor. This slowness is evident more quickly on slower computers, like the one I have at work, than on newer/faster computers. Sometimes it is a good thing to test on slower computers to help indicate if your application is overly obtuse due to poor garbage collection.

I have made many of common errors of non-garbage collection myself and have found it imperative to clear any (even weak) reference to an object. I found that it is easiest to do this early on in development while you are adding the reference to think of the way it will be removed. For example, when you add and event listener, know when that event listener is finished and remove that event listener:

var image:Loader = new Loader();

var urlReq:URLRequest = new URLRequest("image.jpg");

image.load(urlReq)

image.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);

function completeHandler(event:Event){

//once image is loaded you can stop listening for it to load

event.target.removeEventListener(Event.COMPLETE, completeHandler);

}

I have found that it is best to set up a class for an image loader as it is something that gets used over and over. One thing for certain to use within your ImageLoader class is an unload listener that will remove all soft references to the object so that it will be available for garbage collection.

...

function unLoadHandler(event:Event) {

// remove any listener you have created if you want it to be disposed of durring GC.

event.target.removeEventListener(Event.UNLOAD, completeHandler);

// you should have set up a error handler listener. Be sure to remove it as well

event.target.removeEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);

}

This way when you say image.unload(), your Loader Object will remove all listeners to that object so that it can be disposed of automatically when the Garbage Collector hits. Personally I think this should be automatic by default and remove any and all references to the object, but it is not and it is up to the programmer to set it up that way.

Once you make a conscious effort to be aware of the way the garbage collector works, you will more readily be able to remove all references to the object. If you add the code to remove the listener while it is on your mind to add the listener, you can keep your application cleaner and leaner for a better end-user experience.

Johnson & Johnson Design

2009-08-19T21:04:00.009-07:00

Lately I have been doing some Flash development for one of our larger clients at OC Tanner, Johnson & Johnson. It is great to do work for such big clients, but with it comes great responsibility. If I fail to deliver good design with a solid implementation of that design, it affects so many parts of our business. I am up for the challenge as I am used to doing such important work for the big guns. I find I deliver more polished work when under greater pressure.

The current J&J design, one of which I am not yet at liberty to disclose, includes some intense Flash and Actionscript 3 programming. It is getting pretty slick the way it pulls dynamic content through XML to engage the user. It will help the user considerably from the current program. I have been learning so many things with garbage collection, classes, keeping my code clean, and such. It is easy to slip into sloppy practices, but with some discipline I keep things somewhat organized. I know there are many AS3 best practices that I may not be following, but I think I am doing pretty good for being completely self-taught.

I hope to do a blog on some of the things I have learned in AS3 this past little while. Some things include:

Garbage Collection
Parent Scope (i.e. MovieClip(parent))
Class Organization
Event Listeners
Actionscript vs. Javascript

...to name a few.

eLance Work

2009-07-28T21:38:00.004-07:00

I have been attempting to get a little freelance work via eLance. I am not yet convinced that it is worth my time it takes to bid for jobs that I most likely will get outbid by. There are too many people out there worldwide that are willing to work for pennies that I simply cannot beat their low bids. I understand that people want inexpensive work, but at what cost are they agreeing to have work done for them that is shoddy with no guarantee of quality delivery? I cannot work for so little people out there are bidding on. It is why the reported overall revenue generated through eLance is lower than one would think. I think I will stick to bettering my portfolio and going after real prospects for my contract work.

Timer Class in Actionscript 3.0

2009-04-03T09:43:00.009-07:00

I have been playing with the Timer Class in Actionscript 3.0. It replaces setInterval from AS2. It seems to work about the same. It is a bit more robust; you quite a bit more control over it. Here is a sample of code I have been testing:

_myTimer = new Timer(_delay, _repeatCount);

// _repeatCount is optional, if no value then it do the Timer forever

_myTimer.addEventListener(TimerEvent.TIMER, timerHandler);

_myTimer.addEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);

_myTimer.start();

private function timerHandler(e:TimerEvent):void{

lastIndex=curIndex;

trace(lastIndex: "+lastIndex);

curIndex+=1;

trace("curIndex: "+curIndex);

}

private function completeHandler(e:TimerEvent):void {

//complete after _repeatCount is complete;

//kill listeners for garbage collection

_myTimer.removeEventListener(TimerEvent.TIMER, timerHandler);

_myTimer.removeEventListener(TimerEvent.TIMER_COMPLETE, completeHandler);

// null out _myTimer only if you want to

// completely remove the timer

_myTimer = null

}

Now, the timer works fine by itself, but when you add interaction with it such as a button, you need to use a little care on how you stop or kill the timer so it doesn't interfere with the button interaction. I found that _myTimer.stop()works well if you want to eventually restart the Timer. I have further testing to do where if I completely remove the Timer listener and set _myTimer=null (for garbage collection), I hit errors that do not allow for me to allow for the same interaction any longer. I'm sure it is a bug of my own creation, but as I am still figuring this new syntax out, I will be doing numerous experiments to perfect this little issue.

2008 Designs of the Year

2009-02-21T14:46:00.032-07:00

Designing in the Trenches

During the year since April, 2008, we had mini competitions each month between the designers; this competition became know as "Designing in the Trenches." For each competition there was a print and a web category and were judged within our own group. The competitions were a great way to put forth our best work, better ourselves, and better the company.

The underlying purpose of these competitions is three-fold:

To appreciate, motivate and encourage excellence in design.
To create an atmosphere of continuous improvement in order to deliver a superior product to customers.
To inspire confidence and develop strong working relationships with our customers in which we can enhance their branding, culture and create a spirit of excellence.

At the end of the year the designers voted on favorites from previous competitions throughout the year. Five finalists from a print category and five finalists from a web category were submitted. The finalist works went to outside groups within and and outside the company; they consisted of selected managers, sales offices, other non-designer groups, and outside design consultants. The results were kept quite secret until the final reveal.

And the 2008 Design Winners Are...

On Friday, February 13, we had a luncheon at O.C. Tanner to discover the winners for the design competition of the year. Many of the top leaders of the company attended. I hadn't realized this event was going to be such an important event. Never before had O.C. Tanner done something like this for the designer group. Many leaders spoke to us expressing their appreciation for design and the effective role it plays in the sales field. "Design is truly what differentiates O.C. Tanner from the competition," they said.

Mike Overton, a designer with O.C. Tanner for 15 years, won the design for print category. He always does great work and it came as no surprise to myself. The surprising thing came when they reveald the winner of the web category. The competition was tight and the results could have gone in any direction; all designs were top notch. When they called my name I was so in shock I didn't really know what to think. I floated up to the front to receive my trophy and graciously thanked everyone as quickly as I could. To be quite honest I was a little embarrassed to have won such a great award. With very little words I went back to my seat. Perhaps next time I will know better to try and think of a few words to say in such a situation.

The web design of the year was for an advertising agency based in the Mid-West, Millward Brown. I took their current branding and applied it to a recognition gateway built entirely in Flash. It helps to have a strongly branded company going into design concept. I did find it a little nerving designing for a company that knows and understands design. I was pleased to hear that the design was well received not only by my peers and other judges, but also by those whom it was intended for.

Along with the beautiful personalized crystal trophy they gave us both a Platinum-level award to choose an additional gift from a variety of great products. I chose the iPod Touch (32 GB). I have a difficult time putting it down.

A Few Words of Thanks

I wish to send out my appreciation to O.C. Tanner for everything they do for me. I would also like to thank all the designers for helping me push myself to exceed. It is great to work with such talent around me. There is great synergy that comes with such surroundings. I hope this momentum for the Designer Group at O.C. Tanner will continually pick up speed into this year and into the future. Thank you all again.

Learning Actionscript 3.0

2009-01-15T16:41:00.003-07:00

Lately, I have been pushing myself to do more and more of my Flash Projects using Actionscript 3.0. I know I am a bit behind climbing aboard, but learning new stuff is (I must admit) kinda scary. I am a designer by trade, but am not too afraid to learn new things. I try to keep up on the necessary technologies for my industry.

Now that the at least Flash Player 9 penetration is used in most browsers, corporations are more willing to publish AS3 code. This has been true for a little while now, but some companies are difficult to convince that the adoption rate for the newer players has exponentially gotten quicker and quicker. Now there are simply no more excuses not to learn the new technology; I simply must learn it.

I have been converting some Actionscript 2.0 code I wrote three years ago to parse through an XML file display the hundreds of products a user can choose from to order. The order is sent through a form using LoadVars. That experience was such a great learning experience for me that it boosted my confidence to continue forth learning more and more Actionscript. AS3 does such a better job at parsing XML. It is so fast and easy to use. Instead of iterating through each of the Child Nodes of the XML Object, you can access them directly using dot syntax. This makes working with XML a breeze.

The learning curve for AS3 has been a little bitt of a challenge, but coming from a good base knowledge of AS2 has made it easier. Some designers have come up to me and asked if they should learn AS2 or just jump right into learning AS3. I am a little torn on the issue because I feel that AS2 was easier to learn the simple things such as button interaction and URL linking. Yet soon AS2 will be a thing of the past and they will eventually have to learn AS3 anyway. They are different enough that it is almost like learning a new language, although simple programming concepts are the same such as loops and setting variables.

I love an article by Collin Mook published on O’Reilly InsideRIA titled "The Charges against ActionScript 3.0." It really nails many of the issues I was having with AS3. The biggest challenge I was running into was with his number 3, "Casting DisplayObject.parent makes controlling movie clips hard." This is so true. Why wouldn't the player be able to recognize what type of Display Object it is, it should be implicit and already know, because it is a child of the parent. Parents should tell their Children about their ancestors (it is important to the Chinese) it should be the case for the Flash Player. You would think type casting would help with this, but it doesn't. To reference a parent you need to specify its type. For example, if it is a Sprite use: Sprite(parent). If it is a custom class even based on a Sprite you need to state the Class Type: MyCustomClass(parent). For backing up two levels the Class Type you need to reference is the one that is two levels back. Within the comments one writer wrote that he teaches his students not to even use parent at all in writing a program. I'm not sure how this could be done, unless everything resided in one Class. What would be the purpose of multiple classes then?

I will continually push forward on my AS3 skills and am confident that it will pay off in the long run. I am tying to stay ahead of the curve. I don't know how designers that use Flash, HTML, and other such technologies can survive without understanding the capabilities out there they can design for. They are only hurting their own designs buy limiting their knowledge of the limitless possibilities yet to be discovered through technologies. I am a creator. I know no limits.

Wacom Tablet in Photoshop

2009-01-14T11:40:00.004-07:00

I have had a bit of extra time lately to dabble around with the Wacom tablet (6" x 8"). This is something I have been wanting to do for a while now, and just never had the opportunity to do it. Well, finally one became available at work, so I jumped on the chance to see how good it works. I must say not too shabby for my first time even picking up a Wacom pen.

When I first picked up the pen I quickly realized that painting everything at 100% opacity with the airbrush simply was not going to work. The main benefit behind the Wacom pen is that it senses how hard you press and changes the opacity accordingly, but if you start out will full pressure, it is more difficult to back-off from that pressure and not be able to blend colors together in the desired way. With a little patience and a few extra strokes, good results start to emerge.

Someone paid me a complement when I was accused of scanning in the image and manipulating it that way. They said that they have used the Wacom Tablet before and have never been able to get it to look that good. It does help to have a background in art. I do admit that I did borrow the image from an Addias Ad, but for reference only. It allowed me to get proper proportions and such.

Once I was able to transfer the proportions accurately, I went in and added the details with the brush. I enjoyed experimenting with different textures in the cloth and grass. The grass was fun as it came to life creating it with an almost scratch-board technique. With the benefit of Photoshop's different blending modes on the airbrush (Vivid Light in particular) I was able to easily pull the light out of the grass and add the convincing highlights. More experimentation helped me discover how to push the shadows deeper, carving the shapes to life.

The skin-tones and texture I found to be a bit of a challenge, but hey it was my first time using the tablet; give me a bit of a break. If I had even more time I could push the picture a little, further, but I think I am satisfied with my first attempt at this exercise.

Flash and Web Design

2008-07-23T19:39:00.000-07:00

I have discovered a desire to not only design things to look pretty, but also function practically. Somewhere along this persuit of creativity I have become fond of the way programming functions logically. This culmination of form and logic has moved me to a love of Flash and Web Design—namely the programming that goes behind the scenes. I am working up to the level of “Code Nazi” when it comes to Actionscript and HTML. I get a bit anal with how my code is generated. I don't trust layout programs such as GoLive or Dreamweaver to write all my code. Although, I must admit they are getting better with newer versions.

Flash and Actionscript

Actionscript has come such a long way from the beginnings. My first version of Flash was v4. I quickly upgraded to Flash 5 when it came out. Actionscript was crude and had no real standards. It couldn't do a whole lot. Many people learned bad habits that I still see today. One of my biggest pet-peves of these habits is the attaching code to a button or movieclip using old depracated code to deliver an action.

As my learning of Actionscript continued, I learned some standards and good practices. I pushed myself to learn Actionscript 2.0. I had gotten pretty comfortable with this 2.0 language. When Actionscript 3.0 came out I became so involved with other projects that I only dabbled in it here and there. I simply kept with what I knew. And that worked for me. Now, I see more and more the benefits of using the robust 3.0 language (it parsing upwards of ten times faster than 2.0 in many cases), it time for me to buckle down and learn the strict yet robust coding of this language. I know I will benefit from it in the future if I do.

I never used to see myself as a developer nor programmer. I am a designer that knows code. This is how many Flashers have flourished. As Flash has progressed it has attracted more developers, but without good design it doesn't live up to what the viewer designers to use. It takes both strong design and programming development to really come up with something useful.

I have seen way too many Flash sites out there where the functionality simply makes no logical sense. Sure many sites look ok and are fun to play around with, but where is the practicality behind them? This seems to be the concensus on pieces entered in Communication Art's last year's Interactive Annual competition. They simply are not practical in "real world" application.

Dreamweaver vs. GoLive

Lately, I have been becoming more and more fond of the functionality of Dreamweaver. Even though I do find myself in code-view most of the time, the interface/design-view does a particularly decent job with formatting the code mostly the way you desire. The code is now kept much cleaner and easier to read when you go back to the code-view I despise working in another person’s code where “Best Practices” are fully ignored.

I have found that many designers prefer GoLive over Dreamweaver. I don't really understand why. Those whom I have spoken to usually like GoLive simply on the basis of that is all they know and don't want to learn new software. To me the interface really isn't that different. I used to use GoLive at work until we upgraded to CS3 which included Dreamweaver rather than GoLive in the suite. Most designers kept using the old GoLive on their machines, but I have found that new Dreamweaver is far superior. I have tested the new GoLive 9, but still like Dreamweaver CS3 better. It does make sense that Adobe drop GoLive altogether.