Glen Keane on Ollie Johnston

Josh Burton points us to a fantastic video with Glen Keane. Glen is an amazing artist who supervised animation on classic films such as Aladdin, Tarzan, and Beauty and the Beast. He also contributed to The Little Mermaid, The Great Mouse Detective, and The Fox and the Hound (To name a few).

In this video, Glen talks about the brilliant work of the late Ollie Johnston.

Another great interview with Glen Keane can be found on the Animation Podcast.

A Hole in the Workflow: Prototyping and the Handoff from Designer to Developer

The elephant in the room for all RIA development teams is the lack of a proper process/workflow to go from idea to sketch/wireframe to prototype/alpha. We all know it. How do you start? In a tool like Visio or OmniGraffle, doing wireframes? In Photoshop doing straight up mockups? In HTML/CSS building prototypes? Building a rough in Flex or VisualStudio right away? All of these tools or steps have advantages and pitfalls. Let’s tackle a few of them here.

OmniGraffle and Visio are great because they are fast and don’t necessarily tie you to a specific technology. They can offer a lot of flexibility in styles, too, through the use of downloadable templates and stencils. I visit GraffleTopia.com regularly to see what’s new for my tool of choice, OmniGraffle. The wireframe shapes tend to be vague enough that clients, with a little coaching, won’t get too hung up on the details, color, typography, etc. You can just focus on functional areas and UI design patterns. However, these tools do have a significant disadvantage in that they don’t produce any assets you will be able to actually use in your finished product. No graphics can be prepped out of them for use in your UI. No markup can be backwards engineered out of them to help you with your app’s layout or views. The widgets in your layout are for looking only, not touching. These documents are not typically interactive when viewed onscreen. One thing that’s great about them though, is that they tend to print very well, so if paper prototyping is part of your desired process, you’re covered here. I typically count on a wireframe process step taking a handful of hours per screen before all approvals and required buy-in for the wireframe is acheived. On a big project, this can be well worth it. On a small project you might just be burning too many hours.

Jumping straight from cocktail napkin to Photoshop/Illustrator mockup is a path taken by some, and if it works for you, great. I have found it not so successful for me in the past, so we have all but abandoned this sort of workflow. Perhaps this will change once Adobe releases Thermo, making porting from design to MXML a more fluid/roundtrip type of experience. This would cut down on what I see as wasted hours on the “Photoshop Mockup Death Spiral” – pushing pixels in a round of revisions after a round of revisions. Reading Getting Real pretty much cured me of this. See the following:

Writing the app right away in HTML/CSS may be an option for you. If you have strength in the two technologies and can employ a JS framework like JQuery you may just be able to crank out something pretty quickly that looks good. However, you are indeed showing your hand, if you will. You have chosen a delivery technology. You have delivered what could be seen by the client as something close to being done. You may be limiting yourself to common UI design patterns as dictated by what’s available in HTML/CSS. All that said, you have produced something that can be used by the back end developer or integrator to produce something real. You are a bit further down that road. That said, not many small teams may have a person with the skills to produce something using standards that looks good, plays well with your middleware and doesn’t take weeks to produce. 37signals wrote about this workflow last week, but I’m not sure many houses can execute at this level.

That leads us to building a prototype in a dedicated IDE. Since I like the Flash platform, and our company is pretty comfortable developing in it, this means Flex Builder for me. The component based approach and rapid results make this almost like a living wireframe. I have had pitch meetings where, a day or two before the meeting, I’m put on the spot to mock something up. This would have caused an aneurysm for me a couple years ago as a I stressed over putting together a Photoshop mockup, but now, with MXML and the CSS support, with just a tiny bit of research, I can whip together a theme that emulates the company’s branding and covers all the needed bases for displaying a hypothetical user flow. Click-through mockups are indeed a reality. When put into a more relaxed or planned process, you can actually use states and transitions to begin the XD during the earliest stages of a design. This has some drawbacks. Ted Patrick mentions it in his post, Managing UI Development Expectations with Flex .By giving a client such a polished refined UI so early in the process you are again, tipping your hand to the client. You don’t want to give up all of your goodies too early, now do you? He offers a pretty nice “plain” skin for use in your projects to help turn down the gloss. Additionally, if you start down this path, obviously, you have committed yourself to producing a Flash platform deliverable, so it may not work for everyone.

It’s obvious there is a hole here. Microsoft’s Expression Blend attempts to fill it, and it’s a valiant attempt for a new product. Google is investigating this space for the AppEngine. Adobe has a tool coming out that everyone is anxious to get their hands on, Thermo. Lots of people are writing about this perceived lack of toolset or process in RIA/Site development. A List Apart blogged it this week, focusing on the production of HTML/CSS. I highly recommend reading the comments section there. Some great tools and suggestions to check out. Delores Joya Moore blogged it. She mentions how she is currently employing Flex as a tool to produce UI prototypes that eventually end up being used as the views for a properly architectured RIA. Not a bad thing to try out, IMHO.

How about you? How is your team overcoming this hurdle right now? Any tools, plugins or processes that are working for you? I’m interested in learning more from other design/development teams about this topic.

Visualizing Excess: TED Talks, Chris Jordan’s Large Scale Compositions

A post on Josh Holmes‘ blog mentioned that he watches videos on the TED site regularly to gain insight into topics he may not have heard about before. This is a brilliant way to take advantage of some seriously good content at that site. TED stands for Technology, Entertainment, Design and is the world’s foremost conference for bringing together the world’s thought leaders. To attend this conference is cost prohibitive and also unattainable for many due to the fact that you must join the association ($6000!) and apply for attendance for the events. A pretty high bar of entry. However, over 200 of the conferences sessions are available on the site and able to be viewed by us mere mortals. There is some mind blowing content on that site, and I previously blogged about that Hans Rosling video on emerging nations stats on health and related topics. Great great stuff.

One such video that I would like to share with you is this presentation by the artist/statistician Chris Jordan. From the site:

Artist Chris Jordan shows us an arresting view of what Western culture looks like. His supersized images picture some almost unimaginable statistics — like the astonishing number of paper cups we use every single day.

The mix of art and science here is pretty delicious for a geek like me. I saw an appearance by Chris Jordan on The Colbert Report some time ago and it was entertaining, that clip is available here. I recommend you take 10 minutes and watch this video.

Visualrinse.com added to ria.AllTop.com

I was just informed that my site has been added to ria.alltop.com, a great directory for RIA focused weblogs. For those of you who haven’t used alltop.com yet, it’s a very cool community focused on providing the best stories in niche or specific topics. It’s great to be listed there amongst some other fantastic sites and I hope to continue to post subject matter that you find useful in designing and developing RIA, web and Flash content and sites.

In The Trenches: Pushing RIA Development In Non-SOA Environment

In 2002, Jeremy Allaire wrote a whitepaper that arguably spawned the RIA revolution. In that whitepaper a couple quotes stick out that are related to a lot of the conversations I have with potential clients even today. Here’s one:

Rich clients are made much more valuable when combined with logic and data
delivered from application servers and XML web services.

Of course to developers of n-tier systems like the ones using rich clients built with Flex, Silverlight and AJAX, this is a given. This is a rudimentary building block in the creation of any client-side application, be it thick, thin or somewhere in between. A services layer doesn’t really make the rich client “more valuable”, in reality it makes it possible. Try building a rich client with name value pair text files or screen scrapes. I guarantee epic fail. The problem is, not all companies have services in place today. Read more

Adobe MAX North America 2008 Schedule Posted – Wow!

Lots of great sessions listed there. Looking forward to this one. I attended last year’s MAX in Chicago, since it was basically in the neighborhood. I’m going to do what I can to make it out to San Francisco for this one. I haven’t been to the West Coast at all for a couple years, so this will be a lot of fun. Some great sessions from the Adobe XD team,  Mario Klingemann, Michael Labriola, Scott Fegette, Robert Reinhardt, Mark Niemann-Ross and Kevin Goldsmith all caught my eye on initial glance, but I’m sure once it comes time to set my schedule, I will have a hard time choosing which sessions to attend. I like the fact that they seem to turning a little more focus back to the designer, and I’m sure that tools like Thermo are really contributing to that shift. It’s great to have the stuff that makes the guts work well (Actionscript 3, MXML, etc.), but if the applications and sites we produce don’t look or feel great, they will just end up as unusable software. What’s worse than that?

Are you attending MAX? What sessions are you looking forward to?

Tried Wordle Yet? Generate Tag Cloud Art From Your Del.icio.us Bookmarks

It’s no secret that I dig mashups. There is a particularly cool one that popped up recently called Wordle. It generates a word-art style tag cloud from a collection of text, an RSS feed or uses your Del.icio.us bookmarks tags. A very nice packing algorithm and some good color and typography customization options make the end results pretty aesthetically pleasing. Using my web design bookmarks (used very often as a teaching resource for my students), produced this masterpiece:

You should go check the site out. A pretty good selection of creations is popping up over there. I’m not sure about the actual construction of the piece, but due to it being a Java Applet, I’m guessing it was built with Processing.

10 Open Source or Free Flash or Flex Code Libraries You Need To Check Out.

Build, steal, buy, or borrow… These would be the four basic ways you can make your applications a reality, pretty much regardless of the language you develop in. Flash and Flex development is no different in this regard.

Building will get you what you want, provided you have the skills to do it, but could take a load of time. Time obviously equals money. Stealing source code is of course unethical and I would never endorse it, for the obvious immediate moral implications. But furthermore, it is simply not a commercial option when developing work for clients due to long term legal issues. Buying code or components is often a great way to rapidly make progress that would otherwise take a long time to build. Borrowing code or the closest parallel I could think of, using open or free libraries, components, frameworks or APIs, is often the smartest thing to do when building an application of scale or one that requires a short timeline to deployment.

There are some great large repositories of code out there today for the Flash developer. I came from the early days of Flash, where sites like Flashkit and Were-here ruled the landscape. The upstarts at the time, Ultrashock and Kirupa also had some great stuff (They still do for that matter). Learning resources, code warehouse and decent communities, the lot of them. Fast forward a few years and the community is much, much larger. Maybe a little more fragmented, too. Blogs and bloggers pretty much run the show. There are few sites here and there that provide a larger launch pad for community, but really, you do have to know where to look to find the gems. OSFlash.org is a great starting place, FlashMagazine and TheFlashBlog serve a lot of great content, too. Those things considered, in order to help you find a few libraries of code you might not necessarily know about or have heard about, I’m making this list. I’m leaving Papervision off the list, because unless you have been living under a rock for the last year and a half, you know about it.

1. SWFObject – If you aren’t publishing your Flash/Flex files using this excellent JS method, you are missing out and so are your users. An easy way to simultaneously detect Flash, embed it, and supply alternate content all at once. You’d be behind the times if you aren’t using it, as Adobe has announced it’s going to be the default publishing method for the CS4 family of products.
2. SWFAddress – Like Flash but hate it’s inability to provide deeplinking and proper back button functionality? Me too. Enter SWFAddress. You can now provide rich bookmarkable experiences and help your search engine friendliness, too. SWFAddress relies on SWFObject to work. If you are using Drupal, too, you may want to check out the SWFAddress module, written by my friends at cascadingstyle.net. With Adobe recently announcing the now search engine friendliness of Flash, deep linking is even more important if you need that kind of visibility. Who doesn’t need that?
3. Gaia – A framework touted for it’s strength and ability in building experience sites quickly and easily via a scaffolding process and a strong event model. It certainly has gotten some uptake recently. I have begun research on this framework and anticipate using it sometime this quarter for some Flash work I have planned. Jesse Warden has a great post or two on it here and here.
4. Casa – Growing somewhat long in the tooth, this AS2 library is somewhat obseleted by the changes brought forth in AS3. However, if you have some AS2 code you need to build or extend, this bit of code is well worth your time investigating.
5. Tweener – Zeh Fernando’s super amazing AS2/AS3 powered animation engine. I have been using this since sometime in 2004. I found it digging around in the somewhat crusty, but still very useful proto.layer51.com site. Virtually every project that needs programmatic animation or tweening that I touch uses this. You gotta be crazy at this point to not be using some sort of a tween engine for your Flash development and this is among the very best of them.
6. AS3 Corelib – Doing some things with Flash just isn’t fun. AS3Corelib does a good job at getting lot of those not so fun things out of the way. Image encoders, encryption, strings, numbers, dates… It’s all here. You won’t regret downloading this one. I use this a lot now on many of my projects.
7. Cairngorm – I have to admit, I nearly left this one off the list as it might not be everyone’s cup of tea. It’s complex. It’s a bit niche. What is it you ask? From the Adobe Labs site: The Cairngorm Microarchitecture is a lightweight yet prescriptive framework for rich Internet application (RIA) development. Confused yet? Thought you might be. If you have an application of significant scale and complexity that needs to be built in Flex using a very structure format… You may need to look into this. We at the Iona Group are just beginning to employ it, and I’m not the one using it, it’s more along the lines of one of our dedicated developers (I tend to fall more in the XD, UI realm). However, I know it’s strong MVC architecture is going to give us significant advantages in the templating portion of the views needed for the app we are currently building (it’s a doozy! more on that later, hopefully).
8. Degrafa – A super cool drawing framework for Flex. This provides an MXML interface for the Flash drawing API. I used it to build my DekafLovers mashup and continue to watch the frameworks development. I know they have some great things planned for this, with dynamic raster fills and a number of other big big things around the corner. For now, even though the framework says it is beta, it definitely ready for primetime. Juan, Ben and the rest of the team are just doing a great job on this.
9. Bytearray’s Projects – Ok, I’m going to cop out and call this one 9 and 10… can you blame me? It’s a biggie and many might not even know it’s out there. This site is chock full of stuff. Generate PDFs from Flash? Check. Lightweight easy to use AS3 components? Check. Super kick ass audio visualizations? You know it! Wiimote components. Not even kidding. A freely published amazing AS3 book (French only at this time, I believe). You got it. Thibault Imbert has certainly made a name for himself building some great stuff. He recently took a full time job with DDB, so hopefully his experiments will continue. Truly amazing stuff.

So, there you go… a few snippets and bits I have found useful in the recent months. What are you using in your projects? I’m definitely on the lookout for new stuff, always!

Yay, Flash Player Beta 10 2 – My Favorite Feature “unloadAndStop”

Two days ago, Adobe released Beta 2 of Flash Player 10. With it came a number of enhancements, bug fixes and new features. Linux users got a much more even playing field. But the one that I think will have the most impact on my day to day Flash work with Flash Player 10:

unloadAndStop — This new ActionScript 3.0 API adds unload functionality similar to the unload behavior in ActionScript 2.0.  After calling unloadAndStop on loaded content it will be immediately removed stopping all audio, removing eventListeners, and becoming inaccessible through ActionScript.

This sounds to me like a fix for this massive bug/issue noted in this great post by Grant Skinner. That bug prevents clean unloading and garbage collection of unloaded/unused movieclips or sprites. Very excellent news for everyone who builds, buys or consumes Flash content. I am also excited to have limited fullscreen keyboard access, but fixing this major issue will definitely help me not need to put kludgey workarounds in or avoid AS3 based Flash content any longer.

Kudos, Adobe!

A Deep and Meaningful API, One to Definitely Try Out: GovTrack.Us

About a week ago, I sent out a tweet asking for ideas on new APIs that might be worth checking out. You see, I am teaching a mashup course this fall and I need some new source material. I’ve played with Kuler, ColourLovers, Delicious, Yahoo Pipes, Technorati and a couple others (mostly unpublished and just experimental), but I just feel like I was missing something. I needed to check some other things out. Of course the new AS3 APIs for Google maps are out, so those are absolutely on my list, but I wanted some more “content rich” APIs. I spent some time on programmableweb.com (a great source for mashups and APIs) but only found a couple that struck my fancy enough to think about spending what is virtually my nonexistant free time on building a toy.

Rachael Rubin (wildhoney on twitter) was kind enough to point me to the newly revised Last.FM API and I think I will definitely use it at some point, but without a a proper link to the streaming music in their library, building a non playing audio based mashup seems a little less fun that it should be. It seems as though they intentionally make accessing the streams a little difficult to discourage bandwidth abuse.

All that changed today when I came across Govtrack.us on programmableweb. Wow. What a useful API. Fun? Not really… it’s an interface to the mountains of data generated by our Congressional representatives day to day business. Deep stuff. With the ever growing need for governmental transparency in this somewhat crazy time, it’s a fantastic resource to have. Generate clean XML based on what your reps are voting on, meeting about and talking over. Combine this with Google maps or perhaps any number of other rich data sources and you have some amazing potential to bring visibility to a very opaque world. Providing a new or easier to use interface to the insurmountable volumes of legislation might uncover some realizations that may have gone unnoticed otherwise.

I’m definitely going to give this one a spin. Shall we find something out from all of this? It remains to be seen, I guess. I have a few ideas on things I might like to track… how about you?