Flash Text Replacement Techniques

The Text Replacement technique that I present today is in some respects, very interesting. Unlike the classical image using CSS to replace operation , this technique uses a Flash movie to overwrite the titles of our site. Despite being a little more complex, requiring the creation of a Flash movie and the use of JavaScript, produces a number of considerable advantages:

  • Keeps the 'accessibility to the site using a True-Unobtrusive Javascript- so that crawlers and spiders continue to see the page as simple and correct HTML
  • It does not require the creation of n by n image titles. Only one movie to replace all the titles of our site, with a considerable saving in terms of the Download
  • Also allows you to create simple titles but not normally used fonts on the Web
  • Text can be rendered in HTML, thanks to the features of Flash
  • The text is selectable
  • As you can insert a Flash movie and interactive animations of any kind

You will note, also, that in this procedure are practically no CSS considered!

The tools that we use

Before we see what we need to use this technique.

Apart from Flash, the other tools are replaceable by other functions or personal solutions.

The Flash movie

Suppose we want to deliver a game with a particular source, which makes CSS unnecessary because the problem is that the fonts could not be installed on the machine of the end-user and therefore does not appear by the end user:

Open Flash and create a movie with a size similar to the way we want to replace. As we shall see that it does not matter the size set in design time, this can be changed later without affecting the yield of the text. Insert a Text object:

Click on "Embed" and select:

In the first frame and insert this disarmingly simple code:

1
2
3
4
5
/ / Works in any size
scaleMode = StageScaleMode . NO_SCALE ; internships. scaleMode = StageScaleMode . NO_SCALE;
align = StageAlign . TOP_LEFT ; internships. align = StageAlign . TOP_LEFT;
/ / Retrieves the content parameter passed from JavaScript

We compile our movie as well (textreplacement.swf) and then pass the HTML markup, a usandone already seen, so as to maximize compatibility:

1
"titolo_uno" >< span > Titolo uno < / span >< / h1 > < h1 id = "titolo_uno"> < span > a Title </ span > </ h1 >

In the section head of the Code insert:

1
2
3
4
"text/javascript" src = "swfobject.js" >< / script > < script type = "text / javascript" src = "swfobject.js"> </ script >
"text/javascript" > < script type = "text / javascript">
swfobject.embedSWF ("textreplacement.swf", "titolo_uno", "544", "50", "9.0.0", null, {content: 'a title'});
</ script >

che contiene la stringa del titolo. The TAG h1 is replaced by our textreplacement.swf movie, with the parameter content that contains the title string. In a more complex situation, and with more titles, this solution becomes inconvenient, although it is more and more "exciting" the mere replacement via CSS: click here for example (note that the text is selectable).

The title has a two and HTML content is rendered by Flash engine, written in red:

1
"textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content : 'Titolo <font color="#ff0000">due</font>' } ) ; SWFObject. embedSWF ("textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, {content: 'Title <font color="#ff0000"> two </ font>' });

For each title on the page, in fact, you have to insert a row in SWFObject JavaScript indicating the id of the title and content to be treated. Using prototype.js and adding a class to intercept the securities to be replaced, we can write a simple function that can replace all the titles on the page with Flash content, taking the parameter content directly from HTML: Click here for example.

1
2
3
"titolo_uno" class = "text-replacement" >< span > Titolo uno < / span >< / h1 > < h1 id = "titolo_uno" class = "text-replacement"> < span > a Title </ span > </ h1 >
"titolo_due" class = "text-replacement" >< span > Titolo due < / span >< / h1 > < h1 id = "titolo_due" class = "text-replacement"> < span > Title Two </ span > </ h1 >
"titolo_tre" class = "text-replacement" >< span > Sono il Titolo Tre un po' più complicato < / span >< / h1 > < h1 id = "titolo_tre" class = "text-replacement"> < span > Title Three are a little 'more complicated </ span > </ h1 >
1
2
3
4
5
6
7
8
9
google. setOnLoadCallback (
function () {
) . each ( $ $ ('H1.text-replacement'). Each (
element ) { function (element) {

}
);
}
);

In this case I used google.setOnLoadCallback() as using Google AJAX Library API to load prototype.js. . Are then intercepted all TAG h1 with class set to text-replacement . At that point is called SWFObject to insert the element found ( element.id ) our Flash movie. Note that is used element.innerHTML to retrieve the text content to pass to the Flash movie. This will actually pass the TAG span , but this is not a probelma having set the text field in Flash movie in HTML.

Flash, then, allows a variety of effects (runtime) that make this technique really "funny": click here for example.

What I have presented is obviously a simple example! However, the Javascript code and HTML tagging can be improved and make the technique truly spectacular. You can insert titles in animation or graphic backgrounds, in addition to simply use fonts not be used by CSS. With appropriate modifications it can pass additional parameters to our Flash movie, making it even more dynamic: Font size, text position, to perform actions on click, etc. ... You can also create a set of movies for different types of securities to be change, while still providing a considerable saving in terms of download-time!

4 comments to "Text Replacement Techniques in Flash"

  1. January 13, 2009 simo:

    Hello! I could not replicate this technique, who knows what error was caught! to be honest I could not even see your example.

    Thanks and hello!
    Simona

    Reply Quote
  2. January 13, 2009 Giovambattista Fazioli :

    @ Simo: try now! The examples do not load the library SWFObject used to insert the Flash movie. Exactly what you "stumbled"? : D

    Reply Quote
  3. January 13, 2009 simo:

    I still do not see the swf in place of the securities in your example! As for my "exercise", I do not know what I'm doing wrong: I did a pedestrian, I do not understand where you wrap. To this day my online tutoring is over, if I can figure it out let you know! hello

    Reply Quote
  4. January 13, 2009 Giovambattista Fazioli :

    @ Simo: Examples probabilmenti see them as a matter of bad cache and try again ... if you clean everything should go all right: partly because I see them well : D
    For the hitch me to have some of your code, so let's settle the matter.
    Greetings
    GF

    Reply Quote

Leave a comment

XHTML TAG PERMIT: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERTION CODE: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL


Stop SOPA