Scalable Inman Flash Replacement

sIFR is een manier om je titels - meestal <h1> tot <h6> te vervangen door een Flash afbeelding. Iedereen weet wel dat je een image-replacement kunt doen, maar dat er - eigenlijk weinig - nadelen aan zijn.
Het voordeel hiervan is dat als de gebruiker geen JavaScript heeft aanstaan of geen Flash aanwezig is de normale tekst getoond wordt zoals bij screenreaders, en bij een normale browser waar JavaScript ( voor het detecteren of Flash aanwezig is ) wél aanstaat - buiten die extreme veiligheidsmaniakken - zal de tekst vervangen worden door aparte letters via Flash.

Nog een voordeel van dit gehele gebeuren is dat je om het even welk lettertype kunt gebruiken, je bezoeker hoeft dit lettertype niet op zijn computer te hebben.

Wanneer sIFR gebruiken?

Om 8 uur s’morgens Je kan altijd gebruik maken van sIFR, indien Javascript niet aanstaat én er geen Flash aanwezig is op de computer van je bezoeker zal de gewone styling van je headings getoond worden, je bezoeker heeft er geen weet van omdat het juist allemaal zo razendsnel gaat.

Hoewel het mogelijk is om gehele paragrafen te vervangen via sIFR is het niet aangeraden, hoofzakelijk is het bedoeld om headings te vervangen.

sIFR neemt de ingestelde height, line-height, font-size over van de reeds ingestelde CSS, niet de kleur of achtergrondkleur, zie onderaan.

Hoe kan ik sIFR gebruiken?

Ja daarover zal dit gehele artikel eigenlijk gaan, wou eerst een beetje info meegeven.
Onlangs moest ik voor een opdracht headings vervangen door sIFR, ik had dit nog nooit gedaan en wist bijlange niet hoe het geheel in zijn werk ging dus maar de gehele - Engelse - handleiding doorgenomen wat een toch wel lange handleiding bleek te zijn. Maar wat zou Gigadesign zijn zonder daar weer een verkorte beknopte in details geschreven handleiding voor te maken, in het Nederlands ?

Het was alsof ik weer in mijn beginnersschoenen stond, stap voor stap alles doen, en meeste verrast was ik toen het daadwerkelijk werkte, vanaf de eerste keer.

Wat moet je doen

Materiaal en ingredienten

  • een programma om .fla bestanden te bewerken en .swf te exporteren, dus een Flash programma
  • een reeds gestylde website met CSS
  • eventueel een CSS voor printen te ondersteunen
  • de bestanden voor sIFR 2.0.2

Eerst en vooral

Moeten je te vervangen headings reeds gestyled zijn via CSS om te voorkomen dat mensen zonder Flash en JavaScript een behoorlijk messed-up website te zien krijgen.

In de sIFR bestanden die je hebt gedownload zit een sIFR-print.css en een sIFR-screen.css, voeg de inhoud van deze bestand toe aan je reeds bestaande CSS - screen en print, of alleen screen - bestanden. Verzeker jezelf ervan dat ook screen voorkomt in de verwijzing naar je CSS bestand:

<link rel="stylesheet" type="text/css" href="uw_ccs_bestand.css" media=”screen” />

Flash movie aanmaken

In de gedownloade map zal je een .fla bestand zien, het is belangrijk dat je het bestand opent waar het zich bevindt in de download map, niet eerst naar je website kopieren en dan openen. Er staan belangrijke bestanden zoals customize_me.as en dont_customize_me.as in de download map die ervoor zorgen dat je de .fla exporteerd naar een .swf met alle belangrijke informatie.
Open dit met je favoriete ik-maak-een-flash-movie programma en je zal dit zien:

Wat zal je eerst zien, niks natuurlijk

Klik nu 2 maal in het leeg gebied en je zal dit zien:

Nu zie je al iets meer

Als je nu nogmaals op de tekst in het vakje klikt zal normaal gezien de tekst-properties te voorschijn komen ( klik op de afbeelding ):

Klik mij voor een groter voorbeeld

Nu kan je naar wens instellen, je gewenste lettertype, of het vet of italic moet zijn, van de rest blijf je beter af, kleur instellen heeft geen zin alsook niet het instellen van de lettergrootte. Exporteer nu dit alles, zorg ervoor dat je als Flash6 exporteert, en geef je .swf bestand de naam van het lettertype - verdana, Blade, Lucia, Frutiger etc … - en sla het dan op in je website.

Het JavaScript gedeelte

Kopieer het bestand sifr.js uit de download map naar je website en voeg de verwijzing ernaar toe aan je website:

<script src="pad_naar/sifr.js" type="text/javascript"></script>

Open het in je favoriete letterkes-tijpen-programma en ga naar helemaal onderaan waar je volgende code ziet staan:

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.setup();
};

De handleing die ik zal geven beperkt zich tot het normaal functioneren van sIFR, er zijn meerder mogelijkheden.

Nu kan je daar aan toevoegen welk element je wenst te vervangen door Flash, waar het .swf bestand staat, welk de letterkleur moet zijn en welk de achtergrondkleur moet zijn.

if(typeof sIFR == "function" && !sIFR.UA.bIsIEMac){
sIFR.replaceElement("h1.foo", named({sFlashSrc: "./je_lettertype.swf", sColor: "#004677", sBgColor: "#CACACA"}));
sIFR.setup();
};

Als je een heading <h1> hebt met de class=foo zal deze aangesproken worden, je kan dit ook veranderen in een ID, als je een descendant selector wilt gebruiken moet het op volgende manier gescreven worden:

  • Normaal doe je zus: #foo h1.blaat
  • zie je de spatie ?
  • Nu doe je zo: #foo>h1.blaat
  • nu niet meer, maar met extra teken: >

Staat je lettertype_naam.swf in dezelfde map als je sifr.js, dan moet je niets veranderen aan het pad, staat je lettertype één map dieper - bv. letters - verander dan het pad naar ./map_naam/je_lettertype.swf, zie je de eerste punt en slash ?, héél belangrijk !!

sColor en sBgColor staan respectievelijk voor : letterkleur en achtergrondkleur, hoewel gezegd moet worden dat de achtergrondkleur standaard bij sIFR wit is, dus je zal dit wel willen aanpassen. Voor alle zekerheid schrijf de hex waarde volluit, niet in shorthand techniek.

Het stylen naderhand

In je CSS heb je nu de extra bepalingen staan voor de sIFR en er staan comments bij, dus navigeer nu naar de “decoy-styles” en haal de headings weg die je niet gebruikt, laat enkel diegene staan die je wilt gebruiken en pas deze aan, dus zet de volledige styling die je wenst erbij.
Verzeker je ervan dat je de specifiteit in het oog houd.
Dat wil zeggen dat als je dit gebruikt voor je <h1>:

#foo div h1.blaat

Je deze aanduiding aanhoud voor je .sIFR-hasFlash h1 bepaling, met andere woorden ik zal het je tonen:

#foo div h1.blaat wordt .sIFR-hasFlash #foo div h1.blaat.

Een voorbeeld misschien ? en slot woord

Op deze pagina kan je een voorbeeld van deze methode zien.

Na het schrijven van dit artikel ga ik naar bed ben ik waarachtig verrast dat het eigenlijk ook héél véél is, maarja t’is in’t Nederlands hé ?

Met dank aan Bart om mij voor deze uitdaging te zetten en mij aan te sporen dit artikel te schrijven.

Heb je er iets aan, laat het maar weten in de reacties, vindt je dit artikel rotslecht en wil je op het kruisje duwen bovenaan rechts ? Doe het !! NU.