takeaway from MAX: iPhone & Mobile development from Flex and Flash

There were lots of news and sneaks at the Adobe MAX conference this week, and fortunately a lot of it is available in a couple places:
a) Adobe MAX Online Site
b) most of the sessions are now available on Adobe TV

Some items of very specific interest to mobile developers:

-Flash Player 10.1 was announced, which has been greatly optimized for running on mobile devices – no more flash lite, we are talking about the full flash player on mobile phones, and quite a few of the leading mobile phone manufacturers have joined the Open Screen initiative as well as announced phones that are being released with Flash Player 10.1
-Flash CS5 was announced with compiling direct to iPhone native applications. Flash CS5 will be available for public beta later this year on Adobe Labs
-several games are already on iTunes store that were developed with Flash CS5, including these free ones:

  • Little Red Riding Hood, a Post Apocalyptic Adventure (iTunes link), by Difference Games. This is a ‘find what’s different between the two pictures’ game.
  • That Roach Game (iTunes link) by Break Design
  • Adobe Live Cycle Workspace Mobile
  • -Shibuya try and buy service was announced, which, to me, seems like a big, big potential competitor to Apple’s iTunes store, and from all the complaining we’ve heard from the iPhone developer crowd, it seems a LOT more developer friendly than the iTunes model

  • and here’s more on the iPhone development thing from Adobe Labs
  • -this talk goes into depth on using the newly announced Flex mobile framework to develop mobile applications with Flex (yes, for iPhone, too):

    Whew…iPhone development with Adobe Flex…something we have been asking for, dreaming about, and eagerly wishing for (all the while thinking the only way to get native apps on the iPhone would be to code in Objective C)…now it looks like it is a reality. There is a ton more that could be said on this topic, and definitely on Adobe MAX ‘09 in general, but you can dive into the above links for plenty of that first hand. One last thing…the Max ‘09 Flickr group

    review: Balsamiq Mockups

    The short and sweet: Balsamiq Mockups offers a way for folks to quickly throw together wireframes – no experience necessary. You don’t need to be a wizard with Fireworks, for example, to quickly create and edit a wireframe in front of a client. It took me, as a ‘first time ever’ user of Balsamiq, about two hours to complete a wireframe I had sketched up on paper in a few minutes. My first Balsamiq WireframeThat’s a plus – I doubt anyone besides myself can read the wireframe I sketched by hand,hand sketched wireframe much less make heads or tails of it, while the one I made with Balsamiq is quite legible, while still lo-res such that it should impress upon the client that this is indeed a mockup not meant to communicate any sense of the look & feel of the application. My other thoughts for this particular wireframe were to do it either in FIreworks or in Flash Catalyst. The benefit of doing it in Catalyst was that the end result is actually an interactive motion wireframe. The downside of using Catalyst, though, was that (a) its still very much in the raw beta stage, and (b) the time to develop the interactivity in a way that would justify using Catalyst in the first place, would have also been much greater. For example, if you want to edit the text in a label, something you take for granted in most other applications that can be done simply by double-clicking on the text, in FC you must click on the label, and then edit the text in the property inspector rather than directly. This and other quirks are part of the beta nature of Catalyst – it just isn’t fully baked yet, which is to be expected for a beta. We’ve been waiting eagerly for Catalyst since it was first announced at MAX ‘07, and are still quite eager for a release version.

    Back to the topic of Balsamiq – one feature I found I would have really liked would be the ability to create my own components – currently you can only use the ones that are given by Balsamiq – or even to have more control of the customization of the existing components. To their benefit, though, they do offer to make more if the use is general enough, if you just ask, and they say they update the application (which is an Adobe AIR app, btw) on a weekly basis. I think I would have also liked a freehand draw tool – I use a Wacom and would have liked the luxury of being able to write on top of the mockup as I wished. On the other hand, Balsamiq exports and saves to an XML format – so I can see the need to limit components to a pre-defined set of components. You can also re-use user defined components, which are really just Balsamiq Mockups themselves. The place to get those is Mockups to Go. I’m not sure if it was just the time I happened to be trying to access that site, but it seemed incredibly slow to me. Three of the ‘portlets’ on the right side of my wireframe are sourced from there…that definitely saved me a bit of time.

    The best intro to Balsamiq I can recommend is to watch the intro video on their site, where they quickly make a mockup of iTunes. There is also an application called Napkee that lets you turn your Balsamiq Mockups into an interactive flex app – I guess that would kind of be on par with Catalyst, except you wouldn’t get the kind of round tripping you get between the CS4 suites and Catalyst. I didn’t play with Napkee but I get the impression it can’t export to the FXP format that is standard in Catalyst, Flex 4 and CS4.

    Other features I would like to see implemented in Balsamiq:
    -double-clicking on a group should let me edit the group. I guess that’s something I’m used to seeing from some of the Adobe apps such as Flash. A little irritating to me to find that doesn’t work here
    -ugh! that purple color when I select a group – is there a way to customize the color prefs? It hurts my eyes…
    -I would like the ability to zoom in and out of the mockup. There are no resolution settings, rulers, or guides. So you can imagine that a wireframe done quickly on a 30″ cinema display doesn’t always make for easy viewing on a 15″ MPB screen…or in an Adobe Connect Session, for that matter, where everyone’s got a different screen resolution
    -’icon’ assets in Balsamiq can’t be resized by dragging resize handles – they can only be set to one of a few preset sizes (L, M, S, XS…). This really breaks when an icon is in a group – if you resize the group, the icon doesn’t resize with it.

    Finally, I found this review of Balsamiq was also helpful. Coincidentally I reviewed iPlotz a while back here

    iPlotz: wireframing, mockups, and prototyping for web sites and applications

    A colleague recently sent me a link for a wireframing web application called iPlotz. It appears to be a flex application in beta, and if I’m not mistaken perhaps using a variation of the Edding Black or Flekscribble themes featured on ScaleNine. Only started playing around with it, but it looks like it has potential as an online collaboration tool. Check it out for yourself at iplotz.com.

    iPlotz: wireframing, mockups, and prototyping...

    iPlotz: wireframing, mockups, and prototyping...

    Anaara.com just went LIVE

    Well this has been a month of new things being implemented; Barack Hussein Obama won the presidential election, Adobe MAX SF is around the corner, and our web site is finally live! For ages now we have only had our blog on the site; our workload has been such that getting a decent site together has been beyond scope…but a little over a month ago we finally put our collective feet down and declared, enough is enough! Developed with Adobe Flex, of course…enjoy!

    Lots of thanks to everyone who participated in the alpha release.

    We decided to deploy in phases…so stay tuned for lots to come still.

    Mercedes Benz USA Flex 3 Site Launched

    It’s an ecstatic day for us here at Anaara Media as mbusa.com went live this morning. It has been a tremendous effort for our team, the in-house team at Mercedes in New Jersey, and also Yakov Fain and Valerie Silaev over at Farata Systems in Russia. We had been working around the clock on this project since January. The presentation tier is Flex 3 using the Cairngorm framework, on the back end they have a robust CMS talking with Java, and in between it all is Adobe LiveCycle Data Services.

    Mercedes Benz USA

    It was great to finally see our efforts on this project go live, but things are only ramping up here as we begin work on an iPhone application for a major telecom and we are also wrapping up on a DOD e-Learning project done in Flash with four million end users…

    In short, the RIA space is still in the supernova phase.

    Breaking out of the ‘page-centric’ web

    I was recently forwarded a link to a “New Fandangled” Flex Web E-commerce site. After spending a few minutes of precious project time going through the site, one thought kept going through my head… ‘why did they develop this in Flex?’ With the last few projects I’ve seen, it seems that thought comes up a lot. Sure the site had nice animation, allowed you to preview rich content like music clips and cover art and in general was ’slick’ – but does that really leverage the power of Flex 3?

    The navigation was page-centric – breadcrumbs abound – and transitions between ‘pages’ (although pretty) were not intuitive. Having developed web applications for the better part of a decade, I think most developers and project managers are still shackled to the limitations of HTTP and HTML. With the advent of Flex 3/AS3 there is no longer a need to suffer from ‘page-centricism’ to consider that every state change is a page change, and that user events require server call-backs. There needs to be fresh thinking – from the inception stage, throughout storyboarding and on to design and architecture. Flex 3 represents new opportunities for Information Architecture.

    We were involved in a project for a large telecom that really demonstrated the departure Flex 3 could take from a traditional web application. There were complex graphs, geographic locations and tons of data being represented to the user in a very intuitive way. If I would come up with a term for the design, it would be ‘Interest-Centric’ – the user actions, displays, transitions, etc. were all driven by the user’s area of interest. The power of the AS3 event model and the state handling in Flex allowed our team to free ourselves from worrying about navigation breadcrumbs or ‘page’ transitions. Moving from one section to another rearranged the entire display, so that other sections were still available, but the area of interest was font-and-center.

    We can gauge the progress of the Flex development community as a function of how far Flex apps diverge from traditional web applications. “Pages? We don’t need no stinkin’ pages!”

    A Letter to Colleen – Flash & Hi-8 live/animated film

    A Letter to ColleenCheck out this article from Studio Daily about a film shot in Hi-8 and then rotoscoped in Flash
    frame by frame to create a disturbing graphic novelesque film by London Squared Productions.

    They used Final Cut Pro for editing the footage and After Effects and Photoshop for post.

    Page Shuffle in Adobe InDesign

    Thanks to Jeff Witchel & Layers Magazine for this tip.  In my InDesign projects I had always been annoyed by not knowing how to insert pages without screwing up my entire layout, especially where I had very large graphic elements on the pages.  Here’s a feature I wish I knew about back then:

    Adobe InDesign CS3 Tip – Why Would You Want to Allow Pages to Shuffle?

    One of the choices under the Pages panel Options menu that is checked by default is “Allow Pages to Shuffle.” Years ago, when I first started using InDesign, my first reaction to this choice was, “What is shuffling and why would I want my pages to do it?” As I began to play with the feature, I quickly realized what this interesting choice of words was all about. If pages are allowed to shuffle and a single page is added before a particular spread, all pages “shuffle” forward in the rest of the document so that the even numbered pages become odd numbered pages to the right, and the odd numbered pages move down to become the even numbered left-hand side of the next spread. So “shuffling” maintains order in spread pagination. But what happens if this default is unchecked? You can create spreads with more than two pages (a gatefold spread in a magazine for example). So, if you need to make your spreads wider than two pages, simply “unshuffle” your document’s pages.

    Tip provided by Jeff Witchel, Adobe® Certified Training Provider.