Earlier this year, Geoff Stearns and Bobby van der Sluis teamed up to create the “ultimate JavaScript library for embedding Flash content” into web documents. For those of you familiar with techniques for embedding Flash, these two names are instantly recognizable. Geoff Stearns is the author of SWFObject and Bobby van der Sluis is the author of UFO. Easily, SWFObject and UFO are the two best and most widely used techniques for detecting and embedding Flash content. Needless to say, when I heard that these two great minds were collaborating on an even better method to embed Flash, I was very excited to check out the fruits of their collective efforts..

On July 25th, 2007 the first publicly available version (0.2 - public alpha) of SWFFix was released to the masses. SWFFix is a Flash-embedding JavaScript library featuring standards-compliant markup, Flash-version detection, and Express-Install support. SWFFix uses the nested-objects method to optimize cross-browser support, deliver alternate content, and facilitate graceful degradation. SWFFix “fixes” the issues commonly associated with the nested-objects method (e.g., the click-to-activate requirement of IE6 and Opera 9+), providing greater functionality and a richer user experience. SWFFix also features dynamic embedding of Flash content for (X)HTML documents. Best of all, the SWFFix library consists of a single, extremely lightweight JavaScript file — only 12KB (unzipped) or 3.4KB (gzipped)! Overall, definitely impressive.

Continue Reading

Pardon this post! I am posting this information online for personal references purposes. I may need to revisit this code at some point in the future, and if I post it here I will always know where to find it (trust me, it would disappear into the abyss if I tried storing it offline). So, although it is intended solely for myself, feel free to extract and use anything you like, as long as commented attribution remains. What we have here are two different methods for including a slideshow on a web page. The first method employs the techniques discussed in this article, while the second method skips the Flash and employs only the JavaScript portion of the slideshow. Here is some additional help with embedding Flash content, including slideshows, and JavaScript techniques.

Continue Reading

Embed Flash or Die Tryin’ Web designers and developers looking to embed Flash content into a web page currently enjoy a wide variety of methods from which to choose. The most common methods vary along several key dimensions, including standards-compliance, user-friendliness, and universal support. Some methods make it easy to provide alternative content, others enable auto-activation of Flash content, while others feature plugin-detection functionality. In an attempt to round-up the myriad techniques, this article presents nine of the most useful, practical, and popular methods for embedding Flash content.

Continue Reading

“Perhaps it’s time for a bizarre diversion…” — Wild Bill recommends these bizarre Flash websites for your personal entertainment, education, and enjoyment:

monoface For a few delightful moments of splendid online fun, prance on over to the hilariously interactive Flash interface currently on display at monoface. Once there, click the "shuffle face" link a few times to get the general idea, and then graduate to plastic surgeon by clicking on the various facial components themselves. Each click mixes androgynous Flash flesh further and further into bizarro land, where smooth blending manifests disturbed visions of hermaphroditic unrest..

heiwa-alpha.co.jp Flexing some incredible Flash muscle, the good citizens over at heiwa-alpha (update 12/2008: site seems to be down..) have produced a Flash site of monolithic proportions. The sheer magnificence of the animated imagery and truly remarkable attention to detail make this surrealistic visual feast one of Wild Bill’s personal favorites. Indeed, for a delightful romp through the collective mind of some truly gifted Flash engineers, crank up the broadband, dust off the Japanese translator, and drop in for a wonderfully bizarre Flash diversion..

In our previous article, Alternate JavaScript Slideshow for SlideshowPro, we present an elaborate method for providing alternate content specifically for SlideshowPro. Although the method points toward a more generalized adaptation, its overall functional implementation remains focused on the presentation of slideshows.

This article explores the generalization of the previously defined method for providing alternate JavaScript content when Flash support is not detected. Using skyzyx.com’s excellent Flash-detection script, Flash Detect 3, we will outline a general approach for supporting the following browser configurations:

Browser supports the required version of Flash

Excellent. This is the ideal situation. Your Flash-based content will be displayed as intended.

Browser supports Flash, but has not upgraded to the required version

Okay. In this situation, you could serve either JavaScript content or retro-Flash content (i.e., Flash content that requires a lesser version of Flash). Detection is also provided for virtually any version of Flash, enabling delivery of multiple movie alternatives.

Browser does not support Flash, but does support JavaScript

Not bad. Non-Flash browsers will receive alternate JavaScript content. User’s won’t know what they’re missing.

Browser does not support JavaScript, but does support Flash

For Flash content that does not require JavaScript to function, the browser will display the Flash content as intended, assuming sufficient Flash version. When the version of Flash is insufficient, non-Flash users will see either retro-Flash content, animated gif content, or static image content, depending on your preference.

Browser supports neither JavaScript nor Flash

Worst case. Even so, all hope is not lost. In this situation, visitors will see either animated gif content, or static image content.

Continue Reading

For the unenlightened, SlideshowPro (SP) is a Flash-based slideshow-authoring system that delivers full-featured, high-end, Flash-based slideshows. Websites featuring SP slideshows present content in sophisticated fashion, inspiring users with elegant captions, beautiful transitions, and intuitive navigation.

However, many visitors are unable to experience SP slideshows because they lack the requisite Flash support. SlideshowPro-based slideshows currently require Flash 7 or better to function. And, although Flash 7 is quite common, it is far from ubiquitous. In the "worst-case" scenario, Flash-challenged visitors will see a broken webpage or missing content. Unfortunately, the typical "best-case" scenario is not much better, as non-Flash users typically will see a single, static image, which is generally served via something similar to:

<object classid="clsid...">
 <param name="movie..." />
 <embed src="http://domain.tld/..." />
 ...
 <img src="http://domain.tld/path/to/alt/image.jpg" alt="alternate image served for non-Flash browsers" />
 ...
</object>

Continue Reading

Embed Windows Media Player via the object tag

Here is the general format for including .wmv files in web pages:

<object type="video/x-ms-wmv" data="http://www.domain.com/path/to/winmovie.wmv" width="340" height="280">
  <param name="src" value="http://www.domain.com/path/to/winmovie.wmv" />
  <param name="controller" value="true" />
  <param name="autostart" value="true" />
</object>

Continue Reading

“Generative artifacts, graffiti archaeology, and interactive chaos, anyone?” — Wild Bill recommends these highly addictive, interactive websites for your personal entertainment, enjoyment, and enrichment:

Gallery of Computation

This site peeled my hat back. I am completely enamoured and will most likely spend vast amounts of time exploring the endless creative potential opened up through this remarkable online experience. The Gallery of Computation takes computer-generated graphical artifacts and algorithmic image processing to a distant universe. Infinite thanks to Jared Tarbell for sharing his inspiring world with us.

Graffiti Archaeology

Here is another fascinating website at which one could spend countless hours surfing and learning. As avid graffiti enthusiasts, we were immediately hooked on this remarkably interactive presentation of society’s most unappreciated art form. Chronologically organized, Graffiti Archaeology is an insightful online documentation revealing localized patterns of urban expression within various graffiti subcultures. As the site says, "Graffiti Archaeology is a project devoted to the study of graffiti-covered walls as they change over time. The core of the project is a time-lapse collage, made of photos of graffiti taken at the same location by many different photographers over a span of several years. Most of the photos are from San Francisco, over a timespan from the late 1990’s to the present."

Splatter

Splatter is a fun interactive Flash application enabling users to splatter virtually vectorized viscous globs of sloppy, splattering lines. Or something. The program follows the user’s cursor coordinates around the screen, leaving a continuous flow of digital "paint", which flows at a rate determined by that of the cursor. Splatter is extreme fun for the common surfer, and perhaps esoterically useful for graphic designers and web developers. Also check out the offline version of Splatter, available for download here.

CanvasPaint

Finally, check out this online emulation of Microsoft’s ubiquitous Paint program. Firefox 2 and Opera 9 users enjoy the option of saving created images to a local hard drive. Other users may create images but not save them. Besides demonstrating some elite programming skills, CanvasPaint is also a very handy tool to have available online. Indeed, online apps such as this are rapidly changing the landscape of software development and deployment. As described by the CanvasPaint site: "[Canvas is] a near pixel-perfect copy of Microsoft Paint in HTML, CSS and JavaScript, using the <canvas> tag as specified by WHATWG and supported by Safari 1.3, Firefox 1.5 and Opera 9."

ertdfgcvb.ch Check out the intriguing Shockwave site at ertdfgcvb.ch.

Here are a few sIFR Notes for Perishable Press. Just what are we looking at here? Well, first it is important to understand the sIFR variables and the order in which they should appear:

(sSelector, sFlashSrc, sColor, sLinkColor, sHoverColor, sBgColor, nPaddingTop, nPaddingRight, nPaddingBottom, nPaddingLeft, sFlashVars, sCase, sWmode)

The variable, sFlashVars consists of the following sub-variables (these should be seperated with an & sign:

# Align Flash text block
textalign=center
# Moves text any number of pixels to the right
offsetLeft=3
# Moves text any number of pixels down
offsetTop=3
# Adds underline links when hovered
underline=true

Then, inducing from the following code example, we should place a similar set of statements at the bottom of any pages requiring sIFR functionality:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement("h1", "http://domain.com/path/to/fonts/font1.swf", "#E1E1E1", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");

   sIFR.replaceElement("h2", "http://domain.com/path/to/fonts/font2.swf", "#CC6633", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");

   sIFR.replaceElement("h3", "http://domain.com/path/to/fonts/font3.swf", "#E1E1E1", "#FFFF99", "#CC6633", "#333333", 0, 0, 0, 0, null, null, "opaque");
}

//--><!]]>
</script>

Arguments may also be stated by name rather than sequentially:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement("h1", named({sFlashSrc: "../path/to/font.swf", sColor: "#777", sCase: "upper"}));
};

//--><!]]>
</script>

Here is another example using the named arguments method:

<script type="text/javascript">
<!--//--><![CDATA[//><!--

if(typeof sIFR == "function") {
   sIFR.replaceElement(named({nWidth:333,nHeight:33,sSelector:"h3.class-h3", sFlashSrc:"http://domain.com/fonts/font.swf", sColor:"#333", sLinkColor:"#777", sBgColor:"#FFF", sHoverColor:"#DDD", sWmode: "transparent", nPaddingTop:0, nPaddingBottom:0}));

//--><!]]>
</script>

Finally, here is the default CSS supplied with sIFR:

/* sIFR Print CSS | Hide Flash headlines from the browser */

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
	display: none !important;
	position: absolute;
	overflow: hidden;
	height: 0px;
	width: 0px;
}
span.sIFR-alternate {
	visibility: visible !important;
	position: static !important;
	display: block !important;
	left: auto !important;
	top: auto !important;
}

/* sIFR Screen CSS | These are standard sIFR styles -- do not modify */

.sIFR-flash { 
	visibility: visible !important; 
	margin: 0px; 
}
.sIFR-replaced { 
	visibility: visible !important;
}
span.sIFR-alternate { 
	top: 0px;
	left: 0px; 
	width: 0px; 
	height: 0px; 
	display: block; 
	overflow: hidden;
	position: absolute;
}

/* Decoy styles used to hide the browser text before it is replaced */

.sIFR-hasFlash h1 { 
	letter-spacing: -2px;
	visibility: visible;
	font-size: 32px;
	height: 40px;
}
.sIFR-hasFlash h3 { 
	visibility: visible;
	font-size: 18px;
}

References

• sIFR Documentation at novemberborn

Modernista!

File under: Inspiration, Creativity, Graphics, and Flash: Modernista!