$MTBlogName encode_html="1"$

vCam.v2

The Flash virtual camera v2 is nearing release...

Unlike many 3D applications (3DMax, Softimage, etc), Flash content is based around the concept of a static stage, and does not have a virtual camera. Last year, I created a Flash virtual camera (the 'vCam'), and you can read all about it here.

Although the vCam is very simple, amazingly, nobody had ever thought to do one before, and there was an army of animators who found it very useful. It appears in all sorts of award winning Flash animations, such as previous TGSNT winners and Flash forward finalists.

Anyway, I have been continually asked to add a number of new features. In particular, the most requested addition is the ability to add rotation transitions.

Well, we (me and Dave Dixon, .NET guy from work) have just finished such a vCam, and are busy getting something to Adam Phillips (our animator of choice) so he can test it and tell us if its good to go.

I'm a little tied up at the moment with some client work and book production, but watch this blog for the download link and example files, coming soon.

Added to this post 30 September 2005
To answer some email queries sent to me regarding this post, I am aware that others have created versions of the vCam as a commercial product. My vCam will be a free download.

Posted by motiongraphics at 10:14 PM | Comments (35)

Handbook for Bloggers and cyber-dissidents

Its cool to be able to spend your time bloging about Flash, iPod, CSS trivia and other non-issues-for-anyone-except-a-geek, but sometimes you see something important from the tech world that really needs to be publicised…

Not only is the Handbook for Bloggers and cyber-dissidents a good read for experienced bloggers (it lists personal accounts of blogging from places such as Bahrain, Iran and Nepal), but it also contains good 'how to set up a blog' guidelines for everyone else.

Oh, and as well as being better than most beginner blogging books, and containing more insight about the true political role of blogging than 100% of the tech/design blogs out there (including of course this blog), it is also free.

Get it, read it, tell people.

See also this and this.

Posted by motiongraphics at 12:38 PM | Comments (1)

We need YOU...

There are a few job vacancies at the shop I work at (North of England)...

Large design house (mostly e-learning, 6 ActionScript developers, 20 Flash content creators), location Shipley, West Yorkshire

First one is for an ActionScript developer (must have plenty of ActionScript 2.0 experience in applications using webservices, XML, etc - you will be creating Actionscript based engines that drive the Flash content... if you only do classes that control bouncing balls, you will get found out!).

Second one is for a Senior Graphic Designer (Illustrator, Photoshop, Flash, HTML - portfolio/links essential).

Applications by 30th September 2005.

Website is here (ignore the fact that the website says they have no vacancies - we're all far too busy to update the damn thing!).

Posted by motiongraphics at 10:37 AM | Comments (1)

Go to the Opera for free

Opera is now free. Lightweight, feature packed, and much more secure than certain other browsers. Bargain!

Opera was previously available only as a free but banner infested version or a paid for premium version. You can now get a free and banner free version here.

For non web designers, why switch from the all-conquering Internet Explorer? Well... there's always this.

For web designers, the news that Opera is now free means that we need to start considering Opera a little more in our cross-browser compatibility testing because more people will surely start using it... but we always test all our designs on the top 5 browsers anyway, right?

Posted by motiongraphics at 12:26 PM | Comments (1)

Article... about moi ?!

There's a rather long interview of (cough cough) me called 'Hacking Life' in the March/April edition of Computer Graphics & Publishing...

The interview is by Barbara Sansome, and it is published in Computer Graphics And Publishing, Febriuary 2005 issue (edition dated March/April 2005).

You can view all editions of CG&P for 2005 here, and there is an online version of the article (pdf, 500k) here. Note that CG&P is an Italian publication, and the text of the article in the PDF is also in Italian. Nevertheless, the article displays some of my previously unpublished artwork.

For those who can't read Itailan, here's some edited highlights from the original (English language) interview:

Q: Can you tell me your studies and your training? It seems that you know a lot about visual art, music, math, video and so on...

A: Unlike many designers, my formal training was purely technical. I was trained as an engineer, and am also chartered (and still am). A lot of the work I did following training was design based though - creating screens for safety critical computer systems (the sort of thing you see in aircraft cockpits and stuff), so there is a strong link between the work I did then and the work I do now - it’s all user interfaces.

I thought I would be the only engineer in web design, but there's lots of them around - yugo (www.yugop.com) and voxAngelica (www.voxangelica.net) are also trained engineers or architects who are well known in Flash web design for example.

Q: Who or what inspires your work?

A: I spent a lot of time working on Soviet designs in an earlier career. That’s not Soviet graphic design but industrial stuff - Nuclear power stations and other stuff like that - but I really liked the way everything they built was so over engineered and huge. I was part of a team of 6 engineers that was tasked with reviewing some of their nuclear designs to Western safety standards and advise them, but I think a lot of knowledge went the other way and affected me in terms of aesthetics.

Following strong style movements like that are good when you are younger (because they make a lot of decisions for you) but as you get older they become constrictions, so I don’t really go for that sort of stuff as a design style in my work now.

Q: Is hacking your life philosophy?

A: Everything is a hack when you are being creative, because new ideas have not had time to have rules attached to them, and that’s what hacking is all about - taking something and working with it in the absence of any rules.
Flash web design is all about hacks, because when you start, you begin with a bandwidth and performance limited environment. The trick is to make the user think you have all the bandwidth you need, and create something responsive and cool despite the limitations. To do that, you need to be hacking against all the problems all the time, coming out with new ideas and shortcuts. So yeah, design is all about hacking old ideas and thoughts to come up with better, new stuff.

Q: What software do you use more often and why?

A: The software I use the most in everyday design are Flash, Photoshop, Audition and SoftImageXSI. At the moment, I am also learning Combusion. I guess the last two might surprise a few people. For me, It’s an obvious progression.
Macromedia and others will tell you that the next big thing Is Rich Internet Applications. I think that is the case, but the concept of the RIA is looking at the supply side. Looking at the consumer side and thinking about what the user actually wants from their web experience, I think it will be video and live streams.

A: You're a great programmer. How do you like programming? Do you think that's a creative activity? In which sense?

A: flash is almost two applications in one. There is the stage and the graphic creation tools, and there is ActionScript. Although you can create content without ActionScript, if you do it that way, you lose the ability to create truly interactive content that uses the full facilities of the Flash player. So, for me, programming with ActionScript isnt something that is important for the sake of itself. Rather, it is the ticket that gains you entry to a treasure room full of all the high end features offered by Flash.
Knowing how to use ActionScript therefore gives you far more design options. there have been many people who have come from a design background and learnt ActionScript. The big change in their designs is obvious. Its like an artist who only knew about black and white paints suddenly discovering color. the creative possibilities suddenly go up in a very large way!

Q: Has new media and the Internet changed the art field?

A: I don’t think internet art has really 'broken through' yet. Traditional art is referential, because every famous traditional artist is part of a movement, or their work Is related or derived from other historical artist. There Is actually a hierarchy in art, and because web art doesn’t fit this hierarchy, it hasn’t broken through.
I think another big reason that web art doesn’t break Into fine art is because it is very quickly consumed by traditional web design and becomes part of graphic design rather than fine art. If you look at a lot of the Javascript based web art that was popular in the 1990,s you will see many of those ideas now adopted in traditional Flash UI design.

Q: A retorical and maybe banal question, but always provoking curiosity: what do you think that art is? Who's the artist, what does he do? Do you consider yourself an artist?

A: I think there are actually three parts to the creative process, and they are always lumped together incorrectly as 'art'. The three are design, art and storytelling.

so the answer is that I don’t consider myself an artist, because I create web sites, and they are a designed thing...so I am a designer. But in design, you will always crossover into art and narrative.

Posted by motiongraphics at 10:44 PM | Comments (0)

Flash 8 filters

One of the biggest new features of Flash 8 is the filter and blending modes. Although the code required for scripted effects using filters can be daunting for the beginner (and let's face it, theres no end of sites currently showing ActionScript heavy Flash 8 effects, so I dont think I need to go into that here), here's a few script free examples for the don't-do-scripting Flash designers to pore over (sample files included)...

When Photoshop first started supporing layered blend modes and began going in for filtered effects bigtime, the world was full of tutorials showing you how to create various text effects. (Un)luckily, many of these effects are still around online, so I thought it would be a good idea to try to recreate many of them with Flash 8. Waddaya know, most of them worked as well. Here's a selection.

All the above effects started off with the same sans font. Each text effect has Flash filters applied at runtime, so there is little additional download caused by these effects. Because the effects are applied at runtime, you can use the text effects on dynamic text (such as user input textfields).
You can download the source FLA file as a zip (5k) here. Note that this is a Flash 8 Pro specific file, and it will not open in anything else.

Once you have the FLA open, you can see how each text effect was created by clicking on the text on the Flash stage and viewing the filters tab of the Properties panel.

OF course, text effects are cool as a learning device, but they are not that practical... and other designers will be prone to laughing openly in the streets at you (and perhaps fart in your general direction) if you use text effects to the same extent as the above example in a real design.

What is needed in design work is a less-is-more approach. The Flash menu below is an example of this.

The 3D buttons are created with nothing more than a white circle with a couple of filters applied to it. You can see this menu in operation in the swf below (you may see a blank space if you do not have the Flash 8 player installed), or you can see a working example of this file in a new browser here (requires the Flash 8 player to be installed), and the source files here (zip file, 5K). Note that the FLA is again Flash 8 Pro specific.

The buttons will change due to user interaction (they have different appearances for the up, over and down states). These changes are caused by changing the filter effects - the physical button graphic actually remains the same. This is of course a very powerful trick when designing animated user interfaces. Changing filter effects rather than creating new graphics results in very bandwidth friendly components.

Thus, although it's totally possible to go over the top with filter effects (resulting in a site that will look so yesterday by tomorrow, once everyone knows the trickery), careful use of filter effects can create low bandwidth graphics that look great despite their small size. Additionally, filter effects can be added via a quick couple of clicks, so the amount of time needed to create something like the menu above has gone down from hours to seconds when you use Flash 8.

This entry is based on work carried out for the book Foundation Flash, and a fuller tutorial on these effects can be found in that book.

Posted by motiongraphics at 11:17 PM | Comments (1)

How we learned to live with the (dot com) bomb

Whilst looking through some archived files today, I came across some old correspondence that spanned the dot-com boom and bust years. It is interesting to look back and see how big an effect the dot com boom-bust had on sales of books, particularly books on Motion Graphics…

The graph below is taken from Nielson Bookscan data, which is considered by the industry to be the most accurate third party book sales data for the US market (the US market being the most important market for web design books).

Although the data on this graph is now obsolete, the graph illustrates the fall in book sales per publisher for Flash books immediately after the dot com bust. As you can see, it doesn’t paint a pretty picture.

The following is my opinion on the data. Every publisher/writer will most likely have their own spin on this.

The biggest losers were those publishers who clung on to old style books - big bible style editions or reference books that were essentially print versions of the stuff anyone can already get from the web, or teaching books that were academic rather than practical. The sorts of book that held up during the downturn were those that contained information structured in a way that actually gave added value by being formatted as printed books - i.e. books that were meant to be read from cover to cover (taking in much more information than you ever could from a website or TV), or books that were seen as definitive and concise, practical, or just plain prettier in print.

There is also the issue that web design and I.T. in general has moved from a nascent and new frontier to an established industry during the dot com boom-bust period, so the need now is for replacement and maintenance rather than pioneering. This means there is less of a demand to learn new stuff, and the information is easy to come by from multiple sources. Finally, there is the effects on investment that the attack on the WTC caused, and the slowdown in I.T following it.

Although the market has recovered slightly since the timeframe of this graph, there is also the issue of extreme competition and many more titles being published, so the return per title has actually been very low during 2003-2004; 50 to 25% of what it used to be. there is some evidence that this is changing, however, with fewer books been published in 2005-2006.

So why do us authors still write? Well, I can only speak for myself. Rather than being a full time writer who did web design, I am now a full time web designer who writes books. Although I write fewer books, I have a much more immediate exposure to the coal face of practical web design, and I can see how this has made my recent output much more pertinent.

Also, I actually enjoy both writing and designing, because both avoid me having to engage in the thing that least interests me - anything that requires me to take part as the audience. This is not because I like to be in the limelight (far from it - I am not a 'scene' designer by any stretch!), but because I hate 'not doing' and - especially - 'not creating'.

To this end, there are all sorts of new ideas I’m looking at right now. The only trouble these days is finding the time to sleep after fitting it all in… but I count that as a good thing!

Posted by motiongraphics at 10:27 PM | Comments (0)

What co-authors discuss when writing...

I guess most readers expect book co-authors to be constantly in communication when writing books, discussing all the finer technical points of the subject in hand, constantly refining the content.

Well...

... we are for the most part, but there's always the chance that you end up working with a co-author who knows his/her stuff, but doesn't really connect and have fun at the same time.
I hate it when that happens (and it happens a lot), because the overall personality of the book suffers. Books that are easy and fun to get through for the reader were usually easy and fun to write.

Fortunately, my current co-author, Adam Phillips shares the same off beat and unusually stupid sense of humour as me. Every hour of technical discussion we engage in is surrounded by an hour of irrelevent chat on either side, as we bounce off-beat webdesign ideas off each other, talk about clients (nuff said), other designers, or just plain crap.

Here's an example of the latter - Adam had a contract to create a number of concept drawings of lesser known Marvel superheros (as in 'we need to create some mock-ups because we're going to do loads of cartoon features because Hollywood and everyone else is into superheroes right now').

Um. Except that he started a discussion about it with me in the middle of discussing the book, and that sense of stupidity got in the way, yet again... here's Adams revised concept post chat (scroll down).
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Roll on Spiderman III...ahem.

Posted by motiongraphics at 07:17 PM | Comments (0)

Flash 8 now shipping....

Nice article based on early beta hands-on experience of Flash 8 here. Get your trial here. Oh, and you can buy it here.

Worth noting that, unlike in MX 2004, the difference between Flash 8 Pro and Flash 8 Basic is not based along developer-designer lines, but on 'I use Flash professionally' vs. 'I use Flash occasionally.

This means that most existing Flash developers and designers will need the Flash 8 Pro edition. However, it has to be said that most of the design oriented features of Flash 8 Pro require a fair understanding of ActionScript, so it looks like ActionScript is now even more important to the creation of compelling Flash design.

Added 3 October 2005
There's a making of Flash 8 video here.

Posted by motiongraphics at 08:53 AM | Comments (0)

Flash 8 and AsBroadcaster

The previously undocumented AsBroadcaster listener event system is now part of Flash 8... but do we really need it when we've rolled our own in Flash 7 (and the home grown version is a mellower smoke)?

Note: this post assumes a good understanding of ActionScript2.0 class based coding.

One of the coolest 'cool but undocumented' features of Flash 7 (a.k.a MX 2004) was AsBroadcaster. This useful class allows your custom classes to pass events between each other, something that you need when creating complex class based structures

For example, in web applications, you will want to create a class that maintains the underlying webservice as well as creating an event handling model that allows the rest of your code to respond automatically to service traffic. To do this effectively, you need to define custom event handling within your classes, and this is what AsBroadcaster allows you to set up.

However, Flash 7 AsBroadcaster sufferred from two problems.

Firstly, it was undocumented, so your boss wouldn't like you to use it, just in case it got changed in Flash 8 (and all your applications stopped working). Now that AsBroadcaster is documented, this is not an issue, but the undocumented status most likely prevented any real serious use in Flash 7.

Secondly, and more subtly (i.e - you won't realise this until you actually try to use Asbroadcaster a few times...), you can't use dynamic classes (such as AsBroadcaster) in static classes. The problem here is that some of the most likely classes that would benefit from being broadcasters are the base (and invariably) static classes that underpin the sort of complex system where you would want to use a broadcaster-listener system in the first place...

... which is why, in Flash 7, I deconstructed AsBroadcaster and created my own simple broadcast methods. Once you do this, it becomes apparent that broadcaster-listener systems are very simple in their construction.

All a broadcaster-listener event system consists of is a list of registered listeners, held by the broadcaster. This list is nothing more than an array of method (Function) references. When the broadcaster broadcasts an event, all it actually does is cycle through the listener list, invoking all the method references.

This is easily created in your own classes without ever needing to use AsBroadcaster at all. Your addListener method is simply a 'push to array', and the broadcast method just cycles through the array, calling the broadcast method for each registered object.

Here's an example (highly simplified) broadcasting class:

class CBroadcast {
  //  CBroadcaster class definition
  var m_listeners:Array;
  //
  function CBroadcast() {
    m_listeners = new Array();
  }
  //
  public function addListener(anObj:Object):Void {
    //  This function registers a listener to CBroadcast.
    // 
    m_listeners.push(anObj);
  }
  //
  public function broadcast(msg:String):Void {
    //  This function broadcasts to all registered listeners.
    //  If a listener (say aListener) has the function aListener.msg, 
    //  that function will be executed.
    //
    for (var i = 0; i<m_listeners.length; i++) {
      m_listeners[i][msg]();
    }
  }
  //
}

Here's a corresponding listening class:

class CListen {
  //  CListen class definition
  //
  function CListen() {
  }
  //
  public function anEvent():Void {
    trace("CListen: I heard the anEvent event.");
  }
  //
}

Assuming you have saved these two classes as Cbroadcast.as and CListen.as, you can test your custom broadcaster-listener event model with the following FLA code:

var aBroadcaster:CBroadcast = new CBroadcast();
var aListener1:CListen = new CListen();
var aListener2:CListen = new CListen();
aBroadcaster.addListener(aListener1);
aBroadcaster.addListener(aListener2);
aBroadcaster.broadcast("anEvent");

Your CListen instances will both execute the CListen.anEvent method (event) when the CBroadcast class calls Cbroadcast.broadcast("anEvent").

This is a powerful way to add a custom event model to your classes, and works even when your classes are static. Further, it works in both Flash 8 and Flash 7 - by 'works' we mean 'your boss would allow you to use it, even in Flash 7'.

Bonus!

Posted by motiongraphics at 02:52 AM | Comments (1)

Cool design always beats cool technology

I was doing my weekly 'Let's see what is cool on the web since last time I looked' gig, when I can across this site...

Nice motion graphics UI, sharp, clear design, and surprisingly, not a hint of Flash in sight: iancoyle.com. If he made it so that the site centers on the currently expanded image, this would be perfection (hint hint).

Other recent must see sites include:

Good design is something you notice. Flawless design is more subtle than that: particletree

Im not sure what a colourmod is, but after seeing the design on this site, I know I've gotta have one.

A layout that just exhudes quality: Stonewall

Posted by motiongraphics at 11:01 PM | Comments (2)

Previews of stuff in progress

Some work in progress files...

Here's a few files that show what I've been up to in the last few weeks:

FashionIsSoLastSeason is a quick and simple Flash site template that I've put together to show how easy it can be to create a bandwidth light site UI using Flash and ActionScript. You can download the source zip file here (100kb). The 'Fashion' site is discussed in greater detail in an upcoming book, Mastering Flash Design, written by myself and Adam Phillips (O'Reilly). It is also referenced in a book by Sybex, where I wrote a few chapters to help out.

The original futuremedia site was the book example site for Foundation ActionScript for Flash MX 2004. Im currently updating it to make use of Flash 8's new features. I'm also fixing a few issues that a few users disliked about it, mainly the fact that there was no way of seeing a full site map. Well, as you can (possibly) just make out from the preview image, the UI start page itself is just that - a complete site map.

I'm not sure if the futuremedia site will make it into the Flash 8 ActionScript book, but I'll post the link for the finished site files on this weblog when I'm done. Assuming it doesnt make it into the book, I'm considering making the futuremedia v2 site code use AS2.0 classes throughout, so that it will act as a primer into class based AS for folks who learned structured code from futuremedia v1.

Finally, I'm working on a number of enhancements to the Flash page turn effect that you can see here. I'm looking at adding a number of enhancements as requested by readers of the article, plus making it more efficient by utilizing new Flash 8 performance enhancements. Again, I'll post on this weblog when its done (oh - and since its a Flash 8 file, I dont think I can post the FLA until after Flash 8 release, goddamn it).

Posted by motiongraphics at 08:16 PM | Comments (4)

It moves! It breathes!

Oyea. I've finally set up that weblog I've been promising myself for ages. I'm on a mission now. I can feel it in my trousers.
I may even put the main site, motion-graphics.org, onto a non-vapourware footing soon.

Well, actually...

...now is a good time for me to start a new site/blog thing. As well as being a Flash web developer during the day job, I am a sometime author of Macromedia Flash books. Flash 8 release is imminent, perhaps within the next two weeks.
As with most Flash authors, I'm already gearing up to this Flash 8 release, with my first book nearing completion. Starting a blog at the start of this cycle just seems a natural action.

Posted by motiongraphics at 05:34 PM | Comments (1)