Over the next few weeks I’ll be going over the network rendering setup I built to handle my short film output. This guide will cover the system builds and setup all the way to the server networking and node settings. A quick outline of my setup:

1. Workstations (Off-site):
   1. Windows XP x64 AMDX2 Desktop
   2. Windows XP Core 2 Duo Laptop
2. Domain: example.dyndns.com
   Server (On-site): Mac Mini Server Mid-2010
   Headless Nodes (On-site):
   1. Ubuntu AMD3400
   2. Ubuntu Pentium4
   3. Ubuntu Athlon (Down)

The key to this setup is it’s flexibility. The Mac Mini Server is the gateway to the Ubuntu systems as well as the render manager for all rendering nodes on or off site. The Mac Mini Server stays on at all times (only consumes 10w at idle) and is setup with multiple uses in mind but the main idea is to have one system that can be accessed at all times, computer or router, to start up and connect to the on-site render nodes.

Networking Setup

Note: This guide assumes some knowledge of networking.
The first step is get the local network accessible from off-site. Fortunately I have a smart brother who setup our home network with DynDns; there is not too much setup here just follow the directions on the site. Once this is complete you will have a consistent hostname such as, example.dyndns.com, to access your local network off-site. The reason for this is that most consumer level internet services exclude options such as static IPs and VPNs making it somewhat difficult to have a simple off-site connection with dynamic IPs.

The next element is in the system build for each render node. These nodes should be simple systems, I’ll go over the Ubuntu setup next week, but the most important elements are the RAM and Processor. Anything below 2 Ghz single core will not be of much use, you can get better systems leftover from offices and on Craigslist easily. The general rule for RAM is 1 Gig for each 1 Ghz but at least 1 Gig period for any system. For the motherboard the only essential element, besides a networking card, is the ability to Wake-On-Lan. Without a Wake-On-Lan option you will need to turn on and off the systems manually, a huge pain and no good if the network is off-site.

Once you have render nodes on your local network you need a way to control them which is where the server or router comes in. For this guide I will go over the method I use which is to SSH (Secure SHell) into the Mac Mini Server then tunnel all other services through SSH. This sounds daunting but it is not, at all. You will need to know terminal commands but nothing too complicated.

At this point you should have a client computer, your workstation, and a network of render nodes, could even be a single off-site system, behind your ISP’s router to start.

First, you’ll need to forward the SSH port through your router. The SSH port is normally 22 but you’ll want to use a different port just in case but make sure the computer you are connecting to is listening on the proper port. With OS X server these options are easily changed in the administration panels. Once SSH is forwarded through this is the only port you’ll need forwarded through the Firewall.

Second, once

It has been a long and productive summer in many areas. Although I have not been working directly on the film, modeling, animating, and rendering, I have had the opportunity to solve a couple of major production issues. First, I have settled on a 3D software package. I had been using Lightwave 3D for a very long time, 8 to 9 years, but with the lack of major updates and a questionable move to a subscription based model I could not continue with Lightwave. Looking at other packages was daunting. From an economic standpoint justifying the cost of buying any of them was impossible considering Lightwave is still the least expensive at around 900 bucks. Where the Adobe Production Suite is downright essential, Photoshop and Illustrator are indispensable, a 3D package is not necessary as I am not looking to make money with current short and I have not pursued 3D work for sometime. Fortunately this area is one where open-source software has come through. Blender is a fantastic 3D solution for what I need. Where rigging is quite cumbersome in Lightwave, Blender can switch from modeling to setup with ease.

I will be posting more on Blender and the short film soon, stay tuned!

The new version of Animatic Builder is up. This update includes a whole offline system taking advantage of HTML 5′s manifest and localStorage for offline use anywhere. To complement the new offline functionality is a redesigned UI which now scales to mobile platforms as well, specifically the iPhone. The are a number of speed improvements allowing well over 200 frames in a sequence without impacting playback performance. (The SQL updating and the uploading for the demo are disabled.)

Originally I built a system encoding the images into base64 and storing them in the localStorage with the shot data. At the time I was unaware of this massive headache I was gleefully writing into the backend of the system. Although the stored image swapping in and out of base64 worked well on a local server, when moving onto a remote server, even with a fully featured client browser, the system became uselessly bogged down for obvious reasons. Base64 images are 30% larger than their originals, multiplied by a hundred, you get the idea.

Frustrated, I turned back to the manifest. The manifest in the spec is not outlined as a dynamic cache as it must be set before page load. To get around this, I have a script (simple PHP) build the manifest before the app moves into the data sync and cache page. The preload page scans the /uploads and /structure directories then builds the manifest from the scans.


cacheList = array();
// The directories we want to scan.
$paths = array('./', './', './');
// Foreach directory, scan.
foreach($paths as $path) {
$files = scandir($path);
foreach($files as $file) {
if (preg_match('/\.(jpg|png|jpeg|gif|css|js|php)$/i',$file)) {
$cacheList[] = $path . $file;
}
}
};
// Name the manifest.
$manifestFile = 'your.manifest';
$writeTo = fopen($manifestFile, 'w') or die("Error, could not create manifest.");
$contentsCache = "CACHE MANIFEST\nCACHE:\n";
foreach($cacheList as $toCache) {
$contentsCache .= $toCache . "\n";
}
// Write it all out.
fwrite($writeTo, $contentsCache);
fclose($writeTo);


By building manifest dynamically the developer doesn’t have to continually update what gets cached and the user gets the whole app cached. The extra step is add the handy JavaScript reporter so the user knows what is happening on the backend Offline Web Applications. The entirety of this solution works on many platforms as the server, PHP building the .manifest, then the browser interpreting the .manifest is up to the client having a modern browser. Fortunately most browsers support these specs.

I have completed about half of the storyboards and I’ll begin plugging them into Animatic Builder so I can edit the film as I go through my day.

I came to this point on Friday when I realized I wasn’t going to finish my animatic in a weeks time. It was at that point I took a break and stood back from the work for a moment and relaxed. Now, a few days later, I have a better outlook on the project.

As I mentioned before the harder parts of the project are two sequences where the doll/avatar animates a couple of ideas. Both ideas are quick flashes, but even with their short screen time, I want to build a design and feel that would get a viewer pulled in. The concept is, these are the “good” ideas that flash in an artists mind, that could be something interesting but not exciting. Once the doll tosses these ideas aside, I want a moment where the viewer has to get reemerged into the actual film.

Right now I am adding and developing the pieces up until the main character, he needs a name it seems, makes an escape out of the room.

At this point I was hoping to have more done, but with so many projects in the works I am comfortable with moving a little slower on the film. I’ll update with the animatic soon.

Opening Shot

It has been a busy week but I managed to get through most of the storyboards for the film. Rather than try and make a series of thumbnails, a bad idea by the way, I decided to commandeer one of the sketchbooks I hadn’t used yet for the task. Although index cards are normally preferred, I’ve been running around too much to make a proper storyboarding wall. Instead I’ll scan the pages and put them into my app so I can edit the animatic on my phone.

The most difficult parts of the film to conceptualize are two “story within a story” sequences which need to be bold graphically and have very simple story arcs. The shot setup is a bit odd in that the doll has to flip the pages off then have the wind carry the pages behind the foreground so they can be framed over the doll’s shoulder. Then once framed the pages need to continue flipping through even when they are not being torn off the stack. I don’t have this sequence shown here, but I’ll make sure my animatic is shared at some point.

Look below for my “how not to storyboard” section and a few sample storyboards from the upcoming film!
How not to storyboardLooking Up

On the left are a collection of thumbnails from my sketchbook where I thought the layout, and action, were getting worked out pretty well. Not really. The main story is getting put down on paper but the thumbnails are so small it is tough to get the layout and even placed in a row they don’t have much continuity; the page is downright confusing.

On the right is just one, very simple, frame from that sequence. Even without much of a background the frame works much better because the character is fully developed and outlining the action in blue helps the eye know what is going to happen in the scene.

Walking Across

The above image is an even better example of a fully laid out shot. The layout is easy to understand and the action is fully thought out. All of these images need a bit more work to be fully fleshed out, but they at least provide enough information for an animatic.

Check back next week for the animatic!

Turn Around of the “Idea”

A new website, a year, and now a new film. I realized that my previous film was far to complex to finish on my own in a reasonable amount of time. The main problems with “Riot” are too many characters and an overly realistic design. In developing my new film I have outlined a single main character with only a couple sets. By building a story on a single place and a single character I can focus on the animation rather than many different characters and sets.

The “Idea” as I am currently calling it, is about an idea come to life from a stack of paper. Simple. Probably a film that has been done many ways before. My objective to do my own take on a common story and see if it draws and audience.

Here goes.

The main image of the post is a paint over 3D sketch of a stack of paper on my desk which will serve as the main set. The lighting is going to change a bit as I have shifted the time to an early morning but the spotlight effect will stay the same.

The “turn-around” sketch is a quick drawing I made before working on the final design for the main character. I decided that the film will be a self portrait so I used my logo as the characters face while his body is folded from a ripped out section of a page. The other two drawings are more sketches of the character.

More concept art, hopefully some finished storyboards, next week.

(It would be foolish to expect updates weekly seeing as how I tried that before, but then some mistakes are meant to be repeated.)

Shot and set design“Idea” Character Design

The Redesigned Animatic Builder timeline.

During the past few weeks I have been diligently updating Animatic Builder with new features and a completely new interface. Overall the main idea of the App hasn’t changed; building and maintaining a sequence over a range of any internet connected devices. What in the release makes that goal easier? Quite a bit.

From the start the whole App has been rebuilt with an AJAX, or asynchronous, connection so the user can modify the sequence without the delay of reloading page each time a change needs to be saved. Every on page change is made once a user focuses away from a changeable element. As well, each change effects the sequence immediately so a duration takes effect right as it is made.

The playback system has changed drastically as well. The most obvious alteration is the introduction of a self-centering elastic layout which keeps the current frame in the center of a browser window and when the browser is re-sized the whole layout expands around it to any size. Animatic Builder as on the iPhone. You can look at the app on an iPhone for editing then pull the a sequence on a projector and stretch the browser window to fill the screen. In regards to the playback presentation, I’ve added both a dimming effect and a series of hiding tabs so a user can reduce the whole layout to just the image in a frame. In this way, a user can play a sequence as a movie, seamlessly. Playing back a sequence in the browser feels just like a playing QuickTime movie.

Adding images to the sequence has also been simplified. By double clicking on an frame brings up an image change box where a user can choose from an expandable library. In this same dialog, images can be added, deleted, and collected from the uploads folder.

All of these changes are cross platform. The elastic CSS layout causes some problems on mobile devices however, they aesthetic not functional. More importantly, using Apple’s JS API, I have added gesture support so one can glide through a sequence easily. Mobile support is light, however, as the iPhone does not allow uploading from their devices but the image menu is available by clicking with two fingers. As well, the iPhone only supports vertical orientation at the moment and the layout need some adjustment. The layout is based on percentages to allow for flexibility across platforms, however when mobile Safari opens some elements get very distorted.

I have started a page on the site specifically for Animatic Builder and I will continue to update it as I use it for my film. To check out the latest version, editing enabled, head here. Animatic Builder version 1.0

And the new home of the app. whitneykrape.com/animatic-builder/

Portfolio Site – Sarah Shipley

I have completed a couple of sites recently and one of those I have had the honor working on is that of Sarah Shipley, a copywriter and producer I met during my time working in New York City. Sarah was looking for a simple site to show her work. Many times an artist looking for a portfolio site will build an overly complex Flash site with too many bells and whistles. To show off one’s work, leave add-ons for sites that show off the web; your site is meant to show off you and your work.

Head on over and check out Sarah’s work!

The Animatic Builder timeline.
For this update I am going to give an overview of a new online application I have developed over he past couple of weeks to aid in pre-production, Animatic Builder. If you are unfamiliar with storyboards or animatics there are overviews here. Essentially where storyboards are the first visual organization of a film idea, an animatic is the next step adding a duration to each storyboard so the pacing of a film can be developed. Animatic Builder is designed to make creating storyboard and animatic sequences easier by keeping a sequence and it’s associated content in a central location accessible from virtually anywhere within an intuitive user interface.

The core idea of Animatic Builder is that a sequence can be timed out, played back and updated from a web browser without the need for movie compression, emailing large files and maintaining timeline files. With a concept and a set of images, a timed out sequence can be arranged and played back in just a few minutes. Animatic Builder is not meant to replace a non-linear editor such as Final Cut Pro but for planning out a scene or short movie during pre-production. The functionality of the app will be focused on building sequences with only pre-production information, keeping the app lightweight and accessible from any modern browser. Animatic Builder keeps a sequence and it’s necessary files contained for easy access.

Inserting a shot into the Animatic Builder timeline.

The idea is that keeping a physical storyboard on hand, whether in a sketchbook or a hand-full of index cards, is impractical in many situations. With Animatic Builder, shots can be laid out with metadata such as a description, title, and notes so they can be browsed and updated easily. The app comes alive when a duration is added to each shot, turning the storyboard into a playable animatic.

The only requirement for the app is a JavaScript enabled browser, which includes nearly every modern browser mobile and desktop alike. While JavaScript is a basic requirement each platform presents a unique set of challenges.

As the core idea feature of this app is portability, every possible platform will considered during development from modern browsers such as Internet Explorer and Firefox to mobile platforms such as iPhones, Blackberries and Android based phones and netbooks. For the moment the most advanced features will be found on standard browsers and on the iPhone with gesture support.

The concept is pretty simple so description does not do it justice, instead I recommend giving it a test run.

Launch Animatic Builder

For a complete look at the future of the app take a look at the development tree attached below. And yes a user interface rebuild is on the list. I am aware that the app is quite homely looking at the moment.

1. Animatic Builder – Development Tree

   1. Update System

      1. Shot reordering system
      2. Asynchronous connection
         1. Remove update lag
         2. Enable Image/Movie preview during upload
      3. Support for multiple sequences
      4. Multiple versions of a sequence

   2. User Interface

      1. Clean-up, Simplify and Beautify
      2. Re-tune to place focus on shots, especially during playback
      3. Make metadata collapsible
      4. Current shot detection and highlight
         1. Play from current
         2. Update current shot

         3. Consolidate playback controls

            1. Move shot/note controls to playback bar
            2. Only information in sequence
            3. Center controls in window
            4. Goto shot number

      5. Rebuild scrolling

         1. Disable scrolling

         2. Re-enable scrolling to match device

         3. Fixed position for iPhone
         4. Center and focus shot
         5. Build “breathing” transition between previewing and playback
      6. Investigate seamless camera operations, pan, zoom, rack

   3. Offline Support

      1. Portable version separate from server
      2. Reads/Writes text information to single file
      3. Uploaded and parsed by online version
      4. Save different versions of sequences
      5. Take advantage of device specific databases
      6. Download/upload zipped file of associated content

   4. Audio Engine

      1. Simple audio playback timed to shots
      2. Replace/add browser scroll-bar with both audio/video markers
      3. Keep audio/video timeline integrated

   5. A more creative/inspiring name than Animatic Builder

As the app currently resides entirely on a server, some skill is required to setup and maintain the system. Therefore, rather than taking the time to develop an installation for the app, I am keeping the server side source closed and the app only available for previewing. If you are interested in using the app please contact me with the form at the bottom of the page. At this point I am trying to gauge interest in the concept and see where the project goes.

I have been very busy the past couple weeks, unfortunately not on my personal animation. On slow weeks such as this, rather than trying to stretch out a few scattered drawings, I will go into the techniques I am using to make the film. First I’d like to go over a recent addition to Photoshop, the timeline. It seemed rather odd to add a timeline but looking at the whole scope of Adobe’s product line, Photoshop is fast becoming the hub of Adobe’s catalog. The program you need to get any type of media done, which makes sense, the essential element of any piece of a graphic, film or software is the layout of the frame.

Down to the basics, why not Flash or After Effects?

An early shot with Flash on a 3D background

The obvious answer to most digital animation these days is Flash, but Flash is vector based, which produces a distinctive clean, sharp style. Achieving a rough, dirty look in Flash is tough especially in animations with only a few elements. In addition, if you are looking to go back and edit a vector drawing you are presented with a mess of shapes and no opacity controlled eraser. Overlapping elements have to be done at the layer level and exporting individual Flash pieces to other programs is not easy. As I have recently discovered outputting Quicktime files from Flash projects can mess-up timing, leaving elements such as voice over a frame or two off.

After Effects a sandbox where frames in a sequence can be manipulated at will, with one exception. Creating content in After Effects is no small task. Text, 3D layers, solid shapes are no problem but try making a character with any level of detail or a painted background. There is a way to draw in After Effects but its more a cheat then a day to day function. Pull up a Matte and draw, then use it over-top a solid layer, it works but why build image authoring into a program that hasn’t had it before.

Painting over a storyboard in Photoshop

This is where adding basic timeline functionality to Photoshop makes sense. Above CS3, layers in Photoshop can now be timed out outputted as sequenced .PSD files for any use. Animation in Photoshop becomes the same as on paper. Draw the keyframes, in-between it, and then… Well here’s the catch. You could finish an animation in Photoshop and send it out but Photoshop has no way of finishing off the animation; easily re-timing the sequence, bulk composting, and audio.

How is this useful information? Simple, I cannot stand scanning frames but I love hand drawn animation. With Photoshop and After Effects a hand drawn look is easy to achieve, yes you definitely need a tablet but considering the quality to price ratio of Wacom tablets, there is almost no reason not to buy a tablet. Two pieces of advice when buying a tablet. One, get a mid sized tablet, I have a large 6″ by 11″ tablet and even working on a wide-screen monitor it is still too much.

A slow week but still some useful information to be had. The post for this week, yes I’m a week behind, will have a look at a storyboard App I’ve built for the iPhone for building animatics and storyboards anywhere.

Image courtesy of broadstreetministry.org

I would like to pause for a moment and share a small portion of the health-care “town hall” debate that took place yesterday at Broad Street Ministry. Reverend Bill Golderer hosted and moderated the debate, which filled the entire church and spilled over into the streets. The center of the debate was featured speaker Joe Sestak, a freshman Congressman representing Pennsylvania’s 7th district and retired United States Navy Rear Admiral. For more information on Rep. Sestak take a look at his biography on Wikipedia. The forum had an unusual feel not only for the church but the tone of the debate deviated from the vitriolic shouting matches seen on the news of late.

The sanctuary, at capacity.

Broad Street Ministry is no stranger to difficult social and political issues. The ministry has held a number of forums in the past few years on topics ranging from prison conditions to religion in politics. Even more important are the weekly programs of the church, which address the fundamental problems of society simply by bringing citizens together from all walks of life. At times it seems singular goal is to bring people together and for good reason all of their work is made easier with common understanding. It is no surprise then to see the health-care debate at church but to see the sanctuary filled with attentive listeners unfamiliar with the unique atmosphere of Broad Street was truly inspiring. It is an atmosphere I cannot do justice by explanation. To understand the church and Rev. Golderer I recommend attending a service whether you are religious or not.

There are few other topics that could bring together such diversity, and create such controversy. than that of health-care reform. Rep. Sestak took command of the debate noting that he is the vice-chairman of the “Subcommittee Regulations, Health-care and Trade” which crafted parts of the massive healthcare reform bill. Congressman Sestak began noting is strong support for the bill and his main reason why. Having health-care insurance through the military, Rep. Sestak was able to cover his daughters treatment for brain cancer. After his short introduction, Rep. Sestak began taking questions primarily from those he was previously acquainted with and who strongly opposed his views. At first the Congressman was typically vague and evasive but when it came down to more specific points he relented. When asked if he would chose the public option offered under the plan, he did respond “Absolutely” after a great deal of cajoling. When one former infantryman yelled out during one of Rep. Sestak’s responses, the Congressman calmly told him to wait while he finished and his question would be addressed. Rep. Sestak handled the incident extremely well, noting the veteran would not be forced into another health-care plan by his employer, and the two shook hands. All in all, the debate was focused and although a few walked out, most stayed and listened even if they disagreed. To his credit, Representative Sestak answered questions fairly, if somewhat vaguely at times, and made an effort to satisfy those who asked questions.

I left the debate with a better understanding of why reform is necessary but more convinced than ever that the message, and the supposed cure, are not being delivered well. This issue is too complex to go through line by line in town halls across America and so far that is the only way the message is being delivered. For the moment, we are left to hear one side extol the virtues of the plan while the other demonizes the flaws of the bill. At times it feels as though the debate has long past and the discussion is only trying to convince those who disagree.

The community at Broad Street has taught me that change comes only after debate, only after all viewpoints have been raised. The health-care town hall at Broad Street showed that by just listening even those who strongly disagree stayed and continued to participate. Congressman Sestak deserves credit for not only accepting Reverend Golderer’s invitation but also for following through with a real debate not a stump speech. Broad Street offered a perfect setting for the debate; a place used to tackling the most difficult of issues. Whether or not the debate has any effect is a question I leave to someone more politically minded, for now I encourage people to at least attend a town hall and listen.

Below is a video of Reverend Golderer’s introduction. I apologize for the quality, I didn’t have a real camera on me.

Edit: The whole meeting is available on YouTube.

This update is the first weekly update on my short film “Relax.” Whether I will update once a week remains to be seen, but setting the goal is a good start.

Above is the construction of first shot from the film. The film will open on a black screen with the sounds of the city in the background then cut up from black to the main character stepping forward. The image shows the first and second steps in the process, layout and rough animation.

Shot Layout in Sketchbook

• First I draw out the basic shot in my sketchbook. Sometimes I’ll even register the shot in my sketchbook and draw a few of the keyframes. Since I only get so many hours a day to animate, I try and plan out the shot as much as I can while I’m on the train, on a lunch break, so on.
• After scanning all the material in, I break everything down in Photoshop and draw over each keyframe with the distinctive blue.

  Note: Why would I draw in Photoshop using blue, Non-Photographic blue, which is meant for sketches that are supposed to be erased when scanned/photocopied? Am I daft? No there is a point. Practically, the two hues let me layout a sketch then draw over it more carefully in clean-up. Also, for this film, the second hue will remain to pull the character out from the background.

• In the image above you can see all the frames overlaid on each other after I’ve drawn and timed them out in Photoshop. Yes I animate in Photoshop, in a later article I will go into depth on why Photoshop has evolved into a tremendous platform for creating “hand-drawn” animation.

In later posts I’ll go into the clean-up and color processes and get into the 3D animation, backgrounds and last but not least, compositing.

Much of the old content is unavailable, it’ll be fixed as I go, but more importantly I’ll be adding a significant amount of content related to my animated short in development, “Relax.”

I made this simple site to host all my thoughts on my upcoming film(s hopefully.) Not everything I post in the coming weeks will be well written but it will feature some smashing images.

About the site, I decided to make a very simple website from the outset. The theme I created for whitneykrape.com includes only the most essential WordPress theme files. (Within reason that is. One could, in theory, make a WordPress theme from a single index.php.) The idea being that rather than making some crazy tricked out extended theme, that is never finished, I would make a simple theme and build it as I use the site. Anticipating what functionality is necessary in a personal blog is no small task. For the moment I have WordPress setup with just a few custom tricks. Starting with visual…

• On the homepage I made four loops linked to categories. Each one is updated when I add a post to the respective category. Frontcase, for instance, pulls an excerpt from the frontcase category. Each loop only displays an excerpt. In this way I can show a nice big 840px image on the homepage but, in the post, there is a properly sized 630px image.
• I reduced the amount of vertical wasted space by using a fixed horizontal navigation on the left. I have to be smart about what I put in there, so smaller resolutions still see the whole menu, but it leaves more room for images in the main content.
  The sidebar will hold more widgets later but for now recent posts and a tag cloud help users find the most recent, most posted content.

  One note on the recent posts. I adapted a nice piece of code found here wordpress-add-date-to-recent-posts-list. It adds the date to the left whereas the default recent posts widget shows only the title.

• As for plug-ins, Akismet, All-in-One SEO pack, MM Forms, and WP No Category Base are all I’m using for the moment.

That’s about it. I’m looking to add more functionally in the coming weeks so more of the sites content will be directed out to my social networking pages. In addition I’ll be adding more images around the site to break up the text. Check back soon, and often, I’m hoping to have a few new pieces of art up very soon.

Stay tuned.

A little concept art to take in. This image I designed as a test for the look of the rioters in my upcoming short. I wanted the rioters to look sketchy and unfinished next to the clean 3D animated Police but ultimately I rejected this design as being too detailed and time intensive.

Makes for a nice promotional still though.

The whole thing validates and is smaller than the original Flash version.

Depreciated, the header was for my old site. An example will be added soon.

The subject intensifies with the topic of SEO, search engine optimization. Flash only sites have long been the bane of SEO. Often only the top level of a Flash site will be indexed or worse. In an effort to index content a search engine will link directly to a .SWF. A user does get access the content but the direct link opens a distorted version of the site the designer intended. It would be pretty easy to write off Flash there but I made an interesting discovery recently, SWFaddress. It is worth noting that poorly implemented JS will also impede SEO but it is usually less of a factor.

Ultimately both Flash and JS are going to be around for awhile no matter what. Neither system easy trumps the other. How did I get on this topic? I picked up jQuery not long ago to see if I could replicate my Flash header in JS. I succeeded but found a much better implementation in Kwicks for JQuery.

Note: This has been disabled, please bear with me while I adjust the legacy content.

A couple of notes about the above example. This plug-in is currently coded to expand the size of the list element rather than the link element. When the image is expanded only the original image size is selectable, although I might have screwed up the implementation. Also, compare the JS version above to the version at the top of my site. The JS version definitely feels smoother to me. The Kwicks jQuery version is about 220KB overall while the Flash Player loads to around a meg plus and a 80KB .SWF file.

For the animator in me Flash is the intuitive answer. I can load up Flash make a bunch of graphics and output an animation with a short turnaround, only have to do a minimal amount of scripting, and know it will look the same in every browser. As I move in-depth into web design, the answer quickly changes. Between the possible speed improvements, optimized SEO, and the promise of mobile development, JavaScript looks like a worthy time investment.

One major piece of advise for feature rich user interface development, plan out what you want then look around for similar implementations. Flash, JS or other, many ways of interacting with a website have already been developed and reinventing the wheel wastes time.