Programozás | Webdizájn » Nagy Dániel - Komplex weblap készítése

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.actinthu/kompetenciak/grafikai es latvanytervezes/arculattervezesphp?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.gamechannelhu/modulesphp?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.85129104/search?q=cache:mhPItq6FXRcJ:zdavidakghu/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.fotomagazinhu/letoltes/d f m/0000/Photoshop1pdf 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: 2737, 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.percentContainpercent = Mathround(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.filtersGlowFilter; //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.percentContainpercent >= 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=2574, X=388, Y=128 A logó záró pozíciója és mérete: W=74.3, H=1118, X=3169, Y=586 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.transitionsTween (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.transitionsTween; //also mc new Tween(also mc,

" y", mx.transitionseasingElasticeaseOut,650, 170,2, true); //also mc vege //felso mc new Tween(felso mc, " y", mx.transitionseasingElasticeaseOut,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.transitionsTween; //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.transitionseasingElasticeaseOut, 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.transitionseasingElasticeaseOut, 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.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button2 mc.onRollOut = function() { new Tween(button2 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb2 Vége //gomb3 button3 mc.onRollOver = function() { new Tween(button3 mc, " x",

mx.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button3 mc.onRollOut = function() { new Tween(button3 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb3 Vége 19 //gomb4 button4 mc.onRollOver = function() { new Tween(button4 mc, " x", mx.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button4 mc.onRollOut = function() { new Tween(button4 mc, " x", mx.transitionseasingElasticeaseOut, 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 mconRelease = 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 globaltarolo 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 mconRelease = function() { global.tarolo = "3"; trace( global.tarolo); gotoAndPlay(25); }; root.button3 mconRelease = function() { global.tarolo = "4"; trace( global.tarolo); 20 gotoAndPlay(25); }; root.button4 mconRelease = function() { global.tarolo = "5"; trace( global.tarolo); gotoAndPlay(25); }; A global.tarolo változó a későbbiekben egyenlő lesz a globalmyVar 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 = globaltarolo; // 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 mcgotoAndStop(myVar); }; import mx.transitionsTween; // 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.transitionseasingElasticeaseOut, 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.transitionsTween; 21 //gomb1 button1 mc.onRollOver = function() { new Tween(button1 mc, " x", mx.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button1 mc.onRollOut = function() { new Tween(button1 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb1 Vége //gomb2 button2 mc.onRollOver = function() { new Tween(button2 mc, " x", mx.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button2 mc.onRollOut = function() { new Tween(button2 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb2 Vége //gomb3 button3 mc.onRollOver = function() { new Tween(button3 mc, " x", mx.transitionseasingElasticeaseOut, 680, 690, 1, true); }; button3

mc.onRollOut = function() { new Tween(button3 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb3 Vége //gomb4 button4 mc.onRollOver = function() { new Tween(button4 mc, " x", mx.transitionseasingElasticeaseOut, 680, 690, 1, true); 22 }; button4 mc.onRollOut = function() { new Tween(button4 mc, " x", mx.transitionseasingElasticeaseOut, 690, 680, 1, true); }; //gomb4 VÉGE //Gombok Mozgatása Vége root.button1 mconRelease = function() { global.tarolo = "2"; trace( global.tarolo); gotoAndPlay(25); }; root.button2 mconRelease = function() { global.tarolo = "3"; trace( global.tarolo); gotoAndPlay(25); }; root.button3 mconRelease = function() { global.tarolo = "4"; trace( global.tarolo); gotoAndPlay(25); }; root.button4 mconRelease = 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 25kocká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 = globaltarolo; // myVar változó egyenlővé tétele a tarolo változó értékével root.onEnterFrame = function() { root.also mcgotoAndStop(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 (<a>)Az <a> 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 (<b>) <b>a szöveges elemeket félkövérré teszi. Például a kódban szereplő “<b>Félkövér szöveg</b>” 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 (<br>) A <br> tag sortörést csinál a szövegben. Font tag (<font>) A <font > 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 (<img>) Az <img> lehetővé teszi hogy külső képeket (Jpeg), és külső Flash mozikat (SWF) töltsünk be. Italic tag (<i>) Az <i> tag dőlt stílust ad a szövegünknek List item tag (<li>) Az <li>tag Lista elemeket készít Paragraph tag (<p>) Az <p> Új bekezdést hoz

létre Underline tag (<u>)AZ<u> 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 TextFieldStyleSheet(); myStyle.load("stiluscss"); 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("bemutatkozhtml"); 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: <body> <fejlec>DARTS INTERACTIVE </fejlec> <img align=rightsrc=logo.swf/> <br> <foszoveg>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 </foszoveg> </body> 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.childNodeslength; for (i=0;

i<total; i++) { image[i] = xmlNode.childNodes[i]childNodes[0]firstChildnodeValue; leiras[i] = xmlNode.childNodes[i]childNodes[1]firstChildnodeValue; leiras2[i] = xmlNode.childNodes[i]childNodes[2]firstChildnodeValue; } elsokep(); } else { szoveg.text = "Nem töltődött be a kép adatbázis!"; } } xmlData = new XML(); xmlData.ignoreWhite = true; xmlData.onLoad = loadXML; 29 xmlData.load("imagesxml"); // A gombok megnyomásával hívjuk meg az elozo-kovetkezo függvényeket. Szükségünk van még egy onEnterFrame függvényre, ami egyrészt felel a preloader-ért, valamint a betöltött képünk méretéért, a betöltött kép láthatóságáért, és meghívja a presel függvényt, ami a képet húzza össze a kívánt méretre. previous btn.onRelease = function() { elozo(); }; next btn.onRelease = function() { kovetkezo(); }; //Mindig lefut p = 0; this.onEnterFrame = function() { filesize = picture.getBytesTotal(); loaded = picture.getBytesLoaded();

preloader. visible = true; if (loaded != filesize) { preloader.preload bar xscale = 100*loaded/filesize; } else { preloader. visible = false; szelesseg = picture. width; magassag = picture. height; presel(); // /A présel függvényünk, ami scalezi majd a képeket if (picture. alpha<100) { picture. alpha += 5; } } }; // Folyamatosan figyeljük, hogy a kép letöltődött-e, ha igen, akkor eltüntetjük a preloaderünket, a szelesseg, magassag megkapja a betöltött kép méretét, majd meghívjuk a presel függvényt. Ha a kép átlászó, fokozatosan növeljük az alpha értékét amíg el nem éri a teljes értéket. 30 function kovetkezo() { if (p<(total-1)) { p++; if (loaded == filesize) { picture. alpha = 0; picture.loadMovie(image[p], 1); szoveg.text = leiras[p]; cim.text = leiras2[p]; kepszam(); } } } // A gombnyomástól függően növeljük vagy csökkentjük p értékét, és az aktuális p-hez tartozó értékek alapján betöltjük a képet és a szoveg txt-énk

is megkapja a leírás tömbben tárolt értékét. A végén meghívjuk a kepszam függvényt, amit majd a pozíció kiírásáért felel. function elozo() { if (p>0) { p--; picture. alpha = 0; picture.loadMovie(image[p], 1); szoveg.text = leiras[p]; cim.text = leiras2[p]; kepszam(); } } // Az első kép, szöveg és cím betöltése function elsokep() { if (loaded == filesize) { picture. alpha = 0; picture.loadMovie(image[0], 1); szoveg.text = leiras[0]; cim.text = leiras2[0]; kepszam(); 31 } } // Most pedig a számláló függvénye, ami az aktuális pozíciónkat mutatja: function kepszam() { aktualis pos = p+1; position.text = aktualis pos+" / "+total; } // A képek scalezéséért felel function presel() { if ((szelesseg>kepXmax) || (magassag>kepYmax)) { // /// 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 ((szelesseg<kepXmax) || (magassag<kepYmax)) { // // Ha a kép valamelyik oldala kisebb mint a maximális xoldal = kepXmax-szelesseg; yoldal = kepYmax-magassag; if (xoldal>yoldal) { aranyy = kepYmax/magassag; picture. width = aranyy*szelesseg; picture. height = aranyy*magassag; kozepre(); } else if (yoldal>xoldal) { 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 TextFieldStyleSheet(); myStyle.load("stiluscss"); 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("partnerekhtml");

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 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; Paragraph: balra zárt. o A gombra a következő kódot írom: on (release) { if (!Email.length || EmailindexOf("@") == -1 || EmailindexOf("") == -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: <? $Nev = $ POST[Nev];

$Targy = $ POST[Targy]; $Szoveg = $ POST[Szoveg]; $Email = $ POST[Email]; $ToEmail = "nagy daniel19@freemail.hu"; $ToName = "Nagy Dániel"; mail($ToName." <"$ToEmail">",$Targy, $Szoveg, "From: "$Nev" <"$Email">"); print " root.also mcVisszajelzes=A levél küldése befejeződött"; ?> 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 = nagy daniel19@freemail.hu ";) 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." <"$ToEmail">",$Targy, $Szoveg, "From: "$Nev" <".$Email">"); A nyolcadik pedig a küldés befejezése utáni visszajelzés (Print " root.also

mcVisszajelzes=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