Chaos Sanctuary

Když jsem ten článek viděla, zajásala jsem a požádala autora o souhlas s překladem, protože to vypadalo, a skutečně to tak je, jako typický návod pro lamy. Návod se týká sIFR (náhrada textu fonty z flashového souboru) verze 3 a využívá pro tvorbu fontů Macromedia Flash.

Pozn SuE: nemáte-li Macromedia Flash, můžete použít free nástroje pro tvorbu swf fontů pro sifr3 - sifr generator nebo font maker, a příslušnou část návodu přeskočte. (update březen 2009)

• siFR generátor je webová služba - najdete u sebe font, který chcete zpracovat, nahrajete ho na web a pak si stáhnete .swf soubor.
• font maker - nainstalujte, vyberte font a uložte jako název_fontu.swf. Je možné, že funguje s nějakou dřívější verzí sifr, který se stále vyvíjí, tu si případně stáhněte zde.

Jak přimějete sIFR k práci

Autor: David Yeiser
Přeloženo z This is how you get sifr to work s laskavým svolením autora.

Cílem tohoto tutoriálu je uspořádat informace z oficiálního webu sIFR do jednoduchého "krok-po-kroku" návodu jak implementovat na váš web sIFR

Když si návod přečtete, porozumíte základům fungování sIFR a můžete začít zkoumat i složitější oblasti sIFR.

Návod je rozdělen do šesti sekcí:

1. Stažení všech potřebných souborů
2. nastavení Flashového souboru pro požadované písmo
3. nahrání potřebných souborů
4. nahrazení ‘normálního’ textu textem ze ’sIFR’
5. nastylování nového textu (budete překvapení, kde se to dělá!)
6. provedení finálních úprav
7. Závěr a další zdroje

Než začneme, uvědomte si tohle:

• Nebudete muset modifikovat jiné soubory než ty, které stáhnete z webu sIFR. Nemusíte se starat o editaci již existujících stylů
• sIFR degraduje velmi dobře, takže se nemusíte obávat o uživatele bez Flashe a / nebo Javascriptu.
• Není to náročné na přenosy (v porovnání s typickými Flashovými soubory.

Začínáme!

1. Stažení sIFR

První krok je stáhnout zip soubor sIFR. List of nightly builds je asi jediné místo (pokud vím), kde získáte nejnovější verzi sIFR. Tak běžte a nejnovější verzi si stáhněte.

Když otevřete ten zip soubor, uvidíte čtyři složky a textový soubor. Pro začátek můžete ignorovat složku demo; ty tři ostatní složky —css, flash a js— obsahují ty soubory, které potřebujete.

2. Vytvoření YourTypeface.swf

Než nahrajete soubory pro sIFR na web, musíte vytvořit soubor SWF se svým písmem ze souboru FLA. V složce flash je soubor s názvem sifr.fla, otevřte ho.

Když soubor sifr.fla otevřete, měli byste vidět bílý box (viz Obr 2a).

Obr 2a: Screenshot úvodní Flashové obrazovky.

Zaktivujte tento rámec dvojklikem. Měl by tam být vidět šedý text Bold Italic Normal” (viz Obr 2b).

Obr 2b: Screenshot flashové obrazovky po dvojkliku.

Abyste aktivovali svoje písmo, vyberte text, změňte ho na požadovaný druh písma (normální, tučný, kurzivu)) a pak napište jeden znak. Jeden znak v a nebo n, cokoli si vyberete. Chcete-li mít možnost psát svůj text v kurzivě nebo tučně, musíte mít jeden znak pro každou možnost.

Např. jestliže jsem chtěl mít normální text a možnost psát kurzivu nebo tučně, napsal jsem ‘n n n‘ (viz Obr 2c). Velikost souboru pro můj zvolený font se změnila asi o 30KB - rozdíl mezi jen normálním (70 KB) a všemi třemi (100 KB). Můžete experimentovat, abyste viděli, jak velikost závisí na fontu, který si zvolíte.

Obr 2c: Screenshot flashové obrazovky po napsání znaků

Nakonec vyberte požadovaný druh písma. Pro tenhle příklad jsem zvolil Arno Pro (viz Obr 2d).

Obr 2d: Screenshot dialogu typografie pro Flash

Když to máte hotové, a máte vybrán požadovaný druh písma, jděte na File > Publish Settings. V tomto dialogovém boxu se ujistěte, že následující volby jsou nastaveny jako na Obr. 2e.

Obr 2e: Publish Settings pro exportování souboru .SWF

Výchozí nastavení kvality JPEG je 80. U mého fontu nebyl pro nastavení kvality JPEG 80 a 100 žádný rozdíl, a tak jsem nastavil 100. Po úpravě nastavení stiskněte tlačítko Publish a tím vytvoříte svůj soubor. (Váš nový soubor .SWF by se měl objevit ve stejné složce jako soubor sifr.fla.)

Soubor, který jste právě vytvořili, se bude jmenovat sifr.swf; přejmenujte ho na název vašeho písma, v mém případě by to bylo arnopro.swf. Teď můžete nahrát soubory na svůj server.

3. Nahrání souborů na server

Aby sIFR fungoval, musíte nahrát následující soubory:

• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr-config.js
• js/sifr.js
• flash/yourtypeface.swf

Nyní odkažte na příslušné soubory CSS a JavaScript (Obr 3a). (Na flashový soubor odkážeme v dalším kroku.)

4. Inicializace sIFR

V tomto kroku vyvoláte soubor .SWF a řeknete mu, který text má nahrazovat. Soubor, který řídí náhradu textu, je sifr-config.js, možná jste si všimli, že jeho velikost je teď 0.

V tomto návodu použiju jako příklad dva zápisky do blogu se značkováním zobrazeným na Obr. 4a a CSS zobrazeným na Obr. 4b, výstup je zobrazen na Obr. 4c

Obr 4c

Nejdříve otevřte soubor sifr-config.js a přidejte kód zobrazený na Obr. 4d, kde yourtypeface je název písma, které jste si vybrali, když jste editovali flashový soubor. Takže můj var název by byl arnopro. (Upozornění: Ujistěte se, že váš var název je jedno slovo vcelku bez mezer, a použil bych podtržítka místo pomlček.)

Tohle odkazuje na soubor .SWF, který jste vytvořili v kroku 2, aktivuje ho, a pak nahradí vaše titulky textem ze sIFR. Dávejte pozor na formátování, je docela složité a nepromíjí chyby. Příkaz wmode: 'transparent' způsobí v Opeře bílé pozadí místo průhledného.

5. stylování

Teď, když je normální text nahrazen textem z sIFR, je potřeba nový text nastylovat. Trochu matoucí je, že CSS styly pro text ze sIFR se editují v souboru sIFR-config.js. Formátování se (většinou) dělá standardní CSS syntaxí, jen je to v javascriptovém souboru.

Styly CSS se vkládají do .sIFR-root jak ukazuje Obr. 5a. V podstatě se zde říká “asociuj každý styl, který zde je, s novým textem sIFR.”

K nastylování textu zadejte CSS vlastnosti stejně jako byste to udělali v normálním CSS souboru. Pro náš příklad zadáme CSS jak ukazuje Obr. 5b.

Nyní porovnejte normální text (levý sloupec) s textem ze sIFR (pravý sloupec) na Obr. 5c.

Obr. 5c

Jsou zde nějaké problémy s rozestupem písma, které se naštěstí dají vyřešit při dolaďování pomocí sIFR’s advanced JavaScript options. Ale tohle si necháme na jindy.

Přidání alternativních stylů

Můžete také přidat alternativní styly pro značky v textu, který chcete nahrazovat. Například, kdybyste chtěli stylovat tagy em a strong když jsou použity v hlavičkách h2, mohli byste přidat kód zobrazený na Obr. 5d.

Takže teď, když našem příkladu přidám slova Very Long s tagem strong měly by být tučné a šedé (viz Obr 5e a 5f)

Obr. 5f

6. Závěrečné úpravy

Na konci nastavte pravidlo v souboru sIFR-screen.css, které skryje normální text, když se nahrává text ze sIFR. Tak zabráníte tomu, aby se výchozí text objevil a pak zmizel, když se nahraje text ze sIFR. Otevřte sIFR-screen.css (je ve složce css), odrolujte dolů na konec a přidejte kód zobrazený na Obr 6a

Teď už se normální text nebobjevuje, když je sIFR aktivní, ale když je deaktivován, objeví se s normálními styly, protože class .sIFR-active je před h2.cpost-title.

7. Poznámky na konec a další zdroje

Důležité upozornění k současnému stavu sIFR a o tomto návodu.

1. Ne každé pravidlo CSS je v sIFR platné, podívejte se do dokumentace sIFR 3 na kompatitibilitu (zvláště na sekci o stylování).
2. Nemohu o sobě prohlašovat, že jsem expert na sIFR, takže když najdete v tutoriálu nějaké chyby, dejte mi vědět. Mým cílem bylo ukázat ostatním, jak to v jednoduše rozjet.

chcete vědět víc? Potřebujete pomoc?

1. Teď když si můžete vybrat z množství různých fontů, bude možná vaše práce ještě trochu těžší. Přečtěte si Výběr fontu na I Love Typography.
2. Jestli jste se zasekli a nevíte jak dál, Joyent má forum o sIFR.

Pozn: SiFR 3 je stále ve vývoji a do souborů byla zabudována kontrola, zda sifr.js a soubor .swf jsou ze stejné verze. Proto se objevuje chyba, když si v jedné verzi vyrobíte .swf s písmy a pak stáhnete na web novější build sIFR. Musíte .swf soubor vyexportovat znova.

Pozn2: Některé texty, které jsou v orig článku skutečně nastylované pomocí SIFR, jsou zde jen jako obrázky, protže to nepoužívám a nechtělo se mi kvůli tomu upravovat šablonu blogu, ale úspěšně jsem si to zkusila s demo fonty na testovací stránce, vážně to funguje :-)