Warning: Creating default object from empty value in /home/tlsoft/public_html/weboldalkeszites.org/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 169
SIFR – Egyedi betűtípus weboldalunkon | Sitebuild – Közösségi Média – Tech Hírek – WeboldalKészítés.org
2017 július 23, vasárnap
Home » Adobe Flash » SIFR – Egyedi betűtípus weboldalunkon

SIFR – Egyedi betűtípus weboldalunkon

Geri Cufon cikkére reagálnék ezen írásomban. A SIFR (Scalable Inman Flash Replacement) flash és javascript segítségével a kívánt szövegrészleteket (leggyakrabban a címeket) cseréli le nem websafe betűtípusokra. Igaz ugyan, hogy nagyon sok szövegre nem szabad alkalmazni egy oldalon belül, mert jelentősen lelassítja a betöltést, de ugyan ez igaz a Cufon-ra is. A megoldás operációs rendszer és böngészőfüggetlen ezen kívül a Firefox AdBlock, valamint FlashBlock kiegészítőjével is jól megfér.

Tipográfia tuning

Hogyan is kezdjünk hozzá? Az alábbi oldalon töltsük le a Sifr 3 nekünk tetsző verzióját: http://dev.novemberborn.net/sifr3/nightlies/ (hozzáteszem 2008 vége óta nem jött ki új verzió), vagy pedig honlapunkról a legújabbat. Tartalmaz egy CSS, Demo, Flash és egy js mappát. A demo-t nem tudjuk megnézni offline, csak ha feltöltjük egy webszerverre, vagy egy helyi php futtató környezetet használunk (MAMP, XAMP, WAMP, stb.). Ez a Flash biztonsági tiltásai miatt van. A betűtípus módosításához egyszerűen csak a Flash mappában található sifr.fla-t kell elindítanunk. Elegendő hozzá csupán az Adobe Flash 8 is. Én Adobe Flash CS4-el mutatom be a továbbiakat.

Megnyitás után a Stage-n lévő Movie Clip-ünkre kattintsunk duplán, ezzel elérhető lesz számunkra az a szövegbevitel mező, ami tulajdonképpen az egész rendszer lelke.

A jobb oldali panelen menjünk a Character Embedding pontra.

Itt módosíthatjuk azt, hogy mely karakterkészletek kerüljenek beágyazásra. Alapértelmezés szerint az Uppercase, Lowecase, Numerals és a Punctuation van bejelölve. Ha kicsit magyarosabb szövegre szeretnénk Sifr-t használni, akkor be kell ágyaznunk az ékezetes betűket is. Az alábbi kép szemlélteti, hogy miket célszerű még pluszban hozzáadni.


Ezek után a Character Embedding Menüpont felett a Family melletti legördülő listából választhatjuk ki azt a betűtípust, amelyet a weboldalunkon is viszont szeretnénk látni.

A Flashes részével nincs is más dolgunk, nyugodtan lefordíthatjuk az elkészült fájlt.

Azonban ha kicsit próbálgatni szeretnénk az  Options.as-ben lévő lehetőségeket, akkor az alábbi lista nyújthat egy kis segítséget:

domains(Array): A tömb tartalmazza azokat a domain neveket, amelyeken a sIFR lerenderelheti a szöveget. Hotlinking elleni védelemre lehet használni. Használd a * szimbólumot, hogy az összes domainnek engedélyezd a megjelenítést. Használhatsz wild cardot is, hogy az aldomaineket is engedélyezd, külön-külön kell őket megadni.

Pédául: sifr.domains  = [‘*.example’,’example.com”] [‘*example.com’, ‘example.com’];.


defaultKerning(Boolean)
Engedélyezve van-e a Betűköz, ami kliens oldalról felülírható.

defaultSharpness(Number)
Alapértelmezett élesség, ami kliens oldalról felülírható.

defaultThickness(Number)
Alapértelmezett vastagság, ami kliens oldalról felülírható.

defaultOpacity(Number)
Alapértelmezett átlátszóság, ami kliens oldalról felülírható.

defaultBlendMode (Number)
Alapértelmezett érték, amely kliens oldalról felülírható.

enforcedGridFitType (String)
Felülírja a rács illeszkedési típusát a kliens oldalon.

preserveAntiAlias (Boolean)
Ha az értéke igaz, akkor a sIFR nem írja felül az antialiasing-ot a Flash IDE-ben miközben exportál. A vastagság és az élesség szintén nem lesznek hatással.

conditionalAntiAlias (Boolean)
Ha az értéke “true”, akkor a sIFR letiltja az antialiasing -ot, ha a betű mérete nagyobb, mint 48. Ez a beállítás független a preserveAntiAlias -tól.

antiAliasType (String)
Megadja az anti aliasing típusát. Alapértelmezett az Advanced.

filters (Array)
Flash szűrők adhatóak a tömbhöz, és ez hatással lesz a szövegmezőre.

CSS adható meg a Flash mozin belül, a sIFR.styles.parseCSS() segítségével, ami a CSS kódot tartalmazza az argumentumában.

A HTML oldal beállítása

Ahhoz, hogy végre látható eredményt produkáljon a sIFR, a következő sorokat kell beilleszteni az oldalunk <head></head> része közé:

Az első részt gondolom nem kell magyarázni, egyszerűen betöltjük a sIFR-t az oldalba, valamint implementáljuk az alap css fájlt.

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

Megmondjuk a scriptnek, hogy hol találja a betűtípus swf-ünket.

1
2
 <script type="text/javascript">// <![CDATA[
var site_title = { src: 'betűtípus.swf' };

Aktiváljuk a site_title parancsot, ez a név tetszőleges lehet.

1
 sIFR.activate(site_title);

A “selector:” segítségével adhatjuk meg melyik html elemet szeretnénk, hogy lecseréljen. Ez lehet akár class név is. “wmode:“-al állítjuk be, hogy a flash háttere átlátszó legyen, valamint a “css:” segítségével tudjuk formázni az egyedi szövegünket (szín, méret, igazítás, stb.). Ha szükséges, akkor a hover-nek is tudunk külön színt adni (itt van külön a kódrészlet hozzá: ‘a:hover': { ‘color': ‘#4F4F4F’ }).

1
2
sIFR.replace(site_title, { selector: 'h1',  wmode: 'transparent', css: [ '.sIFR-root{color:#FFFFFF; font-size:50px;}' ]  });
// ]]></script>

CSS styling

Abban az esetben, ha valamilyen oknál fogva nem jelenik meg a sIFR szövegünk (nincs flash telepítve, vagy a javascript megjelenítés ki van kapcsolva), akkor az alapértelmezett betűtípussal fog megjelenni a HTML anyagunk. Ennek a stílusát a sifr.css -ben módosíthatjuk.

1
2
3
4
5
6
7
8
9
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}

Az alapértelmezett megjelenést el kell tüntetnünk ahhoz, hogy csupán csak a flash szöveg érvényesüljön.

1
2
3
4
5
6
7
8
9
.sIFR-alternate {
display:block;
height:0;
left:0;
overflow:hidden;
position:absolute;
top:0;
width:0;
}
Megjegyzem, hogy az egész sifr.css fájlt ágyazzuk be, ugyanis a két kódrészleten kívül még van 1-2, ami szintén fontos a jó működéshez. Kísérletezzünk ezek tulajdonságaival vele bátran!

About Tib

Főállású informatikus, mellette mellékállású sitebuilder. Szereti az új CMS rendszereket, melyek egyben új kihívást is jelentenek. Kedvelt CMS-ei: Wordpress, MyBB, Magento.

Check Also

Interjú Szűcs Ádámmal

Egy hideg tavaszi estén eleget tettem egy felkérésnek. A felkérő interjúra jelentkezett, én pedig a ...