SWFObject – Flashvars Instead of External XML Files

Rareview — Wed, 01 Apr 2009 03:46:57 +0000

We’ve been using SWFObject for quite some time to insert Flash content into a website. It’s a great way to get around the tag and remove the dreaded IE “click to activate this control” message.

Lately, we’ve started to use Flashvars as opposed to external XML files to generate the content in the Flash files. We really like this approach for a few reasons. First, the content is in the HTML page directly, which means there is one less file to manage. Second (and this is a big one), if your SWF looks for an XML file to load content, the browser tends to cache that content. So the next time you visit the page, you will see the cached content even if you’ve replaced and updated your XML file. In this situation, the user has to manually clear their cache and reload the page to see the new content. The problem here is that most users don’t clear their cache all that often. So you run the risk of users seeing old, outdated content, even though you’ve spent the time to update it. So our solution recently has been to use Flashvars when we can.

A good example of this can be seen on our new website. The panels right underneath the clouds on the top of all the pages have text in them. They have a headline, sub-header, and a paragraph of text. The headline and sub-header are part of the SWF file and thus require us to either use an XML file, put the text directly in the Flash file itself (not very friendly for updates), or use Flashvars. Here’s how we did it (in the of our document):

<script src="js/swfobject.js" type="text/javascript"></script> 
<script type="text/javascript">
		var flashvars = {mainTitle: "Functional, interactive design.", subTitle: "Three words that mean more to us than you'd think."};
		var params = {wmode: "transparent", allowFullScreen: "false"};
		var attributes = {};
		swfobject.embedSWF("flash/workheader.swf", "flash-work", "950", "195", "9.0.0", "flash/expressInstall.swf", flashvars, params, attributes);
</script>

You need to be using the latest version of SWFObject (version 2) to do this. The benefits of using Flashvars is that the browser shouldn’t cache old XML data, it’s easier to maintain (i.e. less files to work with), and it’s written in the HTML document directly.

Experimenting: Flash AS3 Grid Sorting

Andrew Knapp — Wed, 21 Jan 2009 23:45:16 +0000

Working on a project that required us to sort out a grid layout, we were experimenting with what the best methods would be to visually communicate the items on a vertically scrolling grid when resizing the window. Using a little AS3, I managed to code a few mad nerdy little examples. Of course, there isn’t any scrolling in these examples, but you get the point. Check them out here:

1) Left flush no-resize sorting : In this example, everything is flush left, and the grid items do not resize. Visually, it keeps the spacing consistent and everything in order, but leaves some whitespace.

2) Auto justify no-resize sorting : In this example, the grid items space out evenly to fit the screen and also do not resize. Visually, makes a good use of the gutters, but might look kinda funny.

3) Auto resizing, full screen sorting : All the grid items resize horizontally and vertically to fit the width of the screen. Visually, it makes the best use of the gutters, but stretches the images. So I guess this depends what sort of content you’re placing in the items. You may or may not want to stretch them.

4) Left flush no-resize smart sorting : This is the same as #1, but I call it smart, because it keeps the screen looking more filled. Once you resize the browser, you’ll notice that when your window is covering half of an item, it will appear/disappear. This hides some of the item, but gives some padding to make it feel more comfortable.

Download source files for all 4 examples here.

A lot of times, when you’re immersed in the design/development, you lose sight of the obvious and/or lose sight of what you’re actually trying to achieve. Are there other obvious options? Which method is the best out of these?

Let us know if you find these handy, or if you have any suggestions or comments!

Rareview Blog » Flash

SWFObject – Flashvars Instead of External XML Files

Experimenting: Flash AS3 Grid Sorting