AdvancED Flash Interface Design

18 comments | Posted: 31 May 06 in Books, by Nathan Smith

AdvancED Flash Interface Design AdvancED Flash Interface Design is the latest installment from Friends of ED. Incidentally, while reading an interview with Chris Mills, I recently learned that the ED in the title is capitalized for a reason. “Friends of Every Designer” is what the company name stands for. Read blogs folks, you’ll have many serendipitous moments. Anyway, this book was very practical, filled with an enormous amount of information, all of which is very applicable on a day to day basis. This quote from Chris’ blog sums it up quite nicely…

You know those tech books you read and go “yeah, this is all well and good, but would I ever REALLY do any of this in my work?” Well, this book isn’t like that – it’s nothing but real-world Flash design teachings for those of you who have already got past the basics, but want to take your work further, with creative, inspirational techniques.

Since my official job description is Web User Interface Designer / Developer, I figured it would be right up my alley. I chimed in with a comment on his blog post regarding this book, and he was nice enough to send me a review copy. It was written by a trio of talented Flash guys: Michael Kemper, Guido Rosso and Brian Monnone. What I like is that while this series is geared towards Flash, it covers fundamentals that are essential to any sort of visual or graphic design.

Like any book, it starts with an overview of the topic, pointing out some of the benefits of Flash, while also acknowledging a few of its drawbacks. They are quick to point out that long loading times and inaccessible content are a stigma which Flash is helping to overcome. Loading times can be avoided through smart planning of content (ala Ajax, loading things as needed) and Flash can actually be used to add sub-titles to video and such.

Chapters two through five focus on user experience, color theory, interface design and vector drawing. The content therein could be used for a design class as a textbook. Seriously, it’s that good. Also, I like the way the book is planned out. Most of it is black and white, with figures that are contained in a color section. This is a great compromise between keeping printing costs low, while not missing out on some design nuance, because there are color pages too.

Chapters six and seven delve more into the Flash interface itself, covering advanced uses of the timeline and layers, and showing how to use Flash for vector drawing. In the past, these tools were considered to be sub-par, but as of version 8 it has really come into its own for creating non-destructive effects. These same effects can also be manipulated, created and removed with ActionScript. It should be noted that there is also a fair bit of Adobe Illustrator and Photoshop techniques covered, throughout the entirety of the book.

Chapter 8 was a departure into the realm of video, talking about the various codecs that can be used. It also showed how to do green screen effects with Apple Final Cut Pro. Once you have isolated the video clips you want to make use of, they can then be taken into the Flash environment for seamless integration with your site’s interface. Think of Adobe’s own site, which has many full-motion video narrators who walk you through their varying content.

While Flash’s forte is vectors, occasionally you will find yourself needing pixel-precision. Chapters 9 and 10 are about achieving this with Photoshop, and how to make raster (bitmap) images with the smallest footprints. This is usually done by exporting PNG files with the correct amount of compression and opacity. One of the nice things about Flash is that IE6 has no problem rendering PNG opacity when used in conjunction with Flash. Many of you CSS guys will know what a headache this is to do otherwise, using inelegant GIF files.

The last few chapters cover creating animated effects, Flash textures, and finishing off a site. They cover some nice tweening and transformation effects, and also show how to make water textures with distortion filters and a background image. If you’ve seen water in games like Unreal Tournament, you will know what I’m talking about. The final chapter covers attention to detail that will make the difference between good work and great work. It teaches how to sweat the small stuff, without being too much of a perfectionist.

My one and only complaint is that this book focused so heavily on Illustrator, when Fireworks is perhaps a more seamlessly integrated tool, and many people who have purchased Studio 8 for Flash and Dreamweaver already have it bundled. Nevertheless, many of the concepts carry over to whatever graphics program you prefer. All in all, this is a very strong title and a must-have for those who do a lot of cross-disciplinary work or just want to branch out into another aspect of web design. I like to think of Flash as SWAT – You don’t call ‘em in for just anything, but it’s great when you really need high impact.

Discuss This Topic

  1. 1 beth

    I might have to pick this up for the office, I’ve yet to read a Friends of Ed book that wasn’t worth every penny. I notice a lot of people are talking less and less about Fireworks now, it would seem everyone’s just waiting for the axe to drop. I might start making the migration to Illustrator myself. I just hope if Adobe drops it, they at least integrate it’s best features into Illustrator.

     
  2. 2 Nate Klaiber

    Nice review. The last flash book I read was ‘Foundation Actionscript’ by Friends of ED and I absolutely loved it! They do an incredible job of giving you USEFUL information, practices, and tools. It has been a while since I have read a flash book, mainly because I have not found a place where it would be effective/efficient where I work.

    Personally, when you are talking flash – the nerd side of me instantly goes to Action Script. I see so many bloated flash movies that are completely timeline based. Action Script is a very powerful and integral part to flash.

    Maybe they focused on Illustrator because Adobe just bought out Macromedia and they want to phase out Fireworks. Hehehe. One could only hope….

    Thanks for the great review!

     
  3. 3 Nathan Smith

    Beth: Actually, Adobe announced awhile ago that Fireworks will be around for a long, long time. They did cut GoLive and Freehand though, one of their own products and one acquired from Macromedia. You can read this article from the Adobe blog, calling Fireworks a player, and listing it before Photoshop.

    Nate: I’m not sure why you “hope” they phase out Fireworks. I think the book focused on Illustrator because formal design training often centers around print techniques. Illustrator and Photoshop are first and foremost programs for working with (gasp!) illustrations and photos for printable media, whereas Fireworks is primarily a tool for creating web graphics. Heck, Jon Hicks used it to make the Firefox logo, so I don’t think it’s in any danger of getting the “axe.” By the way, check out Greg Storey's opinion of Illustrator here, funny stuff.

    Anyway, do your homework people, before you buy into the ignorant assumptions of the blogosphere. Fireworks is a better program for web graphics than Illustrator, hands down. Both are good for what they do best, but Illustrator / Photoshop are really not primarily web graphics tools.

     
  4. 4 Tank

    It’s an awesome book. Monnone is a good friend and we’ve worked with him on a project we’ve done and the guy knows his stuff with Flash. That’s what I love about Friends Of Ed books, they always pull the professional people to author their books. Great review Nathan!

     
  5. 5 beth

    Nathan, thanks for the link, glad to see Fireworks isn’t being dumped! Maybe they’ll make it a little more compatible with Illustrator so I don’t want to pull my hair out everytime someone at work hands me one of their files and says “make this into a web page.”

    Speaking of blogosphere hot air, I heard the Freehand/GoLive talk was just that in this article. Apparently someone jumped the gun over at MacNN.

     
  6. 6 Brian Monnone

    Hey everyone! Thank you so much for reviewing my latest book and thanks a ton for the wonderful comments here! I really appreciate hearing comments from the people who are actually going to be using the books (good or bad).

    We are REALLY excited about this book because it’s a no-hold-bars approach to working with bitmap programs like Photoshop (insert fav editor here – ‘Fireworks’ – ;) and applying techniques that work well within Flash. Of course we cover a lot of other things that you might find interesting such as the new features in Flash 8.

    Again, thank you very much. It is much appreciated!

    ps – I LOVE the design on this site. Very functional and clean! Hey Tank! How you been bro?!

    brian monnone

     
  7. 7 Michael Kemper

    Thanks for all of your input – I am very excited about the book generating conversations like this one. After all of the hard work we put into this book it’s thrilling to read about how this helps other designers and developers. There are allot of good points discussed by everyone here, but one point I would like to address is the topic about Illustrator being covered so thoroughly. Nathan is correct that we focused on using Illustrator because it is one of the fundamental applications used by formally trained designers of most media including video and print. This was important to me since many other talented creative people are interested in learning how to design in Flash but aren’t comfortable getting right into it – but they are comfortable with Illustrator. So the ability to use Illustrator as a jumping off point might be encouraging. Plus, I find that when I’m teaching designers Flash techniques it is an easier leap to make from Illustrator to Flash than any other drawing app since they are both vector based – it is the same basic paradigm for drawing. And as it was pointed out, Freehand is getting phased out with the Adobe / Macromedia merger so Illustrator was the obvious choice over Freehand. I personally start every design in Illustrator – it’s my favorite design application. I have never really used fireworks much; I use PhotoShop and Image Ready for all of my bitmap graphics. I actually thought there would be a little bit of an outrage over covering the video chapter in Final Cut since it is focused on MAC users, but I tried to make it clear in the book that there are many features that translate from Final Cut to other PC friendly apps like Premier. So I guess that was understood and it’s a mute point. I would like feedback about the first couple of chapters on interaction design and experience design – this is the topic that truly interests me the most. What did readers think about the sections on creative direction, narrative, critiques, and so on? I feel like the interactive design industry as a whole has been shoehorned into a model that is based on a more advertising/design firm creative model. It is my hopes to help define what works best for designers focused on interactive design and these topics as presented in the book is a step in that direction. If anyone is interested I will be speaking on these topics at the SF Multimedia Users Forum, (formally “SF Macromedia Users Forum”) here in San Francisco on June 6th at 6:00 – 9:00 PM at the Adobe SF office (formally the Macromedia office…). More info will be posted here soon:

    http://www.sfmmuf.org/

    Thanks for the discussion and for supporting my publisher!

     
  8. 8 Nathan Smith

    I would like feedback about the first couple of chapters on interaction design and experience design – this is the topic that truly interests me the most. What did readers think about the sections on creative direction, narrative, critiques, and so on?

    Michael:

    I have worked with Final Cut Pro on a few occasions, and pretty much agree that it’s one of the best video editing programs out there. So, a chapter on video being Mac-centric did not really even seem like an issue to me, since everyone already acknowledges Macs as the defacto standard for video.

    To answer your question about the first few chapter though, I thought they were great. So many times, we jump right into designing things, like you said with a marketing mentality – wanting to communicate branding as the top priority. I really like the approach that you guys have taken, making it more about how to create an intuitive user experience by using strong design fundametals.

    Brian: Thanks for your kind words about this site. I was afraid it might be too far of a departure from a standard white background, but am glad you like it. By the way, I did all of the mockups and images for this site in Fireworks.

    As far as the whole sticking up for Fireworks thing, hopefully I didn’t come across as reactionary. It just irks me when people refer to it as some expendable program, secondary to Dreamweaver or Flash, when it is a powerful and versatile tool in it’s own right. I don’t want to diminish Illustrator or Photoshop, as they are both very good. I just wanted to make sure Fireworks gets its well deserved spot at the table of top-notch graphics.

     
  9. 9 Nate Klaiber

    RE: Nathan
    Sorry, I wasnt really casting hatred upon fireworks – but for web stuff I would much rather use Photoshop than fireworks. Yes, there are many more web options with fireworks, but the output is literally horrendous, I would rather have more control myself over the actual html output. I dont use illustrator and I never really have – but I have used fireworks and wasnt extremely impressed with it. However, it may be very good at creating web graphics – I have just always used Photoshop.

    So, I didnt intend to bash or make you upset, it was more of a joking manner as I have been speculating which applications will merge between the two, and which ones will be scrapped for the other. I am not really biased one way or another.

     
  10. 10 Nathan Smith

    Oh, I agree. Anyone that uses a graphics program to generate their HTML might as well be in a different profession. Hopefully you didn’t think that I actually do that. That’s asking for a whole heck of trouble, moreso than leaning on the Dreamweaver crutch. I just like Fireworks because it’s super-efficient in dealing with vectors and effects can be added / tweaked in a non-linear way. I agree that Photoshop is also a very good program in its own right. It’s apples and oranges really – the king of vector / king of raster images. They can be complimentary, and certainly are not mutually exclusive. In short, peace.

     
  11. 11 Nathan Klaiber

    agreed :)

     
  12. 12 Ben Carlson

    Sorry guys, but I prefer MS Paint.

    (See my latest creation: http://www.fakeality.com/img/bearandme.JPG)

    ...

    Took a Flash class last semester and really enjoyed it, too bad it seemed very short and we just touched the basics of actionscripting.

     
  13. 13 Tobi

    @Ben: Cool image! MS Paint rulez… ;-) Personally, I use GIMP and Inkscape.

     
  14. 14 Nathan Klaiber

    RE: Ben
    That is incredible! hahah….

     
  15. 15 Tank

    Hey Brian! Man just been busy with projects and stuff. Glad you stopped by!

     
  16. 16 Ben Carlson

    Yeah we have this black bear that kinda lives around my apartments (I live in the upper peninsula of Michigan) and by the end of the summer him and I are going to be buds. =)

     
  17. 17 Bryan Chalker

    FOE keeps impressing :)

    They filed Chapter 11 a few years ago, breaking countless hearts in Flash circles, but they’ve since rose from the ashes. They’ve been churning out the absolute best stuff on Flash usability/design/data integration out there.

     
  18. 18 Monnone

    I was in the thick of that Chapter 11. Believe me, it took all of us by surprize. Apress came in and kept the FOE fire alive. I think this was the best thing for them. I also think the quality of work has been improved greatly and we all will benefit from it. Especially with the addition of Michael Kemper…he’s awesome.

     

Comments closed after 2 weeks.