2009

Memoirs of a TIME
Traveler
Individual Flash Workbook
Carl Hawking traveled to exciting places through exotic times collecting many
prized possessions throughout history in his secret museum. This is the story of
his individual prized possessions and how he showcased them to the world.

TIME
MARIO R SIQUEIRA
Brunel University
0719547 4/23/2009
GRAPHIC COMM 2
April 23, 2009 [Memoirs of a TIME Traveler]

Introduction
To accompany the virtual exhibition at Second Life the flash site object of this report was
created. The team theme is Time, and the approach taken was of that of a time traveller, a
person capable of having a direct experience through multiple periods of History.
The more abstract concept of “misplaced time/history” or “outdated future” was thus the
initial trigger to this specific website.

The main inspiration to this “Tomorrow that never was” was William Gibson’s short story:
The Gernsback Continuum.

“The protagonist of William Gibsons 1981 science fiction short story, The Gernsback
Continuum, is a photojournalist, collecting images for a coffee table book he plans to call The
Airstream Futuropolis: The Tomorrow That Never Was. As he searches for ramshackle
roadside attractions and other traces of the ways people in the 1930s and 1940s imagined
the future, he encounters what Gibson calls semiotic ghosts, glimpses of a parallel world
where the euphoric dreams of urban boosters and technological utopians had come true:
Behind me, the illuminated city: Searchlights swept the sky for the sheer joy of it. I imagined
them [the residents] thronging the plazas of white marble, orderly and alert, their bright
eyes shining with enthusiasm for their floodlit avenues and silver cars. Over time, the
impressions fade until all that is left are peripheral fragments of mad scientist chrome
flickering on the corner of his eye.” – from TechnologyReview.com

The website, subject of this report, can be accessed from

http://www.orph.eu/chronos/mario

The website
As this website is to be served as a complement to a larger exhibition it was planned to be
concise and informal (as part of Carl Hawking’s notes). It was thus conceptualized as a
collage of images, links and information from different sources, a collage possibly done by
Carl Hawking after his multiple trips to different periods of the first half of the 20th century.

The layout resembles a desk-top with pictures and bits of data that can be dragged around,
exposing other content and allowing a certain degree of data organization by the person
visiting the flash site.

Figure 1 Visual of the complete “desk-top”. This long movie-clip will eventually be navigated using a horizontal
scroll bar.

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Figure 2 This flash project uses 2 scenes: 1 for preloader 1 for the main content. The preloader scene has 4
layers: 1 for code, 1 for text label (saying “STAY PUT”), 1 for border of the loading bar and 1 for the actual
loading bar. Loading bar width is set by action script in the AS layer and that is derived by calculating the
percentage of loaded data which will correlate directly to the width of the bar (total bar width 100 pixels, ie.
10% data loaded equals to 10 pixels wide bar).

PRELOADER CODE, FRAME 1

bytes_total = Math.round(getBytesTotal()); // get how much has to be loaded
bytes_loaded = Math.round(getBytesLoaded()); // get how much has been loaded so far
getPercent = bytes_loaded/bytes_total; // simple division to get percentage of data loaded
_root.loadBar._width = getPercent*100; // dynamicaly link loadBar rectangle width to percentage loaded

if (bytes_loaded == bytes_total) { // if data loaded = data to be loaded then

nextScene(); // goto next scene
} // otherwise proceed to next frame

PRELOADER CODE, FRAME 2

this.gotoAndPlay(1); // since “if” statement failed it has to go back to test again

This preloader is simple and provides more information than a simple “loading” message.
The bar size is enough visual cue for the user to know how long is the wait.

The main content scene is organized in 7 layers: the top-most is the action script layer, next
the inter-group navigation layer followed by miscellaneous elements layer, the music layer
the scroll bar slider layer, a mask layer which covers the main content layer (its content is all
aggregated in a single movie clip shown in figure 1).

The action script present at the first frame is responsible for several structural elements of
the site:

MAIN ACTIONSCRIPT
stop();
loadMovie("Navigator.swf", "nav_target"); // loads the intergroup navigation onto nav_target movie clip present at the nav layer

var mouseListener:Object = new Object(); // creating variable for mouse positions

mouseListener.onMouseMove = function() {
trace (_xmouse) // trace x mouse position
};

slider.onRelease = slider.onReleaseOutside = function() {

stopDrag() // Make slider dragging onRelease and onReleaseOutside
Mouse.removeListener(mouseListener); // stop tracing and recording mouse position
}

slider.onPress = function() { // Restrict slider to sliderbar area

left = sliderBar._x; // var left = position of sliderBar in x coord.

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

right = sliderBar._x + sliderBar._width - slider._width;

// right position = x position + sliderBar width excluding slider width.
top = sliderBar._y; // …
bottom = sliderBar._y; // …
startDrag(this, false, left, top, right, bottom) // make it draggable using above lock positions
Mouse.addListener(mouseListener); // start listening/recording to x mouse position
}

mouseListener.onMouseMove = function() { // this section here uses the positional data collected to move
SliderMovement = sliderBar._width - slider._width // mainContent movie clip.
ContentsMovement = mainContent._width - maskWindow._width
MovementRatio = SliderMovement / ContentsMovement
HowFarIsSliderDownBar = slider._x - sliderBar._x
HowFarToMoveContents = HowFarIsSliderDownBar / MovementRatio
mainContent._x = maskWindow._x – HowFarToMoveContents // mainContent x position is changed
};

The following layer (NAV) contains only one movie clip, the nav_target instance. That will
function as a target location for the loadMovie command. The inter-group navigator is
loaded into this layer and thus will always be above any content of the current flash scene.

The OTHERS layer contains the credits and copyright

button and window. It is a window that shapes into it’s
final form onMouseOver. It is a simple button with a
animated mask revealing the window and text content.

The MUSIC layer uses a simple music loading

mechanism. The mp3 file is stored externally (thus not
increasing the swf file and loading time) and includes a
loading script itself.

The music control is contained in a movie clip that has

as 1st frame “loading”. Again using getBytesTotal() and
getBytesLoaded() the music preloader is created.

MUSIC LAYER FRAME 1

my_Sound = new Sound(); // creates new sound variable my_Sound
my_Sound.loadSound("ghostii13.mp3",false); // loads external mp3 into my_Sound. Streaming = false

The PLAY code uses start() function (loop 99 times) and PAUSE/STOP code uses stop().

The slider layer includes the actual draggable scroll slider and slider bar. The slider button
has a permanent animation that begins in the center of the button and moves outwards
thus indicating the possible direction of movement.

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Finally, Layer 1 contains the the mask that hides most of the content movie clip (on
mainContent layer). As the slider is dragged by the user the mainContent movie clip will
move along the mask exposing previously hidden areas.

The mainContent layer contains the actual content which is itself contained
in a movie clip called ‘content’.
Content clip has 5 layers and as before, first one is Actionscript layer. The
code in that layer is very extensive and repetitive and can be consulted in
the original source file in the attached CD ROM. The code essentially makes
most of the elements in ‘content’ movie clip draggable.

SAMPLE OF DRAGGING CODE

[instance name].onPress = function() {
startDrag(this);
}
[instance name].onRelease = [instance name].onReleaseOutside =
function() {
stopDrag();
}

This code could have been placed directly on the draggable elements but this way makes it
more efficient for the developer to change the code without having to browse through
countless flash elements.

The content pane is subdivided into 4 areas with different colour background the first one
being the title area. This area includes a notice which reminds users that contents in this
page maybe draggable. The following sections include a collage of text found from related
internet sources (all referenced) and photographs. Some photographs are still but one
particular photograph (by Juergen Specht) is actually a gallery of 5 rotating photographs.
There is also a button/link to a youtube video clearly marked with youtube logo. One
particular photo also zooms in onMouseOver, exposing more details than in others.

Figure 3 timeline for the Juergen Specht photography mini gallery.

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Virtual World integration

The virtual world integration of this personal theme with the team’s grander theme was
done through group of Googie and Raygun Gothic inspired model buildings. Techniques
involved basic prim distortions (stretching and tapering). Two other techniques were used to
create two different kinds of glowing windows:
1. for random light-up windows – path cutting a flat box with a square hole creates two
small windows with only 1 prim.
2. For whole floor lighting a copy of the building was used and squeezed to the minimum
thickness, enlarged by 1% and applied glow.

Other involvement for this project included general team management, building
experimentation in SL and OpenSim, virtual exploration, space planning and design,
furniture design and creation, interactive design, signage and texture creation, etc. Gradient
textures in this project were all combined into a single texture as were all shadows used in
this project.

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Brunel University | Team TIME

April 23, 2009 [Memoirs of a TIME Traveler]

Conclusion

The purpose of this project was to learn and demonstrate the skills for organizing an
exhibition in a virtual environment and aggregate those skills with traditional web-
technologies. Second Life provides easy access to 3D generation tools and it’s extended
scripting supports makes it an ideal tool for easy prototyping of complex 3D environments
and products. Flash is one of the richest platforms of the modern web supporting What You
See Is What You Get animation tools and, like Second Life, it’s advance scripting support
allows the creation of highly complex interactive applications. Flash is becoming today a
primary platform for deployment of Web apps, replacing the traditional pre-compiled code
that only runs in local computers.

References
[book] The Gernsback continnuum by William Gibson
http://www.americanheritage.com/articles/magazine/it/1988/1/1988_1_34.shtml

[film] Metropolis http://www.youtube.com/watch?v=f-qS1OjBdG8&feature=related

[website] http://io9.com/tag/retro-futurism/
[website] http://www.juergenspecht.com/
[website] http://www.flickr.com/groups/googie/
[website] http://en.wikipedia.org/wiki/Raygun_Gothic
[website] http://en.wikipedia.org/wiki/Googie_architecture
[website] http://en.wikipedia.org/wiki/Futurist_architecture

Brunel University | Team TIME