Posted by Twain on November 21, 2008

Code comforts: visual design champions

This is how my cool Flash pre-loader and homepage now look. I hope you’ll agree the site’s taking shape reasonably:

Compass pre-loader to Always the Twain (@T)

Compass pre-loader to Always the Twain (@T)

 

Always the Twain (@T): homepage

Always the Twain (@T): homepage

 

The pre-loader is essentially a 100-frame swf with a customized compass complete with a color wheel and flared camera lens that I created with Adobe Photoshop. I used the circular cut out tool……….A LOT — lol.

Designing websites isn’t easy. However, it can be extremely helpful for exercising your own creativity and I’d definitely recommend it. For absolute beginners there’s a wealth of packages out there including:

·      Apple iLife

·      Frontpage

·      Dreamweaver

Plus there’s a plethora of free online literature on everything from html to CSS (to control layout and design/style) to how to set up an SQL database.

I used to hand-code the html until I discovered that with Adobe Flash you can save the file as html too and this auto-generates all the html you need. Nevertheless, it is helpful to know html yourself because you can go back in and edit where appropriate; knowing where tags and divs begin / end and how they affect the layout is useful.

It gets more complicated when you start including Javascript or C++ to make calls and functions to the server and databases — particularly when you have an online form, forum, blog or any information gathering text box (that you may want to publish or simply store in archives).

We won’t cover that………………..yet. It is possible to teach yourself Java and other OOPs (object-oriented programs) in 14 days.

For now, I’d like talk a wee bit about Flash CS3 and Papervision3D.

 

MY DESIGN TOOLS OF CHOICE

I’m autodidactic in Flash and have learnt it organically via direct application rather than theoretically; this has its advantages and disadvantages (more on this in another post). There are several good sources of information so I tend to go in search of code Enlightenment here:

·      The Flash Enabled Blog

·      Actionscript.org

·      Sepiroth

·      Kirupa.com

·      Papervision3D

 

My favorite Flash anything at the moment is obviously Papervision3D — which is what the brilliant Spanish team, Bestiario, leveraged to build the TEDtalks videosphere:

* AMAZING VISUALIZATION COMBINING PV3D WITH YOUTUBE VIDEOS

 

Already, I can develop a few 3D swfs:

·      3D film wall (link soon)

·      3D JACKSphere (link soon)

·      3D carousel (link soon)

What would be “too cool for school” would be if I learnt how to cross something like sourcebinder with MSNBC’s Spectra  product with some form of Quantum4D.

THEN that resultant application would be something close to….AMAZIN+.

The products in action can be seen in these YouTube videos:

 

 

 

 

The limitation with Flash used to be that Google didn’t have much capability to search for Flash content. However, hopefully, with its recent strategic alliance with Adobe this will change.

* Google collaboration with Adobe to make Flash content more searchable

 

OPTIMIZATION

Whenever I create an swf, the thing I always forget to do which I DEFINITELY SHOULD DO FROM THE OUTSET(!!!) is to optimize the images and to choose the right format (jpeg / gif / png / png-8 / png-24) so that the file size doesn’t become unmanageable.

Needless to say…………..I forgot and then had to go back into the FLAs and optimize the images with Photoshop. Some of them went from 120KB to 12KB — proving that optimization makes a world of difference!

 

THE BEGINNING OF AN ADVENTURE

I have a definite strategic vision of what I’d like to see the Always the Twain site become over time: a collaboration hub with cool tools.

There’s a much more immediate to-do: my MPM (Media Perception Matrix) tool which I’m coding in Javascript — with plans to pitch it to Google (seriously), so this site will build up over time rather than overnight.

Thanks for following its progress! Lots more still to do and to enjoy………………

:*)

Leave a Reply

You must be logged in to post a comment.