Interactive Narrative: Loading Bar

Now that the movie is operational and is uploaded to my blog I found one thing missing to finish it off... A loading bar. I noticed whenever I look at it online, it takes some time to load and during this process a blank screen is the main center of attention. To add some professionalism to the work I began looking into creating a loading bar, which was easier said then done! As this Flash movie was created using action script 3 (which is the latest version), there's not allot of help out there on the world wide web for aspiring beginners such as myself. I found plenty of tutorials explaining how to do it using AS2, but as I'm not easily beaten I plodded on looking at forums and trying out different peoples ideas. Eventually I found this little beauty.

//Import the required assets
import flash.display.*;
//Stop the playhead while loading occurs
this.stop();

//Create a listener to call the loading function as the movie loads this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PL_LOADING);

/*This is the main function, basically it grabs the total and loaded bytes, calculates a percentage, and displays it by stretching the bar and adjusting the textfield display. If your bar/textbox instance names are NOT lbar/lpc, you'll need to adjust this code to match your instance names*/

function PL_LOADING(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTotal*100;
//Stretch the bar
lbar.scaleX=pcent/100;
//Display the % loaded in textfield
lpc.text=int(pcent)+"%";
//If the movie is fully loaded, kick to the next frame on the main timeline
//You may wish to change the gotoAndStop(2) to a gotoAndPlay(2)
if(pcent==100){
this.gotoAndStop(2);
}
}

Interactive Narrative: The Navigation

To see the working article check out My Portfolio links.

The navigation was a difficult part of project as finding the right frames to put things on and synchronizing the action-script took some thinking about.


The idea is that the user can decide wether they want to go down the drug route or avoid it, but as in real life it is still very easy to get caught up within the drug world.
Here is a flowchart of the navigation:


I experimented with a few different sound effects ranging from The Prodigy to drum & base to chilled out beats for background music. I chose the chilled out beats as the others made the design very aggressive when added to the grunge look. I found adding little sound effects for the buttons made a huge difference to the feel of the work, then i finished it off with sound effects for the end pages which worked a treat.

The YES NO buttons were a little boring at the beginning as they did nothing when the mouse rolled over them. So to amend this I added a little movie clip to the over frame of the buttons to make them continuously flicker in different directions when the curse was over them. A nice effect...

Here's an example of how the face changes after taking more drugs. If you go the other way and stay away from drugs the face becomes healthier.

Interactive Narrative: The Look

Sticking with the dark grunge look I thought it would be cool if I had a persons face that changed, depending on the amount of drugs he has taken. This idea I feel will involve the user more as he or she will want to progress through the narrative to see what happens to the face in the end.

Here is the basic look for the background of the piece created in Photoshop using various effects, layers and filters. Once built I need to import it into my Flash library. This is achieved by saving it as a jpeg within Photoshop, with the right dimensions to avoid pixilation. Before the import to Flash I opened it in Illustrator to add a boarder and to use as a template for all other Illustrator artwork. Now I know I could do a lot of this within either Photoshop or Flash, but I find Illustrator more comfortable and easier to use.

Personally I would have liked to have made the artwork a little darker, as when I look at it on my Mac it's quite bright. Other computers with different screen resolutions have difficulty bringing out the colours, so as the narrative is computer based and not print, it's good to go with the majority.

Interactive Narrative Idea

Basically I need to create an interactive piece that gives the user options for navigation (questions) and I thought, "what are the main issues that young people come up against while progressing though life?" The pressure of drugs! So, I'm basing my flash narrative on those options and creating consequences for their actions. I'm looking to create a dark, urban, grunge look for the piece that reflects the effects of drug abuse. This should be achieved by utilizing the relationship between Photoshop, Illustrator and Flash.

Here is a screen shot of the basic template provided in Flash by our tutors. As you can see the timeline structure is in place which is the important part, because it will save me from building it my self and save a lot of time.

Interactive Narrative Intro

The Brief:

• Produce an interactive narrative using still images positioned onto the Timeline in Flash CS3
• This interactive narrative should utilise a branching structure that forces the user to make a number of decisions as they progress through the narrative piece
• Narrative should be the primary concern

The Rules:

• You will need to have at least seven still images to complete your interactive narrative
• It is important that image, text, and audio are seriously examined in an attempt to truly consider audience engagement and interaction
• You should use ActionScript 3.0 to build interactivity and the navigation structure into your movie. (A simple ActionScript template will be provided)
• You MUST publish your final movie as both HTML and SWF

Review: Virgin Website

I'm reviewing the Virgin website as the last time I was on it I found the way it is made very interesting, but I'm not sure if it's in a good way? The first thing you notice when the site opens is all of the smooth movements and the way it floats in the center of the screen, it's obviously a flash site! Now, I realize that virgin have allot of areas within their company, but using the flash effects in everything made it very difficult to navigate.

I think the main concern when creating this website was the design and look, which I'd admit is very nice and the Flash movments look great, but I think they should have concentrated on practicality a little more.

All that set aside, there are areas that I love such as the Necker Island site. This includes a beautiful video with the perfect soundtrack that shows off the island very well. As it should considering how much it costs to stay there...