Tekst zamjena tehnike u Flashu
Srijeda 25 Lipanj, 2008Tehnika Tekst Zamjenske sam predstavio je danas na neki način, doista zanimljivo. Za razliku od klasičnih sliku za zamjenu kroz CSS, ova tehnika koristi flash u pisanje preko naslova naših stranica. Uprkos tome što se malo više, jer to zahtijeva stvaranje Flash film i korištenje JavaScript, omogućuje niz prednosti ne ravnodušnim:
- Omogućuje je dostupnost web mjesta koristeći Pravi-nenametljiv-Javascript da bi spiders štramplice i dalje vidjeti stranicu kao jednostavan i ispravan HTML
- Ne zahtijeva stvaranje slike n za n naslova. Samo jedan film zamijeniti sve naslove naših stranica, sa znatne uštede u smislu Download
- Omogućava vam da napravite jednostavan Font naslova, ali s ne normalno koriste na Webu
- Tekst može biti iskazane u HTML-u, hvala na karakteristike bljeskalice
- Tekst je selektivan
- Biti flash možete dodati interaktivnost i animacija bilo koje vrste
Također ćete primijetiti da ovaj postupak CSS praktički nisu uzete u obzir!
Alati ćemo koristiti
Prije nastavka da vidimo što nam je potrebno za korištenje ove tehnike.
- Adobe Flash za izradu filma koji će se održati od naših naslova
- Knjižnica SWFObject za uključivanje - dinamičan - film (nenametljivim)
- Knjižnica prototype.js za automatiziranje sve, ja ću koristiti primjere u novi loader za Google AJAX API knjižnica, ali ako želite možete se uključiti prototype.js na vaše ime odvojeno
Osim Flash, ostale instrumente su zamjenljiv drugih funkcija ili osobna rješenja.
The Flash film
Zamislite da želite napraviti naslov s posebnim fontom, što čini CSS nepotrebno, jer problem je da fontovi nisu mogli biti instaliran na stroju korisnika interesa i stoga se ne pojavljuju do kraja:
Otvorite Flash i napraviti film s veličinom sličan da u naslovu da želite zamijeniti. Kao što ćemo vidjeti nije važno da postavite dimenzije u dizajnu vremenu, to može biti promijenjen kasnije bez utjecaja na prinos tekst. Umetni objekt Tekst:
Kliknite na "usaditi" i odaberite:
U prvom okviru ovog uključuju jednostavne i drag broj:
- / / Radovi za bilo koje veličine
- = StageScaleMode. NO_SCALE ; pozornici. scaleMode = StageScaleMode. NO_SCALE;
- = StageAlign. TOP_LEFT ; pozornici. align = StageAlign. TOP_LEFT;
- / / Izvuci u ustadoše parametar sadržaja od Javascript
- this . loaderInfo . parameters . content == null ) ? 'Errore' : this . loaderInfo . parameters . content ; oznaku. htmlText = (this. loaderInfo. parametrima. sadržaja == null)? "pogreška": ova. loaderInfo. parametrima. sadržaja;
A naši prevesti film (textreplacement.swf), a zatim položiti HTML markup, koristeći prethodno pregledati, kako bi se povećala kompatibilnost:
U odjeljku head kod uključuju:
Oznake h1 je zamijenio naš textreplacement.swf film, content sadržajem koji sadrži niz naslova. U situaciji sve više i više naslova, ovo rješenje postaje nezgodan, iako je još uvijek "uzbudljiv" pukog zamjenu preko CSS: kliknite ovdje za primjer (na umu da je tekst odabran).
Naslov dvije uzima HTML sadržaju i sastoji se od Flash motor, napisano u crveno:
- "textreplacement.swf" , "titolo_due" , "544" , "50" , "9.0.0" , null , { content: 'Titolo <font color="#ff0000">due</font>' } ) ; swfobject. embedSWF ( "textreplacement.swf", "titolo_due", "544", "50", "9.0.0", null, (sadržaj: 'Naslov <font color="#ff0000"> dva </ font>' ));
Za svaki naslov na stranici, u stvari, trebali biste umetnuli linija ukazuje na Javascript SWFObject ID i sadržaj naslov biti tretirane. Korištenje prototype.js i unosom klasa za preskakanje dokazi se zamijeniti, možemo napisati jednostavna funkcija koja može zamijeniti sve naslove u sadržaj stranica sa bljeskalica, uzimajući u mjerni content izravno dall'HTML: kliknite ovdje za primjer.
- google. setOnLoadCallback (
- funkcija () (
- ) . each ( $ $ ( 'H1.text-zamjena'). Svaka (
- element ) { funkcija (element) (
- "textreplacement.swf" , element. id , "544" , "50" , "9.0.0" , null , { content: element. innerHTML } ) ; swfobject. embedSWF ( "textreplacement.swf" element. id, "544", "50", "9.0.0", null, (sadržaj: element. innerHtml));
- )
- );
- )
- );
U ovom slučaju sam koristio google.setOnLoadCallback() kako koristiti Google AJAX API knjižnica za učitavanje prototype.js. Oni tada intercepted sve TAG h1 klasa set s text-replacement U tom trenutku se zove SWFObject za umetanje stavke pronađene element.id naš Flash filma. Imajte na umu da se koristi element.innerHTML izabrati tekst sadržaj proći na flash. To će zaista proći TAG span ali to nije probelma da postavite u tekst u Flash film kao HTML.
Flash također omogućuje različite efekte (runtime) koje čine ovaj način zaista "lijepo": kliknite ovdje za primjer.
Što sam predstavila je očito jednostavan primjer! Međutim, JavaScript koda i taggature HTML može poboljšati i učiniti ove tehnike istinski spektakularno. Možete umetnuti u animaciju ili naslovima grafika pozadine, uz jednostavno korištenje fonta ne smije koristiti CSS. Uz odgovarajuće modifikacije može proći dodatne parametre za naše Flash filma, čineći ga još više dinamičan: Veličina slova, položaj teksta, akcije za obavljanje kliknuti, etc ... Također možete stvoriti skupinu filmova za različite vrste vrijednosnica biti zamijenjen, pruža značajnu uštedu u smislu preuzimanja vrijeme!
Ostavite komentar