Download de laatste versie van sIFR hier. Voor dit voorbeeld is versie 3 release 4.05 gebruikt. In plaats van het compleet opnieuw opbouwen van een HTML bestand, heb ik het demo bestand gebruikt dat bij de download inbegrepen was.

stappen

• Open het gedownloade zipfile en plaats alle bestanden in dezelfde folder. Ik heb hiervoor C:\TEMP\sifr gebruikt.
• Open C:\TEMP\sifr\flash\sifr.fla in Flash. Voor dit voorbeeld heb ik Adobe Flash CS3 (versie 9) gebruikt.
• Dubbelklik op de tekstbox in het midden. De tekst “Bold Italic Normal” verschijnt.
• Klik vervolgens nog een keer om de tekstbox te selecteren. Onder in het scherm staat de properties window (niet zichtbaar? druk Ctrl-F3). Kies daar een font uit de dropdown box. Dit zouden alle fonts op je PC moeten zijn.
• Ga vervolgens naar File, Export, Export en kies C:\TEMP\sifr\flash als folder. Exporteer met de volgende settings:

  Version : Flash Player 8
  Load Order : Bottom up
  Actionscript version : Action Script 2.0
  Protect from Import : aangevinkd
  Compress Movie : aangevinkd
  Omit trace actions : aangevinkd
  Permit debugging : uitgevinkd

• Open C:\TEMP\sifr\demo\index.html in een (Javascript en Flash enabled!) browser met als resultaat: klik hier

Als je C:\TEMP\sifr\demo\index.html in je editor opent, zul je zien dat er in dit bestand 3 stylesheets worden aangeroepen: all.css, sIFR-screen.css en sIFR-print.css. In all.css staan de “gebruikelijke” CSS classes en deze kun je dan ook aanvullen met je eigen CSS. De andere twee hoef je niet te wijzigen.

In C:\TEMP\sifr\demo\index.html worden inline nog een aantal classes aangeroepen. Voor overzichtelijkheid heb ik deze geknipt en in all.css geplakt.

Vervolgens worden de benodigde Javascripts aangeroepen. Onder deze aanroep vind je de syntax van de diverse selectors. Deze is sinds versie 2 behoorlijk gewijzigd en vereist iets meer oplettendheid. Voor een compleet overzicht van aanpasbare properties, klik hier.

Het vreemde is dat sommige style properties (display:inline) in all.css aangepast moeten worden, terwijl andere (letter-spacing) alleen werken als je ze hier in de code aanpast (???).

Bronnen en links:

Mark Wubben, http://wiki.novemberborn.net/sifr3/