![ARTDM 170, Week 16: Publishing Flash Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-170/](https://image.slidesharecdn.com/artdm170week16-publishing-091203141414-phpapp01/85/ARTDM-170-Week-16-Publishing-1-320.jpg)
![Object tag: Nested To get the object tag to work as one block of code in the two ways it can written, nest them with IE conditional tags: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.sw" width="300" height="120"> <!--<![endif]--> <p>Alternate content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>](https://image.slidesharecdn.com/artdm170week16-publishing-091203141414-phpapp01/85/ARTDM-170-Week-16-Publishing-9-320.jpg)
Uploaded byGilbert Guerrero
ARTDM 170, Week 16: Publishing
The document provides information about publishing Flash content on the web. It discusses embedding SWF files in HTML pages using <embed> and <object> tags, as well as publishing Flash files dynamically using SWFObject. It also covers using preloaders to display loading progress before a Flash movie plays. Students are assigned to work on final projects and add scoring and game over triggers to their games.
More Related Content
Similar to ARTDM 170, Week 16: Publishing
ARTDM 170, Week 16: Publishing
- 1. ARTDM 170, Week16: Publishing Flash Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-170/
- 2. Final Projects December2 9 16 25 11 November Last day of class Present final projects (two days) Script user interaction and movement of game elements Add scoring and game over trigger 18 Design background and game elements. Embed in game symbol
- 3. Presentations Day 1Day 2
- 4. Flash on theWeb
- 5. Add Flash toWeb Pages Deliver Flash to your users by embedding SWF files in HTML pages Allows you to control the size and display preferences Several ways to do this: Add static embed code to your HTML pages Use Adobe Flash to "publish" the code Use a dynamic method with JavaScript
- 6. Two Ways toAdd Static Embed Code
- 7. Embed tag <embedtype="application/x-shockwave-flash" src="myContent.swf" width="300" height="120" pluginspage="http://www.adobe.com/go/getflashplayer" /> <noembed>Alternate content</noembed> Advantages Simple and clean Chosen for widespread use by Google Video, YouTube, and others Disadvantages Does not validate as XHTML compliant. The <embed> tag is not part of the XHTML specification.
- 8. Object tag <objecttype="application/x-shockwave-flash" data="myContent.swf" width="300" height="120"> <p>Alternate content</p> </object> Variation required by Internet Explorer: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120"> <param name="movie" value="myContent.swf" /> <p>Alternate content</p> </object>
- 9. Object tag: NestedTo get the object tag to work as one block of code in the two ways it can written, nest them with IE conditional tags: <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="120"> <param name="movie" value="myContent.swf" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="myContent.sw" width="300" height="120"> <!--<![endif]--> <p>Alternate content</p> <!--[if !IE]>--> </object> <!--<![endif]--> </object>
- 10. "Flash Embedding CageMatch" by Bobby van der Sluis, A List Apart, http://www.alistapart.com/articles/flashembedcagematch
- 11.
- 12. Publish Settings File> Publish Settings… Determines how SWF and other files appear when published from other menus, including Test Movie Choose Format, Flash, and HTML options Use version detection to load alternate content File > Export... allows more flexibility when creating Quicktime files
- 13.
- 14. SWF Object http://code.google.com/p/swfobject/Offers more flexibility and control in delivering SWF files. Delivers stands compliant code Documentation: http://code.google.com/p/swfobject/wiki/documentation
- 15. SWFObject dynamic publishingBetween the <head> tags: <script type="text/javascript” src="swfobject.js"></script> <script type="text/javascript”> swfobject.embedSWF("myContent.swf", "myContent","300","120","9.0.0"); </script> In your HTML <body>: <div id="myContent”> <p>Alternate content</p> </div>
- 16. SWF Object Parameters<script type="text/javascript”> var flashvars = { name1: "hello", name2: "world", name3: "foobar" }; var params = { menu: "false" }; var attributes = { id: "myDynamicContent", name: "myDynamicContent" }; swfobject.embedSWF("myContent.swf", "myContent”, "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes); </script>
- 17.
- 18. Checking if themovie has loaded Use the first keyframe for ActionScript that will check if the movie has loaded. The preloader will play in the first keyframe until the movie has loaded.
- 19. Preloader Script: FirstKeyframe stop(); this.addEventListener(Event.ENTER_FRAME, loading); function loading(e:Event):void { var total:Number = this.stage.loaderInfo.bytesTotal; var loaded:Number = this.stage.loaderInfo.bytesLoaded; if (total == loaded) { play(); this.removeEventListener(Event.ENTER_FRAME, loading); } }
- 20. Percentage Bar Preloaderstop(); this.addEventListener(Event.ENTER_FRAME, loading); function loading(e:Event):void{ var total:Number = this.stage.loaderInfo.bytesTotal; var loaded:Number = this.stage.loaderInfo.bytesLoaded; bar_mc.scaleX = loaded/total; loader_txt.text = Math.floor((loaded/total)*100)+ "%”; if (total == loaded){ play(); this.removeEventListener(Event.ENTER_FRAME, loading); } }
- 21. AS3 Preloader Tutorialhttp://www.oman3d.com/tutorials/flash/as3preloader/
- 22. Homework Work onyour final projects Add scoring and game over trigger
- 23.