Analóg óra készítése Photoshop és Flash segítségével, Flash rész

Az 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.

Flash fájlok letöltése

Sok sikert! Hamarosan jön pár sor a SWFObject használatáról.