3.Interactive
Design has reached a whole new level of maturity in the last 20 years. In fact digital was the catalyst for an overdue reconsideration of the importance of design and its disciplines.
Digital not only boosted design sensibility for products and services but also dissolved conceptual boundaries. Therefore designers became from a discipline base to a problem-base or to project focused experts. This idea of a fluid design discipline led me to consider virtual reality one of the next catalyst for new creative needs, cross-disciplinary and highly technical.
Looking at the history of virtual reality it’s easy to understand that there were many attempts to recreate an artificial experience mimicking the reality. There was this intuition of tricking or brain and sight to something that wasn’t real since 14th Century through the European Renaissance.
Morton Heilig imagined in the early 50s an "Experience Theatre" that would entertain all the senses in an effective manner. He built a prototype called Sensorama in 1962.
Sensorama
Ivan Sutherland Bob Sproull created in 1968 the first VR / AR head mounted display (Sword of Damocles) that was connected to a computer and not a camera.
In 1993 Sega planned to release an headset with LCD screens and stereo sound for one of of their gaming console. Due to high costs in production Sega never launched this product.
Oculus
The main event that changes forever the VR market was a young man named Palmer Lucky that I also contacted via LinkedIn but obviously too wealth to answer. This man had the intuition of producing and headset called Oculus. He didn’t have the money and he kickstarted it receiving 2.5 million. Facebook later bought his company.
In my research and quest for the catalyst of a new revolution that creates a design discipline or a as mentioned a design specialisation was the Oculus.
To represent this moment in history I chose to design an infographic with active links that from one side explains few key moment in the world of VR and from another angle showing the evolution of the headsets.
This infographic is designed using Adobe Animate. The old Flash.
It was more than 15 years I haven’t coded but in this journey I dusted off my actionscript skills and created some basic movements and interactions.
I start by sketching an idea of multiple paths for the user to explore.
The metaphor is pretty basic. The door or doors represent the entrance to VR and the headset will reveal a bit of history about the tech available to enable VR.
Link to interactive infographic : Adobe Animate
A lot of coding for a small interaction
(function (cjs, an) { var p; // shortcut to reference prototypes var lib={};var ss={};var img={}; lib.ssMetadata = [ {name:"interaction_HTML5 Canvas_atlas_1", frames: [[0,0,1890,1417]]}, {name:"interaction_HTML5 Canvas_atlas_2", frames: [[1236,1661,750,373],[0,0,920,1417],[922,0,948,658],[922,660,1087,261],[0,1661,1234,247],[0,1419,1351,240]]}, {name:"interaction_HTML5 Canvas_atlas_3", frames: [[1706,276,103,68],[1935,618,103,68],[1935,688,103,68],[1935,758,103,68],[985,1085,203,108],[1706,0,334,136],[1706,138,334,136],[1638,1192,334,136],[1024,1504,334,136],[594,1427,428,149],[0,1427,592,191],[1360,1504,256,103],[1618,1504,256,103],[1854,428,149,93],[594,1578,256,103],[0,0,1227,203],[1229,1348,775,154],[0,399,970,246],[1360,1609,256,103],[1618,1609,256,103],[1086,842,939,161],[0,1295,1227,130],[972,399,880,243],[0,1620,256,103],[258,1620,256,103],[1854,523,149,93],[0,1085,983,208],[1086,644,847,196],[1297,0,407,341],[1638,1005,394,185],[1229,1005,407,341],[1854,276,188,150],[0,647,1084,217],[0,866,1084,217],[0,205,1295,192]]} ]; (lib.AnMovieClip = function(){ this.currentSoundStreamInMovieclip; this.actionFrames = []; this.soundStreamDuration = new Map(); this.streamSoundSymbolsList = []; this.gotoAndPlayForStreamSoundSync = function(positionOrLabel){ cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel); } this.gotoAndPlay = function(positionOrLabel){ this.clearAllSoundStreams(); this.startStreamSoundsForTargetedFrame(positionOrLabel); cjs.MovieClip.prototype.gotoAndPlay.call(this,positionOrLabel); } this.play = function(){ this.clearAllSoundStreams(); this.startStreamSoundsForTargetedFrame(this.currentFrame); cjs.MovieClip.prototype.play.call(this); } this.gotoAndStop = function(positionOrLabel){ cjs.MovieClip.prototype.gotoAndStop.call(this,positionOrLabel); this.clearAllSoundStreams(); } this.stop = function(){ cjs.MovieClip.prototype.stop.call(this); this.clearAllSoundStreams(); } this.startStreamSoundsForTargetedFrame = function(targetFrame){ for(var index=0; index<this.streamSoundSymbolsList.length; index++){ if(index <= targetFrame && this.streamSoundSymbolsList[index] != undefined){ for(var i=0; i<this.streamSoundSymbolsList[index].length; i++){ var sound = this.streamSoundSymbolsList[index][i]; if(sound.endFrame > targetFrame){ var targetPosition = Math.abs((((targetFrame - sound.startFrame)/lib.properties.fps) * 1000)); var instance = playSound(sound.id); var remainingLoop = 0; if(sound.offset){ targetPosition = targetPosition + sound.offset; } else if(sound.loop > 1){ var loop = targetPosition /instance.duration; remainingLoop = Math.floor(sound.loop - loop); if(targetPosition == 0){ remainingLoop -= 1; } targetPosition = targetPosition % instance.duration; } instance.loop = remainingLoop; instance.position = Math.round(targetPosition); this.InsertIntoSoundStreamData(instance, sound.startFrame, sound.endFrame, sound.loop , sound.offset); } } } } } this.InsertIntoSoundStreamData = function(soundInstance, startIndex, endIndex, loopValue, offsetValue){ this.soundStreamDuration.set({instance:soundInstance}, {start: startIndex, end:endIndex, loop:loopValue, offset:offsetValue}); } this.clearAllSoundStreams = function(){ var keys = this.soundStreamDuration.keys(); for(var i = 0;i<this.soundStreamDuration.size; i++){ var key = keys.next().value; key.instance.stop(); } this.soundStreamDuration.clear(); this.currentSoundStreamInMovieclip = undefined; } this.stopSoundStreams = function(currentFrame){ if(this.soundStreamDuration.size > 0){ var keys = this.soundStreamDuration.keys(); for(var i = 0; i< this.soundStreamDuration.size ; i++){ var key = keys.next().value; var value = this.soundStreamDuration.get(key); if((value.end) == currentFrame){ key.instance.stop(); if(this.currentSoundStreamInMovieclip == key) { this.currentSoundStreamInMovieclip = undefined; } this.soundStreamDuration.delete(key); } } } } this.computeCurrentSoundStreamInstance = function(currentFrame){ if(this.currentSoundStreamInMovieclip == undefined){ if(this.soundStreamDuration.size > 0){ var keys = this.soundStreamDuration.keys(); var maxDuration = 0; for(var i=0;i<this.soundStreamDuration.size;i++){ var key = keys.next().value; var value = this.soundStreamDuration.get(key); if(value.end > maxDuration){ maxDuration = value.end; this.currentSoundStreamInMovieclip = key; } } } } } this.getDesiredFrame = function(currentFrame, calculatedDesiredFrame){ for(var frameIndex in this.actionFrames){ if((frameIndex > currentFrame) && (frameIndex < calculatedDesiredFrame)){ return frameIndex; } } return calculatedDesiredFrame; } this.syncStreamSounds = function(){ this.stopSoundStreams(this.currentFrame); this.computeCurrentSoundStreamInstance(this.currentFrame); if(this.currentSoundStreamInMovieclip != undefined){ var soundInstance = this.currentSoundStreamInMovieclip.instance; if(soundInstance.position != 0){ var soundValue = this.soundStreamDuration.get(this.currentSoundStreamInMovieclip); var soundPosition = (soundValue.offset?(soundInstance.position - soundValue.offset): soundInstance.position); var calculatedDesiredFrame = (soundValue.start)+((soundPosition/1000) * lib.properties.fps); if(soundValue.loop > 1){ calculatedDesiredFrame +=(((((soundValue.loop - soundInstance.loop -1)*soundInstance.duration)) / 1000) * lib.properties.fps); } calculatedDesiredFrame = Math.floor(calculatedDesiredFrame); var deltaFrame = calculatedDesiredFrame - this.currentFrame; if(deltaFrame >= 2){ this.gotoAndPlayForStreamSoundSync(this.getDesiredFrame(this.currentFrame,calculatedDesiredFrame)); } } } } }).prototype = p = new cjs.MovieClip(); // symbols: (lib.CachedBmp_36 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(0); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_37 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(1); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_17 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(2); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_18 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(3); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_35 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(4); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_5 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(5); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_4 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(6); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_34 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(7); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_33 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(8); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_32 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(9); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_15 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(10); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_31 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(11); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_13 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(12); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_10 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(13); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_11 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(14); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_6 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(15); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_1 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(16); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_2 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(17); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_29 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(18); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_27 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(19); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_8 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(20); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_7 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(21); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_30 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(22); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_25 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(23); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_23 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(24); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_22 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(25); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_9 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(26); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_28 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(27); }).prototype = p = new cjs.Sprite(); (lib.oculus = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(28); }).prototype = p = new cjs.Sprite(); (lib.thinker = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(29); }).prototype = p = new cjs.Sprite(); (lib.segavr = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(30); }).prototype = p = new cjs.Sprite(); (lib.stereoscopicphoto = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(0); }).prototype = p = new cjs.Sprite(); (lib.machine = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(1); }).prototype = p = new cjs.Sprite(); (lib.magic_door = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(2); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_12 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(3); }).prototype = p = new cjs.Sprite(); (lib.viewmaster = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(31); }).prototype = p = new cjs.Sprite(); (lib.mask = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_1"]); this.gotoAndStop(0); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_26 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(32); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_24 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(33); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_19 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(4); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_21 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_3"]); this.gotoAndStop(34); }).prototype = p = new cjs.Sprite(); (lib.CachedBmp_20 = function() { this.initialize(ss["interaction_HTML5 Canvas_atlas_2"]); this.gotoAndStop(5); }).prototype = p = new cjs.Sprite(); // helper functions: function mc_symbol_clone() { var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop)); clone.gotoAndStop(this.currentFrame); clone.paused = this.paused; clone.framerate = this.framerate; return clone; } function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) { var prototype = cjs.extend(symbol, cjs.MovieClip); prototype.clone = mc_symbol_clone; prototype.nominalBounds = nominalBounds; prototype.frameBounds = frameBounds; return prototype; } (lib.X2 = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_2 this.instance = new lib.CachedBmp_35(); this.instance.setTransform(-50.8,-9.85,0.5,0.5); this.instance._off = true; this.timeline.addTween(cjs.Tween.get(this.instance).wait(3).to({_off:false},0).wait(1)); // Layer_1 this.instance_1 = new lib.CachedBmp_36(); this.instance_1.setTransform(0,0,0.5,0.5); this.instance_2 = new lib.CachedBmp_37(); this.instance_2.setTransform(0,0,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1}]}).to({state:[{t:this.instance_2}]},1).wait(3)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-50.8,-9.8,102.3,54); (lib.Title = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.CachedBmp_6(); this.instance.setTransform(0,0,0.5,0.5); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Title, new cjs.Rectangle(0,0,613.5,101.5), null); (lib.Thinker = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.thinker(); this.instance.setTransform(0,0,0.7208,0.7208); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Thinker, new cjs.Rectangle(0,0,284,133.4), null); (lib.Symbol1 = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_2 this.instance = new lib.CachedBmp_35(); this.instance.setTransform(-50.8,-9.85,0.5,0.5); this.instance._off = true; this.timeline.addTween(cjs.Tween.get(this.instance).wait(3).to({_off:false},0).wait(1)); // Layer_1 this.instance_1 = new lib.CachedBmp_17(); this.instance_1.setTransform(0,0,0.5,0.5); this.instance_2 = new lib.CachedBmp_18(); this.instance_2.setTransform(0,0,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1}]}).to({state:[{t:this.instance_2}]},1).wait(3)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-50.8,-9.8,102.3,54); (lib.Sensoria = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.machine(); this.instance.setTransform(-210,-323,0.456,0.456); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Sensoria, new cjs.Rectangle(-210,-323,419.6,646.2), null); (lib.Mask3 = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.oculus(); this.instance.setTransform(-109,-156); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-109,-156,407,341); (lib.Mask2 = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.viewmaster(); this.instance.setTransform(10,-32); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Mask2, new cjs.Rectangle(10,-32,188,150), null); (lib.Mask = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.segavr(); this.instance.setTransform(-203,-170); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Mask, new cjs.Rectangle(-203,-170,407,341), null); (lib.history = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_2 this.instance = new lib.CachedBmp_15(); this.instance.setTransform(-32.55,-17.05,0.5,0.5); this.instance._off = true; this.timeline.addTween(cjs.Tween.get(this.instance).wait(3).to({_off:false},0).wait(1)); // Layer_1 this.instance_1 = new lib.CachedBmp_4(); this.instance_1.setTransform(0,0,0.5,0.5); this.instance_2 = new lib.CachedBmp_5(); this.instance_2.setTransform(0,0,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1}]}).to({state:[{t:this.instance_2}]},1).wait(3)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-32.5,-17,296,95.5); (lib.Headset_btn = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_2 this.instance = new lib.CachedBmp_32(); this.instance.setTransform(-0.5,-0.5,0.5,0.5); this.instance._off = true; this.timeline.addTween(cjs.Tween.get(this.instance).wait(3).to({_off:false},0).wait(1)); // Layer_1 this.instance_1 = new lib.CachedBmp_33(); this.instance_1.setTransform(0,0,0.5,0.5); this.instance_2 = new lib.CachedBmp_34(); this.instance_2.setTransform(0,0,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_1}]}).to({state:[{t:this.instance_2}]},1).wait(3)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-0.5,-0.5,214,74.5); (lib.Head = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.mask(); this.instance.setTransform(0,0,0.3515,0.3515); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Head, new cjs.Rectangle(0,0,664.4,498.1), null); (lib.Design = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.stereoscopicphoto(); this.instance.setTransform(-80,-40,0.5596,0.5596); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = p = new cjs.MovieClip(); p.nominalBounds = new cjs.Rectangle(-80,-40,419.7,208.8); (lib.Background = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{}); // Layer_1 this.instance = new lib.magic_door(); this.instance.setTransform(400,0,1.1863,1.1863); this.timeline.addTween(cjs.Tween.get(this.instance).wait(1)); this._renderFirstFrame(); }).prototype = getMCSymbolPrototype(lib.Background, new cjs.Rectangle(400,0,1124.7,780.6), null); // stage content: (lib.interaction_HTML5Canvas = function(mode,startPosition,loop) { this.initialize(mode,startPosition,loop,{headset:71,Home:28,VR:29}); this.actionFrames = [0,28,29,70,71,112]; // timeline functions: this.frame_0 = function() { this.clearAllSoundStreams(); } this.frame_28 = function() { var _this = this; /* Clicking on the specified symbol instance executes a function. */ _this.Headset_bt.on('click', function(){ /* Moves the playhead to the specified frame label in the timeline and continues playback from that frame. Can be used on the main timeline or on movie clip timelines. */ _this.gotoAndPlay('headset'); }); /* stop();*/ var _this = this; /* Stop a Movie Clip/Video Stops the specified movie clip or video. */ _this.stop(); var _this = this; /* Clicking on the specified symbol instance executes a function. */ _this.Historyvr.on('click', function(){ /* Moves the playhead to the specified frame label in the timeline and continues playback from that frame. Can be used on the main timeline or on movie clip timelines. */ _this.gotoAndPlay('vr'); }); } this.frame_29 = function() { var _this = this; /* Clicking on the specified symbol instance executes a function. */ _this.back2.on('click', function(){ /* Moves the playhead to the specified frame label in the timeline and continues playback from that frame. Can be used on the main timeline or on movie clip timelines. */ _this.gotoAndPlay('home'); }); var _this = this; /* Clicking on the specified symbol instance executes a function. */ _this.back.on('click', function(){ /* Moves the playhead to the specified frame label in the timeline and stops the movie. Can be used on the main timeline or on movie clip timelines. */ _this.gotoAndPlay('home'); }); } this.frame_70 = function() { var _this = this; /* Stop a Movie Clip/Video Stops the specified movie clip or video. */ _this.stop(); } this.frame_71 = function() { var _this = this; /* Clicking on the specified symbol instance executes a function. */ _this.back.on('click', function(){ /* Moves the playhead to the specified frame label in the timeline and stops the movie. Can be used on the main timeline or on movie clip timelines. */ _this.gotoAndPlay('home'); }); } this.frame_112 = function() { var _this = this; /* Stop a Movie Clip/Video Stops the specified movie clip or video. */ _this.stop(); } // actions tween: this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(28).call(this.frame_28).wait(1).call(this.frame_29).wait(41).call(this.frame_70).wait(1).call(this.frame_71).wait(41).call(this.frame_112).wait(2)); // Layer_11_copy_copy this.instance = new lib.Mask2(); this.instance.setTransform(550.9,954.35,1,1,0,0,0,142,66.7); this.instance._off = true; this.timeline.addTween(cjs.Tween.get(this.instance).wait(86).to({_off:false},0).to({y:666.3},26).to({_off:true},1).wait(1)); // Layer_11_copy this.instance_1 = new lib.Mask(); this.instance_1.setTransform(1519.8,706.5,1,1,0,0,0,115.9,178.5); this.instance_1._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(82).to({_off:false},0).to({x:1005.8,y:744.5},30).to({_off:true},1).wait(1)); // Layer_16 this.instance_2 = new lib.Mask3(); this.instance_2.setTransform(-288.3,587.5,1,1,0,0,0,129.7,64.5); this.instance_2._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_2).wait(78).to({_off:false},0).to({x:175.25,y:612.45},34).to({_off:true},1).wait(1)); // Layer_17 this.instance_3 = new lib.CachedBmp_29(); this.instance_3.setTransform(289.8,463.05,0.5,0.5); this.instance_4 = new lib.CachedBmp_28(); this.instance_4.setTransform(365.7,433,0.5,0.5); this.instance_5 = new lib.CachedBmp_27(); this.instance_5.setTransform(221.95,376.8,0.5,0.5); this.instance_6 = new lib.CachedBmp_26(); this.instance_6.setTransform(297.85,336.45,0.5,0.5); this.back = new lib.Symbol1(); this.back.name = "back"; this.back.setTransform(887.35,73.7,1,1,0,0,0,25.7,17); this.back.filters = [new cjs.ColorFilter(0.5, 0.5, 0.5, 1, 127.5, 51, 0.5, 0)]; this.back.cache(-53,-12,106,58); new cjs.ButtonHelper(this.back, 0, 1, 2, false, new lib.Symbol1(), 3); this.instance_7 = new lib.CachedBmp_25(); this.instance_7.setTransform(171.95,292.1,0.5,0.5); this.instance_8 = new lib.CachedBmp_24(); this.instance_8.setTransform(248.8,249.65,0.5,0.5); this.instance_9 = new lib.CachedBmp_23(); this.instance_9.setTransform(115.45,230.9,0.5,0.5); this.instance_10 = new lib.CachedBmp_22(); this.instance_10.setTransform(66.1,155.45,0.5,0.5); this.instance_11 = new lib.CachedBmp_21(); this.instance_11.setTransform(192.3,179.05,0.5,0.5); this.instance_12 = new lib.CachedBmp_20(); this.instance_12.setTransform(138.65,102.1,0.5,0.5); this.instance_13 = new lib.CachedBmp_19(); this.instance_13.setTransform(45.55,16.55,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_13},{t:this.instance_12},{t:this.instance_11},{t:this.instance_10},{t:this.instance_9},{t:this.instance_8},{t:this.instance_7},{t:this.back},{t:this.instance_6},{t:this.instance_5},{t:this.instance_4},{t:this.instance_3}]},71).to({state:[]},42).wait(1)); // Layer_11_copy_copy this.instance_14 = new lib.Thinker(); this.instance_14.setTransform(550.9,954.35,1,1,0,0,0,142,66.7); this.instance_14._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_14).wait(44).to({_off:false},0).to({y:666.3},26).to({_off:true},1).wait(43)); // Layer_11_copy this.instance_15 = new lib.Sensoria(); this.instance_15.setTransform(1892.25,637.35,1,1,0,0,0,115.9,178.5); this.instance_15._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_15).wait(40).to({_off:false},0).to({x:1030.25},30).to({_off:true},1).wait(43)); // Layer_11 this.instance_16 = new lib.Design(); this.instance_16.setTransform(-288.3,587.5,1,1,0,0,0,129.7,64.5); this.instance_16._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_16).wait(36).to({_off:false},0).to({rotation:-14.9992,x:121.3,y:673.75},34).to({_off:true},1).wait(43)); // Layer_18 this.back2 = new lib.X2(); this.back2.name = "back2"; this.back2.setTransform(877.05,86.15,1,1,0,0,0,25.7,17); this.back2._off = true; new cjs.ButtonHelper(this.back2, 0, 1, 2, false, new lib.X2(), 3); this.timeline.addTween(cjs.Tween.get(this.back2).wait(29).to({_off:false},0).to({_off:true},42).wait(43)); // Layer_10 this.instance_17 = new lib.CachedBmp_31(); this.instance_17.setTransform(237.95,441.8,0.5,0.5); this.instance_18 = new lib.CachedBmp_30(); this.instance_18.setTransform(313.85,410.45,0.5,0.5); this.instance_19 = new lib.CachedBmp_13(); this.instance_19.setTransform(171.95,332.1,0.5,0.5); this.instance_20 = new lib.CachedBmp_12(); this.instance_20.setTransform(248.8,289.65,0.5,0.5); this.instance_21 = new lib.CachedBmp_11(); this.instance_21.setTransform(115.45,230.9,0.5,0.5); this.instance_22 = new lib.CachedBmp_10(); this.instance_22.setTransform(66.1,155.45,0.5,0.5); this.instance_23 = new lib.CachedBmp_9(); this.instance_23.setTransform(192.3,192.75,0.5,0.5); this.instance_24 = new lib.CachedBmp_8(); this.instance_24.setTransform(138.65,119.8,0.5,0.5); this.instance_25 = new lib.CachedBmp_7(); this.instance_25.setTransform(61.7,41.7,0.5,0.5); this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance_25},{t:this.instance_24},{t:this.instance_23},{t:this.instance_22},{t:this.instance_21},{t:this.instance_20},{t:this.instance_19},{t:this.instance_18},{t:this.instance_17}]},29).to({state:[]},42).wait(43)); // Copy this.instance_26 = new lib.CachedBmp_1(); this.instance_26.setTransform(20.3,609.3,0.5,0.5); this.instance_26._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_26).wait(28).to({_off:false},0).to({_off:true},1).wait(85)); // Layer_8 this.instance_27 = new lib.CachedBmp_2(); this.instance_27.setTransform(-28.95,585.95,0.5,0.5); this.instance_27._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_27).wait(28).to({_off:false},0).to({_off:true},1).wait(85)); // Layer_1 this.Headset_bt = new lib.Headset_btn(); this.Headset_bt.name = "Headset_bt"; this.Headset_bt.setTransform(747.85,380.7,1,1,0,0,0,83.4,34); this.Headset_bt._off = true; new cjs.ButtonHelper(this.Headset_bt, 0, 1, 2, false, new lib.Headset_btn(), 3); this.timeline.addTween(cjs.Tween.get(this.Headset_bt).wait(28).to({_off:false},0).to({_off:true},1).wait(85)); // Layer_4 this.instance_28 = new lib.Head(); this.instance_28.setTransform(1359.8,489.05,1,1,0,0,0,332.2,249.1); this.instance_28._off = true; this.timeline.addTween(cjs.Tween.get(this.instance_28).wait(21).to({_off:false},0).to({x:806.3},7).to({_off:true},1).wait(85)); // Layer_2 this.instance_29 = new lib.Title(); this.instance_29.setTransform(-349.2,95.35,1,1,0,0,0,306.9,50.8); this.timeline.addTween(cjs.Tween.get(this.instance_29).wait(1).to({regX:306.8,x:-324.95},0).wait(1).to({x:-300.6},0).wait(1).to({x:-276.25},0).wait(1).to({x:-251.9},0).wait(1).to({x:-227.55},0).wait(1).to({x:-203.25},0).wait(1).to({x:-178.9},0).wait(1).to({x:-154.55},0).wait(1).to({x:-130.2},0).wait(1).to({x:-105.85},0).wait(1).to({x:-81.5},0).wait(1).to({x:-57.2},0).wait(1).to({x:-32.85},0).wait(1).to({x:-8.5},0).wait(1).to({x:15.85},0).wait(1).to({x:40.2},0).wait(1).to({x:64.5},0).wait(1).to({x:88.85},0).wait(1).to({x:113.2},0).wait(1).to({x:137.55},0).wait(1).to({x:161.9},0).wait(1).to({x:186.25},0).wait(1).to({x:210.55},0).wait(1).to({x:234.9},0).wait(1).to({x:259.25},0).wait(1).to({x:283.6},0).wait(1).to({x:307.9},0).wait(1).to({x:332.25},0).to({_off:true},1).wait(85)); // Layer_7 this.Historyvr = new lib.history(); this.Historyvr.name = "Historyvr"; this.Historyvr.setTransform(284,223,1,1,0,0,0,83.4,34); this.Historyvr.compositeOperation = "difference"; this.Historyvr._off = true; new cjs.ButtonHelper(this.Historyvr, 0, 1, 2, false, new lib.history(), 3); this.timeline.addTween(cjs.Tween.get(this.Historyvr).wait(28).to({_off:false},0).to({_off:true},1).wait(85)); // Layer_3 this.instance_30 = new lib.Background(); this.instance_30.setTransform(292.2,418.1,1,1,0,0,0,759.2,427.1); this.instance_30.alpha = 0; this.timeline.addTween(cjs.Tween.get(this.instance_30).to({alpha:1},28).to({_off:true},1).wait(85)); this._renderFirstFrame(); }).prototype = p = new lib.AnMovieClip(); p.nominalBounds = new cjs.Rectangle(-176.1,0,2162,1021); // library properties: lib.properties = { id: '769CF296EAC64A7DAC9C4611D364F776', width: 960, height: 720, fps: 27, color: "#FFFFFF", opacity: 1.00, manifest: [ {src:"images/interaction_HTML5 Canvas_atlas_1.png", id:"interaction_HTML5 Canvas_atlas_1"}, {src:"images/interaction_HTML5 Canvas_atlas_2.png", id:"interaction_HTML5 Canvas_atlas_2"}, {src:"images/interaction_HTML5 Canvas_atlas_3.png", id:"interaction_HTML5 Canvas_atlas_3"} ], preloads: [] }; // bootstrap callback support: (lib.Stage = function(canvas) { createjs.Stage.call(this, canvas); }).prototype = p = new createjs.Stage(); p.setAutoPlay = function(autoPlay) { this.tickEnabled = autoPlay; } p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) } p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; } p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); } p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; } p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; } an.bootcompsLoaded = an.bootcompsLoaded || []; if(!an.bootstrapListeners) { an.bootstrapListeners=[]; } an.bootstrapCallback=function(fnCallback) { an.bootstrapListeners.push(fnCallback); if(an.bootcompsLoaded.length > 0) { for(var i=0; i<an.bootcompsLoaded.length; ++i) { fnCallback(an.bootcompsLoaded[i]); } } }; an.compositions = an.compositions || {}; an.compositions['769CF296EAC64A7DAC9C4611D364F776'] = { getStage: function() { return exportRoot.stage; }, getLibrary: function() { return lib; }, getSpriteSheet: function() { return ss; }, getImages: function() { return img; } }; an.compositionLoaded = function(id) { an.bootcompsLoaded.push(id); for(var j=0; j<an.bootstrapListeners.length; j++) { an.bootstrapListeners[j](id); } } an.getComposition = function(id) { return an.compositions[id]; } an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) { var lastW, lastH, lastS=1; window.addEventListener('resize', resizeCanvas); resizeCanvas(); function resizeCanvas() { var w = lib.properties.width, h = lib.properties.height; var iw = window.innerWidth, ih=window.innerHeight; var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1; if(isResp) { if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) { sRatio = lastS; } else if(!isScale) { if(iw<w || ih<h) sRatio = Math.min(xRatio, yRatio); } else if(scaleType==1) { sRatio = Math.min(xRatio, yRatio); } else if(scaleType==2) { sRatio = Math.max(xRatio, yRatio); } } domContainers[0].width = w * pRatio * sRatio; domContainers[0].height = h * pRatio * sRatio; domContainers.forEach(function(container) { container.style.width = w * sRatio + 'px'; container.style.height = h * sRatio + 'px'; }); stage.scaleX = pRatio*sRatio; stage.scaleY = pRatio*sRatio; lastW = iw; lastH = ih; lastS = sRatio; stage.tickOnUpdate = false; stage.update(); stage.tickOnUpdate = true; } } an.handleSoundStreamOnTick = function(event) { if(!event.paused){ var stageChild = stage.getChildAt(0); if(!stageChild.paused){ stageChild.syncStreamSounds(); } } } })(createjs = createjs||{}, AdobeAn = AdobeAn||{}); var createjs, AdobeAn;