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

Minitutorial

Cum acest articol e despre webdesign privit ca o şmecherie la fel de complicată ca şi consumul de slănină cu ceapă, o să purced la un tutorial desprea realizarea de banere flash cu Powerbullet Presenter. Îmi pare mult mai potrivit acestui scop, căci cu prezentările de business cred că se descurcă şi Pokemon pe PowerPoint-ul lui piratat. Aşadar am preparat pour aujourd’hui un exemplu mai simplist, un baner animat de tip monoslide, iar în partea a doua a articolului vedem cum se construieşte un baner complex, „multipagină” şi detalii despre inserarea flash-urilor pe site.

Pregătirea proiectului

După pornirea aplicaţiei, dai clic pe „File” şi apoi pe „New”. Te-ai putea apuca de treabă, dar corect ar fi să stabileşti dimensiunile dorite pentru baner: clic tot în meniul superior pe „Project”, respectiv „Layout dimensions”. Aici fixezi lungimea şi înălţimea. Fiind vorba despre un baner, nu bifa opţiunea „match window”. Pentru primul proiect am ales 728×150 de pixeli, cam cum ar veni o reclamă din header-ul website-ului.
Din acest moment dispui de o fâşie albă pe care trebuie s-o umpli cu text, forme geometrice, poze (pe astea le-am evitat din pricina lipsei de inspiraţie). Să dai culoare, să animezi toate aceste obiecte. Păi cam asta-i tot :-).

Paşii 1, 2, 3

Nu insist asupra adăugării unui cerc, a unui dreptunghi ori unei poze. Iconiţele sunt clare ori meniul „Insert”, da? Cât despre text, nu scrii direct chiar dacă se poate, nu are niciun sens. Ai grijă să dai mai întâi click fie pe iconiţa „T” ori în meniul Insert > Text.
Next, aşază toate aceste componente aşa îţi doreşte spiritul creativ să arate iniţial banerul. Vezi ce culori li se potrivesc, eventual dă un fond general (în cazul meu, verde). La formele geometrice poţi da culoare şi liniei dimprejur, contur ce poate fi mai gros ori lipsă (grosime = 0); vezi meniul de click dreapta. În cazul obiectelor suprapuse altfel decât vrei, rezolvi tot cu click dreapta pe acestea cu opţiunile Move Item Forward / Back / Top / Bottom.

Pasul 2 presupune animarea elementelor din baner, fireşte în limita bunului simţ estetic şi a unor principii de marketing. Limite pe care de dragul experimentului le-am evitat cu un sadism desăvârşit. Vreau să te sperii: nu e treabă uşoară să selectezi un element, să-i dai un click dreapta (sau iconiţa "baghetă magică") şi să alegi una dintre cele peste 50 !!! de efecte de animaţie disponibile. Nu-i uşor deoarece ai din ce alege (a), dar n-ai preview în timp real (b). Unele efecte au denumiri ce exprimă destul de clar cum va zbura, cum se va roti etc. obiectul X din baner, altele trebuie testate.

Pentru asta te foloseşti din meniul principal de Page > Preview ori mai simplu apeşi tasta F2. Previzualizarea se face prin browserul tău web, iar dacă e vreo formă de Internet Explorer, foarte posibil vei fi nevoit să activezi Active X (click pe "show blocked content" din bara aceea de blocare a popup-urilor) ca să ţi se afişeze pagina cu flash.

Pasul 3 este de fapt un pas 2 extins şi ţine de optimizarea animaţiei după ce ai adăugat câte-un efect penetrant vizual pe elementele din baner. Operaţiile se desfăşoară în aceleaşi miniferestre din care setezi efectele, dar cu ajutorul opţiunilor Start delay, Time span şi Looping. Prima se referă la numărul de secunde ce vor trece de la accesarea banerului flash până la afişarea elementului selectat. Time span este durata de derulare a unui efect, iar looping-ul îl bifezi dacă vrei ca animaţia să se repete la infnit.

Iată şi realizarea mea de înaltă cugetare artistică la minut. Dimensiunile au fost reduse pentru încadrare în pagină. Click dreapta pe baner, apoi pe Play pentru a vedea toate efectele.

Elementele din banerul-exemplu şi efectele de animaţie asociate fiecăruia:

• cerc mare – Quickspin in (0s delay, 0s span, looping bifat)
• text "nou!" – InTL_Zoom_OutBR (0s delay, 2s span, looping bifat)
• cerc mic 1 – InTL_Zoom_OutBR (0s delay, 2s span, looping bifat)
• cerc mic 2 – smile (0s delay, 2s span, looping bifat)
• cerc mic 3 – splat (0s delay, 2s span, looping bifat)
• dreptunghi – skew-test-1 (0s delay, 5s span, fără looping)
• text "mai inteligent decat patapievici" – shake from left (0s delay, 4s span, fără looping)

Toată grozăvia asta extravagant animată, multicoloră şi chicioasă nu măsoară decât 16KB. O animaţie similară, dar în format .gif ar fi însemnat probabil un fişier de peste 1MB.
Pentru a insera banerul flash creat într-o pagină web, foloseşte fişierul __PREVIEW.swf din folderul proiectului; calea către proiectele salvate: C:\Documents and Settings\CONT_UTILIZATOR\My Documents\Powerbullet