Fallstudie: Nip/Tuck Zufällige Video Einblendung

Overview
For the Nip/Tuck website, the client wanted to play a random interstitial video animation before each page transitioned in (or no video at all). Due to the file size of the video transitions, it was not an option to load all the videos at once and then pick one to play at random. We needed each page to pick a single video to load at random and have that video and page show up in the preloader together. This meant that the random video selection needed to occur before the page loaded so that the video would preload with the page.

Gaia's event hijacking and on-demand assets made accomplishing this task trivial. In all, it took about 10 minutes. Here's how it was accomplished.



Video Transition Assets In site.xml
In the site.xml, all of the pages had the video transitions as assets, all set to preload="false".

               <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="downloads" title="Downloads" src="30_Downloads.swf"> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="mobile" title="Mobile" src="40_Mobile.swf"> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="hotspots" title="LA Hot Spots" src="50_Hotspots.swf" menu="false"> <asset id="hotspots" src="xml/hotspots.xml"/> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="community" title="Community" src="60_Community.swf"> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="video" title="Video" src="70_Video.swf"> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="gallery" title="Gallery" src="80_Gallery.swf"> <asset id="photos" src="xml/gallery.xml"/> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/> <page id="podcasts" title="Podcasts" src="90_Podcasts.swf"> <asset id="transition1" src="assets/transition1.swf" preload="false"/> <asset id="transition2" src="assets/transition2.swf" preload="false"/> <asset id="transition3" src="assets/transition3.swf" preload="false"/> <asset id="transition4" src="assets/transition4.swf" preload="false"/> <asset id="transition5" src="assets/transition5.swf" preload="false"/> <asset id="transition6" src="assets/transition6.swf" preload="false"/>

<br style="clear:both" />

Using afterGoto To Pick A Random Transition
Next, when the afterGoto event occurred, it would find the page that was loading, and pick a random video transition asset to preload with the page, setting all the other assets to not preload in the process.

Then, when the page's transitionIn method was called, it would play the loaded transition swf and wait for it to finish before transitioning in the page.

The following class (updated for AS3), shows how this was accomplished. This class was instantiated in the nav page.

package com.fxnetworks.niptuck.transitions {    import com.gaiaframework.events.GaiaEvent; import com.gaiaframework.api.IPageAsset; import com.gaiaframework.api.IAsset; import com.gaiaframework.api.Gaia; public class VideoTransitions {        private var totalVideos:int = 6; private var lastTransition:int; private static var _transitionVideo:String; function VideoTransitions {            lastTransition = 0; Gaia.api.afterGoto(onAfterGoto); assignTransition(Gaia.api.getCurrentBranch); }        public static function get transitionVideo:String {             return _transitionVideo; }        private function onAfterGoto(event:GaiaEvent):void {            assignTransition(event.validBranch); }        private function assignTransition(branch:String):void {            if (branch != "index/nav/home") {                var page:IPageAsset = Gaia.api.getPage(branch); var asset:IAsset; for (var a:String in page.assets) {                    asset = page.assets[a] as IAsset; if (asset.id.indexOf("transition") > 1) asset.preloadAsset = false; }                _transitionVideo = "transition" + getRandomTransition; IAsset(page.assets[_transitionVideo]).preloadAsset = true; }        }         private function getRandomTransition:int {            var rnd:int = Math.floor(Math.random * totalVideos) + 1; if (rnd != lastTransition) return (lastTransition = rnd); return getRandomTransition; }		    } }

<br style="clear:both" />

The Page Plays The Video
When transitionIn is called on the page, it randomly decides whether or not to play a video, and if it does, it gets the transitionVideo id from the class, otherwise, it just transitions in normally.

The playVideo(callback:Function) method exists in the video transition MovieClipAsset's document class and it accepts a callback to call when it is done playing.

override public function transitionIn:void {   if (Math.random * 10 > 4) {       var mcAsset:IMovieClip = IMovieClip(assets[VideoTransitions.transitionVideo]); var videoClip:MovieClip = mcAsset.content; videoClip.playVideo(onVideoComplete); }   else {       onVideoComplete; } } private function onVideoComplete:void {   gotoAndPlay("in"); } override public function transitionOut:void {   gotoAndPlay("out"); }

<br style="clear:both" />

Conclusion
That's all there is to it. Using Gaia's event engine and on-demand assets, it was easy to put random interstitial video transitions before every section that needed them.

This is by no means the only way to achieve something like this, it's just one example meant to demonstrate hijacking and accessing assets on various pages.