Figure 4.1: Publish Settings

After the FLA file was saved as a Flash CS3 file, the movie is exported as a Windows Projector .exe file.

Figure 4.2: Saving Flash CS3 FLA as a Flash 8 FLA

Saving the Flash CS3 file to a Flash 8 file (within Flash CS3) enables the character animation movie to be opened by machines with Flash 8 installed. However the code will not execute as Flash 8 is only compatible up to ActionScript 2.0, but will allow the user to view all the code and content within the movie.

Conclusion

Referring to the original storyboard most of the design aspects are the same in the final product. All the features that are identified in the stoyboards are included in the final product including the planned animations, interactive panel with drag and drop functionality, sound and a preloader. Other design elements included in the final flash product also carried over from the storyboard such as the display links to change the graphical style of the animation – wireframe, shaded, wireshade and specular. Another pleasing feature that that carried over from the storyboard is the rotating ship animation behind the panel. This graphic that was created in Maya and animated using ActionScript adds depth to the final product and compliments the overall design of the product. In addition, the inclusion of the rotating ship animation encourages the uesr to drag the panel so the whole animation can be shown. Looking back at the layers storyboard, one additional layer is added in the final product to hold the rotating ship animation which made the scene easier to manage and benifited workflow. Other than that the storyboard was followed very accurately and i’m pleased with the result. The typography used also suites the style of the final product – using an Arial font fot the links in the panels and Microsoft Sans everywhere else benfited the overall design and meant that the whole movie is not overpowered by one font.

Moving onto the quality of animations and Maya integration with Flash, overall i’m pleased with the overall result. Using Maya to create the animations had produced a superior result compared to if i used Flash to produce the animations. It also gave me other options to include in the final product such as a range of display settings such as rendering the animation out as a wireframe, shaded etc. These graphical styles would have been very difficult to accomplish in Flash CS4 even though Flash includes some excellent drawing tools. Rendering times in Maya didn’t take long considering 80 frames were being rendered for each animation and the Vector Renderer didn’t cause any problems in creating the SWF files to be imported in Flash CS4. The frame rate of 24 frames per second is maintainted throughout the whole movie that produced smooth, consistent animations that increased the quality of the movie overall.

Although only three raster images are used in the product some advantages and disadvantages were highlighted between the user of vector graphics and raster graphics. As Flash works in vector graphics that use mathmatical formulae to make up an image gave some advantages to the overall product. Firstly the file size would have been signicantly larger than if the animations were rendered in reaster graphics. Secondly, vector graphics increase the quality of the product as no distortion or blurred results occur when resizing or manipulating an image as the graphics are not made up of individual pizels. This gave the freedom of transforming graphics without losing quality. Additionally, using the Vector rendere produced a very smooth result overall that complimented the overall design of the final product. Moving onto the raster graphics used in the product that included the rendered designs of the alien and the alien ship -  without using raster graphics these particular images would not have been as detailed if Vector graphics were used. In addition, it would have been impossible to get the accurate textured results of the alien and the glow, lighting and shadow effects of the alien ship. Using pixels in this case benifited the product greatly and the quality of the images were maintained when transforming them – the raster graphics had to be resized slightly (made smaller) in the final product however no complications or loss of qulaity occured.

One feature that could have been improved in the product is the sound effects. Starting with the background music, i didn’t feel it suited the product as well as other sound loops could after additionally thinking it was a satisfactory sound loop for this type of product. If i were to improve the product i would spend more time searching for a better sound loop that suited the overall products style / design. Sounds could have also been added when clicking on a particular link which would have added depth to the movie. Searching for this type of sound did occur however a decent sound effect wasn’t found to suite or benifit the final product. However, if it were to be improved, a sound affect for rollovers and clicks could be added as well.

The Flash product is designed for additions, particulary for adding animations – the panel is created with a mask where the user / designer can add an animation if they felt necessary. In addition, different categories could be added to display links for other types of animation – a category could be created for alien animations and ship animations. As there wasn’t a need to create categories in the final product, it is a possibility to add in the future as the rigged alien model can still be tweaked resulting in different types of animations that can then be rendered using Maya Vector and imported in Flash.

One of the first features that was created for the flash movie was the preloader. The preloader is an important feature of the Flash movie as 24 SWFs were exported from Maya and imported into Flash causing the file size of the overall FLA to be significantly larger. Therefore a preloader is needed for the product particularly if it was to be deployed to the web and the end user had a weak internet connection. I didn’t want to link the SWFs externally in this particular project as i could manage one FLA file more easily as the main reason.

Before coding the preloader i created a movie clip with some nested objects including three dynamic text fields with instance names and a MovieClip which would act as a loading bar. The dynamic text fields would display the percent loaded, number of bytes loaded and total bytes loaded and have appropriate instance names which are percent_txt, ofBytes_txt and totalBytes_txt. Additionally, the loader graphic had the instance name of loaderFill_mc. By using built in methods within ActionScript 3.0 including bytesTotal and bytesLoaded the preloader was simple to code. Once the objects were created  / overall movieclip for the preloader, the following code was used for the preloader to work. The code below is fully commented:

stop();

// Setting up an Event Listener causing the Flash Player to listen out for the loaderF function when the movie is executed

addEventListener(Event.ENTER_FRAME, loaderF);

/*
The loaderF function creates three variables called toLoad, loaded and total all of Number data types
toLoad – contains the total SWF file size in bytes
loaded – will contains the amount of bytes that have loaded
total – will contain the sum of loaded / toLoad to display a percentage of how much the movie has loaded
*/

function loaderF(event:Event):void {
var toLoad:Number = loaderInfo.bytesTotal;
var loaded:Number = loaderInfo.bytesLoaded;
var total:Number = loaded / toLoad;

/*
If Flash Player has loaded the movie, stop listening for the Event Listener
Else, the scaleX property of the preloaderFill_mc object is equal to the percentage of the movie loaded, display the percentage in the percent_txt
dynamic text field, display the number of bytes loaded in the ofBytes_txt dynamic text field and display the total file size in the totalBytes_txt dynamic text field.
*/

if(loaded == toLoad) {
removeEventListener(Event.ENTER_FRAME, loaderF);
gotoAndStop(5);
} else {
preloader_mc.preloaderFill_mc.scaleX = total;
preloader_mc.percent_txt.text = Math.floor(total * 100) + “%”;
preloader_mc.ofBytes_txt.text = loaded;
preloader_mc.totalBytes_txt.text = toLoad;

}
}

Previewing Preloader

Figure 3.1: Adjusting the Simulate Download settings

Once you have created the preloader and have enough content within your scene, you can preview your preloader based on a specific connection speed. For example, by testing your movie in the Flash IDE (Control – Test Movie or Ctrl+Enter) and selecting View – Download Settings, you can select a connection speed for testing how long it will take your movie to load based on that connection. In the above screenshot, i chose a T1 connection which simulates at 131.2 KB/s.

Figure 3.2: Preloader working

The above screenshot shows the preloader in action with all objects working. The scaleX property of the loader bar is updating as the total percentage of the movie loaded increases. Additionally, the text fields are being updated including the percentage of movie loaded, total bytes loaded and total size.

Creating the Panel

The panel was created utilizing Flash’s drawing tools and is structured so that extra content and animation can be added if the movie was to be further developed. Using the Rectangle Primitive tool the main graphics for the panel could be created quickly. Additonally, Rectangle Options were also adjusted to create rounded edges, particularly for the interactive bar at the top of the panel. Moving onto the drag and drop functionality, the top bar graphics created using the Rectangle Primitive tool was converted to a MovieClip and giving an instance name to communicate with ActionScript. The top bar is a nested MovieClip within the panel MovieClip.

Another MovieClip was created within the Panel MovieClip to hold all the links for navigation therefore the instance name for the object is called panelNav_mc. Going into more detail, the panel navigation MovieClip contains buttons that are given instance names to communicate with ActionScript 3.0 so that when the user click the button, the movie will navigate to the corresponding frame to display the animation. The code works such that when the movie is executed, the Flash player is listening for a particular event – in this case a MouseEvent. Within the MouseEvent class the event listener specifies the Click property (Code will be shown further down in this post). The buttons are also animated with a rollover and mouse down effect which was done when producing the movie assets. The buttons effects in this case are simple and compliment the overall design and colour scheme of the movie , this aspect also makes the design more consistant and professional compared to a button that had lots of interactivity and unncessary animation. The links that are in the Panel MovieClip correspond to the storyboard.

Figure 3.3: Panel MovieClip Timeline

The above screenshot shows the structure of the panel MovieClip. The panel MovieClip is structred with layers of different types. Starting from the top is a layer called ‘actions’ where a minimal amount of ActionScript is added. As this MovieClip is given its own layer in the main timeline that runs on all frames of the movie, a stop function is the only code added in the actions layer. Following standards, the flash movie doesn’t include much encapsulation (code within MovieClips) as it is much easier to manage on the top level of the timeline / Scene level. Putting code on the Scene level in addition to on a separate layer makes code easier to find and edit. If you working on a group project, team members will also be able to find the code much easier if it were placed on the Scene level, and not in nested MovieClips. Overall, placing code on the main timeline is more efficient, benifits workflow and organises your scene much cleanly.

The second layer in the Panel MovieClip is the top_panel layer which includes the top bar of the panel with drag and drop functionality. This top bar MovieClip is placed in it’s own layer and is placed on top of the layer hierarchy because it needs to be over all additional graphics that are included in this ohject. In addition, the rest of the layers are within a mask in this particular MovieClip and it is unnecessary to put the top bar in a mask as it will always be shown / visible in the main movie that will allow user interaction.

The remaining layers within the Panel MovieClip are within a mask that add extra functionality and possibilites to this object. For example, by including a mask the panel could have a range of effects such as expand and collaps functionality, in additon to some general motion and shape tweens. The category layer is at the top of the mask which doesn’t hold any objects but allows the designer to add extra content in the MovieClip with the intention of categories. For example, if the flash product was to be further developed, there may be an ‘Alien’ and ‘Ship’ category to hold the corresponding animations. This is a possibility if more animations were to be added to the panel. The remaining layers in the mask include the remaining graphics of the panel that are created using Flash’s drawing tools. These graphics include a bottom bar, the background graphicsand a small stroke to complete the panel design.

Figure 3.4: Nested MovieClips within the main Panel MovieClip

The obove screenshot shows the MovieClips that contain navigation links to particular animations in addition to the top bar that allow drag and drop functionality. Each MovieClip has been given an instance name to communicate within ActionScript 3.0 (Code will be shown further down this post).

Creating the Instructions

Figure 3.5: Instructions that are displayed after movie is loaded

The instructions were created using Flash’s text tools. Referring to the storyboard the planned design and fonts were implemented causing the instructions to be added to the movie very quickly and easily.

Adding Character Animation Assets

Having imported the character animations (that were exported using Maya Vector) they then needed to be added to the scene. To add the animations a MovieClip is created for each type of animation to display the different styles, additionally, all animations are placed in the ‘animations’ layer in the main timeline that corresponds to the storyboard. The main timeline structure will be documented later in this post. For example, a MovieClip would hold the alien blink animations including the wireframe, shaded, wireshade and specular displays on separate frames. In addition, the MovieClip holds buttons that link to the corresponding display setting:

Figure 3.6: Design of the MovieClips that hold the Alien and Alien Ship animations

The above screenshot desmonstrates how the animation MovieClips are designed. The animation is placed above the links that allow the user to select a different display setting such as a wireframe, shaded, wireshade or specular view. These buttons follow the same design / interactivity as the panel buttons as this adds consistenct to the movie as well as making it look more professional. Additionally, the buttons are given an instance name to communicate with ActionScript 3.0. The code appears on the main timeline in the ‘actions’ layer which will be documented and explained later in this post. Behind the buttons is a simple background created using the Rectangle tool within Flash with a grey background and black stroke to complete the design of the MovieClip. All other animations follow the same design in the movie.

Figure 3.7: Structure of the animation MovieClips

The alien and ship animation MovieClips all follow the same structure as the above screenshot. Beginning with tha layers, the ‘actions’ layer only contains a stop function so that the MovieClip stops at that particular frame. All other code to program the buttons is on the main timeline which will be documented later in this post. The second layer holds the animation MovieClip that was exported from Maya. The ‘display’ layer contains all the buttons that enables the user to select a particular display as explained above. The bottom layer in the animations timeline is the background layer that just includes a simple rectangle – grey fill and black stroke colour to put behind the buttons.

Adding the Rendered Alien Assets

The rendered images of possible designs for the alien were added on the same layer as the animations on the main timeline – the ‘animations’ layer. As explained in the storyboard post, the purpose of creating  a coupld of possible designs for the alien is to give the audience a better visualization of what tha alien could look like, and how the character would animate as a complete textured model.

Figure 3.8: Possible alien designs rendered using Maya software added to the Scene

Adding Music

Having created the music button assets (explained in the previous post), they were added to the scene and positioned to the top right hand corner of the stage following the initial storyboard. The music control objects are contained in the menubar_options layer in the main timeline. After adding the buttons and importing the sound from flashkit.com in addition to exporting it for ActionScript, some code was added to add interactivity to the sound buttons:

//Load Sound – creates a new instance of the backSound object, the SoundChannel class and SoundTransform class.

var reqSound:backSound = new backSound();
var controller:SoundChannel;
var volumeControl:SoundTransform;

// This function plays the sound and adds an Event Listener so the Flash Player listens out for the sound to end / complete.

function playMusic():void
{
controller = reqSound.play();
volumeControl = controller.soundTransform;
controller.addEventListener(Event.SOUND_COMPLETE, loopMusic);
}

// The loopMusic function connects to the controller event listener and repeats / plays the sound if it ends

function loopMusic(e:Event):void
{
if (reqSound != null)
{
controller.removeEventListener(Event.SOUND_COMPLETE, loopMusic);
playMusic();
}
}

// Adding event listeners to the sond control buttons so the Flash Player listens out for a mouse click

play_btn.addEventListener(MouseEvent.CLICK, playBackgroundSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopBackgroundSound);
volumeUp_btn.addEventListener(MouseEvent.CLICK, volumeUp);
volumeDown_btn.addEventListener(MouseEvent.CLICK, volumeDown);

// Plays sound when clicked

function playBackgroundSound(event:MouseEvent):void {
playMusic();
play_btn.removeEventListener(MouseEvent.CLICK, playBackgroundSound);
}

// Stops sound when clicked

function stopBackgroundSound(event:MouseEvent):void {
controller.stop();
play_btn.addEventListener(MouseEvent.CLICK, playBackgroundSound);
}

// Increases volume when clicked

function volumeUp(event:MouseEvent):void {
volumeControl.volume += .1;
if(volumeControl.volume > 1) {
volumeControl.volume = 1;
}
controller.soundTransform = volumeControl;
}

// Decreases volume when clicked

function volumeDown(event:MouseEvent):void {
volumeControl.volume -= .1;
if(volumeControl.volume < 0) {
volumeControl.volume = 0;
}
controller.soundTransform = volumeControl;
}

Timelime and Library

Figure 3.9: Timeline

The timeline follows the above structure to manage the movie efficiently, keep a good organised system for finding and editing objects in addition to managing code – the structure is designed to optimize workflow. Describing layers from top to bottom:

actions

The actions layer contains all the ActionScript 3.0 within the FLA file. The ActionScript is separated from the objects / content of the movie to keep it more organised which makes code easier to find. Additionally, the actions layer is placed as the top layer in the timeline to gain a better workflow as accessing and editing code is a major part of the project.

preloader

The preloader is the second layer in the main timeline holding all the preloader objects. As deomstrated from the screenshot above, the preloader is given five frames which separates it from the ther frames in the movie and gives the opportunity to make any additions to the preloader if necessary as the project progresses. Additionally, the preloader is givent five frames as a visual reference that makes my workflow easier.

panel

As the panel will always  be viewable when the movie is loaded in as well as being the main navigational system it is the first layer that holds actual content for the movie. The panel also needed to be placed above other elements such as the animations and menu bar layers as you can drag it around the stage – it will need to be placed on top of all objects in the movie giving visibility to all the links making navigation for the user seamless.

animations

The animations layer includes all the exported SWFs from Maya that display the character animations, a keyframe is given for each animation. The rendered designs of the alien are also included on this layer.

animations_frame

This layer contains a visual frame that holds the animations. The frame was created with Rectangle Primitive tool.

menubar_options

The menubar_options layer contains all the objects within the menu bar such as the Animations and Designs links to display either the home page of the rendered designs of the character. This layer also contains the sound controls such as the stop, play, volume up and volume down buttons. Creating multiple layers to store the menu bar options was not necessary in producing the Flash movie as all the objects were very manageable and easy to edit.

menubar

The menubar layer contains the graphics for the menubar that were created using Flash’s drawing tools. The menu bar graphics are separated from the menu bar objects to make selection easier – by locking the menubar layer there is no chance of selecting the background when trying to select a sound button for example.

ship_graphic

The ship_graphic layer contains the rotating ship animation that appears behind the panel when the movie loads. As the ship graphics is quite a large object it is easier managed in a separate layer compared to placing it in the background layer.

background

Lastly, the background layer contains the background for the flash movie which is a linear gradient created using the Rectangle tool.

Figure 3.10: The Library includes the above folders / oragnisation system to oragnise objects uesd in the scene. All objects are placed in the relevant folder.

ActionScript 3.0 Documentation

Frame 1 – Preloader

stop();

addEventListener(Event.ENTER_FRAME, loaderF);

function loaderF(event:Event):void {
var toLoad:Number = loaderInfo.bytesTotal;
var loaded:Number = loaderInfo.bytesLoaded;
var total:Number = loaded / toLoad;

if(loaded == toLoad) {
removeEventListener(Event.ENTER_FRAME, loaderF);
gotoAndStop(5);
} else {
preloader_mc.preloaderFill_mc.scaleX = total;
preloader_mc.percent_txt.text = Math.floor(total * 100) + “%”;
preloader_mc.ofBytes_txt.text = loaded;
preloader_mc.totalBytes_txt.text = toLoad;

}
}

Frame 5: Code for the Animation and Design Links, Sound Controls, Animation Panel Interactivity, Panel Links and Rotating Ship Animation

stop();

// ——————————————- Menu Bar ——————————————
//Animation and Designs Links

animationLink_btn.addEventListener(MouseEvent.CLICK, animationClick);

function animationClick(event:MouseEvent):void {
gotoAndStop(5);
}

designsLink_btn.addEventListener(MouseEvent.CLICK, designsClick);

function designsClick(event:MouseEvent):void {
gotoAndStop(14);
}

//Load Sound
var reqSound:backSound = new backSound();
var controller:SoundChannel;
var volumeControl:SoundTransform;

function playMusic():void
{
controller = reqSound.play();
volumeControl = controller.soundTransform;
controller.addEventListener(Event.SOUND_COMPLETE, loopMusic);
}

function loopMusic(e:Event):void
{
if (reqSound != null)
{
controller.removeEventListener(Event.SOUND_COMPLETE, loopMusic);
playMusic();
}
}

play_btn.addEventListener(MouseEvent.CLICK, playBackgroundSound);
stop_btn.addEventListener(MouseEvent.CLICK, stopBackgroundSound);
volumeUp_btn.addEventListener(MouseEvent.CLICK, volumeUp);
volumeDown_btn.addEventListener(MouseEvent.CLICK, volumeDown);

function playBackgroundSound(event:MouseEvent):void {
playMusic();
play_btn.removeEventListener(MouseEvent.CLICK, playBackgroundSound);
}

function stopBackgroundSound(event:MouseEvent):void {
controller.stop();
play_btn.addEventListener(MouseEvent.CLICK, playBackgroundSound);
}

function volumeUp(event:MouseEvent):void {
volumeControl.volume += .1;
if(volumeControl.volume > 1) {
volumeControl.volume = 1;
}
controller.soundTransform = volumeControl;
}

function volumeDown(event:MouseEvent):void {
volumeControl.volume -= .1;
if(volumeControl.volume < 0) {
volumeControl.volume = 0;
}
controller.soundTransform = volumeControl;
}

// ——————————————- Alien Animation Panel ——————————————

// Setting up a two Event Listeners for the top part of the alien animation panel
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.MOUSE_DOWN, panelAlienDrag);
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.MOUSE_UP, panelAlienDrop);

//Setting up a roll over Event Listener for the top bar of the alien panel
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.ROLL_OVER, panelAlienTopRollOver);
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.ROLL_OUT, panelAlienTopRollOut);

/*
When the mouse is down, the whole alien animation panel will be dragged.
The Mouse Down Listener will be removed and the Mouse Up Listener will be added.
*/
function panelAlienDrag(e:MouseEvent):void {
panelalien_mc.startDrag();
panelalien_mc.panelalientop_mc.removeEventListener(MouseEvent.MOUSE_DOWN, panelAlienDrag);
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.MOUSE_UP, panelAlienDrop);
}

/*
When the mouse is up, the whole alien animation panel will stop dragging.
The Mouse Up Listener will be removed and the Mouse Down Listener will be added.
*/
function panelAlienDrop(e:MouseEvent):void {
panelalien_mc.stopDrag();
panelalien_mc.panelalientop_mc.removeEventListener(MouseEvent.MOUSE_UP, panelAlienDrop);
panelalien_mc.panelalientop_mc.addEventListener(MouseEvent.MOUSE_DOWN, panelAlienDrag);
}

function panelAlienTopRollOver(e:MouseEvent):void {
panelalien_mc.panelalientop_mc.alpha = .4;
}

function panelAlienTopRollOut(e:MouseEvent):void {
panelalien_mc.panelalientop_mc.alpha = 1;
}

// ——————————————- Alien Animation Links ——————————————

panelalien_mc.panelNav_mc.alienBlinkLink_btn.addEventListener(MouseEvent.CLICK, clickBlinkLink);
panelalien_mc.panelNav_mc.alienShakeHeadLink_btn.addEventListener(MouseEvent.CLICK, clickShakeHeadLink);
panelalien_mc.panelNav_mc.alienHeadTiltLink_btn.addEventListener(MouseEvent.CLICK, clickHeadTiltLink);
panelalien_mc.panelNav_mc.alienHeadNodLink_btn.addEventListener(MouseEvent.CLICK, clickHeadNodLink);
panelalien_mc.panelNav_mc.alienShockLink_btn.addEventListener(MouseEvent.CLICK, clickHeadShockLink);
panelalien_mc.panelNav_mc.shipRotateLink_btn.addEventListener(MouseEvent.CLICK, clickShipRotateLink);
panelalien_mc.panelNav_mc.shipDoorOpenLink_btn.addEventListener(MouseEvent.CLICK, clickDoorOpenLink);
panelalien_mc.panelNav_mc.alienWalkCycleLink_btn.addEventListener(MouseEvent.CLICK, clickalienWalkCycleLink);

function clickBlinkLink(event:MouseEvent):void {
gotoAndStop(6);
}

function clickShakeHeadLink(event:MouseEvent):void {
gotoAndStop(7);
}

function clickHeadTiltLink(event:MouseEvent):void {
gotoAndStop(8);
}

function clickHeadNodLink(event:MouseEvent):void {
gotoAndStop(9);
}

function clickHeadShockLink(event:MouseEvent):void {
gotoAndStop(10);
}

function clickShipRotateLink(event:MouseEvent):void {
gotoAndStop(11);
}

function clickDoorOpenLink(event:MouseEvent):void {
gotoAndStop(12);
}

function clickalienWalkCycleLink(event:MouseEvent):void {
gotoAndStop(13);
}

//Rotate Ship
ship_mc.addEventListener(Event.ENTER_FRAME, shipRotate);

function shipRotate(event:Event):void {
ship_mc.rotation += .5;
}

Frame 6:  Alien Blink Display Button Interactivity

stop();

alienBlink_mc.blink_wireframeDisplay.addEventListener(MouseEvent.CLICK, blinkWireshadeClick);

function blinkWireshadeClick(event:MouseEvent):void {
alienBlink_mc.gotoAndStop(4);
}

alienBlink_mc.blink_shadedDisplay.addEventListener(MouseEvent.CLICK, blinkShadedClick);

function blinkShadedClick(event:MouseEvent):void {
alienBlink_mc.gotoAndStop(3);
}

alienBlink_mc.blink_wireshadDisplay.addEventListener(MouseEvent.CLICK, blinkWireshadeClick2);

function blinkWireshadeClick2(event:MouseEvent):void {
alienBlink_mc.gotoAndStop(2);
}

alienBlink_mc.blink_specularDisplay.addEventListener(MouseEvent.CLICK, blinkSpecularClick);

function blinkSpecularClick(event:MouseEvent):void {
alienBlink_mc.gotoAndStop(1);
}

Frame 7:  Alien Head Shake Display Button Interactivity

stop();

headShake_mc.shake_wireframeDisplay.addEventListener(MouseEvent.CLICK, shakeWireshadeClick);

function shakeWireshadeClick(event:MouseEvent):void {
headShake_mc.gotoAndStop(4);
}

headShake_mc.shake_shadedDisplay.addEventListener(MouseEvent.CLICK, shakeShadedClick);

function shakeShadedClick(event:MouseEvent):void {
headShake_mc.gotoAndStop(3);
}

headShake_mc.shake_wireshadDisplay.addEventListener(MouseEvent.CLICK, shakeWireshadeClick2);

function shakeWireshadeClick2(event:MouseEvent):void {
headShake_mc.gotoAndStop(2);
}

headShake_mc.shake_specularDisplay.addEventListener(MouseEvent.CLICK, shakeSpecularClick);

function shakeSpecularClick(event:MouseEvent):void {
headShake_mc.gotoAndStop(1);
}

Frame 8: Alien Head Tilt Display Button Interactivity

stop();

headTilt_mc.tilt_wireframeDisplay.addEventListener(MouseEvent.CLICK, tiltWireframeClick);

function tiltWireframeClick(event:MouseEvent):void {
headTilt_mc.gotoAndStop(4);
}

headTilt_mc.tilt_shadedDisplay.addEventListener(MouseEvent.CLICK, tiltShadedClick);

function tiltShadedClick(event:MouseEvent):void {
headTilt_mc.gotoAndStop(3);
}

headTilt_mc.tilt_wireshadDisplay.addEventListener(MouseEvent.CLICK, tiltWireshadeClick2);

function tiltWireshadeClick2(event:MouseEvent):void {
headTilt_mc.gotoAndStop(2);
}

headTilt_mc.tilt_specularDisplay.addEventListener(MouseEvent.CLICK, tiltSpecularClick);

function tiltSpecularClick(event:MouseEvent):void {
headTilt_mc.gotoAndStop(1);
}

Frame 9: Alien Head Nod Display Button Interactivity

stop();

headNod_mc.nod_wireframeDisplay.addEventListener(MouseEvent.CLICK, nodWireframeClick);

function nodWireframeClick(event:MouseEvent):void {
headNod_mc.gotoAndStop(4);
}

headNod_mc.nod_shadedDisplay.addEventListener(MouseEvent.CLICK, nodShadedClick);

function nodShadedClick(event:MouseEvent):void {
headNod_mc.gotoAndStop(3);
}

headNod_mc.nod_wireshadDisplay.addEventListener(MouseEvent.CLICK, nodWireshadeClick2);

function nodWireshadeClick2(event:MouseEvent):void {
headNod_mc.gotoAndStop(2);
}

headNod_mc.nod_specularDisplay.addEventListener(MouseEvent.CLICK, nodSpecularClick);

function nodSpecularClick(event:MouseEvent):void {
headNod_mc.gotoAndStop(1);
}

Frame 10: Alien Shocked Display Button Interactivity

stop();

shocked_mc.shocked_wireframeDisplay.addEventListener(MouseEvent.CLICK, shockedWireframeClick);

function shockedWireframeClick(event:MouseEvent):void {
shocked_mc.gotoAndStop(4);
}

shocked_mc.shocked_shadedDisplay.addEventListener(MouseEvent.CLICK, shockedShadedClick);

function shockedShadedClick(event:MouseEvent):void {
shocked_mc.gotoAndStop(3);
}

shocked_mc.shocked_wireshadDisplay.addEventListener(MouseEvent.CLICK, shockedWireshadeClick2);

function shockedWireshadeClick2(event:MouseEvent):void {
shocked_mc.gotoAndStop(2);
}

shocked_mc.shocked_specularDisplay.addEventListener(MouseEvent.CLICK, shockedSpecularClick);

function shockedSpecularClick(event:MouseEvent):void {
shocked_mc.gotoAndStop(1);
}

Frame 11: Ship Rotate Display Button Interactivity

stop();

shipRotate_mc.rotate_wireframeDisplay.addEventListener(MouseEvent.CLICK, rotateWireframeClick);

function rotateWireframeClick(event:MouseEvent):void {
shipRotate_mc.gotoAndStop(4);
}

shipRotate_mc.rotate_shadedDisplay.addEventListener(MouseEvent.CLICK, rotateShadedClick);

function rotateShadedClick(event:MouseEvent):void {
shipRotate_mc.gotoAndStop(3);
}

shipRotate_mc.rotate_wireshadDisplay.addEventListener(MouseEvent.CLICK, rotateWireshadeClick2);

function rotateWireshadeClick2(event:MouseEvent):void {
shipRotate_mc.gotoAndStop(2);
}

shipRotate_mc.rotate_specularDisplay.addEventListener(MouseEvent.CLICK, rotateSpecularClick);

function rotateSpecularClick(event:MouseEvent):void {
shipRotate_mc.gotoAndStop(1);
}

Frame 12: Ship Door Open Display Button Interactivity

stop();

shipDoorOpen_mc.door_wireframeDisplay.addEventListener(MouseEvent.CLICK, doorWireshadeClick);

function doorWireshadeClick(event:MouseEvent):void {
shipDoorOpen_mc.gotoAndStop(4);
}

shipDoorOpen_mc.door_shadedDisplay.addEventListener(MouseEvent.CLICK, doorShadedClick);

function doorShadedClick(event:MouseEvent):void {
shipDoorOpen_mc.gotoAndStop(3);
}

shipDoorOpen_mc.door_wireshadDisplay.addEventListener(MouseEvent.CLICK, doorWireshadeClick2);

function doorWireshadeClick2(event:MouseEvent):void {
shipDoorOpen_mc.gotoAndStop(2);
}

shipDoorOpen_mc.door_specularDisplay.addEventListener(MouseEvent.CLICK, doorSpecularClick);

function doorSpecularClick(event:MouseEvent):void {
shipDoorOpen_mc.gotoAndStop(1);
}

Frame 13: Alien Walk Cycle Display Button Interactivity

stop();

walkCycle_mc.walk_wireframeDisplay.addEventListener(MouseEvent.CLICK, walkWireframeClick);

function walkWireframeClick(event:MouseEvent):void {
walkCycle_mc.gotoAndStop(4);
}

walkCycle_mc.walk_shadedDisplay.addEventListener(MouseEvent.CLICK, walkShadedClick);

function walkShadedClick(event:MouseEvent):void {
walkCycle_mc.gotoAndStop(3);
}

walkCycle_mc.walk_wireshadDisplay.addEventListener(MouseEvent.CLICK, walkWireshadeClick2);

function walkWireshadeClick2(event:MouseEvent):void {
walkCycle_mc.gotoAndStop(2);
}

walkCycle_mc.walk_specularDisplay.addEventListener(MouseEvent.CLICK, walkSpecularClick);

function walkSpecularClick(event:MouseEvent):void {
walkCycle_mc.gotoAndStop(1);
}

Frame 14: Alien Rendered Designs

stop();

Figure 2.1: Rigged Character in Maya

The above screenshot shows the modeled and rigged character within Maya to produce the SWF assets (character animations) to import into Flash. To start with, i modeled the alien using NURBS – Non-Uniform Rational B-Spines, giving me the advantage of easily being able to create a smooth, organic shape. NURBS is a geometry type that is calculated by mathmatical algorithms to generate a smooth surface, even though polygons are rendered to give visual output. As the alien geometry was created using NURBS curves i firtly created the curve that defined the shape of the alien, and did a Revolve Surface operation that defined the shape of the character.

I animated the character by firstly binding bones to the character geometry / NURBS surface, using the Bone tool within Maya. I selected the smooth bind operatio that caused the geometry to deform smoothly when animated – in the screenshot above you can see the bones (Forward Kinematics) within the model. In addition to model in the perspective viewport, there is a locator that contains a range of custom attributes. Combining the custom attributes with Set Driven Key – a reactive animation technique within Maya that allows you to animate a parameter by adjusting another parameter, allowed me to create a rig for my character. Using this techniqe allowed me to store all the animation attributes within one object / node within Maya – within the locator object, which is ultimately a transform node (in this case with added custom attributes).

To the right of the Maya interface in the above screenshot is the channel box that contains the lcoators transform node (and Shape node below it). Within the transform node are my custom attributes that are used to animate the character – custom attributes can be added to an object / node by selecting Modify – Add Attribute in the main menu bar  or by using the Hotbox. You can also edit attributes within this menu. In this particular case, i added attributes such as Blink, Nod, Tilt Head and Head Shake which can contain a Float value between -10 to 10. As explained before, as these attributes are added in one place the character became very easy to animate. Once i rigged the character i set a range of keyframes for all the custom attriutes at different values to generate animation. After that i was ready to render the animations using Maya’s vector render settings.

The folling screenshots show the animation curve for each animated joint of the alien when creating the walk cycle. The rest of the animations were animated by placing a keyframe using the channel box from the locator custom attributes as explained above. The alien is animated using forward kinematics where each joint is animated individually. The curves below are shown in the Graph Editor in Maya:

Figure 2.2: Root joint animation curve

Figure 2.3: Joint 1 animation curve

Figure 2.4: Joint 2 animation curve

Figure 2.5: Joint 3 animation curve

Figure 2.6: Joint 4 animation curve

Figure 2.7: Joint 4 animation curve

Render Settings

Figure 2.8: Common Render Settings in addition to Wireframe and Shaded Vector Render Settings

After i modeled, rigged, animated and applied a basic shader to the alien i rendered the animation using a range of render settings and Maya Vector. The first screenshot above shows the Common render settings that are applied to every rendered asset in the project coming from Maya. The Image File output is firstly set to name.ext (Multi Frame) that enables an entire animation to be rendered out and not a singe frame. Additionally, i set the Image Format to Macromedia SWF so i can import the animation easily, as vector graphics and keyframe animation into Flash CS4. The Start frame is set to 1 and the End Frame is set to 80 at 24 frames per second (Real Time). Therefore the duration of the rendered animation is just over two seconds. Moving on the animation was rendered through the perspective camera as i didn’t find it necessary to add a new camera within the scene. I would have added a camera if a specific attribute had to be edited or if the camera had to be animated. However, as the renderable camera is static and only needed to capture the animation of the alien character, there was no need to add a camera as the renderable camera. Additionally, i set a bookmark that saves a particular camera position so i could easily revert back to the position was when the animation was rendered.

The image size is set to 640 by 480 pixels. As this is the default renderable image size in Maya in addition to my planned flash document size, i came to the conclusion that this was a good image size to render out as. Another factor to consider in this particular aspect is that the graphics will be rendered out as Vector graphics, therefore if you increase the size of the image will not result in a loss of quality. Theoretically, if i had adjusted the image size to a smaller preset or custom size, i would not had lost any quality in the animation as long as the camera rendered everything out.

The second Render Settings panel are settings for the alien character animation to be rendered out as a wireframe. Beginning with the frame rate – the same frame rate used for all the rendered animation is 24 frames per second. Having an animation at 24fps results in a smooth animation without taking up hard drive space or system resources for a quality animation. For example, if i rendered out the animation at 12fps, the animation would have been at a lower quality and could appear ‘jumpy’. Additionally, if i had rendered the animation at 48fps, the animation would appear very smooth and at a high quality, however the file size would have dramatically increased resulting in increased loading times from the final SWF which can be a major disadvantage. As SWFs (Small Web Files) are meant to be deployed on the web their file sizes need to be as low as possible. Additionally, the audience / end user would not want to wait for a preloader to fill up for too long, no matter how good it looks.

The second option in the Maya Vector settings is the Flash version. The Flash version only goes up to 5 in newer versions of Maya, however the animation would still render without any problems as an SWF and imported into Flash CS4. One possible reason why Autodesk haven’t updated the Flash version in newer versions of Maya is the possible integration with Swift 3D. For example, you are able to import models from popular 3d applications such as 3ds Max, Maya and Softimage into Swift 3D as polygonal objects, and have them render as vector graphics in Swift 3D. Swift 3D is a popular application for developers to inlcude in their pipeline if they are working with 3D graphics and interactive content to be deployed on the web. Swift 3D also has other features such as animation, texturing and lighting tools. Additionally, Swift 3D’s workflow can be similiar to Maya and Flash’s in comparision such as working with the timeline, and attributes of objects within the scene. I didn’t choose to use Swift 3D in this project as there is no need to – Maya Vector will produce an excellent result for the simple alien character animatic and i have access to a number of useful features that will be went through further on in this post.

Moving on, the Appearance Options were kept as default values for the rendered animation with a curve tolerance of 7.5 and a detail level of 0 as these are the render settings for the wireframe animation. Additionally, no fill options were enabled for the same reason. Under the Edge Options in the Maya Vector tab, the Include Edges box is ticked, enabling edges to be displayed in the final render. I set the Edge style to Outlines as i didn’t want to display all the edges for the geometry as it is quite dense and the file size would be significantly bigger. lastly, the Edge colour is set to a medium grey.

Moving onto the render settings for the shaded character animation, the image Format and Appearance Options are kept the same. The ‘Fill objects’ check box is ticked which will result in the final render being shaded. I set a fill style of average colour giving an affective cartoony result for the alien – giving the character enough colour and variation. I ticked the ‘Show back faces’ check box and shadows are enabled for the haded animation display. No edge options were enabled in the Render Settings for this display option.

Figure 2.9: Wireshade and Specular Vector Render Settings

The Wireshade Render Settings are the Wireframe and Shaded settings combined – the geometry will be shaded and a wireframe will appear around the outline of the geometry. The Specular render settings are the same as the Wireshade settings, however Highlights and Relections are enabled under the Fill Options. I selected a default Highlight level of 4 so that the user can see how light reacts with the geometry. Additionally, the Reflection depth value is set to two which gives the specular renders some reflectivity making the render visually stronger.

Obtaining Sound

Referring to the storyboard i planned to use background music in this Flash product, therefore the only sound needed is a sound that loops – preferrably over 6 seconds to prevent the sound from being repetitive. To get the sound to use in my Flash product i searched for it on the Flashkit website (www.flashkit.com). Under the sound loops section i found a sound that looped fairly well that could be used in my Flash product:

Figure 2.10: Sound download page

The above screenshot shows the download page of the sound loop to be used in my Flash product. There are three available file formats you can use to download the sound – a wav, mp3 or flashtrack. I chose to download an mp3 as the file size will stay at a minimum in addition to making the sound campible with a wider range of software, compared to a flashtrak for example. As the sound is 19 seconds long the user won’t be put off by listening to a short loop. After i downloaded the sound i unzipped the file and placed it in the Character Animation directory where all the FLAs are going to be saved during development.

Button Assets

Referring to the storyboard i confirmed that i needed three folders to store three categories of buttons. The first set of Buttons that needed to be created within Flash CS4 were the Display Links. The Display links would be coded so that when a display button was clicked, the animation would be displayed that corresponds to the display button. For example, if the user clicked on a ‘Wire’ display button, the animation would be displayed as a wireframe.

Figure 2.11: Animation Display button structure / design

The above screenshot illustrates the structure and design of the display buttons. The Button contains one layer – which is not named as it’s unnecessary to name the only layer in a symbol. The button consists of one static text field and the text corresponds to the display option. For example, the above screenshot shows the button for the Wireframe display option. A Keyframe is placed on the Up, Over and Down frames, therefore the button changes appearance on each stage of the mouse when it interacts with the button. a Keyframe is not placed on the Hit frame, as the graphics on this frame is where the user can interact with the mouse – the area of the text field in this case is fine therefore no attributes need to be edited. Moving on, when the mouse is not over the button, the text will appear a light grey – almost white (this is demonstrated in the screenshot as the text field needed to be active to make out the text on a white background). When the mouse is over the button the text turns a darker grey. Additionally, when the mouse is pressed down, the text turns a dark grey. The same pattern applies for all the other display buttons.

The second category of buttons that i created were assets for the Manu Bar options, including the Animation, Design, stop, play, volume up and volume down buttons. Convieniently, the Buttons Library (a library that includes prebuilt buttons in Flash CS4) contained a stop and play button that could be used in my Flash product – they followed the same colour scheme and went well with the overall design:

Figure 2.12: Stop and Play buttons in the Buttons Library

The Stop and Play buttons that i added to my Flash product are prebuilt buttons that exist within the buttons library within Flash CS4. As the buttons went well with the overall design of the Flash movie i decided to add them rather than making them from scratch. Additionally, the above stop and play buttons are easy to edit, enabling me to quickly create the volume up and volume down buttons as well.

Figure 2.13: The button structure and design of the volume up and volume down buttons

The above screenshot shows how the prebuilt stop button was edited to produce the volume up and volume down buttons – the square has been edited to a triangle using flashes drawing tools such as the line and paint bucket tool. From the above screenshot, you can see that the button is slightly complex, and to have designed the same type of button from scratch would have taken up production time. Additionally, the button was easy to edit as the layers are appropriately named and structured. Overall, using and editing a prebuilt button in Flash increased production time for more complex issues such as ActionScript design and implementation such as coding the audio buttons, preloader, navigational system and the drag/drop functionality of the panel.

Lastly, the panel buttons were created that would add the navigational system to the Flash product. These buttons would allow the user to view the corresponding animation in the ‘animation box’ from the storyboard. For example, the panel would have links to animations such as the blink, head shake, head tilt, head nod, shocked and the walk cycle. These buttons follow the same design and structure of the Dsiplay buttons to keep consistency throughout the Flash movie. Additionally, these links would be nested within the Panel MovieClip as the panel would have drag and drop functionality. However, this issue would be addressed upon actually creating the product.

Rendered Assets

An additional feature i want to include in my Character Animation SWF are a couple of rendered images of a possible final alien. This would give the audience who are viewing the flash product a better visualization of what a finished animated alien would look like, and not just judging on an animatic with a simple Blinn applied to the geometry. Therefore, i created a couple of textures within the Hypershade in Maya. Altogether i created three textures and decided two that are a green and blue styled textures. I also created a red styled alien which i didn’t want to take forward in this product as i didn’t think it was a realistic texture for the alien. I rendered the assets as JPEGs because of the low file size compared to other file formats such as TIFs. The rendered images were saved in the Character Animation directory and imported into Flash so the project would stay organised, and if i accidentally deleted the image it would be possible to locate the original file and re-import it without any problems. The below screenshots demonstrate the shader networks that are applied to the rendered alien asset.

Figure 2.14: Green Alien Shader Network

This shader network was compisited using nodes within the Hypershade. Two nodes are plugged into the final alienSkinM node, which is a Blinn material as i wanted specularity in the final renders. A fractal node is firstly applied to the Blinn material in the colour channel. A fractal is similiar to noise and includes two colours (within the fractal node). In this case, i chose a green and dark grey to apply to the colour channel (pure black would appear unrealistic). Attibutes within the fractal nodes such as Amplitude and Threshold were slightly edited to get the desired result for the aliens colour. In addition to the fractal node, a noise node was used to create a bump map for the alien. A bump map would give the illusion of added depth within the geometry in actual fact it adjusts the geometry’s normals to give the illusion of extra detail. This technique is often used in games as game models poly count are restricted. This means artists have to take into consideration what the hardware (consoles) can handle.  Three nodes are displayed at the bottom section of the Hypershade in the above screenshot – a place2DTexture, noise and bump2D node. The place 2D texture node includes attributes that adjusts the noise node – such as position, rotation, scale, repeats in UV and so on, it controls how the noise node is placed on the geometry. The noise node is how the material looks and includes attributes such as Amplitude, Ratio, Threshold – you can adjust these attributes to have a lot of noise or not much noise at all. This node also has a Colour Balance section (and a few others which were not touched in this texture) where i could edit the colour, but because this node was being treated as a bump map, colours can only be from the grey scale – white pushes out and black pushed in giving the illusion of depth or ‘bump’ in the geometry. The third and final node that is plugged into the final material is the bump2D node that enables you to adjust the bump depth that appears on your geometry – the higher the bump depth the more depth in your geometry. Increasing this value too much could indeed mess up your final shader and / or make it look unreaslistic.

Figure 2.15: Blue Alien Shader Network

The shader network for the blue alien is lexx complex than the green alien as it only contains three nodes. I added a cloth node to the original Blinn materia, and a place2dTexture node is automatically created when the cloth node is added. Firstly, i edited the place2dTexture node repeat UV coordinate resulting in the cloth node having more strands. Moving onto the cloth node which is a 3D texture within Maya based on mathmatical algorithms – this node was left as default and no colour attributes were edited in particular as the node is then plugged into the Blinns (alienSkinM2) transparency node. Therefore, where the cloth texture is white, the texture material will be completely transparent. Additionally, where the cloth texture is black the material will be 100% opaque. Lastly, the Blinn materia is coloured clue.

Figure 2.16: Blue and Green Alien quick renders using Maya Software

Using the default render settings with Maya Software the above two rendered images are produced.

Figure 2.17: Red Alien quick render and shader network

The above screenshots shows the red shader which i didn’t decide to take forward because of reasons explained above. The shader network consists of a range of nodes including the grid node, a bump map with bump2d nodes in addition to a blin. The top grid is connected to the Blinns colour, additionally the bump map below the red and black grid is connected to the Blinn as a bump map producing the above quick render.

Importing Assets

As all the character animation was achieved using a 3D application, the SWF files that were rendered using Maya Vector needed to be imported into Flash CS4 to be used in the movie (as i didn’t want to import separate SWF files using ActionScript 3.0 – i wanted all the necessary objects to complete the product to be in once Flash file). A total of 24 alien animations were rendered using Maya Vector therefore an efficient method of importing the files needed to be used to speed up workflow, and organize the files without any confusion. In addition to the alien animations, the rendered alien images and sound file were also imported using the below method.

Figure 2.18: Importing Assets into the Library in Flash CS4

Once i created all the external assets (outside of Flash CS4) i imported them into the library using an organised folder structure. The above screenshot shows all the alien animations (SWFs) imported into Flash that were rendered with Maya Vector. Each of the animations are allocated with their own folder inside the ‘Alien’ folder in the library. For example, all the blink animations are inside the ‘Blink’ folder inside the ‘Alien’ folder and so on. Instead of selection File – Import and browsing to the files, i simply clicked and dragged the file i needed to import into the library. This method of importing files into Flash, in this case SWFs and JPEGs proved to be quick and efficient which is needed in this type of workflow as  24 SWFs of the alien animation needed to be imported and stored in the appropriate folder in the Flash library. The above screenshot also illustrates that the SWFs are saved in an organised folder structure for an efficient and fast workflow.

Figure 1.2: Page Layout Storyboard

The page layout of the Flash movie consists of three main sections – the menu bar, panel and animation box. Starting with the manu bar, it firstly includes a link called ‘Animations’. This link within Flash CS4 is a button that is based on the Simple Button class. This button, when clicked will link the user back to the home page that wil show the instructions for the Flash movie within the animation box. Referring to the panel storyboard and the interactive products overall navigation system, the Aninations link will be the only way to link back to display the instructions for the Flash movie.

Next to the ‘Animations’ link is the ‘Designs’ link which will also be a simple button in flash CS4. When clicked a couple of alien designs will be displayed in the animation box. I wanted to include a couple of alien designs which will be rendered images using Maya software as this will provide the audience with two possible designs for the final alien, giving them a better visualization of what the final animation would look like if the character was to be taken forward and included in a full production project. Two different materials will be applied to the alien that will be created from scratch using a range of nodes and settings within the Hypershade (in Maya). The Design feature within the Flash movie can be considered as an additional part, however i decided to include this in the storyboard as it will add depth to the overall product, and give the user a better idea of what the alien can look like in fully rendered.

To the left of the Menu Bar is the sound control of the Flash movie. I have planned to include a traditional Stop and Play button in preference over one pause and play button. The Stop and Play buttons will be simple buttons within Flash CS4 and the sound control will be coded with ActionScript 3.0. Keeping away from the ActionScript plan at this stage, the menu bar will also incude two volume buttons – a volume up and volume down button that will either increase or decrease the volume by 10%. I plan to code this feature so that the sound will not go over 100% volume, or below 0% volume to prevent distortion. Next to the volume buttons is a ‘volume’ label to let the user know the buttons functionality. I also plan to put a box around the volume features to increase the quality of the Flash movies presentation.

Moving onto the second major part of the Flash movie and the backbone of the application is the panel. I have planned that the user will be able to click and drag the top bar of the panel, to move the whole panel. This means that the panel can be dragged anywhere within the application. In addition, the panel will include a range of buttons that will display the corresponding animation. Therefore, when the button is clicked, the corresponding animation will play within the animation box, to the right of the panel. Behind the panel i have storyboarded the alienship that will rotate at a slow speed. This feature will add depth to the Flash movie and make it more visually pleasing. Although i’ve planned to have a couple of animations for the alienship, it isn’t the primary focus of the product, however it is a good companion to showcase with the alien.

To the right of the Panel is the animation box that will probably be a rectangle within Flash CS4. Within this area will showcase all the animations of the alien and possibly alien ship, as well as displaying the alien designs. Additionally, when the movie is firstly executed, instructions on how to navigate the movie will be displayed in this area. Overall, the animation box will display all the main content within the application. Below the animation box are four buttons that will control the display of the animations (these buttons will only be displayed if an animation is playing). The display options are wire, shaded, wireshade and specular. The wire option will display the animation in a wireframe (without backface wiring). The wire display will be the lowest detail level where the animation can be displayed. If the user clicks on the shaded button, the animation will be displayed as a solid colour, without any wireframes. I currently plan to shade the alien animatic a colour of green, therefore the alien will be displayed a solid green if the user clicks on the shaded option. After the shaded button is the Wireshade button. When the user clicks on the WireShade button the animation will be displayed as a solid shade with a wireframe. This can be a useful display option if the user wants to see how the alien is deforming or animating that could possible be hard to identify using the Wire or Shaded display option. Finally, after the Wireshad button is the Specular button. When the user clicks this button, the animation will be displayed in a wireshade style but with specularity. This option will give the audience a visualization of how light will react off the alien. The specular display option will be generate the best looking result therefore i plan to show the animations using this display setting by default. Although it is the most resource intensive display option as it will include a wireframe, solid colours and specularity, the end users machine by todays standards should handle the animation without any problems, after all, the animations will be rendered as vector graphics.

lastly, the background of the Flash movie will be a grey – a consistent colour scheme i wish to adopt in this product.

Figure 1.3: Panel Layout Storyboard

Figure 1.4: Layer Design Storyboard

As well as using the latest version of ActionScript available in Flash, i will be using the latest version of Flash in this particular project. The latest version of Flash software is Adobe Flash CS4 that includes a number of key features that can be taken advantage of. For example, a new feature in the Flash CS4 IDE is the motion editor, that enables you to apply complex motion curves to your objects resulting in more professional animations. This technique is also significantly quicker than either coding or manually tweening the animation like in previous versions of Flash. Therefore, if i need to create complex animations in this project easily i could use the Motion Editor and save the file in a Flash CS3 format that will convert the animation using frame by frame animation from the new motion model in Flash CS4.

At this stage of the project i don’t necessarily plan to use motion tweens in my product as i think it’s more efficiently using ActionScript, and usng too many tweens can make the product look unprofessional. Additionally, i will not be using motion tweens to animate my character, i will explain how i will be animating the character in the next section of this post. This means even though i will be using Flash CS4 to primarily create this product, the new motion model will not be taken advantage of too much, if at all when using splines and tangent handles for handling keyframes and animation curves.

Moving on to animating the character, i will be using Autodesk Maya to create an animatic of the character and render out the animations using the Maya Vector renderer that will efficiently render out the animation in an SWF (Small Web File). The Vector render also offers a range of settings such as amount of colour on the final renders, the specularity and the ability to add wireframes to your models. The vector renderer is an excellent tool to showcase your 3D work in a Flash product or over the web, as well as showcasing the topology of models by enabling the wireframe to be rendered – with the option to show the topology of backfaces or not. Therefore, the character will be modeled and rigged in the 3D application Autodesk Maya and rendered out using the Maya Vector renderer. The technique in creating an animatic for the character is a more advance technique compared to drawing the character in Flash as it will give the animator and 3D artist a better visualization of how the character will animate in addition to how the geometry will deform if the project is to be taken forward in a 3D application as well as other aspects. This is also an efficient technique – as this character will be quite simple, it will take significantly less time to create the animation inside a 3D package other than manually drawing the character when producing the model sheet. The reason why i wanted to use a 3D package in this project, particularly Autodesk Maya is because i had just finished a Maya course from 3DBuzz.com, and wanted to take over the knowledge learnt and see how Maya could integrate with Flash.

The interactive graphical user interface will be created in Flash using the Flash CS4 IDE and ActionScript 3.0. The character itself will be modeled and rigged in Autodesk Maya as an animatic. When the model is finished a simple material will be applied and the animations will be rendered using Maya Vector. The final rendered SWF will then be imported into Flash where further interactivity will be added.

I exported my movie and burned the files onto a DVD. Within the first folder contains an uncompressed version of my 10 second movie which has a large file size of over 200MB. Within another folder on the CD includes a compressed version of the 10 second movie that is about 30MB, therefore you can play the movie off the CD, and not have to copy it to the hard drive. I exported my movie using a range of settings that are available within Adobe Premier Pro CS3.

Figure 4.1: Exporting options from the file menu
I chose to export my movie using the File menu – File – Export – Movie. I didn’t use Adobe Media Encoder, which has vastly improved in the new Adobe Premier Pro CS4.

Figure 4.2: Export settings for the uncompressed 10 second movie

Standard uncompressed settings were used in this case to export an uncompressed version of the 10 second movie – Uncompressed Microsoft AVI, the range was the entire sequence. Additionally, the audio was exported whichw as also uncompressed. Overall the uncompressed generated a large file size.

Figure 4.3: Export settings for the compressed 10 second movie
I used a Quicktime file type and compressed the movie in MPEG-4 so the file size of the movie would dramatically decrease and so the movie would play off a CD or DVD. I exported it at 25 fps (frames per second) to get a smooth result – 30 frames per second would not be necessary for the intentions of this project. Anywhere below 24 frames per second would generate low quality results and the video wouldn’t be as smooth. Additionally, the video was exported usign PAL.

Uploading Footage

A few problems ocurred this week in regards to uploading the footage in order to post produce the movie. When obtaining the camera a USB cable was included for uploading the footage onto a hard drive. However, when trying to upload using this method it didn’t work – after trying to upload the footage using four different machines, and three operating systems including Windows Vista, Windows XP and Mac OS X (Leopard). Due to these troubleshooting methods i concluded that it wasn’t the machinse fault but the USB that was supplied. To fix this problem i brought a Firewire 400 cable specifically for DV cameras. One more minor annoyance occured when trying to upload the footage onto the computer which was the mode the camera had to be on. For example, i firstly tried uploading the footage in PC mode, which seemed the logical mode, however you had to be in tape playback mode to upload the camera. Altthough this is a notable annoyance the problem was ressolved almost immiediately. Other than the troubleshooting issues and having to obtain a Firewire cable, no other problems occured when uplading the footage, which was saved as an Audio Video Interleave (avi) file ready to be imported into Adobe Premier and post produced. Although the uploading process gave me the option to upload into Adobe Premier Pro, i chose to upload the avi file to a suitable directory, then importing the footage manually into the non linear post production software.

Manipulating Footage

Figure 3.1: Post Producing the 10 second movie

The above screenshot shows part of the post production process of the 10 second movie. I used the default workspace of Premier Pro CS3 as i am relatively inexperienced with the program. Additionally the default workspace gave me all the necessary panels that i needed to edit the captured footage.

The fist panel that was utilized in Premier Pro was the Project panel, that enabled me to import my captured footage with teh MiniDV camera. This was a simple process by simply double clicking within the panel, that is explained earler in this blog. I preferred importing the fottage by double clicking the project panel as opposed to going to the file menu, or right clicking within the projet panel and selecting import, as this was the fastest and most efficient way of importing material.

I worked closely with the Source and Timeline panel to trim parts of my captured footage to be included in the movie as i captured about ten minutes of footage and only needed 10 seconds to complete the movie. Therefore, small parts of the recorded footage were dragged onto the timeline that were to be included in the final post production process. Other than the available trimming options and playback controls in the Source panel, i didn’t need to use any other tools in this particular panel. Moving onto the timeline, i used a range of tools to benefit my workflow and efficiently edit the footable. From the above screenshot, all the video footage is dragged to the Video1 and Audio1 track – they weren’t dragged to other video and audio tracks because it wasn’t needed. Additionally, as this is a very simple project, only four tracks were utilized within the timeline. The snap option was used on the timeline to snap different trimmed video parts together, this way the movie would instantly play the next video segment without displaying a black screen for a fraction of a second. The snap option also allowed me to perfectly align the video segments quickly and efficiently without the need to zoom into the timeline. The snap option is enabled by default on the timeline. The playhead was also used a lot when working within the timeline in addition to the zoom in slider to navigate and frame up on different parts of videos. All these factors and utilization of tools within the timeline improved my overall workflow.

Audio

As far as synchronisation the audio didn’t need editing in Adobe Premier Pro, however the audio levels did need some tweaking as the wind was a bit loud in some parts of the movie. Therefore i decreased the audio line on the timeline and slightly lowered the decibel (dB) value. The aim of the 10 second movie regarding the audio was to make it sound natural – such as small hints of the wind and footsteps. Overall, the audio levels needed tweaking within the 10 second movie.

Figure 3.2: Different workspace layouts where utilized when editing the movie

Anothe aspect that improved workflow was using different workspace layouts. For example, in the above example i wanted a bigger view of the sequence panel therefore i resized the timeline and source panel, as these panles were not needed at this time of editing – only to see the result of the sequence panel. Although i didn’t need to use any other panels in Adobe Premier to complete post production, resizing the panels helped to improve workflow overall.

To record the 10 second movie i am going to use a NV-GS300 Panasonic camera. The NV-GS300 camera is a MiniDV camcorder with 10x optical zoom. The addition of a 10x optical zoom is a benificial in this particular project because i will be able to zoom in quite far without losing any image quality, as the lens physically moves within the camera, adjusting the focal length.

Figure 2.1: NV-GS300 Panasonic Camera

The NV-GS300 Panasonic Camera can use two forms of storage for saving footage and uploading to a computer. Firstly, at the bottom of the camera is a SD card slot, enabling you to input an SD card for saving your recorded footage. However, i couldn’t use this feature in this particular project because i couldn’t obtain an SD card – only a SDHD card, which are not compatible with this camcorder. This was the first minor problem during the experimental stages of the camera. Therefore i used the second and probably best feature for recording footable – with a Mini DV tape.

Prior to recording i tested out a Mini DV tape within the digital camera, and it produced a high quality result. The features on this tape include an anti-static LID for error free recording. Additionally, the tape is ideal for repeated use. This meant that if i ran out of recording space on the tape, i could easily over-write the data / use the tape over and over. The second advantage of using a Mini DV tape is that it is a very stable way of storing data, in addition to backing up data, in this case recorded footage from a DV camera. Data can be stored on a MiniDV tape without having the risk of damaging or losing the data stored on the disk easily. Overall, the MiniDv tape is was going to use to record footage for the 10 second movie hold up to 60 minutes of footage which proves more than enough space for getting a good amount of footage for post production.

During the experimentation stages with the Camera i found it necessary to use a tripod during recording footage for the 10 second movie. For example, in still and pan shots the camera is required either be fixed to one point and not move, or pan in a smooth motion. Due to these facts, a tripod will be used when recording the 10 second movie to rpevent shakey footage a minimize post production requirements (smooth cam features are utilized in post production software such as Shake and Motion). Overall, using a tripod will increase video quality and make the final movie appear more professional.

Although the NV-GS300 Panasonic Camera doesn’t have a lot of features to experiment with, these were the optimal settings to record with while experimenting with the camera:

1. Scene Mode – Off
I didn’t have to use any scene mode such as sunrise/sunset/portrait etc.

2. Record Speed – SP
The record speed for the camera will be set to SP – Standard Play. A slower speed is necessary for this project as Extended Play (EP) and Long Play (LP) are not needed. Although the picture quality could be slightly better using EP or LP record speed, it would increase file size. Additionally, after post producing and compression, the final 10 second movie should be at a good quality overall.

3. Aspect Ration – 16:9
A standard 16:9 aspect ration (width / height) will be fine for this project.

4. Red Eye – Off
Red eye is not necessary for this particular movie because according to my storyboard, peoples faces / eyes will be hard to see, therefore not producing any red eye.

Storyboard

Below is each shot that will be taken in my 10 second movie. Each shot includes the planned timing and type of shot it will adapt. Shot 1 is the sketch on the top right, shot two is the sketch on top left, shot 3 is the sketch below shot 1 etc.

Figure 2.2: Storyboard of 10 second movie

Shot 1
Shot type: Wide Shot
Duration: 1 second
Description: This shot will include the character (myself) walk along a path under a light. The shot will be complete with trees (right) and apartments (right) populating the shot. The red arrow in this sketch indicates where the character will walk.

Shot 2
Shot type: Wide Shot
Duration: 1 second
Description: This shot is a continuation from the last shot that will involve the character walking directly under the light, as the red arrow suggests. The shot will also be populated with a sign as it is near the light, and adds more depth to the scene.

Shot 3
Shot Type: Perpective / Wide Shot
Duration: 0.5 seconds
Description: This show is presented at a perspective view, however also indicates a wide angle as there is a lot more features in the shot such as the path, buildings and lights as well as the character. The light is als an important element of the shot in addition to keeping consistency with the 10 second movie.

Shot 4
Shot type: Perspective/ Wide Shot
Duration: 0.5 seconds
Description: This sketch is the same as the last one, however, the character has walked further down the path, demonstrating the distance he has travelled throughout the two shots. This will give the affect of the character ‘transporting’ from once place to another which is a nice addition to the 10 second movie.

Shot 5
Shot type: Low Angle / Close Up
Duration: 1 second
Description: This shot mainly focuses on the two cameras as a low angle which is essentially the message of the 10 second movie and the aspect of being watched. Additionally, a close up of the character will occur, walking past the cameras.

Shot 6
Shot type: High angle
Duration: 1 second
Description: This shot is focused on the character from a high angle (above). Features in this shot include stpes and a light pole. The character will walk past the shot to keep consistency of the movie.

Shot 7
Shot type: Medium Close Up
Duration: 0.75 seconds
Description: This shot will emphasize light, as it will include two light posts reflecting off the bottom of a bridge, producing a nice effect. The character will be shot at a medium closeup, as he walks past the shot.

Shot 8
Shot type: Wide Shot
Duration: 0.75 seconds
Description: This shot involves another light, as this feature adds depth to the movie, keeps consistency, produces a nice result and sticks to the theme of the movie. The character will walk around the corner, past a building continuing the path.

Shot 9
Shot Type: Wide Shot
Duration: 1 second
Description: This shot involves the character walking along a lighted building. The shot will be taken away from the building, producing a wide shot to emphasize the light of the building. This will also give a nice overall affect.

Shot 10
Shot Type: Perspective Angle
Duration: 0.5 seconds
Description: This shot involves the character continuing his path following on from the last shot in a perspective angle – being filmed from behing the character. This shot will also emphasize the light that is being generated from the side building.

Shot 11
Shot Type: Medium Angle
Duration: 1 second
Description: This shot puts emphasis on a see-through door where the audience will just be able to make out the character walking past the door on the other side. A camera will also be shown on the top left hand corner of the shot which is also another important aspect of the movie to keep the theme.

Shot 12
Shot Type: Extreme Closeup
Duration: 0.5 seconds
Description: This shot shows a hand (the audience can conclude the hand to be the characters of someone elses) moving towards the camera. The hand will cover the viewing shot. This is where the 10 second movie ends.

This week i experimented with my chosen software which is to be used for manipulating the 10 second video sequence which is Premier Pro CS3. I learnt how to open and save different projects and got used to the interface including the project, library and Bin windows. Additionally, i got working with the timeline and different tracks.

Figure 1.1: New project settings

These are the standard projects that i will be using the for 10 second video – DV PAL – 32KHz.

Figure 1.2: The Project window.

Under the project window (Window – Project) includes a library of all the footage in the project including images, movie files etc. To organise the files within my project, i created a Bin. As this was experimentation with the software, i named the bin Files_1. However, when it comes to editing the actual footage of my 10 second movie, i will use appropriate naming conventions when it comes to adding Bins. Within the Project window in Premier Pro CS3 there is also a find search tect field, allowing you to input the name of a part of a file you wish to locate, filtering the file out in the library. To add a bin within the project window, i used the right mouse button and selected ‘New Bin’.

Figure 1.3: Importing files in Premier Pro

I experimented importing different video types in Premier pro, in this case i imported a QuickTime movie video file into my project. Although the movie file is imported in the project, it does not add to the overall file size – it’s just referenced and uses the original movie file. Therefore, if the original movie file is deleted, it will be lost in your Premier Pro project as well.

I experimented importing different files in my project in two ways. I firstly right clicked within the project window and selected ‘Import’ and browsed to my specific file i wished to import. I then double clicked within the project window which also brings up a browser window to find my files i wish to import. After using these two methods (leaving out the File – Import option), i found that double clicking within the Project window is the quickest way to import files. After importing my Quicktime Movie file, it appears in the Project window, giving me the option to put the file in a Bin for better organisation, or leaving it where it is for ease of access.

Figure 1.4: Experimentation in Premier Pro

From the above screenshot you can see a range of features that i experimented with in Premier Pro. The first window that i used which i have yet to mention is the Source window. The Source window allows me to drag my imported video into it, and skim through the video. In this particular case, i used trimming to select a part of the video to be included in my final video. In other words, one of the things that the source window allows me to do in Premier Pro is select a part of the video that is to be included on the timeline.

The source window has all the standard video playback features any professional post production software has – a play, step forward / back, fast forward buttons etc. However, to trim the video i used the step in and out buttons. By specifying an in and out point, the area within the two points allows me to just drag that part of the video onto my timeline, which is then included in my final movie. In this particular case i have dragged three parts of my imported video footage into the timeline using the trimming tools in the Source window – the trimmed video and audio that were dragged into the timeline are designated a video and audio track within the timeline. To drag the trimmed footage, i clicked and dragged a part of the video, within the source window into the timeline. As i was just using basic tools withint Premier Pro this week, i didn’t go into the effects controls, transitions, key frames and the audio mixer today.

In addition to the Source window, i experimented with other features within Premier Pro including the timeline and program/sequence windows. If these windows are not displayed in the premier pro interface they can easily be added using the Window menu, within the menu bar. When dragging my trimmed clips within the timeline, they get designated two tracks- a video and audio track. In this case, i wanted to showcase the new macbooks – therefore trimming the video footage that shows the macbooks. However, i didn’t want any speech over the showcase of the macbooks, therefore i adjusted the audio to 0db within the timeline, by dragging the yellow line down on the audio track – this will set the volume level to 0 / no sound will be shown. This is one way you can adjust the sound within Premier Pro. Using this audio tool within the timeline the macbooks are showcased without innecessary speech /narration over the top. Doing this also gives me the freedom to add my own audio track over the video (to do this i could download an audio file, import it into Premier Pro, and drag it onto a separate audio track on the timeline.

Another useful tools on the timeline that i used while experimenting with Premier Pro was the Snap button. I enabled the snap button so my trimmed clips could easily snap to eah other which prevented unncessary overlapping. The snapping tools also made it super easy to structure and align the trimmed footage within the timeline – i didn’t have to zoom into the timeline and drag the clips manually. Another tool i used in the timeline was the zoom slider. For example, when i dragged my trimmed footage into the timeline, the segment of video that appeared on the timeline was rather small. To view the video segment more easier (for editing and other adjustments) i dragged the zoom slider to zoom into the timeline, and give me more precision over editing this part of the video. The zoom slider is located at the bottom left of the timeline window.

The last window that was utilized during experimentation with this non linear post production software – Adobe Premier Pro CS3 was the sequence Program – Sequence window, that shows the final video sequence that corresponds to the timeline. For example, as i added clips from the source window on the timeline, the sequence window updates and shows me what the final video will look like. This window also includes all the options that are available on the source window such as timming tools, in and points and various playback controls that make it easy for you to navigate through the sequence.

Today i received feedback from BigStockPhoto and my image was denied because it had the following problems:

Artifact Problems: Noise/Grain/Chromatic or other artifacts due to low light, blue or purple fringing, high ISO, over-sharpening or post processing techniques.

Figure 1.1: Response from BigStockPhoto