Animaţie şi interactivitate în InDesign: Partea 3 – Programarea animaţiei

Din primele două lecţii aţi văzut cum să vă aranjaţi spaţiul de lucru şi cum să schiţaţi aspectul unei aplicaţii flash în InDesign.

În această lecţie voi explica modul simplu de a programa animaţia, sau, cel puţin interactivitatea din aplicaţia noastră. Ceea ce voi face va fi să animez tab-urile ca să arate slab decolorate în cazul în care nu sunt “atinse” de mouse, şi deja la o culoare aprinsă în cazul în care mouse-ul “pluteşte” deasupra fiecărui tab. În acelaşi timp voi explica modul în care legăm paginile între ele în aşa fel încât totul să pară o singură structură.

Pentru început trebuie să marcăm paginile în aşa fel încât aplicaţia flash să poată face corect link-urile între taburi şi pagini.

Ceea ce trebuie menţionat este următorul lucru: spre deosebire de PDF, formatul SWF nu poate naviga între pagini prin apăsarea tastelor “stânga” / “dreapta” de la tastatură, la fel cum nici “jump to page” nu poate efectua, pentru că SWF este interpretat ca film (flash movie). De aceea unica legătură eficientă între pagini este ancorarea pe fiecare pagină a unui marcaj (bookmark), pentru a face legătura prin intermediul acestor bookmark-uri (semne de carte).

Chiar dacă în animaţii SWF poate face săritură către o pagină (comanda Go To Page), trecerea nu are loc prin imediata afişare a paginii, ci prin rularea acesteia într-un mod sau altul. Cea mai eficientă metodă de trecere de la o pagină la alta, pentru această aplicaţie, este Bookmarks.

Cum facem acest lucru? Deschidem meniul Bookmarks (Window > Interactive > Bookmarks), şi deschidem prima pagină din documentul nostru. În meniul Bookmarks apăsăm pe icon-ul Create new bookmark şi scriem numele paginii. Facem acest lucru pentru fiecare pagină. Astfel voi avea 5 bookmark-uri (pentru fiecare pagină câte unul).

Acum, după ce am marcat fiecare pagină printr-un semn de carte, putem trece la legarea paginilor între ele.

Deschidem prima pagină şi, cu instrumentul Selection Tool alegem tab-ul InDesign.

Grupăm tab-ul cu textul acestuia (Ctrl+G sau Object > Group sau Click Dreapta > Group). În cazul în care acesta se plasează deasupra barei negre, aliniaţi grupul în spatele acesteia Ctrl+Shift+[ sau Object > Arrange > Send to Back.
Deschideţi meniul Buttons (Window > Interactive > Buttons). Cu grupul InDesign Tab selectat, apăsaţi, în panoul apărut, pe Normal şi Rollover. După care apăsaţi înapoi pe Normal. Aceasta va transforma grupul în buton interactiv, după care va activa apariţia în mod normal a butonului şi apariţia lui în modul în care mouse-ul pluteşte deasupra lui.

Dacă doriţi, puteţi să-i daţi un nume butonului, pentru a nu-l încurca cu altele.

Acum urmează să stabilim modul în care butonul va arăta în cazul în care nu este activ (cazul normal), şi modul în care acesta arată ca fiind activ (caz rollover). Am spus mai înainte că pentru cazul normal voi face ca butonul să aibă o culoare pală, iar pentru cazul activ să aibă o culoare aprinsă. De aceea, având selectat din meniul Buttons cazul Normal, voi face dublu click pe corpul butonului, aceasta îmi va permite să editez suprafaţa colorată mov fără a degrupa elementele.

Având selectat doar interiorul butonului, din panoul de control de sus modificaţi opacitatea elementului la 50%.

Acum puteţi face dublu click oriunde pe pagina goală pentru a dezactiva selecţia specială. În panoul Buttons, stilul Normal va fi un pic mai deschis la culoare. Aceasta arată că am modificat corect aspectul butonului.

Faceţi aceeaşi operaţie pentru celelalte taburi rămase. Deschideţi panoul Preview (Window > Interactive > Preview), apăsaţi Play şi verificaţi cum lucrează butoanele în cazul în care treceţi mouse-ul pe deasupra lor.

Acum, fiind pe aceeaşi pagină 1, selectaţi iarăşi primul buton (InDesign), deschideţi panoul Buttons şi apăsaţi pe semnul “+” (plus), pentru a crea o comandă pentru butonul nostru, iar din meniul apărut alegeţi Go To Destination.

După definirea comenzii, meniul se va schimba puţin şi vom putea alege destinaţia pe care dorim să o ajungem în urma clickului pe buton.

Ce ne permite această comandă?
1. Ne permite să navigăm către o destinaţie aflată într-un alt document InDesign.
2. Ne permite să navigăm în interiorul documentului curent către un bookmark prestabilit.
3. Ne permite să setăm tipul zoomului (suntem în Flash!) în pagina nou deschisă.

Noi vom rămâne în acelaşi document, vom alege bookmark-ul InDesign (ele sunt aranjate în ordine alfabetică), şi vom păstra zoomul curent (Inherit zoom).

Pentru a activa schimbările efectuate, pur şi simplu faceţi click pe pagina goală.

Repetaţi acţiunea de stabilire a comenzii pentru fiecare buton de pe pagină, după care repetaţi întreaga procedură explicată în această lecţie pentru fiecare pagină din prezentare.

Aceasta va lega paginile între ele, va atribui interactivitate butoanelor şi va permite să aveţi începutul propriei aplicaţii.

———-

Ca să verificaţi cum lucrează aplicaţia flash creată, salvaţi fişierul în format SWF (File > Export > SWF, sau Ctrl+E pentru comanda Export).

După ce aţi dat un nume fişierului, apăsaţi Save pentru a porni fereastra de setări a produsului final.

Primul tab al casetei de export arată informaţia generală pe care vrem să o vedem în fişierul SWF.

Puteţi selecta cantitatea de pagini exportate;
aveţi opţiunea de a alege dacă să fie creat sau nu un fişier HTML pentru a vedea aplicaţia în Browser, în cazul în care puneţi bifă, veţi avea opţiunea să alegeţi dacă vreţi sau nu să vedeţi SWF-ul după exportare.
De asemenea puteţi decide la ce dimensiune va fi realizat exportarea: Dimensiunea reală, sau care să se încadreze într-o anumită rezoluţie, sau aveţi posibilitatea să stabiliţi o dimensiune customizată.
Mai jos decideţi ce culoare să aibă fundalul aplicaţiei, în cazul în care aţi lăsat spaţii transparente (aveţi fie culoarea hârtiei, fie lăsaţi imaginea transparentă).
Următoarea întrebare este ce vreţi să includeţi (Interactivitate şi media), fie includeţi toată interactivitatea, fie doar modul în care aceasta va apărea în produsul final (un fel de preview inactiv).
În cazul în care aveţi mai multe pagini şi aţi inserat comanda Go to page, vi se va propune să alegeţi tipul de tranziţie pe care o doriţi (fie cea setată de voi în interiorul comenzii, fie o tranziţie standard pentru toate paginile).
Şi, pe final, ultima opţiune din tabul General, puteţi alege dacă între pagini să existe animaţie de interactivitate ca să puteţi îndoia pagina de parcă aţi citi o carte a cărei foi puteţi să le răsfoiţi.

Acum treceţi la  al doilea tab – Advanced.

Aici puteţi stabili numărul de frame-uri pe secundă a filmului creat. Numărul de bază este 24.
Observaţi caseta de jos – Description – care explică fiecare funcţie ce face şi de ce.
La capitolul Text puteţi alege modul în care este prezentat textul. Vă propun să lăsaţi Flash Classic Text, aceasta va permite ca textul să ocupe cât mai puţin loc (în kilobytes) în aplicaţia voastră, în acelaşi timp arătând calitativ şi fără artefacte.
Rasterise Pages şi Flatten Transparency va afecta cântarul aplicaţiei după export şi, în acelaşi timp, în cazul redimensionării flash-ului vor apărea imagini pixelate. Nu vă sfătui să puneţi bife aici.
Următorul capitol ne prezintă modul în care vrem să arate imaginile utilizate în aplicaţie, în cazul în care avem imagini importate. Cea mai calitativă setare este PNG. În cazul în care alegeţi JPEG, veţi putea alege şi calitatea acestuia din meniul exact următor.
Ultima intrare din meniu ne permite să stabilim rezoluţia la care vor fi scalate imaginile în cazul în care am pus imagini de o rezoluţie mai mare. Aceasta se face pentru a reduce din cântarul aplicaţiei finale. În cazul în care aveţi imagini cu o rezoluţie mai mică de 72 ppi, acestea nu vor fi afectate de modificarea în cauză.

Apăsaţi OK şi deschideţi filmuleţul Flash nou creat. Acum, dacă aţi urmat corect paşii explicaţi anterior, veţi putea naviga între pagini, veţi avea taburi interactive şi astfel veţi avea schiţa unei viitoare aplicaţii Flash.

676FansLike
574FollowersFollow
84FollowersFollow
515FollowersFollow
2,780SubscribersSubscribe

Mai vezi și astea

Mărţişor în Adobe InDesign

Suntem pe ultima sută de metri în pregătirile pentru începutul primăverii, pe străzi se...