Video Player

Since I never handled FLV video in actionscript before, I referred to the script in this tutorial:
http://www.thetechlabs.com/tech-tutorials/audionvideo/how-to-build-a-as3-videoplayer/
However the video player that I need does not require the play/stop button, the volume scrubber and the timer display, so I removed the following lines

var bolVolumeScrub:Boolean = false;
function playClicked(e:MouseEvent):void { ... }
function pauseClicked(e:MouseEvent):void { ... }
function stopClicked(e:MouseEvent):void { ... }
function volumeScrubberClicked(e:MouseEvent):void { ... }
function formatTime(t:int):String { ... }

and some nested lines in updateDisplay and mouseReleased methods.
The submitted final had some bugs though, you can see it in the uploaded version here when you seek for the parts which hasn't been streamed yet. I should have written a progress handling function for it. Other than that, I intended to use TweenMax to slowly fade out the background music instead of just mute it, however it failed and the script did not work very well. Further improvement will be made soon.

Plugins

When I was learning scripting in the secondary school time, I liked to write everything from scratch, and I kind of discriminate people who copies scripts from the others. However from time to time I started to understand the difference between learning and production.

While learning, what's important is the process, but when involved in production, what's important is the speed and the outcome.

Thus, most of the programming masters in the industry are not using 100% genuine codes, except when they are writing codes for security. Script libraries such as JQuery are widely used as a "shortcut" to make things done faster. Followings are the coding plug-ins that I used throughout the production of the website, in both PHP and Actionscript:


1. PHP MySQL wrapper:
MySQL requests are used very frequently when writing PHP codes, that means you would need to type the same thing over and over again in every PHP files. To make it easier, faster and less complicated, it's best to write a class that handles all the database connections.. PHP MySQL Wrapper written by ricocheting is what I've found very useful.
http://www.ricocheting.com/code/php/mysql-database-class-wrapper


2. TweenMax
TweenMax is a plug-in that shorten a lot of codes for animation. For instance, if you want to move a box from 0 to 100 in 25 frames, you need to write the following codes (hard-coding):
function move():void {
addEventListener(Event.ENTER_FRAME, step);
}

function step(e:Event):void {
      x+=4;
      if( x >= 100 ) {
            x = 100;
            removeEventListener(Event.ENTER_FRAME, step);
      }
}
in TweenMax, you just need to write this line:
TweenMax.to(this, 1, {x:100});
and everything is done for you!! you can even assign easing function to make it bounce, going back or appearing elastic.
http://www.greensock.com/tweenmax/


3. AES
AES is a cryptography method used in military force. In Flash-PHP integration, it's used to prevent hacking. In the contest part, I've implemented AES so that people could not simply hack the contest results with SQL-injection method.
http://www.lostinactionscript.com/blog/index.php/2009/11/29/aes-cryptography-for-actionscript-php/

Software

When typing codes in actionscript using Object-Oriented Programming, you need to declare a "class" for every object that needs scripting, and for every function you use in a single class, you need to write a line that imports that functionality to your class in order to work, and that would be a headache if you're just typing in Adobe Flash itself because it doesn't have any automation, for example, these lines:

package nutrigen {
      import flash.display.Sprite;
      import flash.events.Event;

      public class Frame extends Sprite {
            public function Frame ():void {
                  if (stage) init ();
                  else addEventListener(Event.ADDED_TO_STAGE, init);
            }

            private function init (e:Event = null):void {
                  removeEventListener(Event.ADDED_TO_STAGE, init);
            }
      }
}

this is how a class look like, and it is sort of the framework code that we need to type in every single ".as" file. thus, a better software, which is specially made for actionscript coding, is used:

the FlashDevelop!

i guess it saved me more than 24 hours throughout this project :D
it generates the framework code, and writing the "import" codes automatically for me, and generates functions whenever i needed.. basically it's a must-have for every actionscript coder..

highly recommended by Darien Toh, a senior actionscript coder in If Interactive, 1 of my sifu xD

Final Intro Video

After more than 7 weeks of hardwork, the result is pretty much what I expected. It's even more pleasing than my AV minor I should say :D



In comparison with another version with different music:

Sound Editing

Due to the time constraint, the music of the intro video was not originally composed. With the assistance of Chin Chan Shen from FA, we sliced the background music of Nike ID ad by Fantasista Utamaro and remixed it with a few sound effects.

However it turned out didn't match with the video, so we decided to create another version by remixing a few 8-bit songs by YMCK.

After the mixing is done, we sent it to a few friends and asked whether which version sounds the best. Most of the comments said the first version (nike ad) is more special and more provoking than the second version (YMCK 8-bit song), so we dropped the second version and fine-tuned the first version.

Please refer to the final video for comparison between the 2 versions.

Animating Smokes

While most of the smokes were hand-drawn frame-by-frame, the missile trail in the rocket scene was created using CC Partycle Systems II in Adobe After Effects.

Picture on the left shows the setting that I used for the smokes. The "Longevity" and "Birth/Death Size" determines how each particle decays after a period of time.

The "Opacity Map" and "Max Opacity" were set to "constant" and "100%" so that the particles don't fade out when decayed.

Lastly, the "Position" is rotoscoped to follow the missile so that it creates a smoke trail behind the missile. (the red cross on the missile in the picture below indicates the particle producer)

Drawing Smokes

Drawing smokes was undoubtedly the biggest challenge for me because I never tried anything as dynamic as this (oh that's before I start drawing water and clothes in the future).

In my mockups, the smokes were drawn with the same workflow as I always use, which is outlining, colour filling & shading.

This kind of smoke looks quite good in stills, but soon you'll discover that with this workflow, it could take more than a week to draw a 25-frame sequence of expanding/contracting smokes. Thus a more efficient workflow must be developed.

After many trial-and-errors, I found this technique pretty flexible and the result is quite pleasing. The concept is to draw the smoke using only a single stroke of brush, with the following settings:
Spacing: 34%
Size Jitter: 43%
Scatter: 36%
and then apply a stroke and a hard inner shadow to the layer, and there we go, a stroke of smoke!

These are some of the demonstrations of this technique. This is a 7-frame sequence of an expanding smoke.

This is a 5-frame sequence of another expanding smoke.

And this is a 9-frame smoke transition.

Digital Mockup

Digital Painting Workflow

1. First of all, a rough sketch is drawn by using a Wacom tablet directly in the Photoshop canvas. I did not scan the hand-drawn sketches because I wasn't satisfied with the design in the first place.

2. Outlines are traced with both vector path and 4px fixed-width raster brush.

3. The shapes are then filled with base colors by using brush and magic wand tool.

4. Shadows are then added in clip-masked layers.

5. After that, the outlines are filled with colors.

6. Lastly, some final touch-ups are added to fill in every corner of the composition.

Early Mockup

These are some of the early mockup sketches. The digital ones have a different interface but basically serve the same contents.

Contest ideas

To draw media attention and go viral, a contest or a game should be added to boost its sharing value. Here are some of the early ideas that I came out with:

Design Motives

Followings are some of the random design motives that I could think of. Each of them is labelled with possible pages that could place the element.

Followings are two loading pages based on the design motive sketches above. The final loading page was based on the lower design, but spits rainbow instead of random stuff.