On my morning commute to work, I see people of all ages walking around the city of Lowell, MA with their devices in hands, glowing screens in their faces, mesmerized by whatever they are engaged in – thumbs blazing on the miniature keyboards. Seems that everywhere I go, in fact, someone has a device of some sorts that they are constantly looking at. In traffic on the highway after work, I see people in their cars – despite the recent laws against texting while driving – doing the same thing. I’m sure you’ve all experienced the frustration of standing in a checkout line while the person in front of you is carrying on an enthralling conversation while totally ignoring everyone around them.

The immediate gratification of the internet throughout the 90′s has paved the way for this paradigm shift. At work, my co-workers walk through the hallways with their Blackberries in their faces. In the bathroom stall next to mine, someone is checking their email and responding to it. That immediacy of information is changing the way we work, the way we learn, and sadly, the way we interact with each other. People feel more inclined to tweet something or email, poke, or Facebook a quick message to an individual with, surely, sincere intent, but without that human contact. It’s safer, dare I say more sanitized interaction.

How will this change us as a people? I was talking with a co-worker about the explosion of tablet and mobile devices and pondered on the impact it will eventually have on education. Students will no longer need to open a book. Their entire curriculum will be loaded onto their iPads. How will it affect the way a class is conducted. Instead of a student raising his/her hand, they can just text the teacher or some other digital form of hand raising.

Touch screen displays and devices will change the way we order something at a restaurant, or interact with a kiosk at a gas station. Apple has already changed the entire retail experience. Instead of walking up to a register, an employee can process your transaction with an iPhone. Who knows, maybe eventually, all we’ll have to do to vote in an election is download a voting app.

The implications here for design though is what I’m getting at and what this paradigm shift will do to design education. With the release of CS5.5, Adobe has made authoring for tablets and mobile devices from its entire Creative Suite much easier. Of course, this falls in line with Adobe CEO Shantanu Narayen’s vision of design once, deploy everywhere. How will this impact design?

I believe most designers are receiving traditional print design training through their college careers. It’s graphic designer’s and typographer’s that are teaching these classes. The basic principles of design are explained and experimentation and appropriation are used to propel the students through their portfolio classes. What’s the end result? Usually, a print portfolio. Surely, there are design schools who do have the ability to use technology and produce students with a portfolio that is something more than print. A website or an interactive Flash piece.

If graphic design training continues to follow the same principles, how can students be expected to incorporate more UX design practices into their portfolios? Are we at a point where the term Graphic Design is outdated? What should a design curriculum encompass these days to ensure that students have the right foundational competencies, but yet have all of the technical competencies to meet the ever changing technological landscape?

The big question is, now that we all have the tools that we need to produce mobile and tablet content, are all designers expected to just know how to do that type of development? Are they prepared enough to wade into the murky and unpredictable waters of mobile development? When someone is trained to be a fireman, they learn everything they can about fires and fire hazards and safety. A lawyer goes to school and learns everything about the law. These fields are focused and direct. In contrast, designers (in order to thrive in the current environment) need to know how to design for print, for web, for mobile, for tablet, and whatever else is in the realm of graphics (without a salary differential, mind you). They may have to understand HTML, CSS, JavaScript, ActionScript, and possibly other technologies that will allow them to do their jobs.

Another possibility is that students learn specific, narrow topics in design school to prepare them for a niche career? So one student could focus entirely on website design for the desktop. Another student could focus on mobile development. They would be acutely aware of all of the aspects of their respective fields and would be prepared to troubleshoot problems as they arise. Is this feasible though? Probably not. The thinking might be, ‘you can design a website, so you must be able to do develop one for mobile use?’ Maybe graphic design curriculum becomes more of a liberal arts study. More exploratory in nature until the student finds their interest and holds on to it.

There’s no question though, that as with the rise of desktop publishing changing graphic design behavior, tablet and mobile development will change it again. Are we ready for that change?

So Adobe recently released CS5.5 without a lot of hoopla. This is a mid-cycle release which focuses primarily on mobile and tablet publishing. We all are familiar with the promise to publish to the iPhone from within Flash CS5 that quickly got crushed by Apple, then slyly approved of later. Well now the floodgates have opened and Adobe has zeroed in on making their apps capable of delivering content to the iPhone (IOS devices) and Android market.

Flash, despite the fact that SWF files cannot play on the iPhone still, can publish for the IOS platform now with a new template specifically for that platform.

Essentially, Adobe is wrapping the Flash content in an AIR application with all of the necessary Objective-C language to play well with an IOS device. The same is true for Android development. You can reliably test your applications in Device Central and port your content directly to connected devices. It’s much easier to do this now than it ever was before in Flash.

When you take a look at the Publish Settings dialog, you’ll notice an update in the look of this and some other similar touches to other panels, like the Properties panel:

If you click on the wrench next to the AIR for IOS player drop-down in the Properties panel, you’ll get the deployment settings for your application:

As I mentioned before, you can test the application in Device Central by going to Control > Test Movie > In Device Central. You can also test directly on the USB connected device.

Another feature that’s been added is the ability to convert vector based clips into bitmaps. At first, I thought this was a feature that was only for improving the performance of complex vector graphics – which Cache as Bitmap already handles. In fact, this feature is for mobile devices that can’t handle vector graphics. I wonder if we’ll see SVG and canvas support in future versions, but I doubt it.

Layers

In applications like Photoshop and Illustrator, it’s easy to copy a layer. That functionality didn’t exist in Flash until this version. You can now Cut, Copy, Duplicate, and Paste layers. I for one, have been waiting a long time for this feature. Sure, you can copy and paste frames, but the ability to copy layers from one FLA file to another is great. Duplicating layers will be a huge time saver for animation.

Pinning Bones

If you tried the Bones tool in CS5, you probably got a little frustrated. OK, well maybe frustrated a lot. Chris Georgenes did an excellent job explaining the hidden reasons why the tool didn’t work the way most people thought it would in his book How to Cheat in Flash CS5. One of the techniques he used was to use an empty movie clip as a kind of global anchor to pivot the whole armature on. The other technique he mentions is creating sets of armatures in separate movie clips. In other words, you don’t necessarily want to create an entire skeletal armature system on a character, but maybe connect certain parts together that make sense when it comes to moving them.

New in CS5.5 is the ability to pin a bone down so that it doesn’t move, freeing up other appendages to move around on the axis of that bone. Sure, you could’ve done this before by constraining a bone, but I could never figure out the right degree angle settings for the kind of constraints needed for an elbow (as an example).

This will be a big help specifically with neck bones and other difficult armatures than require a bone, but not necessarily a motion on that bone, only the ones connected to it.

Snippets Panel Improvements
This
The code Snippets Panel has a new HUD on it for each snippet. There are also new snippets for mobile devices, like swipes and gestures. What’s annoying about the HUD is that after you open it, it doesn’t want to go away until you click on some other part of the interface. Still, it’s a nice reference and there are some code examples in there to get you started. Each snippet is heavily commented to show you what is static and what needs to be changed.

ProLoader for TLF

TLF text on its own is great. Used in conjunction with external classes or with loading SWF files doesn’t work (as chronicled here), until now. The problem really wasn’t with the TLF engine, it was Flash’s Loader class and a little-know bug caused by its internal preloader. This has actually prevented me from using TLF in any of my projects.

Adobe put out a temporary fix called SafeLoader which worked for some people and not for others. The solution in CS5.5 is a new Loader class called ProLoader. I guess the name SafeLoader implied that the previous Loader wasn’t safe, so they went with ProLoader instead. You can actually see the ProLoader in action by using the Click to Load/Unload SWF or Image snippet in the Snippets panel.

I’m pleased to tell you all that ProLoader does indeed correct this major issue and now we can explore TLF, which has its own set of problems. Adobe did spend some time improving TLF for this release by adding a tab ruler and support for style sheets. There’s just other things that developers need dynamic text to do that TLF maybe isn’t built for.

The ProLoader class works and behaves just like it’s stepchild the Loader class, there are just some methods and properties in that class that specifically handle the preloader/TLF issue. Nicely done Adobe.

Other Features

Almost every Microsoft application has an auto save feature, which is a God send when you encounter a hardware or software crash and you have an auto-recovery pull in that autosaved version of the file. Flash finally gets an AutoSave, which is on by default. You can set this up in the Document Properties dialog:

Another small enhancement is Incremental Compilation, which caches parts of your SWF file every time you test the file so that you don’t have to wait forever for each incremental test. That will certainly save time.

Conclusion

Adobe’s push into the Mobile/Tablet market is smart and timely. It comes on the heels of the whole Steve Job’s open letter on Flash thing and it’s in line with Adobe CEO Shantanu Narayen’s vision of Publish once for multiple platforms. InDesign and Dreamweaver also have a lot to offer in these areas. The ProLoader is the fix that I’ve been waiting for the most and will have the most impact for me. The lingering question, of course, is still what will people use Flash for now that HTML5 and CSS3/jQuery can do a lot of its tricks. I, for one, strongly believe that it has its place on the web and now on the mobile/tablet space.

Adobe really needs to bolster the Flash platform and continue to improve it to show developers what’s possible with those tools. It will be an uphill battle, but if they can position Flash just right, it will be around for a long time.

I have to say, even though there are still some buggy behaviors, bad browsers, and odds and ends, that the web is a much better place now. I feel pretty confident that the HTML5 working group(s) are working hard to make the development of web content easier. There was a long period of time where nothing was happening on the web, but now there’s a lot of excitement and it’s time for experimenting and time for learning.

The tools we have to work with are more robust. I think the take away though wasn’t to push the envelope and build websites that nobody can experience. It was rather, to build websites that users with modern browser can have a richer experience, but users with older browsers can still get the same content. Especially in Marcotte’s session, there was an emphasis on subtlety. Drop-shadows, border-radius, transitions, and multiple backgrounds could all be abused (just like Flash can be abused), to make some pretty ugly presentations.

And speaking of Flash, none of the speakers had anything bad to say about it. I was somehow expecting a grind against it, but there wasn’t. In fact, none of the things that were shown made me think, “Yeah, this is why they’re saying Flash is dead.” On the contrary. HTML5 and CSS3 have expanded their usefulness, but they still can’t be considered for RIA development. Not yet anyway. The toolset just isn’t there yet. So I got the feeling that the two technologies will co-exist just fine. I love the new advancements that make it easier to add transitions and animation effects to a web page. That leaves Flash for more serious application development.

Some interesting things that I learned:

• CSS3 has been around since 2001!
• Framesets are dead (obsolete)
• There are a ton of resources on the web to make this all much easier

So if you were there, what was the take away for you? What did you learn?

CS What?

PC magazine recently ran an article about it in January talking about:

…a new tool, dubbed Helium, that will enable designers to create content using HTML5 and CSS3

- emphasis added.

Seems odd that they would have to add a tool for HTML5 and CSS3 when Dreamweaver already does all of that. I’m sure that’s not what they are talking about though. Since HTML5 came out, there really isn’t a good toolset out there for working with the Canvas object or to create CSS3-based animations with a tool, other than just hand coding it (correct me if I’m wrong).

I’m pretty happy with CS5, but it’s still buggy and I do experience limited, yet frustrating, crashes and odd behaviors. At the most, we can hope for more bug fixes mixed in with some extra web trickery in all of the applications. I’m personally hoping for better font performance in Flash. Since Adobe prides itself on it’s own font technologies and has a good footing with them in Illustrator and InDesign, it’s so different in Flash. The inclusion of TLF (Text Layout Framework) in CS5 was supposed to be the answer to so many issues, but it falls short when it comes to actually using it with Actionscript.

I’d also love to see improvements in the 3D filter in Illustrator. There’s so much potential to really boost that part of the application to develop rich product renderings and such, but the interface is pretty limited. Live Trace, while a good tool for refined images, really needs an overhaul too.

I’m sure on the InDesign side, we’ll see more of the features that Quark has been rolling into it’s latest release, with advanced ways to publish to portable devices of various kinds.

Of course, we’ll probably have to shell out a few hundred dollars more and it will probably come in different packages, but it’s something to look forward to. What are you hoping for?

GoDaddy has a similar way of transferring a WordPress blog to your own domain. Now I need to get some juicy content up here.

Stay tuned.

An IDML file is an XML format (InDesign Markup Language) and the files in it describe the InDesign file it came from. You can use it to make your InDesign CS5 files backward compatible. This is what happens when you export to the IDML format:

When you export a document as IDML, InDesign creates a Zip archive containing multiple XML files.

The InDesign document is split into separate files representing different aspects of an InDesign document so that you can more easily identify and perform operations on the objects and properties you need. Document resources, spreads (page geometries), and stories are stored in different XML files within the zipped package.

INX, the previous backward compatibility solution, still exists and can be used in older versions of InDesign, but IDML is what you should use moving forward.

By the way, is anyone still using InDesign CS2 out there?

Recently however, I’ve been playing around with Flash Builder’s ActionScript editor, and I have to say, it’s pretty amazing. Not only is there code hinting, but it’s almost like coding with the ActionScript library in your hands. Available assets and their definitions appear side-by-side in an expandable view. Classes get imported when needed here too. When you start developing an ActionScript class in Flash, you have the option of developing it in the Flash IDE or in Flash Builder. I’m pretty sure I’ll be building them in Flash Builder from now on.

The code coloring in both apps (you think they would be) are not the same though, so for an average Flash user, it takes a while to get used to the code coloring in Flash Builder. Another thing that’s a little aggravating about Flash Builder is the way it manages class structure and packaging. I’m sure in time, I’ll get used to it.

So out of curiosity, what editor do you use? Can you recommend anything else?

One of the questions I get most often from students about functions is “What is the :void for?” Indeed, most functions, especialy functions that are derivative of an event listener will have this form:

function someThing(e:MouseEvent):void { }

This is only when a function is not returning a value. Yes, functions can return values and if you think about it, it’s kind of a cool way to use functions. We can return numeric or string data from a function. In this quick example, we’ll use a function to assemble an address and then trace it out:

function address():String { var street:String = "156 Primrose Hill Rd"; var cityState:String = "Dracut, MA"; var zip:String = "01826";

 var fullAddress:String = street + cityState + zip; return fullAddress;}trace(address());

Notice here that we use :String instead of :void. This indicates to the compiler what type of data is going to be returned by the function.

Next, we set up a few variables to hold the information for street, city, and zip. We use another variable to pull all of that info together. Then w use the return statement to return the fullAddress variable.

In our trace statement, we actually call on the function to return the value we want. We could also set up the function to return numeric data by datatyping the function to :Number or :int or :uint for that matter.

Start by creating a new Date object:

var myDate:Date = new Date();

The Date class allows you to get to the month, day, hours, minutes, seconds and other Date-based information. If we try to trace out the time like this:

trace(myDate.hours + “:” + myDate.minutes + “:” + myDate.seconds);

We’ll get 16 for the hours at 4 pm. The solution is really simple. Just subtract 12 from the hours to get the 12 hour hour.

trace(myDate.hours – 12 + “:” + myDate.minutes + “:” + myDate.seconds);

Cool!

In the past few weeks however, Time Machine has actually saved me some trouble. A file that I was working with became corrupted or unusable. Then I remembered Time Machine and went into it. Every time I do, my kids’ jaws drop as the desktop changes and the spaceship like interface takes over. I went back in history, grabbed an older version of the file and restored it to the desktop. I was then able to open the file and modify it. Of course, I had lost some development time, but being able to resurrect a file like that is really priceless.

So as much as there is negative talk out there, Time Machine really proved useful for me.