Flash Forward 2006 – Seattle Flash Lite Presentation

Sorry for the rather speedy post a bit ago, I was getting knocked off the network by the folks coming into the room right before the session. :) I was getting ready to start and I realized I had forgotten one thing. Having the files up before the session does seem an important point though. ;)

Thanks to everyone that attended. I was really pleasantly surprised by the turnout. There were also some really good questions after the session. If you would like to see the PPT file and the related Flash files, please download the source here.

The major points of the session focused on one of two topics. The first part of the presentation was focused on what designers can do to optimize Flash Lite 1.1 performance. I used a couple of my old files like Pellet Pop and Aces High plus a maze game I made for the iRiver U10 to demonstrate some of the design techniques:

  • Smoothly animate small elements the eye is focused on and roughly animate (or not at all) large elements. This gives user the perception of smooth moving content without the hit to performance.
  • Use simple animations (scripted or tweened) to cover over processor intensive task. If you need to run a harsh loop over several items, animate a transition and run the the loop as a frame loop rather than a while loop. The example of this was using an explosion animation in Pellet Pop. The trig for digging out each column of a dynamically created terrain that has been exploded is run at one column per frame during each from of the explosion animation. The cumulative effect of the script is applied visually when the animation is finished.
  • Consider whether to use vectors or bitmaps in your application. Scaling and rotation really require vectors, but otherwise you should use bitmaps for the performance benefits.
  • Interaction differences in the devices make all the difference. Target specific devices, or classes of devices with your SWF. Flash does a great job of staying functional anywhere, but with varying screen sizes and pixel density, not to mention interaction patterns, each device is pretty unique. By tying your layout to variables that can easily be changed, it is pretty easy to create a base file then make some documented design changes to target a new device. I showed how by changing two variables, the stage size and one button event handler I was able to make a specific port of my U10 game for my Nokia that is consistent with the Nokia interactions.

From there I moved on to Flash Lite 2.0 to show how much better life is about to get. My original maze game was coded for Flash 6, and with only changing the stage size I was able to run the original game on my phone with only a very slight loss in performance. I also showed how using Flash Lite keeps you from having to implement server solutions for XML and loading JPGs. This ability really makes Flash Lite accessible to people that are purely focused on the client side.

I wrapped up my presentation by talking about how Flash Lite 2.0 is actually moving ahead of the desktop player in certain cases. In Flash Lite 2.0 you can use right to left languages and can support any media type that your phone supports. I showed an example from Adobe on how Flash can composite 3GP video straight into the Flash movie. I desperately wish Flash for the desktop had this capability.

Sprint Ambassador Program

Sprint Ambassador

I was officially invited to join the hordes yesterday in the Sprint Ambassador program. Sprint has taken to searching for blogs discussing mobile phones and consumer electronics and giving them a free phone and unlimited call and data plan for six months.

Doing a quick search suggests that this is more about guerrilla marketing than about market research. Going after bloggers, the assumption is that they will give us a phone and we will probably blog about them. Very smartly, they didn’t ask the participants to blog or anything, they just figure it will come naturally (a point I am proving now).

Of course I am accepting the phone and am grateful for it as a chance to try Sprint out again after 5 years on Cellular One/AT&T Wireless/Cingular Blue. I can’t imagine that there is anything that they can do though that would make me want to switch to them. The fact that they aren’t on GSM is a complete deal breaker for me.

Now if the Samsung A920 that they are sending me is one of those MMI Samsungs, I may have spoken too soon. ;)

Off to Flash Forward

I’ll be up in Seattle from Monday through Thursday for the west coast Flash Forward. I can’t wait to see the new venue.

My presentation on mobile design and Flash Lite 2.0 is Tuesday morning at 10:30AM. I hope some of you have a chance to drop in. While I always prepare way too much content for fear of running out with time to go, I do hope this will be an interactive sessions full of questions and feedback.

I’m just putting some finishing touches on my PPT and one of the FLAs, but the session materials will be posted here before the session. The plan is to make the examples show contrasts. I will have the same application running on different devices or in different versions of the player so we can really have a discussion about the many different simultaneously moving targets that is mobile development.

The examples will be a maze game for the U10 in Flash Lite 1.1 that was ported from Flash 7, a couple of games for Flash Lite 1.1 on Nokia devices, and my Flickr application in Flash Lite 1.1 and 2.o.

If you are at the conference and want to meet up, write a comment and hopefully we will see each other there.

Wmode Woes

I saw a blog entry today about how to use wmode for z-ordering Flash in your HTML that reminded me about a topic I’ve been wanting to bring up. With Flash 8′s ability to use transparent and opaque on a much broader set of browsers, some of the issues with how wmode work are going to become more serious.

There are three major problems with wmode IMHO:

Speed
There is no big surprise here, but when you force Flash to composite the HTML layers above and below, you are adding additional processor load. The main reason I bring this up is that a lot of folks are starting to use wmode=opaque even when it is not needed. If you have gone to the trouble of optimizing your application, why would you slow it back down a bit without really strong need?

Accessibility
In talking with Yahoo!’s accessibility product manager, I’ve discovered a LOT of interesting quirks of the Flash player. By far, the most interesting of which is that use of wmode makes your movie invisible to screen readers. This seems to actually be a well-documented issue in the accessibility world. What amazes me is that it is considered a FEATURE!

After attending an internal presentation on Flash and accessibility, I really see what an important role there is to be played, and what an amazing opportunity there is for Flash developers in accessibility. The person giving the presentation is blind, and the opportunity to hear Flash through a screen reader was really amazing. Without thinking about accessibility, Flash movies are really horrible. With just a little thought, and use of the accessibility object (which is a huge asset for Flash), you can really make something fantastic. But since this is an entry about wmode, I will save this particular soapbox for another day.

At this point as major chunks of sites are moving to Flash, it is important that your applications are visible to people using screen readers. Perhaps a solution to this is to detect when a screen reader is in use then use the external interface to call a function that re-instantiates the flash movie with a default wmode. It seems reasonable to say that if a screen reader is in use that the z-ordering compositing isn’t as important. Anyone want to write a library for that?

Inconsistent Performance
SWFs using wmode actually perform slightly different from SWFs that have a default wmode. The difference is that when you are running as transparent or opaque, events are delayed until an onEnterFrame. If you are running at a slow frame rate and drive your movie with setInterval or use any number of other events, you are back to your slow frame rate. If you would like to see an example of the difference in the way it runs, take a look here (must use IE). The real kicker is that SWFs in IE have this bug. SWFs in Firefox are just fine.

While this does irk me just because one of the best things about Flash is its cross-everything consistency, It has caused a problem for a specific application I’ve worked on. At one point I needed to instantiate a lot of SWFs in HTML. Each instance running at its own framerate starts to bog down the machine at some point just from the processing power it takes to idle a lot of transparent 12 FPS SWFs. My proposed work around was to make the SWFs run at 1FPS or less, and then drive the file with setInterval. This would allow me animate the files at the appropriate frame rate when needed, but otherwise idle at a super low framerate. This works fantastically with a default wmode. With a transparent SWF, the Interval only fired once per second right along with the onEnterFrame.

The King of All Cosmos, Now in Flash

Katamari Damacy - flash version

The King of All Cosmos took the rainbow road and slid right into Flash in an online mini-game. If you have no idea what I am talking about, you probably haven’t played one of my favorite cult games, Katamari Damacy for PS2 (and soon for the PSP as Me & My katamari).

Katamari Damacy and its sequel We ♥ Katamari are two of the quirkiest games I’ve ever played. You play the part of the son of the King of All Cosmos who went on a bender and destroyed all the stars. You are sent to earth with a spiky ball and have to gather up items like building a snowball. The design, the music and overall Japanese-ness of this game have made it a classic. There were clearly no mediocrity police on duty when this was made.

I actually designed this blog right after beating the first game, and I am still a little embarrassed about how much I was unconsciously influenced by the design of the game. :)

BTW, a note about the king of all Cosmos. In the first game, every time you see the king he looks like he is smuggling the prince’s purple cousin Odeko in his trousers. In the second game, he was always in some way covered or blocked. Did someone actually complain or is the King just feeling modest these days?

Comment Subscription

I have several posts that are still being hit pretty often because of search engines. These have pretty active comment threads going on and I’ve been wanting to support these conversations better. To do so, I’ve now added a plugin that allows you to subscribe to a comment thread.

If you are interested in participating, just write a comment, and tick the subscribe checkbox. You will get an email with any new comments and a link back to the original post. FYI, you will only get emails for posts from other folks.

Yahoo! relaunches Chess in Flash 7

Yahoo! Chess

Yahoo! Chess (login required) has been re-designed, re-coded and as of late last week, re-launched in Flash 7. Although Yahoo! has had several single player Flash games, this is the first of our core multiplayer games to be ported from Java to Flash.

As you can see, the design has been completely overhauled as well as the experience of the combined lobby gameplay area. In addition to the design and technical benefits, Flash provides Yahoo! Games with the ability to make a game once and deploy it to all platforms, a serious problem for a lot of the java games out there.

If you are a chess geek, give it a try and let me know what you think.

Goodbye Tiki (1991-2006)

Tiki

Our cat Tiki passed away yesterday. Ray posted on his blog a very good description of what happened.

Tiki, of all my pets, has had the biggest personality. He was a dignified cat constantly foiled by his own klutziness. There was a meow (a very Siamese cat meow) for any and every occasion. I’ve never seen an animal so able to accurately get his message across. He had us trained to his whims in a matter of weeks.

He loved to sneak up behind ray and I and poke us in the side with his paw. The higher up on us the better. It proved to the world just how long a cat he was, a fact that he was always willing to demonstrate. He seemed particularly proud when he got my attention by getting into a chair backed up to mine and reaching up about three or four feet to whack me on the top of my head.

You couldn’t help but laugh when you would see him barely hanging onto furniture with three legs while reaching out as far as he could to tap ray when he would be just out of range. The scourge of sweaters just in range, Tiki’s paw was know as the “meathook.” I’m really going to miss the look of guilty innocence he would give when Ray would turn around and catch him in the act.

The death of a pet is difficult in a way that only pet owners know. The happiness and inevitable humor of having a pet more than make up for the pain.

Yahoo! UI blog & Design Pattern Library

Yahoo! launched YUIBlog.com and the Design Pattern Library today to start sharing the interaction design lessons learned by Yahoo! over the last decade. A lot of great work has gone into this, and should be a very valuable tool to web developers and interaction designers.

The library has been launched with Javascript/DHTML/AJAX/(is there another name yet) source, but this is not meant to be a technology specific effort. Even though the presentation platform library is purely DHTML, the design patterns are technology agnostic and can be applied well in Flash.

A lot of the Rich Internet Application building blocks that we take for granted in the Flash development world are just getting started with AJAX. No matter what you have to say about the Macromedia component sets, it was a huge leg up for all of us to have some place to start. I’m glad to see Yahoo! taking the lead in creating some baseline AJAX components.