Web-design la minut: banere flash cu Powerbullet Presenter (2)

01.04.2009
Web-design la minut: banere flash cu Powerbullet Presenter (2)
Tutorial: cum să faci un baner flash complex cu Powerbullet

În continuarea primei părţi, în care îţi arătam cât de uşor şi cât de gratuit poţi crea un simplisim baner flash pentru site/blog, voi încerca să-ţi demonstrez cum prin două-trei clicuri în plus poţi realiza ceva mult mai complex, chiar profesional dacă ai şi veleităţi de artist. Şi dacă un minut e prea mult, încerc să te mulţumesc cu câteva exemple de generatoare online de banere flash banale, la secundă. N-am uitat nici de cei care au nevoie de codul HTML de inserare a flash-ului în pagina web.

Vârându-mă direct în primul subiect, hai să construim un baner flash mai complicat, cu mai multe slide-uri (3 în cazul de faţă) şi să-i adăugăm şi-un pic de audio. Voi fi mai sec în explicaţii, bazându-mă pe faptul că ai citit prima parte a materialului şi ştii deja să dai un "New (Project)", să ajungi la "Layout Dimmensions" ori să desenezi un amărât de cerc.

De data aceasta am stabilit dimensiunile banerului la 150×200 de pixeli (cum sunt cele ce apar pe coloană într-un site), aşa de dragul diversităţii. Ai în acest moment o singură pagină (slide) la dispoziţie. Vei mai adăuga două din meniul Page > Add (sau iconiţa cu dreptunghiul alb şi semnul plus sus în colţul drept). Cu iconiţele ce reprezintă două săgeţi dreapta-stânga treci de la o pagină la alta, iar numărul slide-ului selectat apare în dreapta căsuţei de modificare a fontului şi dimensiunii acestuia. Ai posibilitatea, oricând, de a şterge anumite pagini ori de a le schimba ordinea de apariţie (Page > Delete, respectiv Page > Shift Forward / Shift Backward). Mai departe, ai putea să umpli cu o culoare paginile. Adică fundalul (negru în banerul exemplu) care, atenţie, se menţine în toate slide-urile! Pentru a avea un slide cu alt fundal, fentezi prin introducerea unui dreptunghi de mărimea paginii (deci 150×200 px) pe care-l umpli cu culoarea dorită.

Powerbullet

Acum iei paginile la rând şi arunci în fiecare dintre ele text, forme geometrice şi/sau poze, apoi unora ori fiecăruia dintre aceste elemente le adaugi nişte efecte de animaţie. Iată ce am executat în exemplul meu (click pe link pentru a-l vedea):

  • Pagina 1 conţine un text căruia i-am oferit banalul font Arial cu mărimea de 24 pixeli – animat cu efectul QuickSpin In (fără delay sau time span), respectiv o poză arhicunoscută preluată via Google Images şi căreia i-am aplicat efectul Shake from left, deasemenea fără setări suplimentare;
  • Pagina 2 invită printr-o casetă de text la "băgarea creierului în priză" prin efectul Splat (fără alte setări); imaginea cu priza, sustrasă tot de pe Google a primit efectul Tremble; cum imaginea e pe fond alb, am mai inclus pe sub aceasta şi pe sub text un dreptunghi tot alb (fără efecte) astfel încât slide-ul să nu iasă prea oribil d.p.d.v. vizual
  • În pagina 3, cea cu mesajul final, de marketing, am plasat textul ce dispune de efectul Spin Drop from Left peste un dreptunghi galben ce a primit animaţia Smile;

În acest moment, ar fi cazul să vezi ce-ai încropit. Cu un simplu Page Preview nu poţi previzualiza decât slide-ul selectat. Pentru a previzualiza banerul în toată complexitatea sa te introduci in meniu la Project şi dai clic pe Export. Imediat se va deschide o pagină web în care vezi ce ai realizat.

 

Codul HTML de integrare a flash-ului pe site, alternative

În cazul în care dimensiunile iniţiale nu corespund cu cele din preview, intră la Project > Export Settings şi în locul valorilor necorespunzătoare de la Dimmensions să le pui pe cele dorite. Tot de-aici setezi şi alte cele, importante:

  • show menu – arată (TRUE) sau nu (FALSE) controalele de play/pauză/etc. în meniul de click dreapta pe banerul flash
  • ne mai interesează bulinele AUTOADVANCE şi MANUAL; prima variantă e fix bună pentru banere permiţând tranziţia automată de la un slide la altul, iar a doua e bună pentru prezentări flash asigurând trecerea de la o pagină la următoarea cu ajutorul unor săgeţi (înainte-înapoi)
  • legat de PAUSE BETWEEN PAGES, opţiunea se referă mai degrabă la prezentări, deci valoarea 0 e ok în cazul nostru (oricum, ai liber la testare)
  • LOOP bifat asigură succesiunea fără oprire a paginilor; dacă nu bifezi, banerul/prezentarea flash se blochează la primul slide după rularea ultimului dintre ele

Bun, previzualizarea s-a făcut şi poate că produsul nu-i chiar decent, aşa încât nişte ajustări  ar fi necesare. Anume fixarea timpului de afişare a paginilor, eventual adăugarea unor efecte de tranziţie între ele . Timpii ăştia sunt dependenţi şi de animaţiile atribuite elementelor din slide-uri, aşa că experimentarea e cea mai bună soluţie. În banerul dat ca exemplu totul e pe zero, pe default şi ceea ce a ieşit mi se pare oricum paralizant de încântător :-). Setările acestea se găsesc în meniu la Page > Page Transition In/Out.

Am uitat de sunet, îl inserez chiar acum în slide-ul 2, acolo unde se potriveşte cel mai bine. Sunetul, în format WAV sau MP3, poate fi descărcat de pe net sau cules dintr-un joc, dintr-o melodie. Un program excelent în acest sens, al extragerii de bucăţi de sound dintr-o piesă se numeşte Audacity şi e open-source / free / easy to use. Pentru inserarea acestuia am procedat aşa: am selectat pagina 2 a banerului, apoi am dat clicuri pe PAGE > Page Sound or SWF overlay. De-aici te descurci, cauţi pe hard disc fişierul audio şi dai ok. Ai şi o opţiune (delay-ul) pentru stabilirea întârzierii dorite până la pornirea sunetului. 

Powerbullet

Multe alte opţiuni sunt prezente în PowerBullet Presenter, unele absolut utile pentru banere (adăugarea de Hyperlink la o întreagă pagină ori doar la un element din aceasta, etc). Dar dacă te-a ajutat umilul tutorial din acest articol, în mod sigur, restul îţi va părea banal.

Dacă am finalizat proiectul, ca să salvăm toată minunea mai dăm odată Project > Export. Accesăm folderul proiectului (by default, în C:\Documents and Settings\CONT_UTILIZATOR\My Documents\Powerbullet) şi de-acolo ne folosim doar de fişierul în format SWF (ex.: go4it_test2.swf).

Codul HTML de inserare a flash-ului pe site
Ai reclama flash, dar cum o inserezi pe site sau pe blog? Mai întâi trebuie urcată (upload) pe web, oriunde ţi se permite, cu condiţia ca să poată fi accesată direct.
Apoi trebuie să identifici calea către fişierul respectiv (de pildă: http://www.site-xyz.ro/media/banners/go4it_test2.swf) pentru a putea "construi" codul HTML ce permite afişarea flash-ului pe site. Acesta arată aşa:

În acest cod înlocuieşti lăţimea (WIDTH) şi înălţimea (HEIGHT) cu ale banerului tău, respectiv calea către fişierul .swf. Nu te atinge de ghilimele!
Codul se copiază mai apoi în spaţiul potrivit de pe situl/blogul pe care se vrea afişarea banerului.

Alternative?

Mai prietenoase şi mai ieftine decât PowerBullet Presenter, nu am găsit. Unul dintre colegi mi-a sugerat Swish ca alternativă gratuită, dar se pare că dezvoltatorul nu mai oferă o asemenea versiune pentru acest soft. L-am instalat totuşi în varianta TRIAL, fără să mă aventurez prea mult în utilizarea sa, iar impresia imprimată e aceea că Swish e aproape ca opţiuni şi interfaţă cu Macromedia Flash, la un preţ evident mai mic.

WWW-ul oferă însă câteva alternative interesante, multe contracost şi scumpe (plăteşti zeci de dolari pentru un baner flash banal), pe ideea că nu iroseşti zeci de minute pentru a învăţa cât de cât utilizarea unor aplicaţii specializate ci, în numai câteva zeci de secunde construieşti un flash animat pe baza unor template-uri, completând în câteva căsuţe numele site-ului şi alte alte câteva cuvinte care vrei să fie afişate în baner. Pe aceste alternative le afli căutând cu Google "online flash generator".

Câteva exemple: