Channels ▼


Teaching Mobile App Design with Flash

We recently spoke to David Carroll, assistant professor of media design at Parsons the New School for Design in New York. David is using Adobe's Flash development platform, Device Central CS3, and the Flash Lite runtime engine, integrated with other tools, to teach interface design for mobile media.

DDJ:Can you describe approach to teaching technology and interface design and how Flash fits into this?

David Carroll:Our department is a merger of a very traditional Communication Design department, which is over 100 years old and the Design and Technology program, which was started in 1996, to move away from teaching software at the service of traditional media to recognizing it as a medium itself. Our emphasis is on the intersection of design, technology, and society. We teach technology and design in a nontraditional way, extremely interdisciplinary. We see it as an essential form. In some ways, our patron saints could be Vannevar Bush and his invention of the memex, through all the great scientists of Xerox PARC, as well as folks coming out of the MIT Media Labs... John Maeda, Casey Reas and Ben Fry, creators of Processing... We call up Dr. Ivan Sutherland's first graphical software ever, Sketchpad and we watch Dr. Alan Kay's lecture where he demonstrates that software, and we look at it as the first instance of Flash. Of course it evolved to become Computer Assisted Design and Illustrator and other influential software.

DDJ:What aspects of the latest iteration of Flash make designing mobile apps easier?

DC: In Flash Professional 8, the emulator was a mere approximation. In Device Central 3 it was a giant leap in the kinds of conditions you can simulate and the accuracy of the emulation. In Device Central 3, you can calibrate the device to a device profile, and the desktop computer tries to simulate the performance of the device based on RAM, processor considerations. But it's still not enough to really know the quality of the user experience. Not just from a technical perspective, but from a design perspective and a social perspective. You still need to take it out of the lab and go use it in the real place it's going to be used.

There are some services that have emerged where you can subscribe and submit your application, and they test your mobile product on a variety of devices for benchmarking and quality assurance testing [DeviceAnywhere and Keynote]. That is an interesting resource for mobile designers and developers when trying to bring something to market. The difference between Firefox, Safari and Internet Explorer pales in comparison to the divergence on mobile devices. Taking something to market on mobile devices is a much bigger deal than publishing a cross-browser web site.

So the Device Central emulation tools are a big step in the right direction, especially as it relates to the identifying the device on a very detailed basis. When it comes to Flash Lite, the different versions have minute but critical differences on how you're going to design and code, how the Flash timeline and symbols are conceived. They are even variations in the specific mobile-only capabilities that Flash Lite offers through its FScommand TOs. Things like: can you trigger the vibrate, can you extend the backlight duration, figure out the battery status or network signal status, what kind of network you're on, how much data can you store locally... The tools are getting better at managing the divergence that's just astounding.

DDJ: Is it a challenge for students to see beyond Flash's timeline-based animation metaphor and view it as a tool for developing software?

DC: Flash has always been object oriented. Even when you're just dealing with symbols and the way the symbols are nested, that they have instance names, and the relationship of the master to the instance. I don't think the timeline is what trips people up and much as understanding object-oriented concepts. When they understand that symbols are object oriented even before you do a line of code, then it really translates well to object-oriented programming, because the concept has been visually expressed in the interface from the beginning. As soon as I made this historical connection between symbols and instances and classes and instances when it comes down to writing ActionScript 2 and 3 it makes a huge difference in the intellectual leap required to go there.

We get a more hybrid understanding. There are times with the timeline is still really handy to have, even when you're dealing with object-oriented stuff. You don't let go of it altogether. It's especially required for the kind of work students want to do here with data visualizations, really complicated information design projects, network-based visualizations.

Related Reading

More Insights

Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.