Flash Workbook
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Flash Workbook as PDF for free.
More details
- Words: 1,781
- Pages: 9
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.
MARIO R SIQUEIRA 0719547 GRAPHIC COMM 2
TIME Brunel University 4/23/2009
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) { nextScene(); }
// if data loaded = data to be loaded then // 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() { left = sliderBar._x;
// Restrict slider to sliderbar area // 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 webtechnologies. 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
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.
MARIO R SIQUEIRA 0719547 GRAPHIC COMM 2
TIME Brunel University 4/23/2009
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) { nextScene(); }
// if data loaded = data to be loaded then // 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() { left = sliderBar._x;
// Restrict slider to sliderbar area // 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 webtechnologies. 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
Related Documents
Flash Workbook
June 2020 9
Workbook
June 2020 18
Workbook
April 2020 22
Workbook
May 2020 22
Workbook
November 2019 37
Flash
May 2020 22More Documents from ""
Untitled 1
June 2020 10
Rsiqueira,mario,0719547
December 2019 14
Ipod Accessory
December 2019 18
Flash Workbook
June 2020 9
R.siqueira Mario Bentley
June 2020 1