Artdm 170 week15 publishing

ARTDM 170, Week 15:
Publishing Flash
Gilbert Guerrero
gguerrero@dvc.edu
gilbertguerrero.com/blog/
artdm-170/

Add Flash to Web Pages
‣ Deliver FlashHTML pages by embedding
SWF ﬁles 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

Two Ways to Add Static
Embed Code

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.
speciﬁcation.

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" />
</object>

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" />
   
     <object type="application/x-shockwave-flash"
     data="myContent.sw" width="300" height="120">
   
   
     </object>
   
</object>

"Flash Embedding Cage
Match"
by Bobby van der Sluis,
A List Apart, http://
www.alistapart.com/articles/
ﬂashembedcagematch

Publishing with Adobe
Flash

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

SWF Object

• http://code.google.com/p/swfobject/
‣ Offers more ﬂexibility and control in
delivering SWF ﬁles.
‣ Documentation:
http://code.google.com/p/swfobject/
wiki/documentation

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”>
</div>

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>

Checking if the movie has
loaded
‣ Use the ﬁrst keyframe for
ActionScript that will check if the
movie has loaded.
‣ The preloader will play in the ﬁrst
keyframe until the movie has
loaded.

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);
}
}

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);
}
}

AS3 Preloader Tutorial
http://www.oman3d.com/tutorials/
ﬂash/as3preloader/

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 ﬁnal 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

Homework

• Work on your ﬁnal projects
‣ Add scoring and game over trigger

Artdm 170 week15 publishing

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (9)

Similar a Artdm 170 week15 publishing

Similar a Artdm 170 week15 publishing (20)

Más de Gilbert Guerrero

Más de Gilbert Guerrero (20)

Último

Último (20)

Artdm 170 week15 publishing

Notas del editor