Using the SWF Image Replacement (swfIR) Technique

Using the SWF Image Replacement (swfIR) Technique

Creating an Internet website environment that will make the visitor's experience more rewarding without compromising performance in the search engines or making website maintenance a nightmare, is the fundamental logic behind Cascading Style Sheets (CSS). In the past few years the challenges to the use of custom typography  on the websites has been successfully met through the development and refinement of sIFR (Scalable Inman Flash Replacement) and now graphic imagery is also being given the royal treatment using swfIR (SWF Image Replacement).

Who's been Paying Attention?

Using custom typography as a design component can bring an exquisite flavor to the expression of the website theme. And when photographs, illustrations and other artistic elements are matched to both of these, you can literally transfix a person's attention with the beauty of the result. This is particularly the case for website visitors who have only been exposed to browser text based websites. It is visual impact and emotional connection that is at play behind the scenes of the brain and any marketer worth their salt would be wise to take every opportunity to use factors to create websites that engage and relate to their visitors wants and needs.

For example, compare a website page of all text in paragraph block format without any type of graphic elements; no underscores, horizontal or vertical drawn lines or images of any sort to a page that has one of each of these elements. The effect is easy to identify; the eye (and hence, the brain) has more pathways to comprehend what the viewer is seeing. Your personal "hard drive" and "CPU" are busy cross-referencing the new information with the information you have on file. The graphic elements play a vital role in the way we process textual information, functioning as a "lens" to view the content.

How Design Effective is swfIR?

Browser text is functional, but can be boring and webmasters do not want to bore their visitors because once a visitor loses interest in what you are offering on your website they will leave. By using the capabilities of sIFR in conjunction with swfIR you can give visitors a compelling reason to stay.

This application was designed to dissolve the barrier to creating custom design effects on standard HTML images such as; .jpg, .gif or .png formats that will display well in whichever browser the visitor is using.  Using the array of effects you can apply to an image, you can create a sense of dimension, elevation, location or perspective that can be the stimulus that makes the viewer sit up and take notice of what your information has to offer them.

The versatility of JavaScript is employed in both of these website creation tools along with Flash with room for its capabilities to be extended to other uses for the graphic images on your pages. This application is receiving cheers in the content management systems arena: by using swfIR every image on every page can be treated to stimulate visual interest without having to jump through hoops of fire to make it happen.

How to Use swfIR

If you are working with CSS to fine tune your images, using swfIR should be a breeze, because it uses the same premise. The first thing the application addresses is the cross-browser issue, to manage the differences. Here are the examples given on www.swfir.com:

swfIR adds a <span> with a class of swfIR around any image you're replacing. Here's a before and after look at the code:

Before swfIR is included in the page:

<img src="pic.jpg" alt="A picture" id="pic" />

            After swfIR is included in the page (rendered source):

<span class="swfir" id="pic">

  [replaced image; code varies by browser]

</span>

Webmasters will find that an in-depth knowledge of JavaScript or Flash is not required; swfIR is extremely easy to set up in four steps:

First:                Get the swfIR program: download the .ZIP file: swfir_v1.zip (11.89 KB) from www.swfir.com.

Second:        Select the directory for both the swfir.js and swfir.swf and upload the files into
this directory on your web server

Third:              You have to include the swfIR JavaScript file in the <head> of your document like this:

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

Fourth:          There are four categories of effects you can use:

Elastic Header Image

<script type="text/javascript" src="swfir.js"></script>
<script type="text/javascript">
 
window.onload = function(){    
  var elastic = new swfir(); 
  elastic.specify('src', '/swfir.swf');
  elastic.specify('elasticity', 'true');
  elastic.swap('img');         
}
 
</script>         

 

Rotated Image within Content

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

<script type="text/javascript">

 

window.onload = function(){   

  rotate = new swfir();

  rotate.specify('src', '/swfir.swf');

  rotate.specify('rotate', '-5');

  rotate.swap("img");

}

 

</script>    

Rounded Corners within Content

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

<script type="text/javascript">

 

window.onload = function(){   

  round = new swfir();

  round.specify('src', '/swfir.swf');

  round.specify('border-color', 'ffffff');

  round.specify('border-radius', '10');

  round.swap("img");

}

 

</script>    

Multiple Images within Content

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

</script>

<script type="text/javascript">

 

window.onload = function(){   

  rotate = new swfir();

  rotate.specify('src', '/swfir.swf');

  rotate.specify('rotate', '-5');

  rotate.swap("#middle");

 

  rotate3 = new swfir();

  rotate3.specify('src', '/swfir.swf');

  rotate3.specify('rotate', '5');

  rotate3.swap(".right");

}

 

</script>         

Select the effect you want to apply and the image to receive it:

   var borders = new swfir();

               borders.specify("border-radius", "15");

               borders.swap("#content img");

 

Here is a list of the available parameters:

  • border-radius
  • border-width
  • border-color
  • shadow-offset
  • shadow-angle
  • shadow-alpha
  • shadow-blur
  • shadow-blur-x
  • shadow-blur-y
  • shadow-strength
  • shadow-color
  • shadow-quality
  • shadow-inner
  • shadow-knockout
  • shadow-hide
  • rotate
  • overflow
  • link
  • elasticity

 

There are more than a dozen parameters that you can use to implement swfIR on the images on your individual web pages or every page on your website. Using swfIR can turn a plain image into an eye-catcher and give an impressive photo an extraordinary showcase display.

And Now for the Bad News

Very few applications are compatible with everything and swfIR is no exception, here is the list from the www.swfir.com website:

  • Resizing/zooming in Opera crashes the browser
  • Flash of unstyled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Incompatible with other JS libraries like Prototype or MooTools
  • Doesn't work with hot-linked images because of security restrictions in Flash

 

This list of known issues is important to keep in mind, but none of these should be the deal-breaker that stops anyone from utilizing swfIR.