Whoops

My blog has becone corrupted Normal service will be resumed...

(updated 2nd Jan 2008)

Yup, site is still broken... you can't add comments for some of the entries (I think - and hope - I've fixed all but one), and I've got some entries to put up but am sstill having difficulties with my moveabletype installation.

This isn't an excuce for not updating my blog of course; that has not occurred simply because I've been working all hours. I've recently put in some long hours on a Flex based real time multi user world (you can see it here). Previous to that, I was working on some e-learning authoring stuff (again, in flex). Oh, and I also changed company recently.

To answer some questions that have been posted by readers, but which dont seem to have made it online because of the recent blog corruption;

• Yes I am still alive, and yes, the blog has been dead recently, but that is hopefully set to change.


• No, I have not written any books for a while, and will not be writing any Flash CS3 books this year. The reasons for this are several, but include; not being on the CS3 closed beta (authors have to get on this if they stand a hope of meeting publishing deadlines), not having the time because of work and personal commitments, and realising my body needs a rest.

On the plus side, there's a lot of content I have to put up on this blog (free assets, components, etc), and I'm also currently trying to negotiate being able to put up a fair bit of unpublished (i.e. meant for books) online.

I've recently (as in the last week or so) just finished all freelance projects I was previously involved in. These were a pretty lucrative sideline, but took up all my spare time. I now have spare time (woohoo!) and this blog will hopefully become one of my spare time tasks. Here's hoping!

Posted by motiongraphics at 12:16 AM | Comments (0)

Site design update

I’ve been a little worried about the design of my blog for a while.

I feel adding stock photography is a poor alternative to designing graphics from scratch, and I can’t understand it when designers use a predefined template as the basis of their site.

Um... but I’m currently doing both!  Not good...

My excuse is feeble; I’m busy creating work for clients and have let my personal stuff slip. But hey, at least I’m keeping myself honest and admitting to it.

Anyway, I thought the redesign might make a good series of entries describing the steps taken, especially as I’m only partway through the design, and because I haven’t really talked about traditional web design much so far.

Initial considerations.

First thing is to work out what is wrong with the current site, and what I really want to do... here’s what I came up with.

• What do I want to say in the design;  The current design is just whatever I could put up in the half day I had. It says nothing about me, other than (at best) I’m busy, or (at worst) I can’t design. So what do I really want the site to look like? This is the easy part.  I want to show that Flash isn’t the only thing I do. In fact, Flash is not even the thing I’m best at. My first love is 3D. So I want to do some graphics from scratch, and those graphics have to be 3D.
• More movement; The site graphics are a little too static, and don’t really have enough of an impression of movement.
• The site graphics are not colourful enough; This needs to change.
• The site design doesn’t really relate to its subject; Stock photography is great for filling a space, but is a pretty bad way of implying subject area. I need to create something a little more targeted.

My initial thoughts were to use some abstract 3D patterns that represent the main areas of motion graphics today.  Unfortunately everyone else seems to have come to the same conclusion. The Adobe Creative Suite branding uses something that looks distinctly like mathematical equations mapped in 3D.

The Microsoft Silverfish branding looks the same (in concept if not in style). From my 3D experience I could even hazard a guess as to exactly which equation type they are using (a Lorenz attractor).

This almost made me abandon the use of 3D, but then I thought ‘hey, this is okay, as the Adobe and Microsoft products are primarily what I want to talk about in the blog. Having a site redesign that follows the same theme might be okay after all!’

The next step was working out how to create the 3D shapes. There’s a really cool application called Chaoscope. It can create patterns similar to the Adobe branding, and can create 3D shapes exactly like the Silverlight logo (and it can animate the 3D shape just like Microsoft do!). Best of all, its free.

The next step was to create some relevant patterns. I had the following subject areas in mind; animation, xml, sound/video, communications.

Here’s some of the stuff I came up with (click the 'bigger image' links to see larger sized versions)...

Animation.  This one is meant to show easing. The curves are similar to plots of accelerated motion, and that’s really what easing is all about.

Bigger image (50K)

Okay, it doesn’t look much like 3D, but that’s because I’ve rendered the surface as a semitransparent colour surface. If I render it as a solid, you see the shape as a 3D surface that looks a little like a snail shell spiral.

Bigger image (51K)

XML. This one is pretty abstract. I wanted to create a nested surface that reflects the nesting of XML tags. The spikes to the right do just that, and as a bonus, they even look like XML tags... but boy did it take a lot of tweaking to get them to show up!

Bigger image (124K)

Sound: This one is based around the curvature of Lissajous figures, and I’ve tried to make them look a little like musical notation at the same time (because I’m guessing that most people will miss the Lissajous connection).

Bigger image (57K)

Communications: Web applications are all about moving data across the web, and this is an interpretation of the process. I actually created this one whilst sat in the back garden on a hot day. I’m guessing I was fixated at all the dandelion heads that needed mowing up (and they still do, unfortunately)!

Bigger image (35K)

After I’d got a few patterns working, I mocked up how they might look within the site. Here’s a sample mock-up. Be gentle, as I haven’t touched the css yet, so the text styling and formatting is not yet in touch with the graphics.

Bigger image (238K)

Coming soon, the css.

Posted by motiongraphics at 10:18 PM | Comments (3)

Coolest Flash sites of 2006

I’ve been a little lax in putting up URLs to Flash sites during 2006, but there’s two sites that have really turned my head...

Motorola: Moto colors

Every time a new version of Flash comes out, it takes the design community a while to really get to grips with all the new features. Video alpha was the first new feature to become mainstream, but that only appeared in high end sites (as the costs of professional video production are an order of magnitude higher than most other motion graphics).

The other, potentially cooler features are hidden within ActionScript, and its taken until the end of 2006 for a site that uses most of them to appear; moto colors (www.motocolors.net or direct.motorola.com/hellomoto/colors).

This site allows you to create cool vector based patterns, the type of thing that used to take ages in Illustrator and was all the rage a few years back (appearing in all sorts of places, including the Flash 5 box artwork). Not only does moto colors allow you to create the vector artwork, the site also allows you to save the work as a screensaver and desktop theme installer for your Windows/Mac computer or Motorola cell phone.

This site uses many of the features of Flash 8 that are hidden under the bonnet (bitmap caching, better support for server side communications, etc) and is a perfect example of the creative use of web applications.

Susanne Paschke: portfolio site

Flash-only sites are cool, but the really good use of Flash only shows through in sites that integrate Flash with other technologies (or Flash Used Carefully Keeps Users; I’d turn it into an acronym - more memorable than AJAX, but…).

The Susanne Paschke site (www.susannepaschke.de) is a perfect mix of cool Flash motion graphics and good HTML layout; the Flash and HTML simply meld together to produce something that is better than either.

Posted by motiongraphics at 01:27 PM | Comments (8)

Useful free applications and tools

A couple of weeks ago I was asked by a fellow designer about finding changes between two versions of the same fla (i.e. because the later fla had a hard-to-find error in it). This is something I've come across before, and my solution involved using freely available applications. That set me thinking; I use many free applications in my day to day work. Here’s a list of my most often-used ones. (NB - I use a Windows machine)

Differencing Flash files with oyFlashDoc

Here’s a story we’ve all been through…

You’ve been working on a Flash site for *ages* but somewhere along the line you’ve introduced an error and can’t figure it out. Your site looks ok, but one button just refuses to work anymore. It worked in the fla you saved three hours ago. Damn.

To fix this sorta problem quickly, you would need to be able to see only the differences between two flas… and here’s how. The oyFlashDoc.jsfl Flash extension file converts your Flash file into an XML text file. By comparing the XML files generated from two .fla files using a differencing tool (such as the free application WinMerge), you can do just that

To get oyFlashDoc, go to the Software Secret Weapons site (www.softwaresecretweapons.com) and look for the oyFlashDoc.jsfl file in the Projects section (as of this writing, direct link is here).

Flash version checker and launcher

When you double click on an FLA file it opens the last version of Flash that you used instead of the version of Flash that was used to create the FLA. If you have multiple versions of Flash installed, you risk getting the dreaded ‘Unexpected file format’ error every time you double-click a fla file.This isn’t really an error of course; it really just means "open me in the right version of Flash please".

If you just hate that as much as I do, install FLAver.

All your flas will now magically open in the version of Flash you created them with. Not the most timesaving application, but boy does it calm the nerves!

Pixel level tools in Flash

Pixel tools gives you a new set of drawing tools that draws lines and shapes as if they were made of pixels. Cool for retro video games or the oh-so-cool isometric pixel style. Although Pixel tools actually approximates pixels using vector squares, you can force Flash to treat the graphics as true bitmaps at runtime using caches (Flash 8). The other advantage of graphics created via pixelTools is that they look the same when you set the quality to low (no anti-aliasing), making for faster playback.

Bandwidth profiling and traffic analysis

The Flash bandwidth profiler is cool for testing swfs across a low bandwidth connection, but not so good when you are testing a complete site. A complete site includes lots of other files, such as html, css and xml. Sloppy (www.dallaway.com/sloppy) is a Java application that simulates low bandwidth connections at the browser, thus slowing down everything.

For the web application developer who also needs to view (and/or fiddle with) the underlying web service data, try Fiddler. You can also find more information about fiddler here and here.

Replace Windows Notepad with something that’s actually useful: Notepad++

Notepad++ (notepad-plus.sourceforge.net) has support for code coloring, and folding and it recognizes all the common web design languages/mark-ups (CSS, HTML, JavaScript, Perl, PHP, Ruby, XML). The fact that it also supports ActionScript makes it a must have for Flash coders.

Also useful for those looking for an ActionScript only editor; Se|py

Test with different versions of the Flash Player

Most clients specify a minimum version of the Flash player that the site has to work with, but that might not be the version you have installed. There are a couple of easy ways around this;

• Kewbee plugin switcher.
• Sepiroth's Flash switcher (firefox only)

To use the switchers, you will also need old versions of the Flash player. To get these, go to www.adobe.com and enter ‘14266’ in the search field (top right), or use the direct link to tech note 14266 here.

Quick and easy sound editing

Every web designer has bitmap editing software, but motion graphics designers need to make use of sound almost as often as they need bitmaps, so a sound editor would be cool. Adobe has a sound application for the multimedia designer; Adobe Audition. Rather than use Audition, try Audacity (audacity.sourceforge.net). It can do all the things Audition can do, its easier to use, and its free!.

Backup your application customisations and add-ons: MM-Exporter

MM-Exporter (mm-exporter.joexx.de)is backup utility that allows back-up of all your Flash/Dreamweaver/Fireworks settings. This allows you to quickly recover your application configuration (and therefore your preferred workflows) if you ever have to reinstall your operating system, or if you need to move between computers.

Better searching; Agent Ransack

Tired of that crappy Windows XP search window with the risible dog animation? You need Agent Ransack. Especially cool for the web designer, because it also shows previews of all common text files it finds (.as, .html, .xml, .css etc).

Temporary emails

Guerrilla mail; A randomly generated anonymous email address that lasts 15 minutes, and then expires, forever.

Genius.

Now you can try out that 30 day trial without having to set up a hot mail or (horror of horrors) disclosing your permanent email address…

Posted by motiongraphics at 08:54 PM | Comments (2)

Rosy and the lost magic of Web 1.0

Whilst archiving an old hard drive over the weekend, I came across the Word file for my introduction to the book New Masters of Flash Volume 3. It kinda answers many of the questions I get asked a lot; 'How did you get into writing those 20 (at the last count) books you did between 2000 and 2004?' and 'Who exactly is Ed from Friends of Ed?'. It also gives some insight into the heady days of 'Flash as a creative web canvas', a.k.a the big dot.com boom that Web 1.0 was all about.

Its called 'Rosy'.

Rosy

Let me start at the beginning. I first met the folks at Friends Of Ed after applying for a web design position.

Birmingham based Initiative urgently needs Master/Mistress of Flash
If youre currently moonlighting with Flash 4 but would love doing it full time... if your head is constantly bursting with ideas for headstopping Flash applications.... if you've got a Fine Arts degree... if you can write in a structured and persuasive style... if taking it all further with dynamic scripting in ActionScript and Perl, PHP, ASP, etc is a thrill and not a cause for panic....

If it's yes to some or all of the above, we could offer you a really rosy future. Get in touch today.

I fancied that rosy future. I sent them a short email that read

‘Hi, I don’t have a Fine Arts Degree, but I am a graduate, and I do have my own teeth and hair. I also have some URLs you might want to look at. Give me a bell and we can have a chat.’

… and ended the email with a short list of Flash 4 URLs. Don’t ask me where the teeth and hair bit came from, but it got me the interview.

As part of that interview, they let slip that it wasn’t actually a web design position at all. They were not really sure what the job was when questioned, but anyway, they asked me to think about it.

Richard Collins, the strategy manager at the time, had a well worn old bikers jacket on when he appeared at my interview. and he went on to become really animated when he talked about the web and the creative possibilities (rather than the just the technical or commercial or technical potential that was the more obvious angle back then). I thought about both these facts. The laid-back appearance and the genuine enthusiasm were just right for the manager of a new start-up. So that was enough thinking for me. I took the job.

That’s not so much an introduction of how I got to meet the Friends, more of a summary of the way they worked. The whole company had attitude, but they were also committed professionals with real aptitude. That same mix of attitude and aptitude went into New Masters of Flash. Informed chaos, blended with professionalism.

Anyway, I started by doing some consulting and Flash web design for the Friends, but ended up writing on a Flash book to help out in other areas. It did rather well, so I did more.

At the time (mid 2000) computer books were pretty much a known quantity. They were either written by programmers, or they were based on lecture notes. Design oriented Photoshop books were all over the place of course, but the computer book world didn’t want to have anything to do with it. That is probably an oversimplification that will get me into trouble, but I don’t think it was that far off. Of course, right now computer books that address design are the big growth area. But back then, there were no glossy computer books that were based on fashion magazine layouts, and certainly none that would look good resting on expensive furniture.

Nobody had really done this mixing code and design gig, so there were all sorts of problems....

We wanted to fill the book with innovators from the Flash underground rather than the first dozen or so cool sites we saw, and we didn’t want to use corporate sites. Thus, choosing the contributors took a serious amount of time.

Some of the contributors had not written before.

The book was expensive to make so costing was problematic.

The printing press didn’t understand the fact that this computer book would use heavy paper, so they used a cheaper binding appropriate for a normal computer book, and less than the one the Friends specified. The pages very occasionally fell out. We pulped the entire first print run. It didn't meet our expectations of quality. The book stores were not sure what we were trying to do and just looked at us and said "?".

The book got published.

The Flash conventions were using the New Masters of Flash author list as their most wanted speaker list. Other publishers were using the same list of authors as a poaching checklist. New Masters of Flash peaked well within the top 10 on the Amazon USA all-book chart. We kept running out of stock. We had used mad layouts that totally covered the pages in color. A reviewer complained about the smell of all that ink. We laughed.

New Masters of Flash took the Computer Book of the Year Award. A competitor was worried enough to have an intern writing bad reviews about us first thing every Monday morning.

Things were looking rosy.

Fast forward.

A few months ago, Gary Cornell gave me a call. He owns Apress, and now also Friends OF Ed (you will notice that both names are on the cover of this book). He wanted to know what my suggestions would be for future Friends books. I said Friends Of Ed is a design imprint. Even when he’s writing about programming, Ed should be design oriented. I said we need to do a third New Masters of Flash book as a priority.

Gary told me it was a difficult book, and people might not know the why of it in the new post dot­boom publishing industry. He said it was risky. I said publish it anyway. The ‘Ed’ in Friends Of Ed is supposed to mean whatever you want it to mean, but it mostly means ‘Every designer’. Ed needs to know the basics and standard advanced stuff, sure, but he also needs to know what other designers are doing out on the edge, away from the normal path.

You know the rest. Gary published the book. You’re holding it.

I know what will happen. We’ll see some people just not getting the why of it. They’ll bang on about this not being a proper computer book, or not a design book, or how <insert name> is missing from it, especially because they work for so and so studio, and they´ve got a great big blog.

Here´s my why. Design and programming go hand in hand. A book on Flash that doesn’t include both is a book that is stuck in the days of publications created from lecture notes. This book isn´t coming from there.

The contributors in this book are just like the book itself. They have the attitude and aptitude. They make their own rules and set their own agendas. Nobody showed them the right way. They just did it, and wondered why later.

They´re already famous, or about to get famous because of their attitude to their art. They’re worth reading about because of their aptitude for their art.

They´re the future of Flash. Rosy.

Sham B

April 2004

England.

...end quote.

Maybe I'm stating the obvious here... y'know what I think?

Web 2.0, Standards, webservices and Flash as an application platform, Windows presentation layer. It's all well and good. Um. But....

For us designers, the old stuff was so much more fun.

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