Először is leszögezem, hogy lehetséges olyan kreatívot gyártani, ami egyszerre üzemelhet a hagyományos bannerhelyeken és videólejátszós ügyekben is. Mivel eddig csak sima HTML beillesztés volt, az jótékonyan elfedte az esetleges fejlesztési gyengeségeket és bezárta a problémákat a Flash dobozába.

Az eredménnyel már mindenki találkozott: a Flash reklámot betöltő oldal lelassult, elkezdte pörgetni a processzort és pillanatok alatt anyázás meg böngésző crash lett a vége. Pedig a Flash reklámokat el lehet úgy készíteni, hogy ne jelentsen különösebb terhelést, akármilyen hihetetlenül hangzik!

A Flashbe (pl. egy videólejátszóba) illesztett Flash reklámnál ez még nagyobb gond, mert a CPU-t pörgető kód "gátolja" a szülő objektum ActionScript-jét és a timeout érték elérésekor leáll minden, azaz elszáll a teljes videólejátszó.

1. Ne legyen blokkoló (állandóan futó) ActionScript kód

Kevesen tudják, hogy minden Flash objektumnál beállítható egy timeout érték (pedig az export ablakban van, script time limit a neve), 15 másodperc az alapértelmezett. Ha egy ActionScript kód több, mint 15 másodpercig fut, akkor kampec, lemerevedik minden. Jó esetben felpattan egy ablak, hogy leállítja-e a kód futását a tisztelt felhasználó, akinek fogalma sincs ezekről, miért is lenne.

Az ActionScript kódot is korszerűen, eseményvezérelten kell megírni. Reagáljunk eseményekre, hívassuk meg a metódusainkat az események által, közben ne csináljunk semmit. Blokkoló kódot nem szabad írni! A script time limit átállítása nem megoldás! A kódunk sose fusson 2-3 másodpercnél több ideig.

A már említett (díjnyertes! :-) ) ügynökség egy olyan ősrégi animációs függvénykönyvtárt használt, ami állandóan futott. Ma már azonban gyönyörűen megírható az animáció a Tween osztályokkal nem blokkoló módon.

2. ActionScript 3 (három!)

Felejtsük el az ActionScript 2-t. Sok kritika érte az ActionScript-et, teljes joggal, azonban a hármas verzióval óriásit ugrott az Adobe. Teljesen más felfogású lett a dolog, a 2-ről 3-ra átállni elég fájdalmas és sok tanulással jár, én is szívtam vele. De korszerű és ha rááll az agyad, egy csomó mindent gyorsabban, egyszerűbben, hatékonyabban és szebben lehet megoldani vele. Szép objektumorientált környezet.

3. Használj natív Flash funkciókat

Rajzold meg a grafikus felületen az animációt, az adja a leggyorsabb futást és programozni sem kell. Ahol csak lehet használd a beépített osztályokat, lehetőségeket, szinte mindenre van megoldás (ActionScript 3-as környezetben sokkal több van, mint a régiben).

4. Videó

Vannak olyan reklámok, ahová videót kell beilleszteni. Sajnos még mindig azt látom, hogy gagyi H.263-as Sorenson kódolással készített FLV-t töltenek. Használj VP6-os FLV kódolást, amivel fele akkora méretet vagy kétszer jobb minőséget érhetsz el (pl. konvertálj Flix Pro-val). A H.264-et még nem ajánlom, mert az elérése jelen pillanatban csak 86% és kétszer annyi CPU-t eszik.

Olyat se keveset látok, hogy a videó nem pont a banner méretére van kódolva, hanem nagyobb. Minek? Csak eszed a sávszélt a semmiért. Tehát még egyszer, összefoglalva: a videófájl pontosan akkora legyen pixelre, mint amekkora kell - legyen VP6 a videó és MP3 (mono) az audió - FLV fájlban.

A bitráta legyen bőven 512kbps alatt. Hiába reklámozzák a 8 megás ADSL-t, a realitás az, hogy 95%-os elérés csak maximum 600kbps-al érhető el. A Webcsatornán sem véletlenül erre terveztünk, pedig de szívesen adnánk már 2 megán HD-ban! Sőt, mivel nem a reklámod a böngészés célja, nem tervezhetsz a teljes sávszélre.

A Flashben lehet alfa csatornázott videót is használni, ami azt jelenti, hogy a videó egy része áttetsző. Ez nagyon sok processzort eszik, reklámoknál ne használj ilyet!

5. Csökkentsd a HTTP kérések számát

Amit csak lehet helyezz el a Flash bannerben, a lehető legkevesebb dolgot töltsd kívülről, utólag. Ez jótékonyan hat a beágyazó oldal betöltésére, kevésbé "akad" meg a böngésző. Ha pici a videód (VP6-tal az lesz!), akkor akár az is mehet a fájlba, nem kell kívülről húzni.

6. Optimalizáld a libraryt

Menj végig egyesével a libraryben lévő objektumokon. Be tudod kattintani a usage count-ot, ami megmondja, hogy mit használsz és mit nem. Töröld azokat az objektumokat, amik nem kellenek, ne maradjon szemét.

Menj végig a képeken is és egyenként a tulajdonságok alatt be tudod állítani a használt tömörítést (jpg vagy png, jpg százalék). Optimalizáld szénné, állítsd be a lehető legkisebb méretet elfogadható minőség mellett. Ezzel a lépéssel akár az összméret felét is meg tudod takarítani.

7. Allowdomain

Erősebb biztonsági intézkedéseket vezetnek be folyamatosan, a 9-es Flash playerek "közepe" táján is volt egy ugrás. A Flash reklámodnak "közölnie kell", hogy milyen Flash objektumok tölthetik be. Ezt a közlést praktikusan úgy kell beállítani, hogy bármi betölthesse, hiszen reklám. A leges-legelső frame-be tedd ezt a kódot: Security.allowDomain('*'). Ennyi, de ha ez nincs benne, nem fog működni.

Konklúzió

A fentiek használatával elkészítettem a (díjnyertes!) ügynökség részére a reklámot, afféle mintaként. A CPU használatot sikerült a felére, a letöltési méretet pedig 60%-ra csökkenteni, a böngésző meg sem röccen, ha jön a reklám. Hiába pici a mérete, sokszor szolgáljuk ki, ezért 40%-os letöltési megtakarítás több tízezer (ha nem százezer) pénznyi sávszél megtakarítást jelent.

Érdemes tehát a Flash bannerek kialakításába kicsit több energiát fektetni, megtérül.

13 hozzászólás

1. idézem 2008.11.24. 00:29
   • kókuszfa szú
   én gyűlölöm az összes flasht, meg az összes reklámot. a flash reklámot meg pláne. SEMENNYIT nem vagyok hajlandó a procimból rááldozni, tiltom is őket. mindet. adblock plusz az isten.
2. idézem 2008.11.24. 08:10
   • Gábor Szántó
   @kókuszfa szú Pedig rááldozol, hiszen az Adblock is procit eszik! :-)
3. idézem 2008.11.25. 09:23
   • samurai_jack
   Sajnos még mindig sok az elfogult, a flash-eket teljes mértékben megtagadó felhasználó (vagy akár gépguru). Jó lenne már mindenkinek a fejébe vésni, hogy nem a technológia okolható egy sz.r bannerért, vagy neadjisten flash weboldalért. Meg lehet azt írni rosszul is, meg jól is.
   
   A fenti cikkbe egy helyen tudok belekötni: az AS3-ba. A legtöbb felhasználó még mindig 7-es playert használ, nem véletlenül: nincs nagyobb verzióra szükségük. Bannerekért nem fognak frissíteni, más flasht pedig nem néznek. Ezért az ügyfelek vagy ügynökségek előírják, hogy 7-es, de legfeljebb 8-as verzióhoz kössük magunkat. Bannerekhez egyelőre nem érdemes AS3-at használni.
   (egyébként meg a 2-vel sincs semmi baj, ha jól megvan az írva...)
   Az FLV videókra ugyanez érvényes :)
   
   Amit viszont nagy piros betűvel kellett volna írni, az a külső tween osztályok használata... Elvégre még mindig az a rengeteg animáció eszi a legtöbbet...
4. idézem 2008.11.25. 09:30
   • Gábor
   @samurai_jack Alapvetően egyetértek, de nekem az összes statisztikámban a 9-es Player már 97-98% körül jár. Kérlek küldj statisztikát arról, hogy a legtöbb felhasználónak 7-es playere lenne, mert egyszerűen nem tudom elhinni.
   
   Az AS2-t is lehet jól megírni, de az AS3 motor nagyobb teljesítményű és gondolni kell a jövőre, lassacskán eltelik két év és a fejlesztők többsége még mindig nem tanulta meg az újat...
5. idézem 2008.11.26. 11:15
   • Teo
   Sziasztok!
   
   A flash verziókkal kapcsolatban: a nálunk végzett mérések szerint is toronymagasan a 9-es van használatban (cirka 80%). A 7-es elterjedtésge ma már kevesebb, mint 1%, és 8-as is csak a userek másfél százalékánál található.
   2008. októberi méréseredmények itt: http://adverticum.com/staticfiles/meresek/sum200810.xml
6. idézem 2008.11.26. 12:13
   • Gábor
   @Teo Köszi az eredményeket. Ha jól nézem már nálatok is legalább 9-es verzió van 94% gépén.
7. idézem 2008.11.26. 14:01
   • samurai_jack
   Sziasztok!
   
   A fentiek értelmében elnézést kérek, félre vagyok informálva.. Én nem statisztikát néztem, pusztán ilyen kérések jönnen felém általában, de ezek szerint a megrendelők tájékozatlanok. Intézkedni fogok, hogy továbbléphessünk :)
   
   Köszönöm!
8. idézem 2009.01.04. 19:40
   • helloszabi via Google Reader
   na gyerekek, ezt kéne körbeküldeni az összes magyar cégnek, akik flash bannereket készítenek. röhej, hogy tényleg a legnagyobb, legtrendibb cégek is sokszor képtelenek olyan kreatívval előállni, ami nem zabálja a CPU-t. az a baj, hogy a cégek is szarnak rá, az ügyfelek is szarnak rá, a látogatók meg hiába pofáznak.
   
   remélem az IAB megalakulásával pozitív előrelépés lesz az ügyben.
9. idézem 2009.01.19. 15:35
   • István
   Tudja valaki hogy az ActionScript 3.0 -ba milyen kódot kell beletenni ha adverticumba szeretném feltolni?
   Mert az adverticum súgója még leragadt az ezredfordulónál :)
10. idézem 2009.01.19. 19:59
    • Gábor
    Írd ide a 2.0-s kódot (lusta vagyok az Adverticum-ot böngészni) és beírom a 3.0-s megfelelőjét.
11. idézem 2009.01.20. 15:52
    • István
    Szia
    
    on (release) {getURL(clickTAG, clickTARGET);}
    
    onClipEvent(mouseDown) { getURL('http://www.webcim.hu/','_BLANK');
    }
    
    on (release) {getURL(_root.clickTAG, _root.clickTARGET);}
    
    ezeket tudom, de ezek egyike sem megfelelő. Ez utóbbit szoktuk ügyfeleknek elküldeni, de gondolom.
    Persze megcsinálhatnám hogy a gomb direkt webcímre mennyen, de akkor mind1 mit adok neki az adverticumban, az nem fogja mérni a kattintást. Köszi a segítséget
12. idézem 2009.01.21. 14:27
    • István
    var request:URLRequest = new URLRequest(clickTAG); navigateToURL(request, '_blank');
    
    Így néz ki. megjött az adverticum válasza :)
13. idézem 2009.05.24. 09:15
    • Hoffman Zoltán
    Flash bannert cserélnék

Legutolsó hozzászólások

DJ PLAYER Blue Edition: Gábor: Ja, és természetesen megy iPad-en is, hiszen _minden_ iOS app megy iPad-en.

DJ PLAYER Blue Edition: Gábor: Bug report-okat itt fogadunk: http://djplayer.net/page/bug_report_fixes

DJ PLAYER Blue Edition: hohand: Hello!A dj player mukodik iPad-on is?Tegnap feltettem, wifi-n athuztam ra zeneket,de amikor ranyomtam egy zeneszamra,error-t dobott es valami is!...

Uzsidoboz LED!: zo via Google Reader: vicces dolog, csak nem értem mire való

Uzsidoboz LED!: Gábor: @Benjamin Minek forogjanak? Egy falszínezőnek olyat nem kell tudnia, így is épp elég hatásosak.