Flash Portfolio készítés InDesignban

Gyakorlatunkban ismét egy nem hétköznapi tördelési munkára fogjuk használni az InDesignt.  Flash portfoliót – fotóalbumot készítünk, természetesen flash szoftver megnyitása nélkül. Az InDesign interaktív elemek segítségével, és egy exportálással egy teljes mértékben flash tartalmat fogunk előállítani, melyet bármilyen webes felületre beilleszthetünk.

A kiinduláshoz válasszuk ki azokat a fotókat, amik a portfólióban szerepelni fognak. Ezeket optimalizált méretbe és felbontásban készítsük elő Photoshopban. A gyakorlatban a képek 952*564 pixel méretűek, File/Save for Web optimalizált méretben elmentve.

InDesignban nyissunk egy új dokumentumot File/New Document; a felhasználásnál/Intent válasszuk a web beállítást, a dokumentum méret legyen 1024*768 (fekvő).

A Pages panelen a jobb felső gyorsmenüből válasszuk a New Master menüt, és állítsunk be egy új mesteroldalt, amit elnevezünk B-portfolionak; oldalak száma 1. Ezután a papír színét beállítjuk, ez lesz a háttérszín, itt egy sötétszürkét 30/30/30 (RGB) választottunk  – Swatches panel/Paper.

Ezután el fogjuk készíteni a lap alján található kis nézőképeket. A mesteroldalon maradva a Rectangle tool-al létrehozunk egy 81*51 pixel méretű ablakot. Összesen 20 képet szeretnénk elhelyezni a portfólióban, így ezt gyorsan legyártjuk. A négyzetünket a bal margóhoz igazítjuk és az Edit/Step and repeat ablakban vízszintesen 9-szer megismételjük, 97 pixel eltolással. Ezután kijelöljük a 10 négyzetünket és ismét az Edit/Step and repeat ablakban megduplázzuk, most csak egyszer, és függőleges eltolással 65 pixellel. Majd az immár összes, 20 négyzetünket jelöljük ki, és igazítsuk az alsó margóhoz.

A kereteink elkészültek, a helyükön vannak, már csak a képeket kell beilleszteni. Erre több megoldás is lehetséges. Használhatjuk a MiniBridge palettát vagy a File/Place  (Ctrl+D) menüből Shift-tel kijelöljük a 20 képet, és egyszerre beillesztjük a 20 keretünkbe. (a csoportos képek beillesztéséről részletesen a “Grafika és keretkezelés InDesign CS5 verzióban” korábbi cikkben olvashat). A tartalomkitöltéshez jelöljük ki az összes képet és jobb egér gomb menüből  válasszuk a Fitting/Fill Frame Proportionally (Alt+Shift+Ctrl+C) be állítást, így kitölti képünk a keretet, torzítás nélkül.

Ezután a képekből gombokat konvertálunk, úgy hogy kijelöljük a 20 képet, és jobb egérgomb menüből kiválasztjuk az Interactive/Convert to Button opciót. Innentől a képeken látszani fog az interaktív gomb ikonja.

Ezután már csak a gombok céltartományát kell megjelölnünk, hogy aktívak legyenek. Ehhez első lépésben elkészítjük a további 20 “aloldalt”. A Pages/Insert pages ablakban 20 oldalat beillesztünk az első oldalt követően, mintának a B-portfolio mesteroldalt válasszuk. Ezután a 2.(!) oldalon létrehozunk egy 952*563 pixel méretű, margókhoz igazított keretet, és beillesztjük a kis nézőképekből az első képet, szintén a Fitting/Fitting/Fill Frame Proportionally tartalomkitöltést válasszuk, majd megismételjük ezt a munkafolyamatot a további oldalakon is. (a másolás+ beillesztés ugyanarra a helyre – gyorsmásolást használhatjuk Ctrl+C és Alt+Shift+Ctrl+V).

A mesteroldalon az első nézőképet (ami már interaktív gomb) kijelöljük és a Buttons palettán a + jellel egy action-t adunk hozzá. Kiválasztjuk a Go to Page opciót, a Zoom: Fit in window legyen, az oldalszám a 2. Ugyanezt a munkafolyamatot megcsináljuk a további képeken is. (Figyeljünk a céloldalakra!) Ezzel elkészült minden nézőkép oldalugrása a céloldalra.

Az első oldalon még csak a nézőképeink vannak, ide nem illesztettünk be nagy képet. Ez lesz a kezdő-, nyitóoldalunk. Ide egy hangulatképet helyeztünk el tetszőlegesen. Type toollal az album címét felírtuk “Portfolio 2012″. Ez a kettő elem link nélküli. Két külön szövegdobozba beírtuk az “E-mail” és “weboldal” szöveget. Szeretnénk, hogy ezek működő, aktív elemek legyenek, így a szövegdoboz kijelölését követően jobbegér menüből kiválasztjuk az Interactive/New Hyperlink ablakot. Itt megadjuk a link módját: Email (URL/Page…) a címzettet, és az e-mail tárgyát.
A weboldal szövegdobozt szintén ebből a menüből belinkeljük, az URL-t választjuk és megadjuk a weboldal címét: http://…..

Ha szeretnénk majd a portfólió lapozgatása közben bármikor visszaugrani a kezdőoldalra, célszerű a mesteroldalon elhelyezni egy link gombot. A gyakorlatban szövegként beírtuk a “Nyitólap” szöveget, középre alulra pozícionálva. A már leírt módon interaktív gombbá alakítjuk és a Go to Page actionnal az első oldalara irányítjuk.

Ezután nem maradt más hátra, mint a flash exportálás, vagyis amiért ennyit dolgoztunk.

Válasszuk a File/Export/Flash Player (SWF) módot. Ezután a további flash beállítások paramétereit válasszuk ki: All Pages; Generáljon HTML fájlt; A méretet ebben az esetben fixre 1024*768-ra vettük. Az oldalváltáshoz a Fade/áttűnés opciót választottuk, és kikapcsoltuk az oldallapozás funkciót.

Ezután némi számolás és várakozás után elkészül a legenerált swf és html állományunk, és automatikusan megnyitja webböngészőnkbe. (Ekkor még lokálisan nem fognak működni a külső hivatkozások- web, e-mail, ez csak feltöltés után, oldalon belüli hivatkozások viszont igen!)
Ezután már saját weboldalunkra beilleszthető vagy tárhelyre feltölthető a saját flash portfóliónk!

(Tipp: ahhoz, hogy az swf és html fájl mérete ne legyen túl nagy, mindenféleképpen optimalizáljuk a képek méretét Photoshopban vagy InDesignban az export swf/advanced ablakban!)

(Tipp: nincs megemlítve, de természetesen sűrűn mentsünk a munka során. Ha az interaktív tartalmak szerkesztését ellenőrizni szeretnénk munka közben, a Buttons panel bal alsó sarkán kis videóikonnal vagy a windows/interactive/prewiev menüből panelt elérve megtehetjük.)

A gyakorlatban látott portfólio kis méretben swf

A gyakorlatban látott portfólio kis méretben html

Szerző: Tácsi Luca