Eszterházy Károly Főiskola Tanárképzési és Tudástechnológiai Kar Médiainformatikai Intézet
KOMPLEX WEBLAP KÉSZÍTÉSE
Készítette: Nagy Dániel Szak: Médiatechnológus-asszisztens Konzulens: Antal Péter adjunktus
Eger, 2007
Tartalomjegyzék Tartalomjegyzék ................................................................................................................... 2 Bevezetés .............................................................................................................................. 3 Célok ..................................................................................................................................... 3 A tervezésnél figyelembe vett szempontok .......................................................................... 3 Használhatóság, vezérlés, struktúra, navigáció ................................................................ 3 Tervezés ................................................................................................................................ 4 Az oldal felépítése ............................................................................................................ 4 Logó tervezés .................................................................................................................... 5 A logókról általában ..................................................................................................... 5 A Corel Draw -ról általában, a logó megtervezése ....................................................... 6 Az oldal design tervezése ................................................................................................. 7 Az Adobe Photoshop CS2 ............................................................................................ 7 Mi micsoda a PhotoShop-ban? ..................................................................................... 8 Kivitelezés .......................................................................................................................... 10 A Macromedia Flash ...................................................................................................... 10 A Flash mozi elkészítése: ............................................................................................... 12 Első lépések és a struktúra felépítése ......................................................................... 12 Az előtöltő elkészítése ................................................................................................ 14 A fő színpad elkészítése ................................................................................................. 16 A Tween osztály ......................................................................................................... 17 Az easing osztály ........................................................................................................ 17 A tartalmi részek megjelenítése .................................................................................. 18 A bemutatkozó oldal ................................................................................................... 24 A referenciák menüpont ............................................................................................. 28 A partnerek menüpont ................................................................................................ 33 A kapcsolatok menüpont ............................................................................................ 34
2
Bevezetés A szakdolgozatomban egy olyan Flash alapú weboldalt szeretnék elkészíteni, amely az információt külső fájlokból olvassa be. Ez jóval több programozást igényel mint, azok a weboldalak, melyek tartalma beágyazva található meg a forrás dokumentumban. A külső fájlokból való beolvasásnak az előnye, hogy a későbbiekben történő frissítések során, nem kell a törzs oldalt, és annak forrását módosítanom, hanem elég egyszerűen csak néhány TXT, XML, HTML és CSS állományt átírni a kívánt új információra. Az oldal tervezése során érintem a logó tervezés metódusait, illetve magát a szerkezet kialakítását. Érintőlegesen bemutatom a Corel Draw grafikai program főbb elemeit, amivel a logót tervezem, és az Adobe Photosopot amely segítségével a Flasbe beimportált fájlokat, képállományokat készítem el.
Célok A szakdolgozat célja a Darts Inreactive weboldalának elkészítése. A cég weblapok arculattervek, tervezésével és kivitelezésével foglalkozik. Az oldal azoknak a felhasználóknak illetve megrendelőknek szól akik szeretnének túllépni a megszokott, olykor unalmas struktúrákon és szeretnének valami egyedit, különlegeset, különcöt. A figyelem felhívás ezen formája napjainkban hódít, és egyre több olyan oldalt találni ami mögött komoly kreatív csapatok dolgoznak és keresik a szélsőségeket a webes megjelenítésekben. Mivel ez egy designel és programozással foglalkozó cég, fontos, hogy maga a cég arculata is tükrözze a képviselt elveket. A logó amit készítünk az statikus és fegyelmezett, viszont a többi rész jóval szabadabb és az animálásnak köszönhetően dinamikusabb. Szó szerint rugalmas, amit a cégről is el lehet mondani.
A tervezésnél figyelembe vett szempontok Használhatóság, vezérlés, struktúra, navigáció Nagyon sok olyan oldallal lehet találkozni ahol rengeteg sok betűtípus jelenik meg. Ez zavart és káosz okozhat, elveszti az oldal az egységességét. Az én esetemben a logóban megjelenik egy betűtípus, egy a navigációs gombokon. A többi betű, jól olvasható internetes szabvány betű. Mivel a képernyőn más olvasási sebességgel haladunk, fontos a szembarát megjelenítés. Fontos hogy a szöveg tagolt, érthető, egyszerű és tömör legyen.
3
A tartalom megjelenésénél fontos a jó kompozíció, és az egyes elemek helye. A folthatású háttérelemekből jól kiemelkedik majd a szöveg és a tartalom. Az animált egységek és a navigációs gombok végig fent tartják az interakciót, használatuk ne válik unalmassá. Mint a multimédiában is, az animáció a leginkább figyelemfelkeltő komponens. Maga a vezérlés, a navigáció is ilyen animációval rendelkezik. Fontos a jól olvashatóság és a várható kimenetel bekövetkezése. A weboldal egyetlen egy Flash mozit tartalmaz, amely minden elemet és információt magában foglal. A tartalom középen helyezkedik el, a navigációs elemek pedig jobb oldalon. A rendszer abszolút non-lineáris, hiszen az elemek nem egymás után jeleníthetőek meg, hanem egyénileg választott sorrendben jeleníthetőek meg. Az információk csekély, ámde tömör jellege miatt nincs szükség nagy megjelenítési felületekre. -----------------------------------------------RAJZ A FELÉPÍTÉSRŐL---------------------
Tervezés Az oldal felépítése Az oldat 3 programmal fogom felépíteni. Az első fázisban logótervezés a Corel Draw 12 nevű programmal. Második lépésben a design kialakítása Adobe Photoshop CS2vel. Harmadik lépésben pedig az elkészített alkotóelemek összekovácsolása történik Macromedia Flash 8-al. Ezen felül használok HTML kódokat, amit stíluslapokkal (CCS) fogok formázni. Ez a beépülő szövegmezőknél lesz jelentős. Illetve XML fájlokat is használok, grafikus és szöveges elemek elérésére. Egy e-mail küldő rendszer erejéig a PHP programozás vizeire evezek. A cél az, hogy a felhasználó által letöltendő fájl méretét a lehető legoptimálisabbra szabjuk. Ezt a legjobban úgy tudjuk elérni, hogy az elemeket csak akkor hívjuk meg ha szükségünk van rá. Tehát dinamikussá kell tenni az oldalt és amit csak lehet külső fájlokból nyissunk meg. Ez növeli a komfortérzetet, hiszen a felhasználónak nem kell hosszú időt várnia az oldal megjelenítéséig. Természetesen minden egyes tartalmi elem betöltésénél van egy kis várakozási idő, de ez felszabdalva jobban elviselhető, mint egyben. Ez természetesen függ az Internet sebességétől is. Manapság Magyarországon még nem mindenki rendelkezik szélessávú Internettel. Az weblap 5 jól elkülöníthető részre fog tagolódni. Az első az előtöltő (preloader) amely arra szolgál, hogy a teljes tartalmat betölti, ennek nagy jelentősége van hiszen a felhasználó látja hogy a letöltési folyamat milyen fázisban áll. Ez külön színpadon
4
játszódik. A másik négy elem a fő színpadon kap helyet, négy menüpont formájában. Ezen menüpontok nevei: Magunkról, Referenciák, Partnerek, Kapcsolat. A bemutatkozás alatt egy pár mondat fog megjelenni a cégről, egyfajta küldetésnyilatkozat ként. A referenciák menüpont alatt a már eddig elkészült munkákba lehet betekintést nyerni, és néhány gondolatot olvasni róluk. A partnerek között kerül megnevezésre azon személyek, cégek neve vagy weblapja akik nagyban segítik a munkát illetve akiknek a cég is segíti a munkáját. A kapcsolatban egy e-mail küldő rendszer található amivel közvetlen a fejlesztőknek lehet írni véleményekkel, kérdésekkel, megrendelésekkel kapcsolatban.
Logó tervezés A logókról általában
A logó tervezés folyamatából nem maradhat ki a szabadkézi rajzolás. A gép egy eszköz számunkra, amelynek a segítségével kibővíthetjük képességeinket. A széleskörű felhasználhatóság érdekében, vektorgrafikus logót készítünk. A cél egy egyszerű, könnyen megjegyezhető
azonosító
tervezése.
Az
egyszerűség
formai
és
színhasználati
egyszerűséget egyformán jelent. A cég nevéből kiindulva egy nagy „D” betűt fogunk tervezni a lehető legegyszerűbb formákból. Ez alá a forma alá jól olvasható és oda illő betűtípussal a cég neve kerül. A logó célja, hogy egyértelműen azonosítsa az adott céget, terméket, szolgáltatást stb. oly módon, hogy egyszerre kommunikálja a cég, termék, szolgáltatás jellegét és legyen egyedi, más cégekkel, termékekkel, szolgáltatásokkal összekeverhetetlen. Egy jó logó tulajdonságai a következők: fekete-fehérben is használható (pl. pecsét, fax-fejléc stb.); kis méretben is használható; első pillantásra jól áttekinthető, azonosítható; kapcsolódik valamilyen módon a cég, termék vagy szolgáltatás témájához; a logóban szereplő név jól olvasható. A logó tervezése Corel Draw szoftverrel készül.
http://www.actint.hu/kompetenciak/grafikai_es_latvanytervezes/arculattervezes.php?idx=52
5
A Corel Draw -ról általában, a logó megtervezése
A Corel Draw a professzionális grafikai programcsaládok egyike. Egy Corellel, vagy más programon készített rajz kétféle módon épülhet fel: vektorokból és képpontokból (pixelekből). A vektorgrafikus program kifejezés azt jeleneti, hogy a képek vektorokból, azaz egyenes és görbe vonalszakaszokból épülnek fel, ennek következtében a minőség romlása nélkül tetszőleges mértékben kicsinyíthetők és nagyíthatók. A kép bonyolultsága határozza meg, mekkora helyet foglal el a háttértárolón, nem pedig a mérete vagy a színösszetevőinek száma. A képpontokból álló képeket bitképes vagy bittérképes képeknek is nevezik. Ezeknek minden egyes képpontját el kell tárolni, aminek következtében egy nagyméretű színes kép, nagy helyet foglal el a számítógép merevlemezén. Egy feladat jellege határozza meg, hogy egy adott esetben melyik programot érdemes alkalmazni. A CorelDraw alapvetően vektorgrafikus program, amelyben nehezen lehet elmosódott, bizonytalan felületeket létrehozni, hosszabb szövegeket kezelni, vagy éppen bemutatót készíteni. Az Eszközkészlet segítségével válik lehetővé az ábrák és a szövegek elkészítése, módosítása, minél kedvezőbb megjelenítése. A CorelDraw rajzeszközei alapbeállításként a képernyő jobb oldalán jelennek meg, de bármikor áthelyezhetők a képernyő tetszőleges részére. Amelyik eszköz jobb alsó sarkában egy kis fekete háromszöget látunk, az azt jelenti, hogy erre kattintva újabb rajzeszközök közül választhatunk. http://www.gamechannel.hu/modules.php?name=topics&file=nyomtat&cikk=masik_oldal -4153d858dba13 Fogalmak:
Rajzlap - A munkafelület kerettel jelölt része, a nyomtatás során ez a rész kerül kinyomtatásra.
Rajzablak - A munkafelület rajzlapon kívüli része, mely felhasználható a munka során, de nyomtatásra nem kerül.
Tulajdonságsor - A rajzablakban kijelölt objektum tulajdonságait tartalmazza.
Eszköztár- Nyíleszköz, Forma eszköz, Nagyító, Ceruza eszköz, Négyszög, Ellipszis eszköz, Sokszög eszköz, Szöveg eszköz, Interaktív kitöltés eszköz, Interaktív átlátszóság eszköz, Interaktív áttünés eszköz, Körvonal eszköz, Kanna eszköz. Interaktív kanna eszköz
6
http://209.85.129.104/search?q=cache:mhPItq6FXRcJ:zdavid.akg.hu/docs/cDraw 10-01.doc+Corel+eszk%C3%B6zt%C3%A1r&hl=hu&ct=clnk&cd=6&gl=hu
A logót a következő módon készítem el: 1. Nyitok egy üres dokumentumot. 2. Az ellipszis eszközzel rajzolok egy szabályos kört, körvonal színt nem adok neki, kitöltő szín pedig R=53, G=94, B=160 3. A tulajdonság soron, beállítom a kívánt nyitási szöget és az alakomat a kívánt mértékben döntöm, forgatom illetve nyújtom. 4. A következő hasonló alak már teljesen fehér színű lesz és a rétege az előző feletti lesz. 5. A harmadik és negyedik réteg szimpla a már megadott színkódú és fehér lesz. Formailag csak nyújtva és forgatva lesznek. 6. A szöveget középre igazítva, Bank Ghotic Md BT el írom fel. A kellő méretre méretezem és a helyére igazítom. 7. Elmentem a dokumentumot .cdr formátumban, illetve .ai (Adobe Illustrator formátumba is, mert a vektoros rajzot a későbbiekben a Flashbe lehet importálni és megőrzi vektorgrafikus tulajdonságait.)
Az oldal design tervezése Az Adobe Photoshop CS2
Magát a weblap designt Adobe Photoshop CS2 programmal készítjük el. A Photoshop olyan számítógépes program, amelynek segítségével a beszkennelt vagy digitális fényképezőgéppel készített fotóinkat,rajzainkat, grafikáinkat a legváltozatosabb módon tudjuk szerkeszteni, kreatívan újjávarázsolni, és nem utolsósorban a képen felfedezhető hibákat hatékonyan kijavítani. Egyfelől alkalmas a hagyományos fényképészeti gyakorlatból ismert lehetőségek tökéletes megvalósítására,mint amilyen például a retusálás, a kép kontrasztjának, világosságának, színeinek beállítása, korrigálása, vagy éppen egy fekete-fehér fotó utólagos kiszínezése. Másfelől ezzel a programmal lehetőségünk van arra, hogy képeink elemeit, részleteit szétválasszuk, majd rétegeken tárolva, akár külön-külön módosítva és aztán újra összekapcsolva ezeket, olyan különleges fotómontázsokat alkossunk, amelyeket más technikával biztosan nem tudnánk létrehozni. Ennek a technikának köszönhetően alkalmas webes felületek tervezésére, kivitelezésére. A
7
Photoshopot kiváló eszközei, szolgáltatásai és egyszerű felhasználói felülete a világ legismertebb és legkedveltebb képszerkesztő programjává tették. A mai webdesignerek számára nélkülözhetetlen kellék, hiszen eszköztárában olyan elemek találhatóak, melyek elősegítik a weben való publikálást. http://www.fotomagazin.hu/letoltes/d_f_m/0000/Photoshop1.pdf Mi micsoda a PhotoShop-ban?
Az eszköztárat a Window(Ablak) menüből lehet elérni. Amire mindenféleképpen szükségünk van: Tools, Options, Color, History, Layers, Status Bar. Lehetőség van arra hogy a kis füleket az eszköztáraknál egymásba húzogassuk ill. szétszedjük őket. Ez kitűnő lehetőséget biztosít arra, hogy a tervező felületet, igényeink szerint építhetjük fel. Eszköztár :
Kijelölő keret eszköz (M)- Szabályos kijelöléseket lehet vele végrehajtani.
Mozgató (V)- Objektumok mozgatására szolgál
Lasszó (L)- Szabálytalan (vagy kézi) kijelölésekhez.
Varázspálca (W)- Nagyjából azonos színű területeket saját magától egyszerre jelöl ki. A kijelölés finomsága állítható felül a "Tolerance:"-nál. (Minél nagyobb, annál több színt jelöl ki.)
Vágó (C)- Ennek segítségével könnyen, gyorsan csonkíthatunk egy képet. (Amit ezzel kijelölünk, az marad meg a képből egy ENTER ütése után.)
Helyi javító ecset eszköz (J)- Képi hibák javítására szolgáló eszköz
Ecset (B)- Fenn a jobb sarokban van egy "Brushes" felirat (vagy jobb oldalt az eszköztárakon is lehet). Erre kattintva állíthatjuk az ecset nagyságát, fejét.
Klónozó bélyegző eszköz (S)- Ha ALT lenyomása közben kattintunk vele valahol a képen, felveszi az adott terület lenyomatát. Ezután ha az egér nyomva tartásával (már ALT nélkül) húzzuk a képen, "sormintát" rajzol a felvett mintából.
Festékes bödön (G)- Ha egy kijelölésre "ráborítjuk" tartalmát, akkor az olyan színű lesz.
Radír (E)- Radírozásra használjuk.
Festékes vödör (G)- A kijelölt részeket színnel tölti meg.
Életlenítő, élesítő és maszatoló eszköz- A nevében takart funkciókat lehet vele elvégezni.
8
Fakító, Színégető, szivacs eszköz- A nevében takart funkciókat lehet vele elvégezni.
Közvetlen kijelölés (A)- Görbék kijelölésére szolgál.
Szöveg (T) Feliratokat lehet vele elhelyezni.
Toll Eszköz (P)- Görbék rajzolására alkalmas eszköz.
Téglalap eszköz (U)- Téglalapok, körök, alakzatok rajzolására szolgál.
Megjegyzés eszköz (N)- kommentárok írhatunk bele a dokumentumunkba.
Pipetta (I) Amire kattintunk vele, annak felveszi a színét.
Kéz eszköz (H)- Segítségével tudom mozgatni a felületet, navigálni, anélkül, hogy bármely elemet is elmozdítsak a helyéről.
Zoom eszköz (Z)- Nagyítani tudunk vele a grafikánkban.
Az aktuális színek. A kockákra klikkelve kiválaszthatjuk az elsődleges és másodlagos színeket. A kis kettős nyíllal megcserélhetjük őket, így változtathatjuk az aktuális és másodlagos színt. A színcserét az X gombbal is elérhetjük.
A tervezéskor használt és gyakran előforduló grafikai fájl formátumok
BMP:
Microsoft-szabvány.
Windowsos
bitmap,
grafikus
kártyától
és
annak
kezelőprogramjától független, 1-4-8-24 bites színmélység tárolására képes. Tömörítés nélkül vagy veszteségmentes RLE-tömörítéssel tárol. Nyomdai felhasználásra alkalmatlan, mert nem támogatja a CMYK-színrendszert. JPG: Joint Photographic Experts Group: DCT algoritmuson alapul. Átl. 1:30, paraméterezhető. A tömörített raszteres képeket 24 bites színkódolással is képes kezelni. Legalább 8 bites, legfeljebb 32 bites (nyomdai CMYK) színmódú képek tárolására képes. Tömörítési alapja a Huffmann-kódolás. A képet 8x8 képpontnyi blokkokra, mátrixokra osztja, elemzi és cseréli a színinformációkat. Archiválásra nem alkalmas. Leggyakoribb: 24 bites fényképek tárolására. PNG: W3C konzorcium szabványa, kifejezetten internetes alkalmazásra. Rendkívül hatékony, veszteségmentes tömörítés. 1 bitestől 16 bitesig bármilyen kép tárolására képes. Átlátszóság maszkját is képes tárolni. Szöveges adatokat, színkorrekciós adatokat is meg tud őrizni. Beépített átviteli hibaellenőrzés, interlace megjelenés. Régebbi böngészők nem támogatták.
9
A rajzos elemek elkészítése
1. Az oldal darabjait tépett papírok fényképeiből készítem el. 2. A kép rétegére duplán kattintva a háttérből réteget készítek. Ennek köszönhetően a kitörölt részek mögött csak a háttér fog látszani. 3. A radír és a varázspálca segítségével érem el a tépett hatást. 4. Ismét a varázspálcát használom, és rákattintok a kitörölt részre. 5. A kijelölés/ fordított kijelölés opcióra kattintva a kijelölt rész inverze jelölődik ki. 6. A ceruzát, vagy ecsetet használva kb. 100px nagyságú körrel, ahol a lágyítás mértéke nulla, kiszínezem a kijelölt részt. 7. A kapott képet elmentem .png formátumban. 8. Ezt az eljárást megismétlem az összes többi elemmel is.( gomb, logó alapja)
Kivitelezés A Macromedia Flash A Macromedia Flash elsősorban interaktív honlapok, és multimédiás bemutatók készítésére alkalmas szoftvernek készült. Elsődleges célterülete az Internet, valamint képességei lehetővé teszik CD-s anyagok készítését. A már teljes mértékben elterjedt HTML oldalaknál sokkal látványosabb, és dinamikusabb oldalak készíthetőek vele, amik emellett komoly szintű interaktivitást tesznek lehetővé az oldalak felett, amelyet a Flash megjelenése előtt csak a Javascript szerény képességei tudtak valamilyen szinten kiszolgálni. Ebből a koncepcióból kiindulva fejlődött ki a Flash. Eleinte egy olyan vektorgrafikus alapokon fekvő alkalmazás volt amelyhez valamilyen szinten hozzá lehetett rendelni hangokat, és mindent nagyon hasznos animációs megoldásokkal tudtuk felhasználni céljainkra. A 4-es verziónál tette meg a legnagyobb lépést előre amikor a Macromedia fejlesztői felruházták egy alapszintű kódolási lehetőséggel amelyet ActionScript-nek neveztek el. Gyakorlatilag innen kezdett komolyan számításba jönni ezen a területen. A különféle verziók megjelenésével együtt bővült a Flash tárháza és ezzel együtt fejlődtek lehetőségei is. Sok grafikai fejlesztési hasznos megoldást kapott és egyre komolyabbá vált maga a fejlesztő környezet is. Emellett egyre több média formátumot
10
kezdett támogatni. A képek sem korlátozódnak le kizárólag a vektorgrafikára, készíthetünk egyedülálló raszter és vektorgrafikus hibrid oldalakat. Ezek mellett a hangformátumok közt is egyre nagyobb a választék. Valamint ahhoz, hogy megfelelő mértékben multimédiás jellege legyen kezel több videó formátumot is. Ezeket a formátumokat lehetőségünk van importálni alkalmazásunkba, valamin számtalan médiás formátumba történő exportálásukra is. Ezek mellet már rendelkezésünkre áll például az a videó tömörítő alkalmazás is amely a 6-os verzió megjelenésével került a programba, és szintén továbbfejlődtek képességei. A már korábban különféle vizuális fejlesztő eszközökből megismert komponenseket is használhatunk, és a többi tulajdonsággal együtt nyújtanak egy nagyon erőteljes alkalmazásfejlesztő környezetet. Ahhoz, hogy webes környezetre fejlesszünk, figyelembe kell vennünk egy fontos tényezőt, ez pedig a platformfüggetlenség. Az Internetezők különféle szoftverek használatával kapcsolódnak a hálózatba. Manapság már az operációs rendszerek közül rengetegféle áll rendelkezésünkre, és az ezen használt böngészők száma pedig manapság megszámolhatatlanul nagy. Ebből az okból kifolyólag megpróbálnak különféle szabványokat betartani, amely többé-kevésbé sikerül is. A Flash egy olyan formátumot választott amely nem mint önálló alkalmazás működik, de megvannak ilyen irányú képességei is. Egyszerűen, mindenki számára hozzáférhetően, bármely böngészőből elérhetjük az ilyen tartalmú oldalakat. Ezek fényében azt gondolom az általam kitűzött feladat megoldásához ennél alkalmasabb eszközt nem is találhatnék. Manapság már minden platformon elterjedt. Pár röpke év alatt meghódította az Internetet, és nem böngészhetünk anélkül hogy lépten-nyomon bele nem botlanánk egy Flash-es weboldalba. Jelenlegi felmérések szerint az Internetezők 90%-a rendelkezik az swf fájlok kezeléséhez megfelelő pluginnel. Ezek tekintetében meglepő az, hogy tudományos felhasználása még nem elterjedt. Az ilyen témájú oldalakon számtalan felhasználási lehetősége van. Nem számít ugyan egy komplett programozási nyelvnek az ActionScript de a scriptnyelvek közt igencsak megállja a helyét. Ennek megfelelően a program fejlesztése során rendelkezésünkre állnak, a már más programozási nyelvekből megismert eszközök. A 7-es verziótól rendelkezik debuggerrel is valamint a változók és különböző objektumok listázására is lehetőségünk van. Mindezt pedig egy komolyan átgondolt és kiforrott rendszerben találjuk meg. A Flash-nek az erőssége az, hogy nagyon sokrétű, kapunk vele egy vektorgrafikai programot, valamint egy komoly animáció készítő szoftvert valamint egy programfejlesztő felületet. Mindezeket pedig olyan formában, hogy mindent egy
11
szempillantás alatt elérhetünk, nem gabalyodunk bele a számtalan lehetőség és opció garmadájába, gyorsan és könnyen kezelhetjük azt. Érdemes még tudni azt, hogy a fejlesztő cég a Macromedia. Ezen a területen olyan komoly sikerei vannak, hogy hamar a vezető céggé vált ezen a területen. Nagyon közismert programja még a Dreamweaver amely, mint az elsőszámú honlap fejlesztő környezet jön számba. A Macromedia a programjai fejlesztése során nagy figyelmet fordít arra, hogy egységes környezetet alakítson ki, így a programcsomag különböző programjaira való áttérés jóval egyszerűbbé válik. Valamint szinte kivétel nélkül támogatják egymás formátumait, így ezen eszközök együttes használatával bármilyen webes alkalmazást elkészíthetünk, ami talán egyedülálló a piacon.
A Flash mozi elkészítése: Első lépések és a struktúra felépítése
Első lépés ként az elemek elhelyezésével, elnevezésével foglalkozunk, majd a scripteket fogjuk megírni. Nyissunk egy új Flash dokumentumot ( File/ New v. Ctrl+N). A Properties menüben állítsuk a mozi méretét 950 X 600 pixelre (Size), a háttérszínt (Background) teljesen feketére (#000000), a frame rátát (Frame Rate) 12 –re. Következő lépés ként importáljuk be a Photoshopban elkészített .png kiterjesztésű fájljainkat. Az egyszerűség kedvéért készítsünk minden elemből Movie Clip Szimbólumot. Szimbólumkészítés menete: 1. Insert menü/New Symbol v. Ctrl+F8 2. A párbeszéd ablakban adjunk beszédes nevet az objektumoknak hogy a későbbiekben egyszerűbben megtaláljuk a számunkra szükségeset. 3. Húzzuk rá a munkafelületre az éppen aktuális képünket amit nem sokkal ezelőtt importáltunk be. 4. A behúzás után a képre kattintva, annak Properties menüjében állítsuk az „X” és „Y” értékeket 0-ra. Ezzel pozícionáljuk a koordináta rendszerben. A gomb szimbólumból négy darab másolatot készítünk és elnevezzük őket gomb1, gomb2, gomb3 és gomb4-nek. Mind a négy gombra különböző statikus szöveget helyezek fel. Ezek lesznek a menüpontok nevei.
12
Szöveg felhelyezése: 1. A gomb szimbólumon belül létrehozok egy új réteget (Layer), és a „szoveg” nevet adom neki. 2. A Text Tool-t (T)használva a kurzorral tetszőleges helyre kattintok a munkaasztalon és a kívánt szöveget beírom.(az én esetemben ez a négy különböző gombon, négy különböző szöveget jelent) 3. A szöveg típusát statikusra állítom (Static Text).A betűtípusnak a Tango HU –t választottam. A szöveg mérete 19 px. Színe fehér (#FFFFFF). Alpha csatornája 100%. Pozíciója középre igazított (Align Center). A többi opcióra nincs szükségünk. Ezek után helyezzük el a mozi elemeit a fő idővonalunkon, külön rétegekre, és nevezzük el azokat. A legalsó rétegre kerül a háttérképünk. A háttérkép a ’hatter’ nevű Movie Clip szimbólumunkban található. Ezt helyezem az első rétegre. A pozíciója mind az ’X’ és ’Y’ koordinátán a 0 értéket veszi fel. Új réteget hozok létre és arra helyezem mind a négy különböző gombomat ( gomb14 Movie Clip szimbólum, a réteg neve ’gombok’). Nagyjából azonos távolságra teszem őket egymástól. A négy elemet kijelölöm úgy, hogy a Shift gombot folyamatosan nyomva, egyenként rájuk kattintok. A kijelölés után a Window menüből előhívom az Aligne táblát (Ctrl+K). Ügyelek arra , hogy a To stage gomb ne legyen bekapcsolva mert akkor az igazítást a színpadhoz végzi nem pedig egymáshoz igazodnak. Rákattintok az ’Align’ sor 1. opciójára ( Align left edge) ,ezzel bal oldalt az összes gomb egy vonalban lesz. A ’Distributive’ sorban szintén az első opcióra kattintok (Distribute Top edge). Ennek hatására függőleges irányban egyenlő távolságra lesznek a gombok. A következő réteg neve „alsórész”. Erre helyezem rá az „alsoresz_mc” nevű Movie Clip szimbólumot. Az objektum kezdő koordinátái: X: 273.7, Y: 170. Ezen elem mozgatásakor szükségem lesz arra, hogy bizonyos részek eltűnjenek. Ezt úgy oldom meg hogy a réteg felé egy vele nagyjából azonos méretű négyzetet rajzolok tetszőleges színnel, hiszen ebből csak egy mask réteg fog keletkezni.(nem baj ha szélesebb, mert oldalirányú mozgás nincs, viszont a magasságra ügyelni kell) . Ha a rajz megvan akkor a rétegre jobb egérgombbal kattintva kiválasztom a Mask tulajdonságot. Innentől kezdve, a mozi lejátszásakor csak annyi fog látszani az elemből amit a Mask határol és lefed.
13
Következik a „felsőrész” nevű réteg. Erre a felsoresz_mc Movie Clip szimbólumot teszem. Ez utáni rétegre a logó kerül, és a réteg is ezt a nevet kapja. Pozíciója: X=388 Y=128. Az utolsó előtti rétegre egy szűrőt teszek, aminek a célja a kiemelés lesz. Kiemeli a fő elemeket a háttérből. Ezt a sarkok elsötétítésével fogom elérni. A Rectangle Tool (R)al razzolok egy 950X600 px-es négyzetet. Pozíciója X=0 Y=0. Előhívom a Color Mixert a Window menüből (Shift+F9), kijelölöm a négyzetet, és a Color Mixeren a következő beállításokat fogom eszközölni: ---------------------------Ide jön egy kép magyarázatokkal----------------------------------Miután ez a beállítás megvan, a Gradient Transform Tool (F) segítségével megformázom a színátmenetet. A legfelső réteg lesz az a réteg amire a frame scripteket fogom írni, ezért az actions nevet kapja. Ez az elnevezés a nemzetközi Flash programozói gyakorlatban. Az előtöltő elkészítése
A Window/ Other Panels/ Scene (Shift+F2) menüpontra kattintva előjön a Scene panel, amin a színpadok sorrendjét tudom változtatni, új színpadokat tudok létrehozni, és a már meglévőket tudom duplikálni. Jelen esetben a már meglévő Scene1 nevű színpadomat fogom duplikálni. A két egyforma színpadot átnevezem preloader-re és main-re. Elkészítem az előtöltőt a preloader nevű színpadon. Itt összesen 5 db rétegre van szükségem (actions, effekt, logó, hattér, és egy újonnan létrehozott réteg : szazalek nevvel).A szazalek nevű rétegre létrehozok egy Movie Clip szimbólumot percent (százalék)néven. A movie clippem egy darab kulcskockából fog állni. Két darad szövegmezőt tartalmaz. Az első egy dinamikus szövegmező, 15 -ös betűmérettel, fehér színnel. Ennek a változó értéke: percent (var= percent). A másik szövegdoboz egy statikus szövegdoboz. Egyedül egy ’% ’jelet tartalmaz. A timelineon elhelyezem a movie clippemet és példánynevet adok neki: percentContain. (százalék tároló). A logónam a logo_mc példánynevet adtam. (Megjegyzés: A „//” karakterek utáni részek nem a kód részei, csak kommentárok, melyet a program, futás közben figyelmen kívül hagy.) A timeline-on négy frame hosszúságú mozit készítettem. 1.frame action //A teljes fájl méretének meghatározása. A movieSize változó tárolja az egész flash dokumentum méretét bájtokban megadva. 14
movieSize = this.getBytesTotal(); //Az 1 %-nak megfelelő bájtmennyiség meghatározása. A moviePercent változó a movieSize válozó értékét osztja el százzal, így kapom meg az 1% nak megfelelő értéket. moviePercent = movieSize/100; 2.frame action //A 2. frameben vizsgálom a már betöltött byte mennyiséget. current = this.getBytesLoaded(); // A gyökér (root) timeline, percentContain példánynevű movie clipjének percent változójának értékét ( tehát, hogy hány százalékot jelenítsen meg a dinamikus szövegdoboz) úgy kapom, hogy a már betöltött mennyiséget (current) elosztom az 1% magfelelő byte mennyiséggel _root.percentContain.percent = Math.round(current/moviePercent); //logo_mc egy Glow effektet kap, a betöltött százalék arányában. Ezt úgy érem el, hogy egy GlowFilter constructort használva a blurX és blurY értéket a már előbb vizsgált Math.round(current/moviePercent) értékkel ruházom fel. //flash filter meghívása import flash.filters.GlowFilter; //változók deklarálása var rect:MovieClip = _root.logo_mc; //a gyökér mozi logo_mc példánynevű movie clipje var color:Number = 0xFFFFFF; // effekt színe fehér var alpha:Number = .99;// átlátszóság 99% var blurX:Number = Math.round(current/moviePercent);// A blurX értéke ami futás közben változni fog var blurY:Number = Math.round(current/moviePercent);// A blurX értéke ami futás közben változni fog var strength:Number = 3; // az effekt erőssége 0és 255 között var quality:Number = 3; // az effek minősége 1 és 3 között, 3 a legjobb minőség var inner:Boolean = false; // hogy belső ragyogást szertnénk e? Ha false akkor külső ragyogás van var knockout:Boolean = false; // a kiütő hatás, nálunk nincs jelentősége var filter:GlowFilter = new GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout); // a változók betöltése egy másik változóba //tömböt hozok létre amiből kiolvasom ezeket az értékeket var filterArray:Array = new Array(); 15
filterArray.push(filter); rect.filters = filterArray; 3.frame action // Ha a százalék kijelző értéke nagyobb vagy egyenlő mint 100 akkor lejátsza a 4. framet. Ha ez az állítás nem igaz akkor visszaugrik a 2. kockára. if (_root.percentContain.percent >= 100) { gotoAndPlay(4); } else { gotoAndPlay(2); } 4. frame action gotoAndPlay("main", 1); // menj és játszd le a main színpad 1. kockáját
A fő színpad elkészítése Miután betölt a mozi áttér a main színpadra. Ott meg kell jeleníteni a többi elemet is és a logót is a helyére kell juttatni. Az animálás első része a 23. kockáig tart. A logót egy motion tweenel a helyére animálom. Ez a 4. kockára érve le is zajlik. A logó kezdő pozíciója és mérete: W=171.2, H=257.4, X=388, Y=128 A logó záró pozíciója és mérete: W=74.3, H=111.8, X=316.9, Y=58.6 Az action layer 1. kockájába azt a scriptet írom be aminek a segítségével az objektumokat mozgatni fogom. Ezt a mozgatást nem motion és shape tweenek alkamazásával teszem meg, hanem előre definiált osztályokat használok és Action Scriptből vezérlem az objektumokat. Ennek megvannak ez előnyei és a hátrányai is. Előnye, hogy kisebb lesz a mozink mérete, így az alacsonyabb sebességű internetet használóknak kedvezünk. Hiszen gyorsabban töltődik le a kisebb adatmennyiség. Hátránya viszont túlzott beágyazása miatt van. Míg a timelineon kulcskockákkal animálunk, itt a kód nem tesz lehetővé olyan változatos mozgatást. Előnye még, hogy bonyolult matematikai függvényekkel lekódolt animációkat, maszkolásokat tudunk viszonylag egyszerű módon a különböző movie clipjeinkhez hozzárendelni. Két ilyen fő osztályt (class) találhatunk beépítve a programba, a Transition és a Tween elnevezésűeket, illetve - ehhez kapcsolódóan - az ezek által létrehozható animációkat módosító easing osztályt. Az én esetemben a Tween oszályt fogom használni és az azt módosító easing osztályt.
16
A Tween osztály
Lecsupaszítva és leegyszerűsítve a dolgokat, azt mondhatjuk, hogy a Tween osztály segítségével, előre megadott paramétereknek megfelelően egy movieclip valamely tulajdonságát (property), úgymint: _x, _y, _xscale, _yscale, _rotation, _alpha, _width, _height) tudjuk egy kezdő és egy végérték között megváltoztatni és azt animációként megjeleníteni. A konstruktorban is használt elnevezéseket használva nézzük meg a szintaktikáját: myTween=new mx.transitions.Tween (obj, prop, func, begin, finish, duration, useSeconds) Ahol: obj- az az mc, amelyiknek valamely tulajdonságát meg akarjuk változtatni prop- a tulajdonság amit változtatni fogunk func-az easing osztály egy metódusa, ez - ahogy az osztály neve is mutatja - a kezdő és végérték közti átmenet 'csillapítási' fajtáját adja meg (bővebben később) begin-a változtatandó tulajdonság kezdő értéke finish-a változtatandó tulajdonság végső értéke duration-az az időtartam, ami alatt az animáció lejátszódik (frame-számban, vagy ezredmásodpercben megadva) useSeconds-egy boolean érték, amely jelzi, hogy a duration értéke frameben vagy ezredmásodpercben lett megadva (true = ezredmásodperc, false = frame, alapesetben false) Az oszálynak ezen felül még számos paramétere létezik,de az általam kívánt mozgást, mozgásokat ezekkel a paraméterekkel tökéletesen elő lehet állítani. Most ismerkedjünk meg az easing osztállyal. Az easing osztály
A konstruktor 'func' paramétere, ahova az easing osztály 5 alosztályának 4 féle metódusát rendelhetjük. Alosztályok: Back, Bounce, Elastic, Strong, Regular, None és a metódusaik:easeIn, easeOut, easeInOut, easeNone. Megjegyzendő, hogy None és az easeNone csak egymással működik, más párosításban hibaüzenetet kapunk, és különösebb jelentősége nincs is a funkciónak, mivel így lineáris animációt kapunk. Az alsó résznek és a felsőrésznek az also_mc és felső_mc példánynevet adtam. Ennek értelmében a kód a következő képen néz ki: 17
// a trasition oszály meghívása import mx.transitions.Tween; //also_mc new Tween(also_mc, "_y", mx.transitions.easing.Elastic.easeOut,650, 170,2, true); //also_mc vege //felso_mc new Tween(felso_mc, "_y", mx.transitions.easing.Elastic.easeOut,650, 34,2, true); //felso_mc vege A kódból jól látszik hogy mind a kettő elem a színpadon kívüli y=650-ös pozícióból indul majd az y=170 és 34-es pozícióban fejezik be a mozgást. A gombokat egyszerűen csak megjelenítem a 20. kockán. A 24. kockán a kód egy stop(); paranccsal kezdődik, aminek értelmében abbamarad a mozi futása. Mivel minden elem a helyére került itt az ideje, hogy mielőtt a többi mozgatásra rátérnénk, foglalkozzunk egy kicsit a megjeleníteni kívánt tartalommal. A tartalmi részek megjelenítése
Mivel az alsoresz_mc egy önálló mozinak tekinthető, és ez az aminek tartalma folyamatosan változni fog, ebbe fogom beleépíteni a dinamikus tartalmat. A dolog úgy fog működni, hogy adott gombra kattintva, a gomb egy változó értéket ad, amely változó érték az alsoresz_mc valamely kockájára fog hivatkozni. Ha a gombok fölé viszem az egeret akkor a gombok animáltan fognak előre ugrani. Ha bármelyik gombra kattintok akkor a mozi tovább fog futni. A további futásban csak a gombokat ill. az alsoresz_mc –t fogom mozgatni. Teszem ezt kódból ill. motion tween-el. A gombsor a 25. és a 27. kocka között eltűnik és az alsoresz_mc pedig 26. és a 32. kocka között felfelé mozog (y=170-től y= -155-ig), és a már említett maszk réteget elhagyva eltűnik ideiglenesen. A 35. frameben kóddal jelenítem meg újra az alsoresz_mc-t, de már az új tartalommal. A gombokat 53. és 59. kocka között jelennek meg ismételten egy tween animációt alkalmazva. A 60. kockán ismét egy stop fogja megállítani az animációt. Ha itt kattintok bármelyik gombra akkor az lejátszó fejet a
25. kockára tekeri és onnan
ismételten lejátszódik a fentebb taglalt animáció, csak már az új tartalommal. Vizsgáljuk meg a 24. kockához írt kód egy részletét. stop(); //Megállítom a mozit 18
//Gombok Mozgatása import mx.transitions.Tween; //Tween class meghívása //gomb1-ha ráhúzom az egeret akkor lejátszódik a movie clip mozgása button1_mc.onRollOver = function() { new Tween(button1_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; //gomb1-ha lehúzom róla az egeret akkor lejátszódik a movie clip mozgása button1_mc.onRollOut = function() { new Tween(button1_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb1 Vége //Ugyan ez a metódus a többi gombnál is //gomb2 button2_mc.onRollOver = function() { new Tween(button2_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button2_mc.onRollOut = function() { new Tween(button2_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb2 Vége //gomb3 button3_mc.onRollOver = function() { new Tween(button3_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button3_mc.onRollOut = function() { new Tween(button3_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb3 Vége 19
//gomb4 button4_mc.onRollOver = function() { new Tween(button4_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button4_mc.onRollOut = function() { new Tween(button4_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb4 VÉGE //Gombok Mozgatása Vége //A gombokra való kattintáskor lejátszódó események (ha pontosan szeretnék fogalmazni akkor valójában az esemény nem a kattintás pillanatában játszódik le hanem az egér felengedés pillanatában) _root.button1_mc.onRelease = function() { _global.tarolo = "2"; // a globálissá, azaz bárhonnan elérhetővé tett tarolo nevű változó értékét 2 re állítja. Ennek a későbbiekben nagy jelentősége lesz. trace(_global.tarolo); // a trace funkcióval üzeneteket tudunk küldeni az Output panelra (Kimeneti panel). Jelen esetben a _global.tarolo változó éréke íródik ki (2). Ez a funkció fejlesztéskor nagyon hasznos. Ellenőrizni tudjuk, hogy az adott változó felveszi-e a kívánt értéket. gotoAndPlay(25); //Ha egyszerűen akarok fogalmazni akkor, a kód jelentése: Menj és játszd le a 25. kockától a mozit. }; _root.button2_mc.onRelease = function() { _global.tarolo = "3"; trace(_global.tarolo); gotoAndPlay(25); }; _root.button3_mc.onRelease = function() { _global.tarolo = "4"; trace(_global.tarolo); 20
gotoAndPlay(25); }; _root.button4_mc.onRelease = function() { _global.tarolo = "5"; trace(_global.tarolo); gotoAndPlay(25); }; A _global.tarolo változó a későbbiekben egyenlő lesz a _global.myVar változó értékével. Ez a változó fogja meghatározni, hogy az alsoresz_mc melyik kulcskockája játszódjon le. Azért történik később a meghatározás, mert ha egyből megváltoztatná a változó értékét akkor a tartalom egyből megváltozna és ahelyett, hogy a régi tartalom tűnne el és az új jelenne meg, az új tartalom egyből megjelenne, eltűnne, és újra megjelenne. Ez elég furcsán néne ki. Erre a kódot a 35. kockán találjuk, és ugyanitt található az alsoresz_mc újbóli megjelenítéséhez szükséges kód. _global.myVar = _global.tarolo; // A myVar változó felveszi a tároló változó értékét (amit ezelőtt valamely gomb lenyomásával tettünk meg, ez az érték 2-5-ig terjedhet) _root.onEnterFrame = function() { // Ha a lejátszás ehhez a kockához ér akkor az also_mc –n belül játszódjon le a változóban tárolt számú kocka és álljon meg a alsoresz_mc lejátszása azon az egy kockán. _root.also_mc.gotoAndStop(myVar); }; import mx.transitions.Tween; // ismét meghívom a tween osztályt //also_mc mozgatás (már az új tartalommal) y=650-től y= 170-ig. new Tween(also_mc, "_y", mx.transitions.easing.Elastic.easeOut, 650, 170, 3, true); //also_mc vege
A 35. kockán áthaladva az animáció továbbhalad a 60. kockáig ahol megáll. A 60. kockában található kód: //Megállítom a mozit stop(); //Gombok Mozgatása import mx.transitions.Tween; 21
//gomb1 button1_mc.onRollOver = function() { new Tween(button1_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button1_mc.onRollOut = function() { new Tween(button1_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb1 Vége //gomb2 button2_mc.onRollOver = function() { new Tween(button2_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button2_mc.onRollOut = function() { new Tween(button2_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb2 Vége //gomb3 button3_mc.onRollOver = function() { new Tween(button3_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); }; button3_mc.onRollOut = function() { new Tween(button3_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb3 Vége //gomb4 button4_mc.onRollOver = function() { new Tween(button4_mc, "_x", mx.transitions.easing.Elastic.easeOut, 680, 690, 1, true); 22
}; button4_mc.onRollOut = function() { new Tween(button4_mc, "_x", mx.transitions.easing.Elastic.easeOut, 690, 680, 1, true); }; //gomb4 VÉGE //Gombok Mozgatása Vége _root.button1_mc.onRelease = function() { _global.tarolo = "2"; trace(_global.tarolo); gotoAndPlay(25); }; _root.button2_mc.onRelease = function() { _global.tarolo = "3"; trace(_global.tarolo); gotoAndPlay(25); }; _root.button3_mc.onRelease = function() { _global.tarolo = "4"; trace(_global.tarolo); gotoAndPlay(25); }; _root.button4_mc.onRelease = function() { _global.tarolo = "5"; trace(_global.tarolo); gotoAndPlay(25); }; Ez a kód tulajdon képen megegyezik a 24. kockában használt kóddal ami igazából csak egyszer fut le. Hiszen innen a vezérlés a 25.kockára mutat. A 24. kockában lévő kódot egy kicsit még módosítanunk kell, hiszen az also_mc példánynevű szimbólumunknak egy kezdő értéket kell adnunk, mert az nem lehet, hogy ha valaki belép akkor egy nagy semmivel találja magát szemben. Íme a módosítás, az egységességre való törekvést figyelembe véve: stop();//megállítom a mozit 23
_global.tarolo = "2"; // a tároló változó értéke 2 lesz _global.myVar = _global.tarolo; // myVar változó egyenlővé tétele a tarolo változó értékével _root.onEnterFrame = function() { _root.also_mc.gotoAndStop(myVar); // Az also_mc-n belül a 2. frame kerül lejátszásra. Mint már említettem, az also_mc –be fog betöltődni a tartalom. Készítek egy 5 kockából álló mozit. Minden kocka külön kulcskocka. Létrehozok még 2 db réteget. A 3 réteg neve: alap, tartalom és actions. Az alap nevű rétegem csak a grafikai alapot fogja tartalmazni. A második rétegem a tartalmi elemeket, szövegdobozokat, gombokat. Az actions nevű rétegem a kódokat fogja tartalmazni. A bemutatkozó oldal
Az első kockát tartalmi szempontból üresen hagyom. A 2. kockára készítem el a bemutatkozásról szóló menüpont elemeit. Ez egy egyszerű dinamikus szövegdobozból fog állni aminek a példányneve content_txt. Emellé egy beépített görgető sáv komponenst fogok illeszteni. Ez a window/ component menüből vagy a Ctrl+F7 billentyű paranccsal érhető el. A komponensek közül a User Interface-en belül az UIScroll Bar nevezetűt választom és egyszerűen a dinamikus szövegdobozomra húzom. A Component Inspector paraméter fülénél beállíthatom a kívánt adatokat. Pl.: Láthatóság, példány hivatkozás, minimum méretek stb. Miután ez megvan és a kellő helyre helyeztünk mindent akkor írjuk meg a kódot. A betöltendő szöveg egy HTML dokumentum lesz amit stíluslapokkal tudunk formázni. A Flash támogat bizonyos HTML kódokat és formázási (CSS) kódokat is. Még mielőtt elkezdenénk, nézzük meg milyen ún. tageket támogat a program. És nézzük meg a Flasben használatos szövegtípusokat. Három fajta típusa létezik a szövegnek Flashben: Static (statikus),Dynamic (dinamikus) és Input (bemeneti)A statikus szöveg az a szöveg, akinek a tartalmát és megjelenését meghatározod, amikor szerkeszted a Flash dokumentumot. Ezt használtam a gombokra irt szöveg esetén is. A dinamikus szövegmezők azok a mezők, amiknek a tartalma futásidőben tud frissülni. Ez lesz az általunk használt szövegmező jelen esetben. Az input szövegmezők lehetővé teszik a felhasználóknak, hogy futásidőben írjanak bele szöveget. Ezt fogjuk majd a későbbiekben a levélküldő rendszerünknél alkalmazni. A szövegmezőknek ,ugyanúgy mint a Movie Clip-eknek és gomboknak, példaneveket 24
tudunk adni és ActionScriptel tudjuk irányítani azokat. Mind a dinamikus és az input szövegmezők egy SWF fájlban a TextField osztály példányai.
Ha megadod a
példánynevet, arra specifikusan tudod használni a TextField osztály módszereit és tulajdonságait, ezeket Action Script-el lehet vezérelni. A támogatott HTML kódok közül, emeljük ki azokat amik valószínűleg a mi kódjainkban is elő fognak fordulni: Anchor tag ()Az tag létrehoz egy hipertext-hivatkozást és támogatja a következő sajátosságokat: A hivatkozások két elemből tevődnek össze. Az egyik a képernyőn megjelenő aktív elem, a hivatkozás látható része. Ez lehet egy szöveg, vagy egy kép is. A felhasználó csak ezt látja. A másik egy URL cím, amely az aktív elemhez tartozik. HREF Abszolút, vagy relatív cím. Itt adjuk meg az aktív elemhez tartozó címet. TARGET megadja hogy hová töltődjön a belinkelt oldal. _self-saját magába való betöltés _blank-új oldalt nyit _parent-az aktuális keret szülőjébe tölti be _top-a legfelső szintű keretbe az aktuális ablakban Bold tag () a szöveges elemeket félkövérré teszi. Például a kódban szereplő “Félkövér szöveg” kifejezés így fog megjelenni Félkövér szöveg. Természetesen az adott betűtípusnak támogatni a kell a félkövér formátumot. Break tag () A tag sortörést csinál a szövegben. Font tag () A tag segítségével szöveget írathatunk ki úgy hogy megadjuk a betű méretét (font size), természetesen pixelben, színét hexadecimális kódolással (color=’#FFFFFF’), magát a betűtípust (face=’Arial Black’) Image tag () Az lehetővé teszi hogy külső képeket (Jpeg), és külső Flash mozikat (SWF) töltsünk be. Italic tag () Az tag dőlt stílust ad a szövegünknek List item tag () Az tag Lista elemeket készít Paragraph tag () Az Új bekezdést hoz létre Underline tag ()AZ tag aláhúzza a szöveg egy adott részét. Annak idején amikor a HTML kódolást kifejlesztették akkor minden design elemet beépítettek a HTML kódba. Ez a későbbiekben, az oldalak fellődésével egyre bonyolultabbá vált és megnövelte a dokumentumok méretét, arról nem is beszélve hogy a hasonló elemeknél, a formázást minden egyes esetben el kellett végezni és ez rengeteg 25
időt vett igénybe. Ekkor jött az ötlet, hogy válasszák ketté a formázási kódokat a szöveges elemektől. A CSS (Cascading Style Sheets azaz összefűzhető stíluslapok) Hacon Wium Lie és Bert Bos ötlete nyomán alakult ki. A két fejlesztő vezetésével a W3C 1996-ban jelentette meg a CSS első változatát a CSS1-et, majd 1998-ban a továbbfejlesztett CSS-2 t. Ezeket a stíluslapokat be lehet ágyazni a HTML kódunkba illetve hivatkozni lehet egy külső CSS-re. Rengeteg sok tulajdonságot lehet változtatni a stíluslapokkal. Az én esetemben szimpla szövegeket fogok formázni. Nézzük meg mely tulajdonságok formázását támogatja a Flash: text-align- A szöveg jobbra, balra, középre zárása, ill. sorkizárttá tétele font-size- A szöveg méretének meghatározása px vagy pt méretben text-decoration- Ezzel lehet az aláhúzást beállítani margin-left és margin-right – A bal és jobb oldali margó beállítása font-weight- A betű félkövérré tétele kerning- Szóközökkel való feltöltés. Két értéke igaz vagy hamis ( true or false) font-style- Ezzel lehet a betűt dőlt stílusúvá tenni. letterSpacing- Betűköz beállítása text-indent- Szöveg behúzása font-family- Betűtípus baállítása color- Betű színének beállítása Nézzük tehát a kódot aminek segítségével behívom a szöveget és a rá ültetett stíluslapot. Ezt a kódot az alsoresz_mc actions rétegének 2. kulcskockájára írom. //megállítom a mozit stop(); //létrehozok egy változót, ami egy szövegmező stíluslapja lesz, beletöltöm a stilus.css stíluslapot, és a content_txt példánynevű szövegdobozomhoz rendelem. var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("stilus.css"); content_txt.styleSheet = myStyle; //Beállítom a szövegkezelést, hogy több sorba tördelje a szövegem, és hogy a betöltött szöveget HTML ként értelmezze content_txt.multiline= true; content_txt.wordWrap = true; content_txt.html = true;
26
//létrehozok egy tartalom nevű változót, ami egy XML dokumentumot hoz létre, a szóköz elemeket szóközként értelmeztetem, az XML-t feltöltöm a HTML dokumentumommal, és a betöltődéskor hozzárendelem a content_txt példánynevű szövegdobozomhoz. var tartalom:XML = new XML(); tartalom.ignoreWhite = true; tartalom.load("bemutatkoz.html"); tartalom.onLoad = function () { content_txt.htmlText = tartalom; } Készítsük el a HTML szövegünket és a hozzá tartozó stíluslapot. A HTML kód: DARTS INTERACTIVE A Darts Interactive 2006 nyarán alakult. A csapat azóta számos weboldalt, arculat tervet készített és hagyott hátra az utókornak. Ezek egy része nyilvános, másik pedig magán célokra készült. A csapat célja a hétköznapi standard megjelenítések mellett az előre mutató, az idáig ismeretlen dolgok keresése. Kedveljük a szélsőségeket és a meghökkentő megoldásokat is. Természetesen ez nem polgárpukkasztásról szól, mert a netikett (net + etikett) íratlan szabályi ránk is vonatkoznak. A jó ízlés és a 21. század vonalán kívánunk dolgozni. Ha hozzáállásunk felkeltette érdeklődését, vegye fel velünk a kapcsolatot. Üdvözlettel: a Darts Interactive csapata A CSS kód amit majd a későbbiekben is alkalmazni fogunk: fejlec { font-family: Arial,Helvetica,sans-serif; font-size: 18px; font-weight: bold; display: block; } 27
alfejlec { font-family: Arial,Helvetica,sans-serif; font-size: 13px; font-weight: bold; display: block; } foszoveg { font-family: Arial,Helvetica,sans-serif; font-size: 12px; display: block; } A{ font-family: Arial,Helvetica,sans-serif; color:cccccc; font-size: 12px; display: inline; text-decoration:underline; } A referenciák menüpont
Az alsoresz_mc 3. kockájába fogom elkészíteni a referenciákat bemutató részt. Először létrehozok egy movie clip szimbólumot referenciák néven amit az alsoresz_mc tartalom nevű rétgének 3. kulcskockáján fogok elhelyezni. Hat darab réteget hozok létre és ezeket elnevezem: szöveg, gombok, előtöltő, keptarto, cím, actions. Nézzük meg ezek mit tartalmaznak: Szöveg: egy dinamikus szövegdoboz szoveg példány névvel Gombok: két darab háromszög alakú gombot previous_btn és next_btn példány nevű szimbólum Előtöltő: egy preloader példány nevű szimbólum ami a megjelenő kép betöltését mutatja. Képtartó: Egy picture példány nevű üres szimbólum ami futási időben fog feltöltődni tartalommal. Cím: Egy dinamikus szövegmező cím példány névvel. Actions: Ide fog íródni a script, ami a betöltést vezérli. Irjuk meg a kódot: 28
// A terület méretének meghatározása ahol látszik a kép. var kepXmax = 170; var kepYmax = 200; //A betöltő mc x-y pozíciója kezdoX = 220; kezdoY = 60; // Először is betöltjük az XML-t, ha ez sikeres megszámoljuk a bejegyzéseket, ebből kapjuk a total értékét. A képek elérési útjait betesszük az image tömbbe, a hozzájuk tartozó leírásokat pedig a leiras tömbbe, illetve a leírás 2 tömbbe. Ha mindez megtörtént meghívjuk a elsokep függvényt, ami majd az első képet tölti be. Ha az XML betöltése sikertelen azt is jelöljük. function loadXML(loaded) { if (loaded) { xmlNode = this.firstChild; image = []; leiras = []; leiras2 = []; total = xmlNode.childNodes.length; for (i=0; ikepYmax)) { // /// Ha a kép valamelyik oldala > mint a maximális (kepXmax,kepYmax) xoldal = szelesseg-kepXmax; yoldal = magassag-kepYmax; if (xoldal>yoldal) { aranyx = kepXmax/szelesseg; picture._width = aranyx*szelesseg; picture._height = aranyx*magassag; kozepre(); } else if (yoldal>xoldal) { aranyy = kepYmax/magassag; picture._width = aranyy*szelesseg; picture._height = aranyy*magassag; kozepre(); } } else if ((szelessegxoldal) { 32
aranyx = kepXmax/szelesseg; picture._width = aranyx*szelesseg; picture._height = aranyx*magassag; kozepre(); } } } function kozepre() { // A függvény vizsgálja hogy a kép mennyivel nagyobb vagy kisebb a megadott keretnél, majd arányszámot képezve kicsinyíti illetve nagyítja a képet. //A középre függvény, ami a képet igazítja: picture._x = kezdoX+(kepXmax-picture._width)/2; picture._y = kezdoY+(kepYmax-picture._height)/2; } A partnerek menüpont
A 4. kulcskockához fog kerülni a partnerek menü eleme ami linkeket és leírásokat fog tartalmazni. Ezt szintén külső fájlból kerül betöltésre. Ez egy sima HTML kód lesz. Amit szintén stíluslappal fogok megformázni. Ugyan azzal amit már eddig is használtam. Így teszem lehetővé, hogy könnyen lehessen alakítani az oldal kinézetét. A partner_txt példánynevet kapja a dinamikus szövegdodoz. A szöveg mellé egy görgető sávot helyezek ki. A komponensek közül a User Interface-en belül az UIScroll Bar nevezetűt választom és egyszerűen a dinamikus szövegdobozomra húzom. A betöltéshez használt kód: stop(); var myStyle:TextField.StyleSheet = new TextField.StyleSheet(); myStyle.load("stilus.css"); partner_txt.styleSheet = myStyle;
partner_txt.multiline= true; partner_txt.wordWrap = true; partner_txt.html = true;
var tartalom:XML = new XML(); 33
tartalom.ignoreWhite = true; tartalom.load("partnerek.html"); tartalom.onLoad = function () { partner_txt.htmlText = tartalom; } A HTML kód: -----------------------------FELTÖLTÉS…. A kapcsolatok menüpont
Az 5. kulcskockához fogom a beépített levélküldő rendszert beépíteni ami a php-val való levélküldés lehetőségeit fogja kihasználni. Két szimbólumra lesz szükségünk: egy movie clip-re (neve: mail) és egy gombra (neve: küldés). A movie clip fogja tartalmazni a levelező-felületet, amelyen a négy bemeneti szövegdoboz szerepel. Készítsük el az grafikát a beviteli mezőkkel (neved, email címed, tárgy, üzenet), majd a küldés gombot. Ezután a gombot helyezzük el a mail clip-ben. A szövegek beviteléhez készítsük el a szövegmezőket a következő módon: 1. Hozzunk létre egy új layer-t. 2. Helyezzük el az első mezőt, és állítsuk be a Character panelen a szöveg tulajdonságait: o
Character: Arial, 10 pixel, fekete;
o
Text Options: Input text, Single line, Variable: Nev, Max. chars: 60;
o
Paragraph: balra zárt.
o
Ezzel azt állítottuk be, hogy a szöveg bevitelkor a 'Nev' változónak felel meg.
3. A következő mező az email-é. A beállítások ugyanazok, kivétel: Variable: Email. 4. A harmadik mező a tárgy. Beállításokban itt a Variable: Targy, Max. chars legyen több, 60, hogy hosszabb szövegeket is be lehessen írni. 5. A negyedik mezőbe kerül majd maga az üzenet. Itt a Variable: Szoveg, a Text Options-nál: Multiline, Word wrap (itt már többsoros szöveget lehet beírni), a Max. chars legyen 0, ezzel nincs limitálva a szöveg hossza. Adjuk meg példánynévnek a mail_txt-t és húzzunk rá a szövegdobozunkra egy görgetö sáv komponenst (UI Scroll Bar). Ez arra szolgál, hogy ha több szöveget szeretnénk írni akkor vissza lehessen görgetni az elejére. Létrehoztuk tehát a négy szövegmezőt,
34
amelyben a bevitt szövegeket mint értéket veszik fel a változók, a Nev, Email, Targy, Szoveg. 6. Egy rétegre létrehozom a beviteli szövegmezők neveit: Küldő neve, E-mail címe, Tárgy 7. Ezután még egy mezőt kell létrehozni, amelyben hibaüzeneteket és a küldéssel kapcsolatos visszajelzéseket jeleníthetünk meg. Helyezzük el ezt a mezőt a Küldés gomb
közelébe.
A szövegbeállítások: o
Character: Arial, 12 pixel, vörös;
o
Text Options: Dynamic text, Multiline, Word wrap, Variable: Visszajelzes, Max. chars: 0;
o
Paragraph: balra zárt.
A gombra a következő kódot írom: on (release) { if (!Email.length || Email.indexOf("@") == -1 || Email.indexOf(".") == -1) { Visszajelzes = "Kérem, adjon meg egy valódi email címet!"; } else if (!Nev.length) { Visszajelzes = "Kérem, adja meg a nevét!"; } else if (!Targy.length) { Visszajelzes = "Az üzenetnek nincs tárgya!"; } else if (!Szoveg.length) { Visszajelzes = "A levél nem tartalmaz szöveget!"; } else { loadVariablesNum ("mail.php", "0", "POST");
35
Visszajelzes = "Levél küldése folyamatban..."; } } Kattintáskor a script elsőként az 'Email' változót vizsgálja: !Email.lenght - azt jelenti, hogy nem írtunk a címbe semmit; Email.indexOf("@") == -1 - azt jelenti, hogy nincs a címben @; az Email.indexOf(".") == -1 pedig azt jelenti, hogy nem írtunk a címbe pontot. Ha ezek igazak, akkor a 'Visszajelzes' változó egyenlő lesz a "Kérem, adjon meg egy valódi email
címet"
üzenettel,
amely
a
Küldés
gomb
mellett
azonnal
kiíródik.
Ha a feltétel hamis, akkor a script továbblép a következő vizsgálatra, a névre, majd a tárgyra, végül a szövegre. Ha minden feltétel hamis (tehát nem igaz az, amit a script feltételez, hogy nem írtunk semmit a mezőkbe), akkor a loadVariablesNum ("mail.php", "0", "POST") elküldi a változókat a mail.php-ba, és a 'Visszajelzes' változó egyenlő lesz a Levél küldése folyamatban..." üzenettel. A PHP kód amit egy szimpla jegyzettömben írunk meg a következő lesz: A változók amiket a flash-ből kap meg a php: Nev, Email, Targy, Szoveg. A PHP pedig generálja ToEmail, ToName.Az első 4 sorban a változók átvétele történik. Az ötödik sorban ($ToEmail =
[email protected] ";) szerepel a cél, erre a címre megy a
36
levél.A hatodik sor a címzett neve ($ToName = " Nagy Dániel ";).A hetedik sor a levélküldés (mail($ToName." ",$Targy, $Szoveg, "From: ".$Nev." "); A nyolcadik pedig a küldés befejezése utáni visszajelzés (Print "_root.also_mc.Visszajelzes=A levél küldése befejeződött.";), amely a mail instance name-mel jelzett clipben a Küldés gomb mellé íródik ki.
37
