.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================================= [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: [Gobernalia] Scalable Inman Flash Replacement ============================================= Extension Key: **gb\_sifr** Copyright 2000-2002, Maximo Cuadros [Gobernalia Global Net S.A - GrupoBBVA], 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: 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: Introduction ------------ .. _What-does-it-do: 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: Screenshots ^^^^^^^^^^^ Check sIFR working at `http://www.mikeindustries.com/blog/files/sifr/2.0/ `_ .. _Users-manual: Users manual ------------ - One time installed the extension enable a new tag on htmlarea “” with it u can convert any text that bettewen the opentag and close tags. For exampale: My Text Flash or `_ ” target=”\_blank”>Typo3 Website - 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: 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 .. _Adminstration: Adminstration ------------- \- Check configuration section .. _Configuration: 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. .. _Reference: Reference ^^^^^^^^^ \- Possible subsections: Reference (TypoScript) .. ### BEGIN~OF~TABLE ### .. _stdWrap: stdWrap """"""" .. container:: table-row Property stdWrap Data type wrap Description Wraps the tag item **Example:** :: page.50.sSelector = li.flash Default .. _sSelector: sSelector """"""""" .. container:: table-row Property sSelector Data type string Description This is the CSS selector you use to select the elements you want to replace. The supported CSS selectors are #, > and .. Whitespace is used to select descendants. Please use whitespace only for this, so instead of #foo > p use #foo>p. You can use multiple selectors by seperating them with a comma (","). **Example:** :: page.50.sFlashSrc = fileadmin/templates/prado/swf/menu.swf Default .. _sFlashSrc: sFlashSrc """"""""" .. container:: table-row Property sFlashSrc Data type string Description Location of the Flash movie. **Example:** :: page.50.sSelector = li.flash Default .. _sColor: sColor """""" .. container:: table-row Property sColor Data type string Description Text color. All colors are in hex notation (#000000). Never use text color like: “grey” **Example:** :: page.50.sColor = #313131 Default .. _slinkColor: slinkColor """""""""" .. container:: table-row Property slinkColor Data type string Description Text color for links. Default .. _sHoverColor: sHoverColor """"""""""" .. container:: table-row Property sHoverColor Data type string Description Color for hovered links. Default .. _sBgColor: sBgColor """""""" .. container:: table-row Property sBgColor Data type string Description Background color. Default .. _NpaddingTop-nPaddingRight-nPaddingBottom-nPaddingLeft: NpaddingTop / nPaddingRight / nPaddingBottom / nPaddingLeft """"""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. container:: table-row 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: sFlashVars """""""""" .. container:: table-row 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: sCase """"" .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _Known-problems: 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:
  • Typo3
    • Bad Typoscript code: page.50.sSelector = a.aclass Correct Typoscript code: page.50.sSelector = li.liclass |img-1| [Gobernalia] Scalable Inman Flash Replacement - 3 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102