Flash, Flex and ActionScript Resources -
A Web Developerís Workflow with Adobe CS4 Applications: A Review
Gerard Mason

Gerard Mason runs Big Friendly Apes, a boutique Flash and web development studio in Melbourne, Australia.

By Gerard Mason
Published on March 4, 2009
CS4 has been with us for a while now and it’s time to see whether it’s introduction has affected the workflow of one of it’s prime target audiences; The Web Developer.

I’m a Web Developer from Melbourne Australia. I run a small business here called Big Friendly Apes. I’ve often struggled when explaining my occupation to people (“oh, I kinda make websites and stuff...”, or, “you know, I do web stuff... some design, some programming... you know - stuff”). I guess though, after 3 or so years producing media that has been published online 95% of the time, it is time to accept my vocational title and also the blank stares and tactful changes of subject that come with being this kind of nerd.

That said, it’s nice to be this kind of nerd. It is especially nice when someone like Adobe comes along and releases a new version of the software we all use. Will it fix that issue I’ve always had with Flash? Can Photoshop make me any better at photography? Can it zoom to infinite resolution like they can on CSI? (Can you clean up those pixels for me?) Have they put a tabbed interface in something else now? Specifically, the answers to these questions are: Mostly yes, probably not, never in a million years, and yes of course.

However, you’re probably not reading this because you wanted to know any of that stuff, so here, for your general enjoyment, I will review various applications from the CS4 collection that relate specifically to my workflow as a developer of the internets:
  • Flash CS4
  • Photoshop CS4
  • Illustrator CS4
  • Dreamweaver CS4.
Read on!

Flash CS4
Of all the applications that I use on a daily basis, Flash is the one that has recieved the most in this release. I remember when I reviewed Flash CS3, I dug around in various forums and lists to see what people were saying about it’s new features. There seemed to be a lot of animators and non-developer types bemoaning the fact that most of CS3’s enhancements were aimed at developers - no changes to drawing tools or animation workflows were to be seen, whilst developers got a whole new language to work with!

So then, if CS3 was the developer’s version of Flash, then CS4 is very much the animator’s version. Flash CS4 sees the inclusion of Inverse Kinematics (IK) Tools, 3D transformations, an updated (and so much better) tweening model and the Motion Editor. Developers get a hit too though - there is a new Flash Player (10) with some beefed up hardware acceleration and support for the Pixel Bender Toolkit.

The first thing you will notice with Flash CS4, like all the other CS4 apps, is the redesigned interface. Flash is looking good and is sporting a distinctly more Adobe-like feel but still retains much of it’s rustic charm, right down to docking panels that do crazy, crazy things. I have found the interface in Flash fairly infuriating in the past, and I’m not sure that has changed with this release. The docking panels just sometimes don’t do what you want (does anyone else feel my pain with the Actions panel that just won’t expand once it has been contracted?) and the actions window within Flash is constantly losing focus when you switch to another app and back. So often I switch to another application and come back to Flash thinking that the Actions panel would be in focus where I left it, only to end up pasting a bunch of text on to the stage. Argh.

Speaking of the Actions panel, this is one area of the application that has received barely any attention at all. I’d like to see code completion of the quality seen in Flash Develop and other 3rd party development environments but it is clear for this release that attention has been focussed elsewhere, so we’ll have to wait for that one.

Is that all of the negatives I have though? Well, yes really. If you excuse one more little negative regarding Flash CS4’s more CPU intensive operation (to facilitate some of the new features, it has become necessary to have an instance of the Flash Player running in the background at all times) I think that Flash users will be very pleased by what they see in this release.

Here is a brief run down of some of my favourite new features.

Inverse Kinematics - Bone Tool
This is probably the coolest and most immediate new feature. It certainly had a few people gasping when I saw it back at WebDU 2008. This new tool  makes it possible to assign bones to objects on the stage and manipulate them either at authortime or at runtime. In fact, the demo you are seeing below contains NO CODE and was constructed in under a minute! Imagine what you could do in two minutes! Three!

3D Transformations - 3D Rotation Tool, 3D Translation Tool
These two new tools facilitate rotation and translation in 3D space for 2D ‘postcards’. So it isn’t full-blown 3D we’re talking about here, but it’s cool nonetheless. Of course, you can tween the 3D properties of symbols too, either on the stage or using a tween library (like Tweener, or the new one from Grant Skinner, GTween). We can look forward to seeing (and being asked to build) plenty more tilt-o-matic graphic design portfolios from now on.

Object Based Tweening
This is a great new feature that delivers one of my all time most wished for things in Flash - being able to translate an entire tween to another location, and not have to do it keyframe by keyframe. This new Tweening model affords me my wish, and it also provides another useful feature in the motion path - the path of the tween represented as an everyday line that you can edit to finely tune the path of your motion. No more guide layers! Well, no, you can still make guide layers but the workflow to say, animate an object on a curved path, has now become a whole lot better.

The new tweening workflow takes a little adjusting to. Keyframes still exist but there is now the concept of a ‘property’ keframe (not sure about the parlance there, but that will do) which isn’t like another full keyframe but represents changes in only a few properties, not the whole object. This means that between two keyframes, you could change position, and between another two, rotation, all the while keeping the entire sequence as one solid entity that can be moved around, rotated and scaled. That sounds confusing. It just needs to be played with. It’s cool. Trust me.

Motion Editor
The motion editor is a new panel that gives animators more control over the motion of their symbols, using controls very similar to what is seen in After Effects. Basically, a curve that can be adjusted to control the easing of each tween. It isn’t as intuitive as what you’d find in After Effects (if you have ever found anything in After Effects - I swear I lost my keys in there once) but it is great to know that Flash, long seen as a ‘web’ platform (although widely used to create animation), is getting tooled up for some more refined, serious animation work.

Photoshop CS4
When I heard about the new features in Photoshop, I have to say I was pretty excited to hear that there was going to be some more usage of the GPU to give some extra processing power. I heard about slick zooming transitions, pixel overlays at extreme zoom, rotating the canvas (for illustrators I suppose, just like rotating the piece paper they are working on) and faster processing of rotations and translations. Imagine my disappointment when I installed this new version and my graphics card doesn’t support it! I’m using a generation 2 MacBook Pro (Core 2 Duo, 2.2GHz) which is only just a few months over one year old. I guess these new features are only for professionals using newish, professional computers. Wait! That’s me. So disappointed...

Anyways, there are plenty of other features in this new version to be excited about. Firstly, and most notably, are the interface changes. There is a new icon, some new stylings with the panels and such, and the Application Bar. One other change is that, on a Mac, you can now enable the ‘Application Frame’ which, from what I can tell, places a grey background behind your open documents so you don’t see other apps below Photoshop. A simple and effective change, although I haven’t felt compelled to turn it on yet (until now, but still, I’m kind of ambivalent about it).

Interface-wise though, the biggest new feature is the tabbed interface, which brings Photoshop in line with everyone’s favourite interface feature. Right? Well, no. I turned the tabbing off straight away because I like to have bucket loads of documents open at once, and the tabs make that a bit of a pain. Others have complained about the tabs for what they perceived as more fundamental flaws (like the idea that they don’t respect Expose` on the Mac, and such things), but I don’t really care about that stuff too much. I’m not one of those streamline-or-die type users. The one and only reason I turn off the tabs is because I like having heaps of documents open, and I like scattering them all over my monitor (actually, both of my monitors). I do this if I’m cutting up a design that I, or a designer has produced and I’m taking it to the web. I’ll chop one file into hundreds of pieces and paste them into new documents. From there I can ‘Save for Web’ (an old feature that is nicer than ever in this release). I imagine that everyone has a different workflow for this kind of thing, and whilst I think the new tabbed interface won’t fit in with my way of working, you can be thankful that the developers at Adobe at least give you the option of switching the tabs off if you want to. Flexible software is the best software I guess.

Adjustments Panel
I’m really enjoying the new Adjustments panel. This is a bit of a timesaver for me, allowing me to quickly and simply apply a new adjustment layer to the currently selected layer. Adjustment layers were a new thing to me last year, I had previously been a bit of a hack in that area, but this new panel makes it really easy to apply adjustments like Levels, Curves, Hue/Saturation, Vibrance, without destroying the source layer. There is also a handy little button on the bottom of the panel that toggles the ‘clip to previous layer’ function. I guess thats the point with making this kind of panel - take those things you used to dig for and expose them to the user more obviously and they will use them. It works!

Flash Panels

Above you can see a swf I made over a year ago (a simple tree growing algorithm) that I was able to make into a panel in Photoshop just by dropping it in the Plugins->Panels directory.



Why would you need a tree in Photoshop? You don’t. At all. But the big upside is that this new ability to add panels made in Flash to the Photoshop interface allows the developer to control Photoshop in many more meaningful ways than growing some foliage in the sidebar. Adobe have also released an application into Adobe Labs called Configurator that lets you create and manage your own custom panels. Thinking about this and how it is cool, I thought that perhaps some web connected functionality would be really interesting here. Images from Flickr or iStockPhoto that can be dragged directly into a Photoshop document without hitting a browser? This is great functionality, with lots of possiblities.

Photoshop CS4 can now import 3D files (including from 3D Studio and OBJ formatted files) and display them in a document with the ability to translate and rotate the objects. You can also convert standard layers into 3D layers (as an object or as a ‘postcard’, which is a 2D plane in 3D space). This is all very nice but because my GPU isn’t usable with Photoshop, all the rendering is done in software and it is quite slow. So, nice features, but I bet nicer if you have the accelerated graphics!

Content Aware Scale
This is my favourite new feature in Photoshop. As the name implies, this new transformation function analyses the actual content of the layer you are scaling to intelligently work out which bits to squeeze and which bits to leave alone. There is an excellent video demonstrating this here. I remember a guy I use to work for saying that the only way you should ever scale anything is uniformly. At the time he was right, but this feature in Photoshop changes that a little bit. You can now scale things in one dimension and, if you’re careful not to push it too far, trust Photoshop not to make your image look like something from a house of mirrors. It works really well and I think has easily been the new feature I have used the most (that, and the adjustments panel).

Illustrator CS4
Illustrator CS4 has all the new interface changes we’ve seen with the other CS4 apps. Things seem a little simpler in the interface to me, which should hopefully make some features easier to find. Like Photoshop, Illustrator CS4 has also been decked out with a tabbed interface which you may or may not feel the need to switch off. I think the tabs are a better fit for Illustrator than they are for Photoshop - for me anyway because I rarely use Illustrator for the kind of bulk processing that I use Photoshop for regularly.

The great thing about Illustrator CS4 is that is in no way a backwards step. It is a careful, considered upgrade with some nice subtle new features (blob brush, new interface) and some more obvious new features (multiple artboards). Whilst I don’t think it is so fundamentally different from the CS3 version that everyone will instantly want to upgrade, it is definitely a superior version and lots of fun to use.

Multiple Artboards
A great new feature in Illustrator is the addition of support for multiple artboards. This allows you to create multiple work areas in one file that can be of arbitrary shape and size, and all different from one another. You can achieve multiple artboards of the same size using the new document dialog, or you can create new artboards using the Artboard Tool from the tools palette. This would be of great use to designer creating collateral for a project that publishes to a few mediums, or to a few different formats. All the collateral can be kept in the one source file which will allow for easier management.

Transparency in Gradients
Actually, it isn’t only that you can now have transparent gradients (which is great), it’s more that the whole process of making gradients in Illustrator is way less of a pain. When you are choosing the colour stops on the gradient, you now get a popup that has swatches and a colour mixer inside. I’ve always hated the workflow for making gradients in Illustrator and this change has completely altered that. Excellent work.

Blob Brush
The new Blob Brush tool is a painting tool that creates a vector shape when you paint, merging any lines that intersect as you go into one big blog. Aptly named, don’t you think? This tool has a nice ‘free’, fluid feel about it, that lets you paddock-bash a little more with the drawing tools, rather than always be worrying about vectors and curves and the like.

Dreamweaver CS4
I don’t use Dreamweaver much, I have to say. When I’m developing I’m either working in Flash (using Flex Builder, Flash IDE or FlashDevelop) or I’m doing work with HTML/CSS/JavaScript or PHP, in which case I use Panic’s excellent Coda. Why don’t I use Dreamweaver? Well, I think I’ve always thought of it as a bit of a clumsy giant - it is a massive, richly featured application that  has traditionally generated fairly bloated HTML, something which I loathe. It has a ‘Design’ view that differs in output from a standards compliant browser (and that’s what I really need). And as far as managing a remote site is concerned, I’ve just never really thought it could cut it as an FTP client, when we have FileZilla on Windows, and Transmit and Coda on the Mac.

One thing that I have seen people using Dreamweaver for is text search over multiple files.  And believe me, I have seen a lot of people using it for that, and ONLY that. Imagine, a tool so big and powerful, yet there are developers who crack it open just to do a text search! I don’t think Adobe are going to start marketing Dreamweaver as ‘the worlds most powerful multiple-file search appliance’, so what have they given us with this new version that might make Dreamweaver more useful? Luckily, they have made a fair few changes - removed some not so useful features (Timelines, Web services, Layout mode, Site Map view, Java Bean support, Adobe® Flash elements Image Viewer, Adobe® Flash text and Adobe® Flash buttons, ASP.NET and JSP server behaviors and recordsets) and added some useful ones, among them:

SVN support: support for Subversion version control
Live View: Webkit based! Standards compliant! Yes and yes!
Ability to incorporate jQuery, Prototype and Spry code hinting. The kids love the code hinting
A redesigned interface: like everything else in CS4

Of all these, Live View is my favourite. Showing a more realistic preview of what the page will look like in a browser is a smart addition, and probably something that most developers would consider fundamental. There is also a feature called Live Code, which lets you freeze any JavaScript in a page, for example, so that you may examine it’s state at a particular time. You can also edit CSS and JavaScript and refresh the page to see what effect it had. Debug tools like this, combined with the Live View feature, allow a developer to do more development without actually leaving the Dreamweaver environment. These tools provide similar functionality to that provided by tools like Firebug for Firefox, but mean that you don’t have to switch applications, which is nice.

Dreamweaver CS4 is closer to what a web development tool should be than it’s predecessors - an environment rich with development tools and debugging features that allows a developer to do more with less tools. For many web developers, this will result in a better workflow, and that is good for everybody.

So, to summarise...
So, I guess by reading all the way to the end of this review you’re wanting to know, “Is it worth buying this product?”. My answer would be yes. It’s worth it for Flash alone! Plus there are loads of other features across the suite to warrant and upgrade of new purchase. And lets not forget aesthetics. Although not as important to most as new features, the whole suite is looking more cohesive and slicker than ever. Adobe are starting to really stamp themselves over the applications they acquired from Macromedia, unifying interfaces across the suite and creating more and better ways to allow interoperability between apps like XFL - the new XML based Flash format that After Effects and Flash both understand.

All of the reviewed applications are available in the Design Premium (AUD $1215 upgrade, AUD $3635 purchase), Web Premium (AUD $1215 upgrade, AUD $3435 purchase) and Master Suite (AUD $1819 upgrade, AUD $5049 purchase) products.