So far Arduino is the main topic and I’ve seen so many ideas generated. The first assignment is a simple game on a 8×8 LED board. What can I say … Snake it is ~

You can try it :

Open these images in IE and other browsers :

After some trying, I found out that the image is in CMYK. When I changed it to RGB color Mode, it’s all fine.
Don’t know if anyone ever been in the same situation ….

2.3 Complex (Flowing/Floating) full browser Flash :
Demo

The purpose of this demo is to show you how to make object flow with the Stage (or browser width and height)

THEORY & MATH
We would create 3 MovieClip of names object1, object2 and object3 (with the origin at its upper left corner – this is important)
object1 would be an object that keeps a fixed distance with the browser (such as a background)
object2 would be an object that keeps a fixed distance with the bottom right corner (such as a decoration at the bottom of your page)
object3 would be an object that should move along with how big or small your browser is, based on the top left corner (such as your menu)

You can see the visualization in the following image (Click to view enlarged)

In this case, with a little Math, the formula for your new x and y are :
For object1, it’s obvious that its x and y remains the same :
newx = oldx
newy = oldy

For object2, it’s a little more tricky. The thing is that it should keep a fixed distance to your lower right corner
We would have this :
new x + object width + e = new stage width
=> new x = new stage width – e – object width
the same for new y : new y = new height – f – object height

For object3, your object would span depending on how big your stage is. The formula for this situation may varies greatly on how you want it to be, but I would do a simple one like this:
newx = oldx * (new width / old width)
newy = oldy * (new height / old height)

APPLY IT IN YOUR FLASH

Create your 3 shapes, convert them to MovieClip, and name them as accordingly. It can be anything, just make sure that the origin is at its upper left corner
(This is important every time your Actionscript involves x,y positions and width/height)

To modify your Flash when your stage is changed, you would need to do 2 things :

• When the user scale their browser, they’re scaling our Stage. But as you can see in previous example, items in your Stage origin would be at the center – since it is the default behavior. You would need to change it so that your Stage origin keeps its position at the upper left corner :
  

  stage.scaleMode = “noScale”;
  stage.align = “left”;

  That’s why we would add an event listener to the Stage, a function that would be called when the Stage is changed.

  stage.addEventListener(Event.RESIZE, onResizeStage);

• One important thing to note : Since we’re doing full-browser Flash, the initial Stage width and height will NOT be the same as the Stage of your Flash. That’s why, it’s needed to calculate the position the first time.
  Remember to store any data you need to access it when the stage is resized.
• Then, modify that function to move the MovieClip to where it should be, apply the Math, assign it to the object’s x and y, and you’re done.
  

  function onResizeStage(evt:Event):void{
  //This part can be put in a function to reuse
  object3.x = originalXObj3 * (stage.stageWidth / originalStageWidth);
  object3.y = originalYObj3 * (stage.stageHeight / originalStageHeight);
  object2.x = stage.stageWidth – distanceX – object2.width;
  object2.y = stage.stageHeight – distanceY – object2.height;

The factors that you may need are accessed as below :
New stage width and height : stage.stageWidth , stage.stageHeight
Your MovieClip’s width and height : objectName.width, objectName.height

3. Mixing Flash with other HTML content
Here are some tips when you mix your Flash and other HTML content :

• Flash can be embedded with transparent background. You just need to do this before the swfobject.embedSWF:
  

  params.addValue(‘wmode’,‘transparent’);

• However, the space that it occupies would still be a rectangle. In some cases when you layout the Flash that involves roll over action above HTML buttons, it could renders the others useless, even though it’s transparent. To take care of it, you may need to place the Flash behind other HTML tags that involves roll over and click with z-index in CSS.

4. Source file download for this and last post
To the folder

This is usually the last step, but knowing how to do it properly will save you time, seriously.

For the examples, I’m creating a 400x300px Flash file, with Stage colored gray, and a rectangle of a darker gray. As for the reason why, you would see in the following.

1. The normal Flash export way : See the demo

If you do File -> Publish, Flash would export a HTML file along with your SWF by default. But it would result in 300+ lines of code. They are used to detect the Flash version, embedding, and a whole lot of handling events.

I would say that you should go with it if you don’t have even 10 minutes for proper embedding.

2. SWFObject : SWFObject home page

Why SWFObject :

• It requires less hand-coding on your side
• It’s flexible in detecting Flash version, installer file and such
• You can tell the browser to display alternate content when Flash is not there (which is an important factor for SEO content and search bot crawling)

Here are some basic examples of SWFObject that you can use :

2.1 Normal way with alternate content :

Demo

In your HTML head, remember to include your swfobject javascript :

<script type="text/javascript" src="swfobject.js"></script>

Then create a <div> with an id to hold your SWF. You can add any content in this div, and it would be displayed when there’s no Flash (and read by search bots)

<div id="divID">

<p>Alternative content</p>

</div>

Then place a javascript script to embed it

var flashvars = {};

var params = {};

var attributes = {};

swfobject.embedSWF("myContent.swf","divID","300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

The syntax is :

swfobject.embedSWF(“flash_file_name.swf”, “div_id”, “width”, “height”, “flash_version”, “express_install_file”, flashvars, params, attributes);

*express_install_file is displayed if the Flash version is not the current one, it’s included in the SWFObject zip file download

* the last 3 parameters (flashvars, params, attributes) are optional

2.2 Full browser Flash:

Demo 1 (Scaled)

Sometimes, you would want to make your Flash expand with the browser windows, and you would need to include some CSS in your HTML.

In default case (no Stage controlled with Actionscript), all of the content on your stage will be centered, with your stage color as the background when the browser is expanded.

The CSS that you would need :

body,#divid{

height:100%;

}

And in your embed :

swfobject.embedSWF("flash_file_name.swf", "divID", "100%", "100%", "9.0.0", "express_install_file", flashvars, params, attributes);

But know that it would scale your Flash along with the browser.

Demo 2 (Not scaled)

If you don’t want your Flash to be scaled with your browser, you would need to include this line in your FLA file :

stage.scaleMode = "noScale";

Then export it again, and see the difference.

(To be continued – complex Stage position and content floating with browser window in next post)

]]> http://www.interactivemoon.com/flash-embedding-tips-for-designers-with-swfobject-and-css-basic/feed/ 8 http://www.interactivemoon.com/hello-world/ http://www.interactivemoon.com/hello-world/#comments Mon, 15 Feb 2010 18:43:48 +0000 Hang Le http://www.interactivemoon.com/blog/?p=1 Read The Rest →]]> Welcome to my blog.

The site is launched, finally. If you have any comments on it (such as : oh it’s so beautiful, oh you’re such a crap, p*ss off , …) , you are welcomed to comment here. I would love to hear different user opinion on how I am doing.

I’d post experiments that I had worked on, and some Actionscript tutorials for designer here. Please look forward to it.

In the mean time, you’re welcomed to send me an email at hangle2301@gmail.com to keep in touch