$MTBlogName encode_html="1"$

AS3 camera, with rotation, and a more...

Loads of people have been asking me about an AS3 camera, or one that has rotation. Well, here's one that does both...

Enjoy, and thank Mr Heisey while you are there!

VCam is here

Now vCam AS3 brings a new array of options with added features including:

- Rotation
- Blur
- Brightness/Contrast
- Hue/Saturation
- and more!

Thats right. rotation AND blur AND all the other Flash AS3 effects. Cool.

And there's more;

Interactive vCam

The original vCam AS3 uses the BitmapData class to optimize performance during playback. When you view the vCam AS3 swf you are watching a bitmap transformation of the stage. While this is ideal for animation projects, it causes problems when you want to incorporate buttons or interactive elements into your presentation. I had a request this weekend for an interactive version of vCam AS3.

Posted by motiongraphics at 10:36 AM | Comments (0)

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)