STR: SwishMAX Text Replacement

Link copiato negli appunti

Some of the readers of my english articles about Nifty Corners (see Articles: «More Nifty Corners») asked me if I was planning other translation/articles in English.

Well, between the about 50 I wrote it was quite difficult to choose. I decided to presents STR (SwishMAX Text Replacement). The original article and the technique were published in Italian on the 23rd of March 2005. Instead of just a translation, I'll present here a slightly improved version.

Before we start, perhaps you may want to have a look at the example I prepared for this article.

What is STR

STR is a way to embed your favourites fonts in a webpage using a combination of Flash, CSS and Javascript, leaving the markup semantical and minimal. Already heard about that? Yes, maybe you know sIFR.

STR is quite different from sIFR, starting from the medium. In STR, flash movies are in fact developed with SwishMax instead of Flash. Why this? Well, the main reason is that SwishMAX is really cheaper than Flash. SwishMax can produce fully compatible "swf" Flash movie, and it's capable of a scripting language called SwishScript very similar to ActionScript.

STR is not however a clone of sIFR, just as like SwishMAX is not a clone of Flash.

What you can do with STR

With STR you can replace headings, links, menus, quotes and whole paragraphs (but just with plain text inside). It support multilines text: however, font and movie size should be decided via SwishMAX. This means that you should choose how big is the replacing movie and how many lines it has.

The color for the replaced text could be decided via Javascript. In the case you're replacing links or elements that contain just links, you can also choose the color for the :hover state.

You can apply easily on replaced text one of the hundreds of effects available in SwishMax. But please, just don't exagerate: I suggest to use transition wisely to avoid really freaky or annoying effects. In my opinion, maximum one element per page should have a dynamic effect.

When use STR

I believe STR should be used when it brings a real advantage in terms of size over one of the image replacement techniques.

As is, if you're applying STR just on one element on a site (ie the logo) you should consider to use an image replacement technique. If you plan to use the same movie on at least 3-4 elements in your website, and perhaps the number will grow, then you could use STR. Applying STR will be definitevely faster and lighter than produce images and set up the CSS rules for image replacement. It's particulary indicated on large sites, blogs or site with frequents updates to provide text with a better typography.

The example we presented in the beginning of the article is just for demonstrational purposes. If the page was real, for the header and the footer would have been better use image replacement.

How STR works

STR is a combination of SwishMAX, CSS and Javascript to replace text elements on a webpage embedding your favourite fonts. If Javascript is enabled, and the Flash player from version 6 is available on the user's system the elements you choose are replaced (or, to say it better, covered) with swf movies that embed your favourite fonts. In the case Javascript is off, or Flash player is not available, plain text, eventually styled with CSS, will be displayed.

Six steps to use STR

Applying STR on your pages is really easy. Here's the link to download the zip file that contains all the code and source for the example.

In it you'll also find a file called baseSTR.swi that will be the base to produce your swf files. Open it with SwishMAX and follow the easy steps.

Setting the movie dimensions

After having opened baseSTR.swi the first thing to do is to set up the dimensions of the movie. You can do it from the dimension tab on the right panel of SwishMax. Here is a screenshot. Dimensions could be eventually triggered in a second time.

Changing text dimensions according to the movie ones

Next step is to set the text dimensions to the whole movie ones. You can do it manually, by clicking on the text and adjusting them from a corner, or throught the dimension tab that you'll see after having clicked on the text. Here's the screenshot. Note that also this step could be re-arranged.

Choose your font and the size

Now the fun part. By clicking on the text, you'll see a font tab on the right panel. Here's a screenshot. You should choose the font and the font-size of the movie. You can also select the text alignment. If you plan to use a pixel font, you should select "pixel font (hard)" between the options. You can also choose the color for the text but you can also do it via Javascript how we'll see later. The size of the movie and the text elements could be adjusted in the previous two points.

Now that you've choosen your font-size, preview how it would render with real text by changing it on the lower textarea of the right panel: the text in the movie is in fact just a placeholder, since the real one will be passed via Javascript when the final HTML page is done. Multiline text could be obtained, but in this case you should decide it at this (and the previous two) level how bigger is the movie, and how many lines it has.

I suggest you to select just a subset of the chars that should be embedded in the movie in order to spare size of the exported swf. I selected just letters and punctation symbols in the base movie.

Change or remove the effect

Next step is change or remove the effect on the text. Simply right-click on the upper timeline and choose between the many effects that SwishMax got: here is a screenshot. You can then preview the effect by playing the movie from the "Control" menu. You'll get a debug error because the script is missing a variable, but the effect will be played anyway.

Save and export the movie

So we've arrived at the final step in SwishMax: you can now save the movie you've done with a convenient name and export it as swf throught the "File" menu in the upper left corner of the program.

Apply STR on the page(s) you made

At this point, we can close SwishMax and proceed with HTML, CSS and Javascript to embed the movies we've made. STR is made up of five essential parts:

One or more swf files produced with SwishMAX
CSS file for the screen
CSS file for the print
Javascript library for STR
The Javascript calls to apply it

We've already seen how to produce the SWF files with SwishMAX. The CSS files and the Javascript library just don't need changes. They just need to be copied in the same folder of the pages and linked in the head section:

About the Javascript calls, let's have a look again at the example. You'll see that I left embedded part of the Javascript:

window.onload=function(){
if(!STRDetect())
return;
SwishReplace("h1","header.swf","550","50","#6699CC","#FFF");
SwishReplace("h3","h3.swf","350","30","#FFFFFF","#555","#3D993C");
SwishReplace("h2","quote.swf","250","220","#FFFFFF","#F63");
SwishReplace("address","pixel.swf","350","14","#FFFFFF","#900");
}

The embedded script that starts when the page has fully loaded first perform a check for DOM and Flash Player 6 or higher availability throught the function STRDetect. If the test has passed, the function SwishReplace is invoked to replace the elements of the page. It accept the following parameters:

ShishReplace("css selector","swf movie","width","height","background-color","text color","hover color");

The CSS selector supported are tag selector (for instance h3), id selector (ie p#highlight), class selector (for example div.news) and discendant selector with some limitation: this has to be composed by an id selector followed by a tag selector (example: ul#navigation li). The elements to replace have to contain just plain text or just a link inside. Links will be automatically detected, preserved and replaced by STR (look at the h3 replacement of the example).

As second parameter you should specify the filename (eventually with the path) of the swf movie that will be used for replacement. The third and fourth parameter are the move dimensions, in order width and height. They should be pure numbers, even if they refers to the pixel unit. Then you have to specify the background color of the replaced text, in six digits with # symbol.

Sixth and seventh parameter are optional, and should be specified in three or six digits with the # symbol. We said that the replaced text color could be decided via SwishMax but also via Javascript: this is what the sixth parameter is for. The seventh parameter is the color on the hover state, and should be used only if you're going to replace links or elements that contains (just) links.

Obviously the embedded javascript function in the head section could be moved in an external Javascript file, even in str.js. Before conclusion, let's see how can speed up the execution of STR.

Tweaking STR for speed

In the second example STR starts before the page (and in particular images and background) has totally loaded. This could be achieved by embedding a javascript call before closing the body tag:

...
</div>
<script type="text/javascript">STR()</script>
</body>
</html>

The STR function contains all instruction for the replacement, and is located in a second javascript external file, strApply.js, which is declared in the head section. The content of this file is:

function STR(){
if(!STRDetect())
return;
SwishReplace("h1","header.swf","550","50","#87D74E","#FFF");
SwishReplace("h3","h3.swf","350","30","#FFFFFF","#FF6633","#CC185E");
SwishReplace("h2","quote.swf","250","220","#FFFFFF","#4E87D7");
SwishReplace("address","pixel.swf","350","14","#FFFFFF","#7625B0");
}

This way the execution of STR is really faster, even if I've got some deserves in embedding Javascript in differents places from the head section, because this goes somehow in the opposite direction of separation between content, behaviour and presentation.

Accessibility of STR

In the first version of STR, I used display:none to hide the plain text, letting show the flash movie dinamically added by Javascript.

Anyone involved in web development should be aware that display:none and visibility:hidden are two enemies of accessibility, since they will hide the text to some screen reader based on the rendering engine of Internet Explorer (for instance IBM Home Page Reader). There are lots of way of hiding a text while maintaining accessibility intact that could be borrowed from Image Replacement techniques.

So, I decided to adopt in the improved version of STR a replacement techique mostly based on the best IR technique ever: the Gilder and Levin cover-up span. Applied to IR, the cover-up span has a small disadvantage: the use of an extra (empty) span.

Since in STR the code for embed the Flash movie is added dynamically by Javascript, this disadvantage disappears, bringing also a significant improvement: in the case Javascript is on, Flash Player is available but disabled or blocked, the plain text will remain visible. This is the best improvement I brought to the first version of STR. So, basically in STR now the Flash movie is laid over the text that is going to replace: this should grant accessibility to screen reader, text browsers and users with Flash available but blocked. You can look how the page would render with flash blocked or disabled.

Another good point about STR is that while replacing links (or elements that contain just links) STR will preveserve them in the DOM tree, mantaining accessibility intact also in this case.

Compatibility

About the browser compatibility: STR has been tested and works fine in Internet Explorer 5.x and 6 on Windows, Opera 7.6, FireFox 1.1 and Safari 1.3.

Everyone who have tried embedding Flash in a pure DOM way maintaining the maximum cross-browser compatibility and injecting just the object element knows that is a real pain. So, I did it short and used innerHTML. You should be aware that this property is not part of standard EcmaScript nor of the DOM specifications, but it's extended on a very large set of browsers. This solution however will not work on XHTML pages served with mime type of application/xhtml+xml.

Credits, licence and download

I'd like to thank John Hanna from wow-factor.com, which encouraged me to translate the article on STR and provided me the screenshots for this one since I've got the italian version of SwishMAX. My "thank you" goes also to Shawn Inman, Mike Davidson and Geoff Sterns, whose ideas about IFR, sIFR and FlashObject are simply wonderful.

The fonts used for the example are: Airbus Special, SF Movie Poster, Eurasia and Bit4. They're all free fonts, and you could find them with Google.

English audience doesn't know about the first version of STR. All I can say is that in the version I've presented here I did a big step forward.. Even if STR is really basic and not so flexible as sIFR. I did my best, and almost reached my possibilities in improving it since I bought SwishMax and started playing with it just to develop STR. That's why I decided to release STR under a Creative Commons Deed. If you've done significant improvements, please let it know by writing me or publishing them in your website. If further and major improvements will come, perhaps I'll write a follow-up or open a Wiki.

If you've haven't done it yet, download STR here. And if you haven't got SwishMax, you can download a 15-days full working trial from the Swishzone website. Enjoy!

Indice lezioni