Web Games Programming

1. Web Games Programming Game Deployment

2. Agenda • Internal and External Pre-loaders • Game Deployment

3. Game Deployment • Game deployed on a remote webserver • Client required to view content • Flash Player - Flash SDK provides code to launch player install • Shockwave Player - not a transparent install process • Presentation • fixed sized window • usually accompanied by adverts • Examples • www.miniclip.com • shockwave3d.com

4. Local Deployment • Export Flash game scenario a a native executable file • Windows platform an .exe file • Mac platform - a projector file

6. Basic Web Deployment • Export Flash as a .swf file • Create html file and Insert Media (Dreamweaver) and include JavaScript file “ASRunActiveContent.js” • Publish to remote website and test in various web browsers

7. Polished Web Deployment • Export Flash as a .swf file with preloader • Create html file frameset with appropriate design and layout to feature Flash content • Insert Media (Dreamweaver) and include JavaScrip file “ASRunActiveContent.js” • Publish to remote website and test in various web browsers

11. Preloaders • Visual indication of time required for loading content • Preloader can be internal: • Show progress while staying on frame one until main content downloads • Once content loaded move to required frame and play • Preloader can load an external .swf file. • Preloader loads external .swf while showing progress • Once the target movie is fully downloaded it will replace the preloader movie • Preloader movie will determine some settings of the target movie, e.g. frame rate.

12. Preloader:Internal Movie downloaded ? no yes Loading… downloading play timeline

13. Preloader:External Movie downloaded ? no yes Loading… preloader.swf target.swf downloading replace preloader.swf movie with target.swf movie

14. Preloaders: Testing • In the authoring environment: • Compile and run movie then choose View- Simulate Download • Need some content to see the download or set the download rate to low value • Results can be misleading and sometimes the authoring environment gets in the way etc. • No substitute for testing from a real website • From a remote webserver • The most reliable way to test your work - using various browsers and platforms - embed a large sound file to give the preloader something to do over the network for testing purposes

15. Simulating Downloading Showing Internal Preloader

16. // Frame-based preloader - assumes loadPercent dynamic textfield and progressBar.mc on interface // stop the movie from playing this.stop(); //add the listener for load progress event and reference the LoaderInfo object of the main swf. this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,checkLoadProgress); // function to handle the progress event function checkLoadProgress(event:ProgressEvent):void { // divide the bytes loaded by the total time 100 to give the correct value var progressPercentComplete:Number=(event.bytesLoaded / event.bytesTotal)*100; //output a percentage text via the dynamic text field loadPercent.text = "LOADING... "+ String(Math.floor(progressPercentComplete)) + " %"; // scale the progress movie clip - need to reduce by 100th to achieve correct size progressBar_mc.scaleX = progressPercentComplete * .01; // if all the file is loaded if (progressPercentComplete == 100) { //do what needs to be done when your file has loaded progressBar_mc.scaleX = 100; // stop at the second frame - might need to gotAndPlay() deoending on scenario gotoAndStop(2); //remove the progress listener - now not required this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS,checkLoadProgress); } }

17. Frame Preloader Interface Dynamic text field loadPercent rectangle progressBar_mc

18. Internet Explorer Bug Loads first time but not after a page refresh…

19. // AS3 preloader to display load status of an external movie file import flash.display.*; import flash.events.*; import flash.text.*; /* make sure the frame rate of the preloader movie is the same as the external movie as the external movie frame rate will be set to the preloader frame rate */ // change this line to reference the name of your external movie var externalContent:URLRequest = new URLRequest("platformgame.swf"); var externalMovieLoader:Loader = new Loader(); externalMovieLoader.load(externalContent); externalMovieLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, preLoader); externalMovieLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete); function preLoader(event:ProgressEvent):void { var loaded:Number = Math.round(event.bytesLoaded); var total:Number = Math.round(event.bytesTotal); var progressBarScale:int = 0; var percent:Number = loaded/total * 100; backDrop_mc.visible = false; progressBarScale= percent; preLoader_mc.scaleX = progressBarScale*.01; percentText.text = Math.round(percent) + "%" } function loadComplete(event:Event):void { externalMovieLoader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS,preLoader); externalMovieLoader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadComplete); stop(); addChild(externalMovieLoader); gotoAndPlay(3); backDrop_mc.visible = true; } } }

20. Deployment • Don’t deploy your project files! i.e. .fla • Only deploy .swf, .html .js and any related .mp3 files • Assignment must be published to your UWE webspace