DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

[Gobernalia] Scalable Inman Flash Replacement¶

Author:	Kasper Skårhøj
Created:	2002-11-01T00:32:00
Changed:	2005-09-29T11:58:06
Description:	Typo3 implementation of Scalable Inman Flash Replacement, a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics
Author:	Maximo Cuadros [Gobernalia Global Net S.A - GrupoBBVA]
Email:	maximo.cuadros@grupobbva.com
Info 3:
Info 4:

[Gobernalia] Scalable Inman Flash Replacement¶

Extension Key: gb_sifr

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents¶

[Gobernalia] Scalable Inman Flash Replacement 1

Introduction 1

What does it do? 1

Screenshots 2

Users manual 2

FAQ 2

Adminstration 2

Configuration 2

Reference 2

Known problems 3

Introduction¶

What does it do?¶

Typo3 implementation of Scalable Inman Flash Replacement, a method to insert rich typography into web pages without sacrificing accessibility, search engine friendliness, or markup semantics.
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash. Here is the entire process:

A normal (X)HTML page is loaded into the browser.

A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.

If Flash isn't installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you've designated as something you'd like "sIFRed".

Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.

Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.

This all happens in a split-second, so all of the checking, replacing, and scaling is not visible to the user. It is not uncommon to notice a very short delay as the Flash loads, but to the user, none of the internals of this process are exposed.

Screenshots¶

Check sIFR working at http://www.mikeindustries.com/blog/files/sifr/2.0/

Users manual¶

One time installed the extension enable a new tag on htmlarea “<flash>” with it u can convert any text that bettewen the opentag and close tags. For exampale: <flash>My Text Flash</flash> or <flash><a href=” http://typo3.org ” target=”_blank”>Typo3 Website</a></flash>

Too u can make massive changes bassed on css objects, for example change all the li elements with the class “flash”. Example typoscript code, check Configuration texto for more info:

page.50 < plugin.tx_gbsifr_pi1
page.50.sSelector = li.flash
page.50.sFlashSrc = fileadmin/templates/prado/swf/menu.swf
page.50.sBgColor = #ebebeb
page.50.sLinkColor = #313131
page.50.sColor = #313131
page.50.sFlashVars =offsetLeft=5&offsetTop=5
page.50.sCase = upper
page.50.sHoverColor = #ebebeb

FAQ¶

¿How i can customize the Flash? U must change the sifr.fla at the sdk folder of this extension, or download the lastest sIFR release at http://www.mikeindustries.com/sifr/ and follow the next steps:

“ To begin with, ensure that both the customize_me.as (see Protecting Commercial Fonts) and dont_customize_me.as files are in the same folder as the sifr.fla file. You do not need to upload any of these three files to your server, but they must all be in the same folder when you export your .swf file.

To export your new typeface, open the sifr.fla file which is included with the download, and double-click the invisible textbox in the middle of the stage. If the "Properties" palette is not already visible, open it by selecting "Window > Properties", and select which font you'd like to use from the drop down menu. If you select a TrueType font, you can also create bold and italic styles for your font by clicking on the "I" or "B" buttons.

To export the new file, choose "File > Export" and save as fontname.swf

The standard sifr.fla file contains most of the English characters you will generally need. If you need to embed additional characters or languages, click the "Character" button and select more characters from there and re-export.”

This text is quoted from: http://wiki.novemberborn.net/sifr/show/How+to+use
Who done the sIFR method?

This method and the javaScript its done by: http://wiki.novemberborn.net/sifr/authors and all the code is licensed under the CC-GNU LGPL <http://creativecommons.org/licenses/LGPL/2.1/>

Adminstration¶

- Check configuration section

Configuration¶

Basic configuration for the default tag “flash” can be done with the “Constant Editor” at Template mode.
Advadced configuration for massive changes based on css objects, must by done with Typoscript, check reference section for coding guidelines.

sHoverColor¶

Property

sHoverColor

Data type

string

Description

Color for hovered links.

Default

sBgColor¶

Property

sBgColor

Data type

string

Description

Background color.

Default

NpaddingTop / nPaddingRight / nPaddingBottom / nPaddingLeft¶

Property

NpaddingTop / nPaddingRight / nPaddingBottom / nPaddingLeft

Data type

int

Description

if you use padding in the elements you want to replace, you have to set the amount of padding here (in pixels, but without the px part).

Default

sFlashVars¶

Property

sFlashVars

Data type

string

Description

extra variables you want to pass on to the Flash. These variables are seperated by &. You can use:

textalign=center: Center text horizontally

offsetLeft=5: Pushes text 5px to the right. Of course you can use any number here.

offsetTop=5: Pushes text 5px down.

underline=true: Adds underline to links on hover

Example:

page.50.sFlashVars = offsetLeft=5&offsetTop=5

Default

sCase¶

Property

sCase

Data type

string

Description

Use upper to transform the text to upper-case, use lower to transform the text to lower-case. Depending on the browser this might give problems when you want to change the casing of special characters.

Example:

page.50.sCase = upper

Default

Known problems¶

U cannot set sSelector to a “a” object and get the link as flash u must set the sSelector to a object that have this “a” object.

For example:

Our HTML code:
<li class=”liclass”><a class=”aclass” href=”http://typo3.org”>Typo3</a></li>
Bad Typoscript code:
page.50.sSelector = a.aclass
Correct Typoscript code:
page.50.sSelector = li.liclass

[Gobernalia] Scalable Inman Flash Replacement - 3