Your SlideShare is downloading. ×
ARTDM 170, Week 15:
  Publishing Flash
       Gilbert Guerrero
     gguerrero@dvc.edu
  gilbertguerrero.com/blog/
        ...
Flash on the Web
Add Flash to Web Pages
 ‣ Deliver FlashHTML pages by embedding
   SWF files in
                 to your users

  ‣ Allows y...
Two Ways to Add Static
    Embed Code
Embed tag
<embed type="application/x-shockwave-flash"
   src="myContent.swf" width="300" height="120"
   pluginspage="http...
Object tag
<object type="application/x-shockwave-flash"
data="myContent.swf" width="300" height="120">
  <p>Alternate cont...
Object tag: Nested
•   To get the object tag to work as one block of code in the two ways it
    can written, nest them wi...
"Flash Embedding Cage
        Match"
    by Bobby van der Sluis,
       A List Apart, http://
   www.alistapart.com/articl...
Publishing with Adobe
        Flash
Publish Settings

• File > Publish Settings…
 ‣ Determines how SWF and other files
    appear when published from other
   ...
SWF Object
      
SWF Object

• http://code.google.com/p/swfobject/
 ‣ Offers more flexibility and control in
   delivering SWF files.
 ‣ Docu...
SWFObject dynamic
publishing
• Between the <head> tags:
    <script type="text/javascript” 
      src="swfobject.js"></scr...
SWF Object Parameters
<script type="text/javascript”>
var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foob...
Preloaders
Checking if the movie has
loaded
 ‣ Use the first keyframe for
   ActionScript that will check if the
   movie has loaded. ...
Preloader Script: First
Keyframe
stop();
this.addEventListener(Event.ENTER_FRAME,
   loading);
function loading(e:Event):v...
Percentage Bar Preloader
stop();
this.addEventListener(Event.ENTER_FRAME, loading);
function loading(e:Event):void{
  var ...
AS3 Preloader Tutorial
http://www.oman3d.com/tutorials/
        flash/as3preloader/
Timeline
March                            April                           May                       Last day of class
9   ...
Homework

• Work on your final projects
 ‣ Add scoring and game over trigger
Thank You
Upcoming SlideShare
Loading in...5
×

Artdm 170 week15 publishing

1,105

Published on

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,105
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide






















  • Transcript of "Artdm 170 week15 publishing"

    1. 1. ARTDM 170, Week 15: Publishing Flash Gilbert Guerrero gguerrero@dvc.edu gilbertguerrero.com/blog/ artdm-170/
    2. 2. Flash on the Web
    3. 3. Add Flash to Web Pages ‣ Deliver FlashHTML pages by embedding SWF files in to your users ‣ 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
    4. 4. Two Ways to Add Static Embed Code
    5. 5. Embed tag <embed type="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 aspart of the XHTML The <embed> tag is not XHTML compliant. specification.
    6. 6. Object tag <object type="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>
    7. 7. 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>
    8. 8. "Flash Embedding Cage Match" by Bobby van der Sluis, A List Apart, http:// www.alistapart.com/articles/ flashembedcagematch
    9. 9. Publishing with Adobe Flash
    10. 10. 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
    11. 11. SWF Object  
    12. 12. SWF Object • http://code.google.com/p/swfobject/ ‣ Offers more flexibility and control in delivering SWF files. ‣ Documentation: http://code.google.com/p/swfobject/ wiki/documentation
    13. 13. SWFObject dynamic publishing • Between 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>
    14. 14. 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>
    15. 15. Preloaders
    16. 16. Checking if the movie 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.
    17. 17. Preloader Script: First Keyframe 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);   } }
    18. 18. Percentage Bar Preloader 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)+ "%”;   if (total == loaded){   play();   this.removeEventListener(Event.ENTER_FRAME, loading); } }
    19. 19. AS3 Preloader Tutorial http://www.oman3d.com/tutorials/ flash/as3preloader/
    20. 20. Timeline March April May Last day of class 9 16 23 30 6* 13 20 27 4 11 18 25 Create a project title and description Present final projects Paper prototypes (two days) Design background, characters, and other game elements Embed game elements in game symbol Add movement and keyboard interaction Add Start and Game Over screens Add scoring and game over trigger
    21. 21. Homework • Work on your final projects ‣ Add scoring and game over trigger
    22. 22. Thank You

    ×