Analóg óra készítése Photoshop és Flash segítségével, Flash rész
Írta: Tas | 2011. június 30. | kategóriák: FlashAz előző részben létrehoztunk egy analóg órát Photoshop segítségével. Ebben a részben az Adobe Flash tudásával életre keltjük.
II. rész Flash
1.) Hozz létre egy új dokumentumot – Flash file (Actionscript 3.0). A színpad mérete megegyezik az óra méretével, a színpadon jobb klikk->Document properties majd állítsd be a 300px x 300px méretet.
Kettő darab rétegre lesz szükség az idővonalon: egy Óra és egy Script nevűre. Miután ezek megvannak mentsd el az egészet AnalogClock.fla néven
2.) Következő lépésként be kell importálni a már meglévő PSD fájlt. Ehhez válaszd a File->Import->Import to library menüpontot. Tallózd be az AnalogClock.psd fájlod, majd megnyitás. Mielőtt az importálás megtörténne beállíthatunk néhány dolgot. Az import option ablakban láthatóak a Photoshop által létrehozott rétegek. A búra réteget kiválasztva, az ablak másik felén jelöld be a Bitmap image with editable layer styles opciót. Ugyanígy a számok rétegnél is.
A másodperc, perc, óra mutatóknál pipáld be a Create movie clip for this layer-t és a regisztrációs pont: alsó sor középső pötty.
Ezzel automatikusan létrejönnek a movie clip szimbólumok. A példány nevek (instance_name) a következők legyenek:
- másodperc_mutató – mp_mutato
- perc_mutató – perc_mutato
- óra_mutató – ora_mutato
3.) Váltsunk át a library ablakba (Windows->Library), sikeres importálás után kell lennie egy AnalogClock.psd nevű szimbólumnak és egy AnalogClock.psd Assets mappának. Az idővonalon az Óra réteg legyen kijelölve, majd a library ablakból húzd be az AnalockClock.psd szimbólumot a színpadra.
4.) Dupla klikk a behúzott szimbólumon, így most láthatod külön a rétegeket. Három réteg fog csak animálni, az összes többit zárolhatod, így biztos nem fogod elmozdítani stb. Ez a három réteg – gondolom már kitaláltad – a három mutató. A Photoshop rétegekhez hasonlóan, itt is a kis lakattal lehet zárolni az összes réteget egyszerre, valamint a kis szemmel a megjelenítést tudod ki-be kapcsolgatni. A kis fehér pötty (segéd pont) most fog segíteni egy picit. Ez a réteg a mutató rétegek alatt van, tehát nem látszik. Egyszerűen ragadd meg ezt a réteget és húzd a másodperc_mutató réteg fölé. A mutatókon kell egy kicsit “reszelni”, hogy a forgáspontjuk megfelelő legyen. Mielőtt ezt megtennénk nézzük meg a problémát.
5.) Navigálj vissza a fő idővonalra a Scene 1 gombra kattintva és jelöld ki a Script réteget.
Összedobunk egy kis kódot, amely a forgatást fogja csinálni. Nyisd meg az action ablakot (Window->action), majd gépeld be az alábbi kódot.
// Ez fogja meghívni az ora fuggvényt folyamatosan this.addEventListener(Event.ENTER_FRAME, ora); function ora(e:Event) { // A mutato movie clip forgatasa 1 fokonkent this.mp_mutato.rotation += 1; } |
Teszteld a mozit (CTRL+ENTER) és látni fogod, hogy mi a probléma. A mutató alján van a forgáspont, de az nem egyenlő az óra közepével – ezért lóg ki a mutató forgásnál. A következőkben beállítjuk a helyes regisztrációs pontot és a mutató pozícióját.
6.) Nyisd meg az AnalogClock.psd graphic szimbólumot a library ablakból vagy dupla klikk a színpadon lévő órára. A másodpercdmutatót told fel addig, amíg a regisztrációs pontja (kis kereszt) egy pontba esik a segéd ponttal. A forgáspont most már jó helyen van, de a mutató még nem, vissza kell húzni a helyére.
7.) Kattints duplán a másodpercmutatóra, így magát a grafikát tudod csak mozgatni – a regisztrációs pont nem fog változni. Húzd le a mutatót egészen addig, amíg a mutató hegye le nem ér a skáláig.
8.) A másik két mutatóval a fentebb leírtak szerint járj el. A pozíciókat úgy állítottam be, hogy az óra mutató teteje a 10 óra és a 2 óra vonalában van, a perc mutató pedig a 12-es felirat felénél. Miután megvan a segéd pont láthatóságát kapcsold ki, majd a másodpercmutató réteget húzd le az óra réteg alá – talán egy kicsit jobban néz így ki. Ezzel a grafikai résszel meg is vagyunk. Menj vissza a fő idővonalra és jelöld ki a Script réteget, majd válts át az action ablakra.
9.) Kicsit módosítani kell a kódon és kész is van az óra. Az idő lekéréséhez a Date osztály tagfüggvényeit fogjuk használni, majd kiszámoljuk a forgatási fokokat.
A másodpercmuatót 6°-kal kell forgatni, mivel 360° a számlap és 60 másodpercünk van: 360:60=6. A percnél ugyanez a helyzet. Az óra mutatót 30°-kal kell forgatni, mert csak 12 óránk van: 360:12=30. A teendő annyi, hogy annyi fokkal kell forgatni a mutatókat amennyi másodpercnél, percnél vagy óránál járnak. Például ha 10 másodpercnél járunk a mutató 10*6, 11 másodpercnél 11*6 stb. Végül jöjjön a kód ami ezt megteszi. Az első verzió egy “kattogós”, a második egy “folyamatos” óra :).
// Ez fogja meghívni az ora fuggvényt folyamatosan this.addEventListener(Event.ENTER_FRAME, ora); function ora(e:Event) { // Date példányosítása var datum:Date = new Date(); var mp:int = datum.getSeconds(); // másodpercek lekérése var perc:int = datum.getMinutes(); // percek lekérése var ora:int = datum.getHours(); // órák lekérése // Mutatók forgatása, az aktuális időérték szorozva a kiszámolt fokkal this.mp_mutato.rotation = mp*6; this.perc_mutato.rotation = perc*6; this.ora_mutato.rotation = ora*30; } |
// Ez fogja meghívni az ora fuggvényt folyamatosan this.addEventListener(Event.ENTER_FRAME, ora); function ora(e:Event) { // Date példányosítása var datum:Date = new Date(); var mp:int = datum.getSeconds(); // másodpercek lekérése var perc:int = datum.getMinutes(); // percek lekérése var ora:int = datum.getHours(); // órák lekérése var ms:int = datum.getMilliseconds(); // millisec // Mutatók forgatása, az aktuális időérték szorozva a kiszámolt fokkal // plusz hozzáadjuk a törtrészeket, hogy "folyamatosan" menjenek this.mp_mutato.rotation = mp*6 + ms*0.006; this.perc_mutato.rotation = perc*6 + mp/10; this.ora_mutato.rotation = ora*30 + perc/2; } |
10.) Sikeres tesztelés után már csak publikálni kell a mozit és kész is vagy. Válaszd a File->Publish Settings… menüpontot, majd a felugró ablakban a Formats fülön csak a Flash (.swf) opció legyen bepipálva. A Flash fülön van egy tucat opció, én nem foglalkoztam vele, de ami fontos lehet az a Player: Flash Player 10 és az Script: ActionScript 3.0. Miután ezek megvannak kattints a Publish gombra, ezzel létrejön az AnalogClock.swf fájl a munkakönyvtárban.
Sok sikert! Hamarosan jön pár sor a SWFObject használatáról.