ARTDM 170, Week 16: Publishing

1,022 views
950 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,022
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

ARTDM 170, Week 16: Publishing

  1. 1. ARTDM 170, Week 16: Publishing Flash Gilbert Guerrero [email_address] gilbertguerrero.com/blog/artdm-170/
  2. 2. Final Projects December 2 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. 3. Presentations Day 1 Day 2
  4. 4. Flash on the Web
  5. 5. Add Flash to Web Pages <ul><ul><li>Deliver Flash to your users by embedding SWF files in HTML pages </li></ul></ul><ul><ul><ul><li>Allows you to control the size and display preferences </li></ul></ul></ul><ul><ul><li>Several ways to do this: </li></ul></ul><ul><ul><ul><li>Add static embed code to your HTML pages </li></ul></ul></ul><ul><ul><ul><li>Use Adobe Flash to &quot;publish&quot; the code </li></ul></ul></ul><ul><ul><ul><li>Use a dynamic method with JavaScript </li></ul></ul></ul>
  6. 6. Two Ways to Add Static Embed Code
  7. 7. Embed tag <ul><li><embed type=&quot;application/x-shockwave-flash&quot;    src=&quot;myContent.swf&quot; width=&quot;300&quot; height=&quot;120&quot;    pluginspage=&quot;http://www.adobe.com/go/getflashplayer&quot; /> <noembed>Alternate content</noembed> </li></ul><ul><li>Advantages </li></ul><ul><ul><li>Simple and clean </li></ul></ul><ul><ul><li>Chosen for widespread use by Google Video, YouTube, and others </li></ul></ul><ul><li>Disadvantages </li></ul><ul><ul><li>Does not validate as XHTML compliant. The <embed> tag is not part of the XHTML specification. </li></ul></ul>
  8. 8. Object tag <ul><li><object type=&quot;application/x-shockwave-flash&quot;  </li></ul><ul><li>  data=&quot;myContent.swf&quot; width=&quot;300&quot; height=&quot;120&quot;>   <p>Alternate content</p> </object> </li></ul><ul><li>Variation required by Internet Explorer: </li></ul><ul><li><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot;  </li></ul><ul><li>  width=&quot;300&quot; height=&quot;120&quot;>    <param name=&quot;movie&quot; value=&quot;myContent.swf&quot; />   <p>Alternate content</p> </object> </li></ul>
  9. 9. Object tag: Nested <ul><li>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: </li></ul><ul><li><object classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; width=&quot;300&quot; height=&quot;120&quot;>    <param name=&quot;movie&quot; value=&quot;myContent.swf&quot; />    <!--[if !IE]>-->      <object type=&quot;application/x-shockwave-flash&quot;      data=&quot;myContent.sw&quot; width=&quot;300&quot; height=&quot;120&quot;>    <!--<![endif]-->        <p>Alternate content</p>    <!--[if !IE]>-->      </object>    <!--<![endif]--> </object> </li></ul>
  10. 10. &quot;Flash Embedding Cage Match&quot; by Bobby van der Sluis, A List Apart, http://www.alistapart.com/articles/flashembedcagematch
  11. 11. Publishing with Adobe Flash
  12. 12. Publish Settings <ul><li>File > Publish Settings… </li></ul><ul><ul><li>Determines how SWF and other files appear when published from other menus, including Test Movie </li></ul></ul><ul><ul><li>Choose Format, Flash, and HTML options </li></ul></ul><ul><ul><li>Use version detection to load alternate content </li></ul></ul><ul><ul><li>File > Export... allows more flexibility when creating Quicktime files </li></ul></ul>
  13. 13. SWF Object  
  14. 14. SWF Object <ul><li>http://code.google.com/p/swfobject/ </li></ul><ul><ul><li>Offers more flexibility and control in delivering SWF files. </li></ul></ul><ul><ul><li>Delivers stands compliant code </li></ul></ul><ul><ul><li>Documentation: http://code.google.com/p/swfobject/wiki/documentation </li></ul></ul>
  15. 15. SWFObject dynamic publishing <ul><li>Between the <head> tags: </li></ul><ul><li><script type=&quot;text/javascript”  src=&quot;swfobject.js&quot;></script> </li></ul><ul><li><script type=&quot;text/javascript”> swfobject.embedSWF(&quot;myContent.swf&quot;,  &quot;myContent&quot;,&quot;300&quot;,&quot;120&quot;,&quot;9.0.0&quot;); </script> In your HTML <body>:  </li></ul><ul><li><div id=&quot;myContent”>   <p>Alternate content</p>  </div> </li></ul>
  16. 16. SWF Object Parameters <ul><li><script type=&quot;text/javascript”> var flashvars = {   name1: &quot;hello&quot;,   name2: &quot;world&quot;,   name3: &quot;foobar&quot; }; var params = {   menu: &quot;false&quot; }; var attributes = {   id: &quot;myDynamicContent&quot;,   name: &quot;myDynamicContent&quot; }; swfobject.embedSWF(&quot;myContent.swf&quot;, &quot;myContent”, &quot;300&quot;, &quot;120&quot;, &quot;9.0.0&quot;,&quot;expressInstall.swf&quot;, flashvars, params, attributes); </script> </li></ul>
  17. 17. Preloaders
  18. 18. Checking if the movie has loaded <ul><ul><li>Use the first keyframe for ActionScript that will check if the movie has loaded.   </li></ul></ul><ul><ul><li>The preloader will play in the first keyframe until the movie has loaded. </li></ul></ul>
  19. 19. Preloader Script: First Keyframe <ul><li>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);   } } </li></ul>
  20. 20. Percentage Bar Preloader <ul><li>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;   bar_mc.scaleX = loaded/total;   loader_txt.text = Math.floor((loaded/total)*100)+ &quot;%”;   if (total == loaded){   play();   this.removeEventListener(Event.ENTER_FRAME, loading); } } </li></ul>
  21. 21. AS3 Preloader Tutorial http://www.oman3d.com/tutorials/flash/as3preloader/
  22. 22. Homework <ul><li>Work on your final projects </li></ul><ul><ul><li>Add scoring and game over trigger </li></ul></ul>
  23. 23. Thank You

×