Új fájl (dokumentum) létrehozása a Flash CS6-ban. Flash játékok készítése Flash animáció készítése

Flash site ndash létrehozása; elég bonyolult a dolog. Ehhez sok területen kell tudás: programozás, számítógépes grafika, az oldalak optimalizálásának, népszerűsítésének alapjai, magát a flash-t is jól kell ismerni, végeredményben mind a fejlesztői környezet, mind a programozási nyelv action script 2.0 tudásszintjén. vagy a 3.0-s akciószkriptet, amely jelenleg magasabb prioritású.
A Flash-alkalmazásokat az Adobe Flash Professional ndash-ban fejlesztették ki; egy multimédiás program, amely tartalmak, például webes alkalmazások, filmek, játékok, mobilalkalmazások és egyéb beágyazott eszközök létrehozására szolgál.
Flash ndash; egyedülálló jelenség. Korábban ezt a terméket "Macromedia Flash"-nek hívták, az Adobe felvásárlása után ez a program 2005 óta "Adobe Flash" néven vált ismertté. A flash animációt weboldalak streamelésére használják. Néha flush ndash; ez a html oldal része, és előfordul, hogy a teljes oldal Flash-ben készült, vagy a teljes oldal ezzel készült. Az így létrejövő Flash fájlok speciális swf („ShockWave Flash”) fájlok, amelyekhez speciális ingyenes böngészőbővítmények szükségesek a tartalom megtekintéséhez, ezek egyszerűen és gyorsan letölthetők és telepíthetők az Adobe hivatalos weboldaláról. A flash filmek előnye a nagyon gyors betöltés és a vektoros animáció interaktivitással történő munkavégzése volt. A vakut azelőtt lehet betölteni, hogy a teljes videó megjelenne a képernyőn, vagyis az animáció nézésének megkezdésekor megvalósítható az opció, és a képernyőn megjelenő többi "stream" a háttérben töltődik be.
A vektorban használt flash grafika plusz a programkód lehetővé teszi egy olyan teljes értékű alkalmazás elkészítését, amely képes helyettesíteni bizonyos rasztereket, videó töredékeket, programkódokat, de sokkal optimálisabbá teszi, kevesebb sávszélességet használnak a streamek, kisebb a processzor teljesítmény fogyasztják. A Flash Player (a Flash filmek megtekintéséhez szükséges lejátszó) a vektoros renderelésen kívül tartalmaz egy virtuális gépet (ActionScript Virtual (AVM)), amely támogatja a futásidejű interakciós szkripteket, és támogatja a videót, az mp3-at is.
Tekintsük a meglévő grafikai típusokat, és emeljük ki a vektorgrafikák előnyeit, amelyekkel a Flash közvetlenül működik.
Minden grafika három típusra osztható: raszteres, vektoros, 3D. A rasztergrafikában, akárcsak a TV-monitoron, minden kép kis ndash elemek halmazából áll; pixel ndash; a képelem rövidítése.
A pontgrafika elve nagyon egyszerű: ahogy a gyerek az iskolában cellákba rajzol, csak itt ezek a cellák sokkal kisebbek. Ez a fajta grafika mind a megvalósításban, mind a feldolgozásban és megjelenítésben egyszerű, technikailag kényelmesen megvalósítható, automatizálható a képi információk bevitele vagy digitalizálása.
De a rasztergrafikának vannak hátrányai: terjedelmes, a fájl súlya ennek következtében megnő, és a kép kicsinyítése vagy nagyítása esetén a kép minősége romlik.
A grafikus információk kódolása a vektorgrafikában eltérő: minden kép ndash kontúrként van megadva; matematikai objektumok. Ezek a kontúrok független objektumok, amelyek mozgathatók, átméretezhetők, méretezhetők és tetszőleges számú alkalommal. A vonalakat kezdőpontok, képletek állítják be, amelyek magukat a vonalakat jelzik. Ennek köszönhetően a minta megváltoztatásakor az arányok mindig pontosan megmaradnak. A vektorgrafika is objektum-orientált grafika, mert a rajz egyedi objektumokból áll - egyenes és íves vonalakból, ellipszisekből, téglalapokból, zárt és nyitott formákból stb., amelyeknek megvannak a sajátosságai a körvonalvastagság, szín, vonalstílus stb. d.
A vektorgrafika erőforrások szempontjából gazdaságos, képletek formájában tárolják az információkat, és nem az egyes pontokhoz tartozó információkat, a színleírások nem növelik jelentősen a fájl méretét. A vektorgrafikák könnyen módosíthatók, gyakorlatilag a képminőség romlása nélkül. A grafikának vannak olyan területei, ahol a tiszta kontúrok megőrzése alapvető fontosságú, például logók készítésénél, betűtípusoknál stb.
A vektor teljes mértékben kihasználja az összes kimeneti eszköz, például a nyomtató felbontását. A kép mindig kiváló minőségű, tiszta, minden csak a nyomtatón múlik.
Szintén a vektorgrafika előnyének nevezhető, hogy könnyen rasztergrafikává alakítható, fordítva viszont nem! És tartalmazhat rasztergrafikus objektumokat, bár nem dolgozható fel ugyanazokkal az eszközökkel.
A vektorgrafika komoly előnye a szöveg és a képek integrálásának eszköze, egy megközelítés, illetve a végtermék létrehozásának képessége. A legnépszerűbb vektorgrafikus szerkesztők a CorelDRAW, az Adobe Illustrator és természetesen az Adobe Flash.
A valósághű képek létrehozásakor a vektor korlátozott: tiszta és karikatúraszerű ndash; igen, de így kell megfogalmazni a fenyőfát vagy a felhőt. Probléma adódik a grafikus információk bevitelénél is: például a szkenner pixelenként továbbítja az információt a képről: az egyes pontok elhelyezkedését és színét a fénysugár reakciójától függően. Nem takarhat tárgyról objektumra, és nem minden kép formalizálható, ahogy fentebb is írtam.

A Flash általánosan népszerűvé vált ndash; rajzfilm bannerek szinte minden weboldalon megjelennek. Interaktívak, animációt játszanak és kevés lemezterületet foglalnak el, ami fontos a hálózaton végzett munka során.
Az animáció úgy jön létre, hogy minden egyes flash-kockát meghatározott ideig megjelenít. Ha sok a képkocka, a mozgás illúziója jön létre. A korábbi flash technológiák GIF-animációk jelentek meg, de a Flash lehetőségei sokkal szélesebbek. Így segítségével navigációs elemeket, hangos rajzfilmeket, animált logókat, számológépeket, egész oldalakat készíthetsz különféle interaktív elemek halmazával, és milyen animációs csodákat lehet flash-en létrehozni: nagyon lenyűgözőek, és más webes technológiák nem dicsekedni ilyen képességekkel.
A flash animációkat filmeknek nevezzük. Az animációs lehetőségek nem korlátozódnak az animációra, különféle objektumok animálva vannak: menük, képek, hivatkozások, szövegek.
A program indulásakor megnyílik egy ablak munkaterülettel és eszköztárral, valamint további, munka közben csatlakoztatható ablakokkal. Megjelennek az idővonallal való munkavégzés, a hibaellenőrzési beállítások stb. fülei is. A programban a filmek rajzolással vagy kész rajzok importálásával készülnek, az ndash munkaablak egy speciális területére kerülnek; jelenet (Stage) és a keretek az Idővonal (idővonal) segítségével jönnek létre.
Egy filmben több jelenet is lehet; amikor elindítja a filmet, azok a létrehozásuk sorrendjében kerülnek lejátszásra, kivéve, ha ezt a sorrendet szándékosan módosították. Ez lehetővé teszi az egyes epizódok kényelmes és gyors megváltoztatását, sorrendjének megváltoztatását.
Maga az animáció az egymás után következő képkockák, tartalmuk megváltoztatásával történik, vagyis a szükséges paraméterekkel rendelkező objektumok kerülnek a keretbe. A színpadon lévő tárgyak forgathatók, helyzetük, színük, átlátszóságuk, formájuk, méretük állítható, ugyanez megtehető bármilyen más tárggyal is.
Animáció a következő módokon hozható létre:
Képkockánkénti animáció ndash; a rajz minden keretben kézzel történik, és a keretek sorban mennek;
számított (Tweened Animation) ndash; csak a kezdeti és a végső képkocka készül (az úgynevezett kulcskeret), és ezek közé a program maga épít kereteket; kétféle ilyen animáció: mozgás (Motion Tweening, amikor a mozgás paraméterei változnak, fordulás, méret, pozíció), alakzatok (Shape Tweening);
programozottan ndash; amikor az objektum megváltoztatásának paramétereit az Action Script programozási nyelv parancsaival állítjuk be.
A filmen való munka során az eredeti adatok egy speciális, .fla kiterjesztésű fájlba kerülnek. Ebbe beletartozik a jelenet az összes objektummal, valamint további paraméterek a filmben nem szereplő, de abban létrejött objektumokról, valamint hangbeállítások, megjegyzések, script kódok, programbeállítások stb. Egy ilyen forrás létrehozása után le kell fordítania az internetes ndash számára megfelelő formátumra; mégpedig SWF, tehát közzétesszük a filmet vagy lefordítjuk a kódot. Ez eltávolítja a fájlból azokat az információkat, amelyek nem szükségesek a film kívánt formájának lejátszásához. Így a fájl mérete minimális lesz, és a felhasználó gyorsan betölti. Egy ilyen fájl külön is megnyitható az ndash segítségével; a lejátszó lejátssza, de bármelyik html oldalhoz csatlakoztathatod objektumként.

A film előregyártott ndash elemekből készül; szabványok (Szimbólumok) vagy szimbólumok. A hivatkozás olyan kép, gomb, animáció, filmklip, amelyet többször is használnak egy videóban. Létrehozhatók vagy importálhatók. Létrehozásuk után a szimbólumokat egy speciális ndash tárolóban tárolják; könyvtár. A film összeállítása során azokon a helyeken, ahol szükséges, a szabványok példányai (példányai) (amelyek a könyvtárban vannak tárolva) kerülnek beillesztésre, nem pedig minden alkalommal teljesen. És tetszőleges számú alkalommal és bárhová beillesztheti őket. Ebben az esetben tetszés szerint módosíthatja a példány paramétereit: hely, méret, lépték, elforgatás, hajlítás, átlátszóság, tónus stb., miközben maguk a referenciaszimbólumok nem változnak. Ez nagyon kényelmes ndash; nem kell minden alkalommal újra létrehozni vagy másolni egy elemet, az elem egy, és tetszőleges számú módosítása van. A publikálás során pedig az swf formátumban elkészített végleges videó fájlja úgy összeáll, hogy egy helyen közvetlenül egy referencia objektum lesz, a többiben pedig ndash; csak mutat rá. Képzeld el, mennyivel csökken így a videó súlya a szinte azonos elemek másolásához képest.
A szabványok a következők:
bika; Filmklip (moviklip) ndash; hangot, grafikát, animációt tartalmaz, programozottan scriptelhető;
bika; Grafikus (Grafikus) ndash; statikus rajzok, animáció, hang, de nem programozottan vezérelt;
bika; Gomb (gomb) - képeket, hangot tartalmaz; más típusú szimbólumhivatkozásokhoz képest csak négy keretet tartalmaz, amelyek a gomb állapotának változásait mutatják különböző egéresemények esetén.
A referenciaszimbólum közvetlen létrehozása előtt be kell állítani a típusát, később módosítható.
A hivatkozási szimbólumokon és azok példányai mellett a film tartalmazhat képeket külső fájlokból, betűtípusokból.
A teljes videó Adobe Flash ndash-ban; ez a képkockák sorozata (Frames), ezek sorra jelennek meg a megadott sebességgel. Az Idővonal segítségével dolgoznak. A skála bal oldalán találhatók azok a rétegek, amelyek nevét be kell állítani, a jobb oldalon ndash; objektumként kitöltött üres keretek halmaza jön létre és kerül a színpadra. Amint a keret megtelt tárgyakkal, színe szürkére változik. A kulcskockákat fekete pont jelzi. Az idővonalon az aktuális keretet egy piros ndash jelölő jelöli; egy játékfej, amelyen egy vékony vörös vonal halad át függőlegesen, amely keresztezi az összes réteget és a laquót; látja a traquo-t; mindegyikben az aktuális keret. Ezek a képkockák, azaz a tartalmuk filmklipek formájában jelennek meg a képernyőn.

Az interaktivitás és a teljes értékű webhelyek létrehozásának megvalósítása érdekében az Adobe Flash az Action Script programozási nyelvet használja.
A film interaktívvá tételéhez a Flash forgatókönyv-programokat (script-script) használ, amelyek utasításokat (műveleteket) tartalmaznak az ActionScriptben, és akkor hajtódnak végre, ha bizonyos események bekövetkeznek: a felhasználó megnyom egy gombot, elér a film egy bizonyos képkockájához, reakciók az egér mozgására, görgőjére, a mutató elhelyezése egy adott területre és még sok más. A szkriptparancsok határozzák meg, hogy a Flash hogyan reagál egy esemény bekövetkezésekor.

Az esemény implementálásakor végrehajtott szkriptparancsok egy kliphez, kerethez, gombhoz vannak megadva, és ez a Műveletek (Parancsok) képernyő alján található speciális lapon (Műveletek keret, Műveletek Filmklip), Műveletek gomb.
Lehetséges események:
Gombnyomás ndash; Amikor a felhasználó megnyomja a billentyűzet billentyűit, a funkció paramétere a billentyű neve.
Lebeg (Roll Over) ndash; amikor az egérmutató az objektum felett van, de az egeret nem nyomjuk meg;
Engedje el az ndash-t; ha az egérgombot elengedjük, amikor a mutató a programozott gomb felett van, vagyis ha a felhasználó rákattint a manipulátorra laquo;mouseraquo;;
Nyomja meg az ndash gombot; ha az egérgombot (balra) lenyomja, miközben a mutató a programozott gomb felett van. Ebben az esetben a működési területet veszik figyelembe, és nem annak látható képét, ezt a Hit keret határozza meg;
Távolítsa el (Roll Out) ndash; a gomb felett volt egy egérmutató, nem nyomták meg, és az egeret leveszi a programozható gombról;
Shift (Kihúzás) - az egérgombot az objektum fölé helyezzük, lenyomjuk és eltávolítjuk;
Release Outside ndash; ha az egérgombot megnyomták az objektumon, majd a felhasználó az objektumon kívül engedte el;
Drag Over ndash; mutatót helyezünk az objektumra, a bal egérgombot lenyomjuk, és nem engedjük el, hanem a mutatót az objektum mögé vezetjük, majd ismét visszatérünk.

Az ActionScript 3.0 nyelv az ActionScript 2.0-hoz képest modernebb, mivel az objektumorientált programozás alapjain alapul. Ahol a fő fogalmak egy osztály, egy objektum, annak attribútumai vagy tulajdonságai, valamint az objektumban rejlő módszerek.
Az ActionScript egy virtuális gépen (Virtual Machine ActionScript) fut, a Flash Player része.
Minden programkód alapja egy változó, amely az ActionScriptben a következőképpen van beállítva: var ndash; egy speciális Flash parancs, ami azt jelenti, hogy ebben a részben egy változót jelölünk ki, és határozzuk meg annak típusát; név ndash; változónév, szöveges-numerikus formátumban megadva, de nem számmal kezdődik; írja be az ndash parancsot; a változó típusának jelzése (numerikus - Szám, logikai ndash; Boolean, szöveg - String stb.). azaz meg kell adnia: Var x: String;
Ügyeljen arra, hogy a változó neve után kettőspontot, a sor végén pedig pontosvesszőt tegyen. A kód végrehajtása során a változó értéke, és ennek megfelelően típusa változtatható.
A nagy mennyiségű adatot tartalmazó változót tömbnek nevezzük. AC 3.0-ban. az Array: Var Mas: Array típussal van megadva.
Minden tömbelem 0-tól kezdődően számozott, így például az első elem eléréséhez meg kell adni a Mas-t. Ez azt jelenti, hogy szögletes zárójelben megadja a kívánt elem helyét a tömbben.
Maga a kód olyan függvényekből áll, amelyek leírják az adott ndash eseményen előforduló parancsok sorozatát; egérkattintás, gombnyomás, valamilyen érték elérése stb.
A függvényt a fenntartott szó függvény segítségével adjuk meg, majd megadjuk a nevét - név - tetszőleges szöveges-numerikus nevet, de nem számmal kezdődik, majd zárójelben () megadhatjuk az ndash függvény paramétereit; mi kerül rá bemenetként, ezek hiányozhatnak, majd kettőspont és a függvény által visszaadott adattípus vagy void ndash; amikor a függvény semmit sem ad vissza. Ezt követően a teljes függvénykódot kapcsos zárójelek közé ( ) írja be. És hozzáférhet a funkcióhoz, szükség esetén megadva a nevét és a paramétereit: name (). "Feltételek az AC 3.0-ban. operátoron keresztül állítjuk be, ha: if(x==y), azaz kerek zárójelben magát az összehasonlítási feltételt kell megadni. A ciklusokat a for() segítségével határozzuk meg, ahol a paraméterei zárójelben vannak megadva: a számlálóváltozó, a változás lépése.
Minden objektumot paraméterei vagy tulajdonságai jellemeznek; eseményfigyelőket csatolhat az objektumokhoz flash-ben az addEventListener funkcióval. Ez a figyelő kezeli az objektummal előforduló eseményeket, és ha az ezekre adott reakciókat a programozó leírja a függvényben, akkor a program ennek megfelelően reagál.

Ez csak egy kis része annak, amit tudnod kell egy flash-webhely létrehozásának megkezdésekor. Nem kell a semmiből létrehoznia egy webhelyet. Vannak speciális sablonok, amelyeket megvásárolhat és igényeinek megfelelően módosíthat (például a templatemonsters webhely). Ott már teljesen ki van dolgozva a dizájn, módosítani kell a tartalmat és a szoftveres megvalósításban minden átprogramozható, ami szükséges lesz. Ezután vásárolni kell egy domaint és tárhelyet, el kell helyezni egy html fájlt, amiben az swf csatlakoztatva van.
Olvasson könyveket (például a book laquo; 100%-os oktatóanyag M.Flash MXraquo; segített a munkámban és a cikkekben), tanuljon kollégáitól a fórumokon (demiart, flasher.ru), és azt is, hogy mi legyen a legelső asszisztense. segítség az Adobe hivatalos webhelyén. Az opszia nyelvű ActionScript nagyon részletes és részletes, példák láthatók, és az anyag oroszul is bemutatásra kerül.
A videó létrehozása után közzé kell tennie. A program közzétételi lehetőségeit a Fájl Közzétételi lehetőségek menüpontban állíthatjuk be. Jelzi, hogy milyen formátumokban kell feltölteni a videót, milyen minőségi beállítások vannak a grafika és a hang számára, és még sok mást. Miután megvan az swf fájl, használhatja kész alkalmazásként. A létrehozott videó módosításához, frissítéséhez szerkeszteni kell az ndash forrást; fla fájlt, és tedd közzé újra.

Szerencsére a legtöbb aktív internetező tud flash játékot készíteni. A kezdőknek már a kezdeti programozási ismeretek is sokat segítenek ebben (melyek megszerzése egyébként nem olyan nehéz - lenne rá vágy). Igaz, szüksége lesz egy kis időre, hogy elsajátítsa a sok különleges flash játéktervező egyikét (például Macromedia Flash).

Sok szoftveroldal többek között éppen ilyen konstruktorokat tartalmaz. A számítógépre történő telepítésük általában nem okoz különösebb problémákat a felhasználó számára. Ne feledje, hogy a kiválasztott programot minden szükséges változtatással regisztrálni és telepíteni kell - akkor hűségesen, azaz megszakítás nélkül szolgálja Önt. A legtöbb játéktervező angol nyelven készült, de kereshetsz egy cracket vagy egy orosz nyelvű verziót is. Gyakran magukban a beállításokban van egy ablak, ahol beállíthatja anyanyelvét.

Hogyan készítsünk flash játékot: előzetes felkészülés

Még mielőtt leülnél elsajátítani a tervezőt, már rendelkezned kell egy hozzávetőleges forgatókönyvvel a játékhoz, egy történetszálhoz. Érdemes előre átgondolni az animációt és a tervezést – ezzel jelentősen megtakaríthatja az időt. Mielőtt létrehozná a flash játékot, döntse el a kívánt típust. Inspirációért látogasson el a flash játékkönyvtárakat kínáló webhelyekre.

A szakemberek azt javasolják, hogy a kezdők egyszerű alkalmazások, például arcade játékok létrehozásával kezdjék. És csak ezután lesz lehetőség áttérni a bonyolultabb típusú játékokra, és akár saját stratégiákat is létrehozni. A jövőbeli játék típusát ugyanabban a konstruktorban választhatja ki, ahol minden műfaj kényelmesen válogatható. Aktiválja például az árkádot (dupla kattintás).

Hogyan készítsünk flash játékot: munka a játéktervezőben

Nyissa meg a sablont, és húzza rá a kívánt objektumokat az Animált objektumok és a Statikus objektumok részből. Készítsen hátteret a textúra és a szín kiválasztásával. Objektumokhoz válassza ki a színeket a színpaletta segítségével. Az Animation Player segítségével ellenőrizze, hogy mely egyéb funkciók nincsenek engedélyezve. A beállításokban állítsa be a játékkarakterek (játéktermekben) vagy tárgyak (logikai játékok) mozgási szintjét.

Miután mindent megtett, amit kell, indítsa el a hibakeresőt. Ebben a módban bármelyik szintről végigjárhatod a saját játékodat – ez fontos a teljesítmény teszteléséhez. Szüntesse meg az észlelt hibákat, és ellenőrizze újra a flash játékot. Ha minden rendben van, mentse el a módosításokat.

Hogyan készítsünk flash játékot: vidd „gondold” a játékot

Most kitalálhatsz egy eredeti nevet a flash-agyszüleményednek, írj egy rövid kommentárt. Használja a nyitóképernyő-tervezőt, hogy látványos indítóképernyőt készítsen játékához. Mentse el az elvégzett változtatásokat is.

Menj végig saját flash játékod elejétől a végéig, hogy találj (vagy ne találj) benne hibákat, meghibásodásokat, és nem árt, ha kritikusan szemügyre veszed a kézimunkádat. Nagyon fontos, hogy a játéknak legyenek logikus és jól körülhatárolható részei, mint egy jó könyvnek vagy filmnek: az eleje, az események alakulása, a vége.

Küldje el játékának tiszta verzióját barátainak – hagyja, hogy a legőszintébb kritikusok értékeljék, milyen eredményeket ért el. Nos, ezek után már lehet flash játékot feltölteni a Webre.

Hogyan készítsünk flash játékot, ha van vágyunk, de nincs tudásunk?

Annak a számos felhasználónak, akiket annyira aggaszt ez a kérdés, mindenképpen szeretnénk választ adni. Ne feledje, hogy semmilyen tudás nem származhat a semmiből. Minden új vállalkozást valahol el kell kezdeni. Idővel kezdi megérteni, milyen tudás hiányzik a játékok létrehozásához. Elkezd tanácsot kérni, ajánlásokat keresni, releváns szakirodalmat olvasni, aminek köszönhetően egyre jobban fejlődik készsége. Ne félj az újtól, különben soha nem éred el, amit szeretnél. Sok szerencsét!

Flash játékok készítésére szolgáló program programozási nyelvek ismerete nélkül. Lehetővé teszi játékok létrehozását logikai blokkokból és előre elkészített képekből.

Valamikor, valószínűleg már pár éve megjelent honlapunkon a Game Maker program, amivel gyakorlatilag semmilyen programozási nyelv ismerete nélkül lehetett játékokat készíteni!

Eddig ez az oldal volt az egyik legtöbbet vitatott nálunk, és a kommentekben gyakran olyan kifogások hangzanak el, hogy nem használható online játszható játékok létrehozására. Ma ismét visszatérünk a játékfejlesztés témájához, és fontolóra veszünk egy hasonló programot, amivel még mindig lehet flash játékokat készíteni - Stencyl!

A program jellemzői

A Stencyl segítségével tetszőleges műfajú 2D-s játékokat készíthetsz, de leginkább a programmotor a különféle rpg lövöldözős játékokra van „kihegyezve”. Szerkezetileg a program egy egész eszközkészlet, amelyben, ha szükséges, a semmiből hozhat létre játékot harmadik féltől származó alkalmazások használata nélkül.

A program új verziójával kapcsolatos információkat tartalmazó felugró ablakot a „Bezárás” vagy a „Ne jelenjen meg többet” gombbal zárjuk be (ha nem akarjuk ezt az ablakot látni minden alkalommal, amikor a program elindul), és helyette a következő ablakot kapjuk:

Itt felajánljuk saját fiók létrehozását a Stencyl fejlesztői közösségben. Elvileg nem kell fiókot létrehozni (ehhez kattintson az alábbi „Emlékeztessen később” gombra), de a regisztráció lehetőséget ad további sablonok és műveletek letöltésére a StencylForge nevű online tárhelyről, így nem fáj :). Fiók létrehozásához kattintson a "Fiók létrehozása" gombra, és lépjen a regisztrációs űrlapra:

Itt kitöltjük a normál mezőket felhasználónevével, jelszavával (kétszer) és e-mail címével, majd kattintson a "Regisztráció" gombra. Ha minden jól megy, akkor végre megnyílik előtted a program indítóablakának felülete.

Start ablak felület

Külsőleg a Stencyl start ablak munkaterülete több zónára van felosztva:

Legfelül hagyományosan a menüsor és az eszköztár található. Itt található az összes fő beállítás és vezérlőgomb. Az eszköztár alatt van egy kis keskeny szürke csík. Tartalmaz füleket (igen - a Stencyl felület többlapos, ami nagyon kényelmes) és gombokat a gyors váltáshoz (jobb oldalon).

A fő munkaterület két részre oszlik: a bal oldalon található a navigációs sáv a program szakaszaihoz, a jobb oldalon pedig a fő tartalom (a főképernyőn a játékok listája), amely az aktuálisan aktív játéktól függően változik. üzemmód. Alul van még néhány további gomb, amelyek lehetővé teszik:

1. Nyissa meg azt a mappát, amelyben a Stencyl a létrehozott játékok összes erőforrását és magukat a játékokat tárolja (a bal alsó sarokban található „Játékok mappa megtekintése” gomb).
2. Indítson el egy képzési kurzust a programmal való munkavégzésről (a jobb alsó sarokban lévő zöld panelen „Start Crash Course”). Egyébként van mellette egy gomb is, amely elrejti az edzésen való részvételi ajánlatot ("Ne mutasd újra").
3. Nyissa meg az aktuálisan kiválasztott játékot a listából, ami hasonló ahhoz, mintha duplán kattintana a játék ikonjára („Open Game” a jobb alsó sarokban).

A Stencyl lehetőségeinek önálló felfedezéséhez elvégezhet egy képzést (és azt kívánatos lenne letenni), valamint megnyithat egy, az elképzelésének leginkább megfelelő kész játékot, és megnézheti, hogyan működik ott minden. És azt javaslom, hogy tanulmányozzuk a program munkáját egy játék létrehozásának példáján, amely webhelyünk szimbólumának és virtuális lakójának - Frida Best - kalandjairól szól!

Hogyan kezdjünk el játékot létrehozni Stencylben

Ha a játék létrehozása előtt megnézte a Stencyl szabványos játékpéldáit, észrevehette volna, hogy alapvetően mindegyik meglehetősen egyszerű, egyképernyős és oldalnézetű. Dinamikus top-down shootert készítünk egérrel! Minden olyan, mint a "nagy" játékokban :).

A projektjéhez módosíthatja az egyik kész sablon logikáját, de nem keresünk egyszerű utakat, ezért - csak "a semmiből", csak "hardcore" :). Ehhez kattintson a munkaterület eszköztárán (vagy a "Fájl" - "Új létrehozása" menüben) az "Új játék létrehozása" gombra, és lépjen be a következő ablakba:

Itt kiválaszthatunk egy játéksablont műfajonként előre kiválasztott funkciókkal és műveletekkel a projektedhez. Azonban egy játékot a semmiből fogunk létrehozni, ezért válassza ki az „Üres játék” elemet, és kattintson a „Tovább” gombra.

A következő lépésben néhány alapvető beállítást kell elvégeznünk:

A „Név” mezőben meg kell adnunk a játékunk nevét, a „Képernyőméret” részben pedig a játékmező méreteit a szélességének (Width) és magasságának (Height) pixelben történő megadásával. Ezután kattintson a "Létrehozás" gombra, és lépjen közvetlenül a játékszerkesztő felületére:

Alapértelmezésben megnyílik előttünk a „Dashboard” fül, amelyen balra a játék teljes erőforrásfája van összegyűjtve, jobbra pedig maga a munkaterület. Itt szerintem célszerű lenne némi pontosítást tenni a "fa" szerkezetét illetően.

Négy ágból áll, amelyek közül az első kettő szabványos erőforráskészleteket (RESOURCES) és logikát (LOGIC) tartalmaz, az utolsó kettő pedig opcionálisan kézileg betöltött erőforráscsomagokat (RESOURCE PACKS) és bővítményeket (EXTENSIONS) tárolhat.

A fő ág itt a FORRÁSOK ág. A következő szakaszokat tartalmazza:

1. Színésztípusok – itt tárolják az összes játékkarakter sprite-jét, és konfigurálják az animációjukat és az egymással való interakciót.
2. Hátterek - ebben a részben eltárolhatjuk a játékhoz szükséges összes hátteret. Ezenkívül a háttér lehet a háttér (háttér) és az előtér (előtér) számára is, amely lehetővé teszi a hátterek egymásra helyezését, így például a parallaxis hatását érheti el.
3. Betűtípusok - egy rész, ahová különféle gyönyörű betűtípusokat tölthetünk fel, hogy eredeti feliratokat készítsünk. Érdemes azonban figyelembe venni, hogy a Stencyl csak az angol karakterkészlettel tud működni, így ahhoz, hogy orosz betűket adjunk a font fájlhoz, a latin karakterek egy részét le kell cserélnünk velük.
4. A Scenes egy hely, ahol játékszinteket hozhat létre és szerkeszthet. Itt beállíthatjuk bármely színpad megjelenését, és elhelyezhetjük az összes karaktert, bónuszt és egyéb játékelemeket.
5. Hangok - a játékban használt összes hang tárháza.
6. Tilesets - egy speciális ág, amely csempéket tárol - speciális sprite-ok, amelyek segítségével játékpályákat építhetünk.

Csempék létrehozása és konfigurálása

Nincs egyértelmű vélemény arról, hogy milyen sorrendben kell végrehajtani ezt vagy azt a játékot. Jelenleg bárki számára kényelmes, de én a következő algoritmust ajánlom:

Készítsd el az első jelenetet - hozd létre a karaktert - hozd létre az ellenséget - hozd létre a teljesítményt - hozd létre a többi szakaszt

Jelenet Stencylben való létrehozásához meg kell rajzolnia a megjelenését a Jelenetek ágban. A rajzoláshoz azonban először olyan blokkokra van szükségünk, amelyekkel "rajzolhatunk". Ezeket a blokkokat a programban csempéknek (csempéknek) nevezik, és a Tileset részben tárolódnak:

A csempekészlet egy egyszerű képmátrix, amelyet betölthet bele. Feltölthet egy kész mátrixot (egy vagy több sorban több azonos méretű képből álló kép), vagy kiegészítheti a meglévő készleteket külön képekkel.

Először is létre kell hoznunk egy új csempekészletet (az "Új létrehozása" gomb a Csempekészletek részben), ami után egy ablakot fogunk látni, mint a fenti képernyőképen. Kép feltöltéséhez a „Kép kiválasztása” gombra kell kattintanunk, és a megnyíló Intéző ablakban ki kell választani egy előre elkészített fájlt a kívánt képpel (képekkel).

A kép betöltésekor beállítjuk az elrendezési paramétereit és a méreteit szélességben és magasságban, ami után (ha minden megfelelően jelenik meg) a "Hozzáadás" gomb megnyomásával hozzáadhatja a képet a készlethez.

A mátrixban lévő minden egyes képhez (csempéhez) beállíthatja a játékkarakterekkel és objektumokkal való interakció paramétereit. Ehhez válassza ki a kívánt csempét, és nyissa meg a következő ablakot:

A jobb oldali ablaktábla tetején megnyílik az "Ütközési határok" rész. Itt választhatunk egy tetszőleges alakzatot, amely az objektumunk és a játékszereplők interakciójának határait jelzi. Alapértelmezés szerint minden csempe rendelkezik a "Négyzet" paraméterrel (négyzet), ami a csempét teljesen járhatatlanná és tömörsé teszi. Ha a csempét "átlátszóvá" kell tenni a karakterek számára (például a padló), akkor elegendő a "Nincs ütközés" paraméter beállítása.

A szegélyeken kívül minden csempéhez animáció is beállítható úgy, hogy az alsó panelen található "Keretek beszúrása" gombbal kereteket ad hozzá. Alapértelmezés szerint az animáció sebessége 100 ezredmásodperc, de ez a szám tetszőlegesen módosítható képkockánként.

Ehhez csak kattintson duplán a kívánt keretre a bal egérgombbal, és a megnyíló ablakban változtassa meg a késleltetési jelzőket igény szerint. A kiválasztott keret javítására a beépített grafikus szerkesztő segítségével is van lehetőség, amelyet a „Keret szerkesztése” gombbal nyithatunk meg.

Jelenet renderelés Stencylben

A lapkakészlet kialakítása után logikus a következő lépés - a kész játéktér kialakítása a hozzáadott képekből. Ezt a Jelenetek részben az "Új létrehozása" gombra kattintva teheti meg. A gomb megnyomása után a jelenetbeállítások ablakba jutunk:

Itt mindenképpen egyedi nevet kell adnunk a jelenetünknek a „Név” mezőben, megadnunk kell a méreteket (szélesség és magasság csempékben (alapértelmezés szerint) vagy pixelben), és opcionálisan (azaz saját kérésünkre) be kell állítani a hátteret. szín az új jelenethez. Kattintson az "OK" gombra, és lépjen be a szintszerkesztőbe:

Úgy néz ki, mint egy grafikus szerkesztő. Középen van a munkaterület, ahol megrajzoljuk a szintet. Balra és felül kis eszköztárak találhatók. A jobb oldalon a paletta panelek, a csempekészletek kiválasztása és a rétegkezelés látható. Most hogy működik az egész...

Először is megrajzoljuk a munkaterületünk hátterét. Ehhez a jobb oldali panelen aktiválja a „Palette” fület és azon a „Csempe” fület, és válassza ki a kívánt csempét a megjelenő listából. Ezután a bal oldali panelen válassza ki a Ceruza eszközt, és rajzolja meg a kívánt területeket a kiválasztott csempével.

A rétegek alátámasztása miatt a csempék átfedhetik egymást, ezért a leglogikusabb a szintet megszervezni, figyelembe véve, hogy például a „Layer 0” rétegen lesz egy háttérhordozónk, felette egy réteg akadályokkal és karakterekkel, és még magasabb - réteg különféle számlálókkal és játékjelzőkkel.

A rétegek a "Rétegek" panel alatti gombokkal vezérelhetők. Vannak gombok a rétegek létrehozására, törlésére, áthelyezésére és átnevezésére. Ezen kívül bármely réteg elrejthető vagy megjeleníthető a réteg nevétől jobbra lévő szem formájában lévő gombra kattintva.

Karakteralkotás

Miután elkészítettük első jelenetünket, itt az ideje, hogy feltöltsük különböző játszható karakterekkel. A Stencylben "színészeknek" nevezik őket, és a "Színésztípusok" részben tárolódnak. A színészek ugyanazon elv alapján készülnek, ezért ezt a folyamatot a játékunk főszereplőjének, Frida-nak a megalkotásának példáján fogjuk figyelembe venni.

Új színész hozzáadásához lépjen a fent említett Színésztípusok szakaszba, és kattintson ott az „Új létrehozása” gombra. Már megszokottan újra kérdezik tőlünk, hogyan akarjuk elnevezni az új játékobjektumot, ami után megjelenik előttünk a karakteranimáció szerkesztő ablaka:

Itt, a bal oldalon megjelenik a színész hozzáadott animációinak listája (alapértelmezett egy üres keret "Animation 0"), a jobb oldalon pedig eszközök találhatók ezeknek az animációknak a hozzáadásához és konfigurálásához.

Válasszon ki egy üres animációt (vagy adjon hozzá egy újat az alján található plusz gombra kattintva), majd kattintson a jobb oldalon található „Kattintson ide keret hozzáadásához” mezőre. Ezt követően megnyílik a képek hozzáadására szolgáló ablak, amely hasonló az új csempék készlethez való hozzáadására szolgáló hasonló ablakhoz. Kattintson a "Kép kiválasztása" gombra, válassza ki a kívánt képet, és módosítsa annak elrendezését és méreteit (ha szükséges).

Ha mindent beállított, kattintson a "Hozzáadás" gombra a hozzáadási ablak jobb alsó részén - az animáció előnézetként jelenik meg a bal oldalon:

Most már csak be kell állítanunk a képkockasebességet (dupla kattintás bármelyik képkockára) és néhány további paramétert, mint például az animáció nevét (Name) (nagyon hasznos összetett projekteknél), hurkolt (Looping) lejátszást (alapértelmezés szerint aktív). ), a szinkronizálás és a sprite alappont (Origin Point) origója (alapértelmezés szerint a központ).

Az alsó eszköztáron a jobb oldali részben találunk egy sor gombot. Ők megengedik:

• új képkockák hozzáadása az animációhoz (Import Frames);
• szerkessze a kiválasztott keretet egy külső szerkesztőben (Edit Frame (External));
• keret létrehozása külső szerkesztőben (Keret létrehozása (Külső));
• szerkessze a keretet a beépített szerkesztőben (Edit Frame);
• keret eltávolítása (Remove Frame);
• másolókeret (Copy Frame);
• beilleszteni egy keretet (Paste Frame);
• mozgassa egy képkockát hátra (Move Back) vagy előre (Move Forward).

A karakterek paramétereinek és viselkedésének beállítása

Fentebb Frida futásáról készítettünk animációt, ehhez mindössze két képkockát használtunk fel, amelyek tulajdonképpen ugyanaz a figura vízszintesen tükrözve. Most meg kell győződnünk arról, hogy az egérrel és a billentyűzettel tudjuk irányítani hősnőnk mozgását, és megfelelően reagáljon a színpadra húzott akadályokkal való ütközésre.

Először is állítsunk be ütközéseket. Ehhez nézze meg a megnyitott lapok listája alatti sort, és keresse meg ott az „Ütközés” gombot.

Alapértelmezés szerint az ütközési terület egy négyzet, amely a teljes animációs sprite körül van körülírva. Vagyis az ütközési esemény az objektum teljes területén megtörténik. A gyakorlatban azonban képünk leggyakrabban tartalmaz olyan kiegészítő elemeket (Fridának például egy blaster), amelyeknek az ötlet szerint semmivel sem szabad kölcsönhatásba lépniük. Ennek a szakasznak a segítségével tudjuk beállítani az összes ütközési területet.

Kezdetben lecsökkentjük Frida körüli területet a teste méretére. Itt figyelembe kell venni, hogy az egérrel nem tudjuk mozgatni a területet, és az „Aktuális alakzat” részben négy numerikus paramétert használunk a beállításokhoz. Először vízszintesen (bal széltől) és függőlegesen (felülről) állítjuk be a terület eltolását, majd adjuk meg az ütközési terület új szélességét és magasságát.

Az alábbiakban néhány további paraméter található a „Fizikai tulajdonságok” részben. Itt az „Is a Sensor?” jelölőnégyzet előtt állunk. és a csoportok fogalma.

Ha aktiválja az „érzékelő” jelzőt, akkor a kiválasztott terület többé nem lesz fizikai objektum: a karakter vagy annak egy része mintegy „átlátszóvá” válik a különféle akadályok számára, ugyanakkor megtartja a bizonyos feltételek mellett bármilyen művelet elindításának képessége.

Példa lehet az életből a modern lézeres jelzés: magát a lézert nem látjuk, de ha hozzáérünk, beindul az értesítés, hogy rossz helyre másztunk :).

Na most, mire valók a csoportok... Tegyük fel, hogy karakterünknek nem egy robbanó van a kezében, hanem egy kard, amivel (pontosabban ő :)) ellenségeit káposztává aprítja (egyébként Fridának lézere van) blade a forráskódban;)).

A feladat az, hogy amikor karddal megérinti az ellenséget, az ellenség meghal, de ha elhibáztuk, és az ellenfél eltalálta Fridát, akkor az energiája egy része elszállt. És a fő probléma itt az, hogy a hatás-animációnk valójában egy olyan kép, amelyen Frida és a kard is egyszerre van jelen...

Ha a képhez kötjük a kard akcióját, akkor aki az animáció lejátszása közben megérinti hősnőnket, az belehal az ütésbe. És csak annak érdekében, hogy a képet több, különböző képességekkel és paraméterekkel rendelkező objektumra ossza fel, feltalálták a csoportmechanizmust.

Alapértelmezés szerint csak egy területünk van, amely magának a karakternek felel meg ("Ugyanaz, mint a színésztípus"). A fő munkaterület feletti rajzeszközök segítségével azonban új virtuális objektumokat hozhatunk létre, és a "Csoportok szerkesztése" gomb segítségével csoportot állíthatunk be hozzájuk.

Az ütközésekkel talán ennyi, és most azt javaslom, hogy a legalapvetőbb megoldással foglalkozzunk – a színészi viselkedés színpadra állításával. Ehhez a „Viselkedések” szakaszba kell lépnünk:

Alapértelmezés szerint itt az elején nincsenek műveletek, de a bal alsó sarokban található "Viselkedés hozzáadása" gombra kattintva hozzáadhatjuk őket. Látni fogja a használatra kész funkciók listáját egy karakter vezérléséhez vagy a színpadon lévő többi szereplővel való interakcióhoz.

Például a „8 Way Movement” viselkedést választottam, amely magában foglalja a színész körkörös mozgását bármely irányba. Most a bal oldali listában kiválasztjuk a hozzáadott műveletet, a jobb oldalon pedig beállíthatjuk a paramétereit.

Színészek hozzáadása a színpadhoz és a szint tesztelése

Ha követte az utasításokat, akkor már rendelkeznie kell a játékhoz szükséges minimális erőforrásokkal. Még meg kell tanulni, hogyan lehet színészeket felvenni a színpadra, és tesztelni kell a játéktér teljesítményét.

Visszatérünk a korábban elkészített jelenet szerkesztőjéhez, és újra aktiváljuk a palettát (Palette), de most csempék helyett kapcsoljuk be a „Színészek” fület (Színészek). Megjelenik a korábban létrehozott karakterek listája, amelyeket a Ceruza eszközzel adhatunk a jelenethez:

Egy főszereplőnk van, így egyetlen ceruzával történő kattintás is elegendő ahhoz, hogy felkerüljön a színpadra. És most eljött az igazság pillanata - az első próba! A projekt előzetes összeállításának elindításához kattintson a jelenetünket tartalmazó lap jobb felső sarkában található "Tesztjelenet" gombra. Egy idő után (az első összeállítás mindig tovább tart) a flash playerben csodálhatjuk meg munkáinkat:

Amellett, hogy a játékos az oldalán van a játék, van egy ablakunk, amely a játék naplóit mutatja. Segítségükkel gyorsan megtaláljuk a munkában felmerülő problémákat és megpróbáljuk azokat orvosolni.

Amint látható, Fridát már el tudjuk mozgatni különböző irányokba, de maga a színpad mozdulatlan marad, és amint hősnőnk túllép a színpad látható részének szélén, eltűnik... Zavar :). Megoldhatja a problémát, ha hozzáadja a „Camera Follow” viselkedést Fridához, vagy beállítja a kívánt paramétereket események segítségével.

Ezenkívül hasznos lenne a szabványos kurzort valami megfelelőbbre cserélni, például egy szálkeresztre. Ezt úgy tehetjük meg, hogy hozzáadunk egy új szálkeresztet, eltávolítjuk róla az ütközési területet, és a szokásos „Egyéni egérkurzor” viselkedéssel a jelenethez csatoljuk:

Eseményrendszer Stencylben

A Stencylben egyszerű játékokat csak szabványos viselkedésekkel (Behaviors) lehet létrehozni, azonban ha valami nem szabványosra van szükségünk, akkor már el kell gondolkodnunk azon, hogy olyan eseményeket használjunk, amelyek az „Események” részben szereplőkhöz és jelenetekhez vannak konfigurálva:

Valójában a viselkedések (Behaviors) is események alapján épülnek fel, de van vizuális felületük is, ami megkönnyíti a szerkesztést. Itt közvetlenül azokról a funkcionális blokkokról van szó, amelyek bizonyos műveleteket hajtanak végre.

Az eseményablak három részre oszlik:

1. A bal oldali rész tartalmazza az események listáját és a kezelésükhöz (létrehozásához/törléséhez/áthelyezésükhöz) szolgáló gombokat. Esemény hozzáadásához kattintson az "Esemény hozzáadása" gombra, majd a legördülő listából válassza ki a kívánt csoportot, és adja meg a kívánt funkciót. A létrehozott eseménytől jobbra van egy jelölőnégyzet, amivel szükség esetén deaktiválhatjuk.
2. A jobb oldali részben van egy lista az összes elérhető műveletről, 10 részre csoportosítva, amelyek mindegyike egy megfelelő gombbal aktiválható. A nagyobb kényelem érdekében az egyes szakaszok műveletei tematikus lapokba vannak rendezve, és egyedi színük van. Alul van még három lap. Alapértelmezés szerint a "Palette" (paletta) lap aktív, amelyen a műveletek listája található. A második lap - "Attribútumok" - a helyi változók megjelenítésére szolgál (erről bővebben lentebb), a harmadik - "Kedvencek" - pedig a kedvenc műveletek megjelenítésére szolgál.
3. A központi rész a munkaterület. Itt alakítjuk ki a karakterek viselkedésének utolsó példáit a cselekvési blokkok és események különféle kombinációival, amelyek szerint ezek a cselekvések megtörténnek. A kombinálás úgy történik, hogy a blokkokat egyszerűen a munkaterületre húzzuk, majd szerkesztjük a bennük megadott paramétereket. Nem szabad megfeledkezni arról, hogy a funkció csak azokból a blokkokból áll, amelyek egymással kombinálva és a fő eseményblokkban szerepelnek. Így ahhoz, hogy bizonyos jelenleg szükségtelen (de hasznos) kombinációkat ideiglenesen eltávolítsunk, csak át kell helyeznünk őket az általános struktúrából egy szabad helyre. Ha a műveletek idővel teljesen szükségtelennek bizonyulnak, akkor teljesen törölhetők, ha áthelyezik őket a kukába, amely a munkaterület jobb felső részén található.

Valójában már leírtuk az események létrehozásának algoritmusát, de sajnos nem tudok univerzális ajánlásokat adni - minden játék esetében az események eltérőek lesznek, és elég sok lehet... Példaként nézd meg a Fridáról szóló játék forráskódjait, amiket a programmal együtt találsz az archívumban, de ez csak iránymutató, hiszen az eseményeken való munka a te személyes kreativitásod :).

Fizika és tulajdonságok beállítása

Ön és én már sok mindennel foglalkoztunk, de nem érintettünk néhány további témát, amelyek nagyon fontosak lehetnek a játékok készítésekor – itt a színészeink és jeleneteink mindenféle tulajdonságának beállításáról beszélek. Ezeket a paramétereket az utolsó két lap tárolja. És az első a "fizika":

Jelenetek és színészek esetében a Fizikai beállítások lap másképp néz ki. Csak két paraméter található a jelenetfizikai beállítások lapon - a vízszintes és a függőleges gravitációs beállítások. A szereplők fizikai paraméterek beállításai szakaszának megjelenése a fenti képernyőképen látható, és öt különböző lehetőséggel rendelkező lapból áll:

1. Általános lap. Itt három paraméterünk van: a szereplő típusa (helyhez kötött, platform (az adott szabályok szerint mozoghat, de más szereplők nem tudják mozgatni) és mozgatható), a szereplő rotációja (forgatható vagy nem), valamint a befolyás a gravitáció.
2. Lap "Nehézség" ("Súly"). Ezen a lapon állíthatja be a virtuális objektum tömegét és tehetetlenségét.
3. Az "Anyag" lapon olyan jellemzőket állíthat be a szereplő számára, amelyek egy adott anyagból készült valós objektum viselkedését szimulálják. Lehetőségünk van kiválasztani az egyik előre beállított értéket a "Preset Materials" legördülő listából, vagy manuálisan beállítani színészünk súrlódási és rugalmassági jellemzőit.
4. A Csillapítás fül lehetővé teszi a színész környezettel való interakciójának paramétereinek finomhangolását olyan értékek bevezetésével, mint a lineáris (például levegőhöz) és a szög (forgás közben) ellenállás.
5. A "Speciális" lap számos további beállításhoz biztosít hozzáférést, amelyeket az előző szakaszok nem tartalmaztak. Itt aktiválhatja az egyszerűsített fizikai modellt (a játék optimalizálása érdekében), az ütközési területek automatikus észlelését, az újraütközési eseményeket és a szünet alkalmazásának lehetőségét a színészre.

Kitaláltuk a fizikát, és most nézzük meg a "Tulajdonságok" gomb megnyomásával meghívott tulajdonságokat:

Az előző esethez hasonlóan a jelenetek és a színészek tulajdonságai eltérőek lesznek. A jelenet tulajdonságainál megadhatjuk a nevét ("Name"), a méreteit ("Size" szakasz) és a háttérszínt ("Background Color").

A szereplő tulajdonságaiban a néven kívül megadhatja az objektum leírását ("Leírás" mező), a csoportot, amelyhez a szereplő tartozik (a "Csoport kiválasztása" szakasz), valamint egy animációs réteget mobilhoz. eszközök (itt nem változtathat semmit, mivel a program ingyenes verziója nem teszi lehetővé a játékok exportálását mobiltelefon-formátumokba.

De ez nem minden beállítás, amely elérhető számunkra a Stencylben. A játék általános beállításait a fő eszköztáron található "Beállítások" gomb megnyomásával érhetjük el:

A beállítások ablakban balra a paramétercsoportok listája, jobbra pedig a fő terület (néha több lapra bontva), amely mindenféle opciót tartalmaz. Itt a következő szakaszokra vagyunk kíváncsiak:

1. "Beállítások" ("Beállítások"). A beállítások első csoportja, amivel kicsit személyre szabhatjuk a játékunkat. Ez a csoport három lapot tartalmaz. Ezek közül az elsőn ("Main") adhatunk a játéknak új nevet, egy rövid leírást, valamint egy előnézeti képet és egy ikont. A "Megjelenítés" fülön a játéktér végleges mérete állítható be, az utolsón ("Speciális") pedig lehetőség van az egyszerűsített fizika engedélyezésére és az élsimítási paraméterek beállítására.
2. "Loader" ("Loader"). Ebben a csoportban részben (az ingyenes verzió bizonyos korlátait figyelembe véve) testreszabhatjuk az előtöltő (betöltő) megjelenését, amely a játék teljes betöltése előtt megjelenik. Már négy lap van. Az elsőben ("Általános" - általános) megadhat egy hivatkozást a webhelyére, engedélyezheti a játék másolásvédelmét más erőforrásokon (a második sorban vesszővel elválasztva felsoroljuk az engedélyezett webhelyek listáját) és az egyik betöltőt. bőrök. A Megjelenés fülön beállíthatjuk a rendszerbetöltő képernyő színét és háttérképét. A „Bar Style” fülön megadhatja a betöltőcsík méretét, a „Bar Color” pedig lehetővé teszi a színek beállítását.
3. "Attribútumok" ("Attribútumok"). Ez a beállításcsoport az egyik legalapvetőbb! Itt vezérelheti a játékban használt globális változókat (a változókról a következő részben olvashat).
4. "Vezérlőelemek" ("Kezelés"). Ahogy a neve is sugallja, ebben a csoportban újrakonfigurálhatunk és hozzáadhatunk olyan billentyűzet gombokat, amelyekkel bizonyos játékműveletek végrehajtásra kerülnek.
5. "Csoportok" ("Csoportok"). A csoportok mechanizmusát már kicsit magasabbra gondoltuk. Itt lehetőségünk van az összes létrehozott csoport megtekintésére és szerkesztésére.

Tulajdonképpen ez az összes beállítás, amelyre szükségünk lesz flash játékok létrehozásához a Stencyl ingyenes verziójában. De mivel ez a rész a beállításokról szól, vétek lenne nem megemlíteni magának a programnak a paramétereit. Ezeket a "Fájl" menü "Beállítások" menüpontjának aktiválásával érheti el:

A program támogatja a többnyelvű felületet, azonban jelenleg csak angol nyelvű lokalizáció létezik, így egyenesen a második fülre mentünk - "Munkaterület". A helyzet az, hogy a Stencyl harmadik verziójában megjelent egy funkció, amely automatikusan adaptív képeket generál a betöltött sprite-ekből.

És alapértelmezés szerint a sprite megduplázódik, ami a grafika minőségének romlásához vezet. Ennek elkerülése érdekében azt tanácsolom, hogy tiltsa le a képméretezést a Szabványos (1x) kiválasztásával a Scale mezőben.

Azt is tanácsolom, hogy nézze meg a harmadik lapot - "Szerkesztők". Itt a grafikus, hang- és szövegfeldolgozási műveleteket külső, fejlettebb (és nem a Stencylbe épített) szerkesztőkkel társíthatja.

Egy kicsit a változókról

A Stencylben való munka szinte minden árnyalatát átgondoltuk, de nem érintettük az egyik legerősebb funkciót - a változókkal való munkát.

A változók bármely programozási nyelvben lehetővé teszik, hogy különféle eseményeket kezeljen, kifejezve azokat bizonyos számokkal (numerikus változók), feltételekkel (logikai változók), szövegekkel (karakterláncváltozók) stb. A változók fő jellemzője, hogy bármilyen értéket lecserélhetnek előre meghatározott határokon belül. Egy egyszerű példa a változóra: kísérő az osztályban. Ma lehet Ivanov, holnap Petrov, holnapután pedig Sidorov :).

Esetünkben az „ügyeletes” változó három érték egyikét veheti fel, amelyek a megadott feltételtől (például a vezetéknevek sorrendjétől) függően automatikusan behelyettesítésre kerülnek.

A Stencylben a változók lehetnek lokálisak vagy globálisak. Valamely esemény vagy viselkedés keretein belül deklarálhatunk lokális változókat, amelyek csak a megadott műveletekre fognak működni. Létrehozhat egy helyi változót az eseményszerkesztőben az "Attribútumok" szakasz meghívásával:

Itt több lap is található:

1. A "Getters" lapon olyan változókat állíthat be, amelyek értéket kapnak bármilyen számításból vagy közvetlen utasításból.
2. A "Setters" fül lehetővé teszi a korábban létrehozott változók tetszőleges értékének beállítását.
3. A „Játékattribútumok” lap globális változók blokkjait tárolja, és ha szükséges, lehetővé teszi újak hozzáadását (bár az alábbiakban megvizsgáljuk, hogyan teheti ezt meg jobban).
4. A Listák lapon lehetőségünk nyílik adattömbök létrehozására.
5. A Funkciók fül a létrehozott függvények rendszerezésére szolgál.

A helyi változó létrehozásának algoritmusa egyszerű: először hozzon létre egy új blokkot a "Getters" fülön, majd keresse meg az újonnan létrehozott változót a "Setters" lapon, és adjon hozzá egy blokkot a munkaterülethez, egyenlővé téve azt néhány játék paraméter. Ez minden – a változó deklarálva van, és érvényes értékeket kapott.

A Stencylben a globális változók (játékattribútumok) azonnal beállítódnak az egész játékra, és bármilyen esemény vagy viselkedés esetén meghívhatók. Ahogy fentebb említettük, ezeket a „Játékattribútumok” lap „Attribútumok” részében hozhatja létre:

Azonban sokkal kényelmesebb az összes létrehozott változó megtekintése és kezelése a beállítások „Attribútumok” részének használatával (az eszköztár „Beállítások” gombjával vagy az eseményszerkesztő „Játékattribútumok” lapján a „Játékattribútumok megjelenítése” gombbal. ):

Itt található a globális változók teljes listája, és lehetőség van újak létrehozására az "Új létrehozása" gomb megnyomásával. Új változónál az ablak elhagyása nélkül azonnal beállíthatjuk a típust (numerikus, szöveges, logikai vagy tömb) és a kezdőértéket, ami szerintem nagyon kényelmes.

A globális változók használatával nagyon kényelmes a különféle számlálók megvalósítása, mivel a bennük lévő adatok mentésre kerülnek, amikor a játékos új szintre lép, és mindaddig tárolódik a memóriában, amíg maga a játék be van kapcsolva. Azt is javaslom, hogy globális változókat használjon a lejátszott animáció nyomon követéséhez.

Miután adott a színésznek egy adott sprite-ot az eseményekben, egy lenti változóban egy adott értéket rendelhetünk ehhez a sprite-hez (például sorozatszám vagy animáció neve). Így ha egy műveletet egy változóhoz kötünk, azt bármikor meghívhatjuk, ha ezt a változót a kívánt értékre állítjuk.

Játékok kiadása, importálása és exportálása

Végül, ha röviden is, de megismerkedtünk a Stencyl-lel való munka alapelveivel. Tegyük fel, hogy létrehoztunk egy játékot, teszteltük, és minden működik. Most már csak rajtad múlik, hogy a játékot egy projektből valódi SWF-fájllá alakítsd, amelyet feltehetsz az internetre. Ehhez csak meg kell nyitnunk a „Közzététel” menüt, és a „Web” listában a „Flash” elemre kell kattintanunk.

Elindul a játékfájl összeállítása, amely után megjelenik egy kérés, hogy hova és milyen néven mentsük el a keletkezett flash fájlt. Mentünk és kész - a játék kész :).

A fordított folyamat a játék importálása. Az import funkciónak köszönhetően megnyithatja például más felhasználók játékprojektjeit, hogy megnézze, hogyan valósítják meg ezt vagy azt a funkciót;). A Fájl menüből is importálhat egy játékot. Sikeres importálás esetén a játék megjelenik a főképernyőn a projektek listájában. Itt azonban érdemes egy kis foglalást tenni.

A probléma az, hogy az új Stencyl 3.0 csak részben kompatibilis a korábbi verziókban készített projektekkel, így előfordulhat, hogy az importált játékprojekt funkcionalitása nem teljes, vagy a legrosszabb esetben a játék egyáltalán nem indul el, ami hibát jelez. . Kevés lehetőséged lesz - vagy keresd és javítsd ki a hibákat, vagy beletörődj, és hagyj mindent úgy, ahogy van :).

A program előnyei és hátrányai

• könnyű játék létrehozása csekély vagy semmilyen programozási ismeretekkel;
• szinte bármilyen műfajú játék létrehozásának képessége;
• kész viselkedési formák és játékforrások nagy gyűjteménye;
• játékprojektek cseréjének képessége;
• nincsenek korlátozások a flash játékok létrehozásakor.

• meglehetősen magas erőforrás-intenzitás mind magának a programnak, mind a létrehozott játékoknak;
• korlátozott számú tárgy a színpadon - minél több, annál lassabban fut a játék (az indítás elmulasztásáig);
• a cirill betűtípusok nem támogatottak (szerkesztenie kell a latin ábécé vektorképeit, lecserélve azokat a szükséges betűkre);
• a program új verziójának hiányos kompatibilitása a korábbi verziókban létrehozott játékprojektekkel.

megállapításait

A jelenleg létező flash-játékok létrehozására szolgáló programok közül a Stencyl a legésszerűbb kompromisszum a könnyű kezelhetőség és a lehetőségek szélessége között. A jó hír az, hogy a konstruktor funkcionalitása az ingyenes kiadásban gyakorlatilag korlátlan, ami lehetővé teszi bármilyen ötlet szinte teljes megvalósítását.

Azonban ne feledkezzünk meg a "majdnem" ... Az a helyzet, hogy a Stencyl maga egy JAVA gép alapján működik, ami, mint tudod, meglehetősen erőforrásigényes. Ha ehhez a terheléshez hozzáadjuk a játék által generált terhelést is, akkor kiderül, hogy a normál működéshez modern, nagy teljesítményű számítógépre van szükségünk.

Ez az első "majdnem". A második pedig a színpadon elhelyezett tárgyak számának implicit korlátozása, amit már mellékesen említettem. Még ha ezek az objektumok csak lapkák, de sok van belőlük, előfordulhat, hogy a játék hibát jelez a tesztelés során, és nem indul el, amíg nem csökkenti a számukat.

Összefoglalva elmondhatjuk, hogy a Stencyl ideális motor lesz mindenféle casual flash játék és oldalra görgető lövöldözős játék készítéséhez. Sőt, a flash játékok létrehozásának gyakorlása után megvásárolhatja az egyik típusú licencet, és egy kis mechanikai változtatással a játékát az Android és az iOS által támogatott formátumokra portolhatja. És ez egy igazi módja annak, hogy pénzt keressen, ha elhelyezi a játékot a Play Marketen vagy az App Store-ban!

Végül csak sok szerencsét kívánunk mindazoknak, akik úgy döntenek, hogy komolyan részt vesznek a játékfejlesztésben. Hagyja, hogy az algoritmusok működjenek először, és a fordító ül és hallgat egy rongyban, amikor elindítja a játékot :).

P.S. A cikk szabadon másolható és idézhető, feltéve, hogy a forrásra mutató nyílt aktív hivatkozást feltüntetik, és Ruslan Tertyshny szerzőségét megőrzik.

* Használt programok: Flash CS3, Photoshop CS3
* Bonyolultság: közepes
* Becsült átfutási idő: 3 óra

A portfólióoldal nagy jelentőséggel bír minden kortárs művész, fotós, tervező, sőt zenész számára. Komoly hozzáállást mutat az üzlethez és a professzionalizmushoz. Ma megmutatjuk, hogyan készíthetsz eredeti és stílusos fotóportfóliót a modern Flash tartalomkezelő rendszer, a Moto CMS alapján.

A Moto CMS önálló verzióját fogjuk használni, amely különféle segédprogramokat, komponenseket, beépített példákat és tiszta webhelysablonokat tartalmaz, különböző struktúrákkal. Mi pedig a legegyszerűbb sablont használjuk, vagyis a semmiből készítünk egy fotóportfólió-webhelyet.

Ebben az útmutatóban a következő témákkal foglalkozunk:

* Konténerek készítése.
* Résidők létrehozása (Bezárás gomb, egyszerű gomb).
* Modulok létrehozása (zenelejátszó és képgaléria).
* Webhely-előtöltő szerkesztése
* Weboldalak létrehozása és tartalommal való feltöltése.

Szó lesz a Moto CMS vezérlőpult funkcióiról és funkcióiról is.

Szükségünk lesz:
* Adobe Photoshop;
* Adobe Flash CS3;
* A Moto CMS offline verziója (ingyenes próbaverzió);
* Weboldal tervezés c. PSD formátum.

A végeredmény előzetese

1. lépés: Töltse le a Moto CMS fájlokat

Fotóportfóliónk felépítésének megkezdéséhez le kell töltened a Moto Flash CMS önálló verzióját. Az útmutató minden lépésének megismétléséhez és a Moto CMS képességeinek megértéséhez elegendő a próbaverzió.

2. lépés: A Moto CMS-fájlok rövid áttekintése

Íme egy gyors áttekintés a Moto CMS fájljairól és mappáiról:

* Alkatrészek. Ez a mappa az Adobe Extension Manager által kezelt mxp összetevőket tartalmazza.
* kezelőpanel. Tartalmazza az összes Vezérlőpult fájlt.
* dok. Ez a mappa tartalmazza az API dokumentációt.
* Példák. 4 példát tartalmaz kész flash oldalakra, a legegyszerűbbtől a legbonyolultabbig, galéria modullal, hírmodullal, zene- és videólejátszóval, kapcsolatfelvételi űrlappal stb.
* Sablonok. 5 sablon, amellyel Moto CMS-en alapuló webhelyet hozhat létre. Minden sablon rendelkezik a szükséges fájlkészlettel, és különbözik a szerkezetében. Ma ezen sablonok egyikét fogjuk használni, különösen az 1. sablont fotóportfóliónk alapjaként.
* readme fájl, amely leírja, hogyan kezdje meg a webhely létrehozását a Moto CMS segítségével.

3. lépés: Futtassa a Localhost

Következő lépésünk a webhelysablon elindítása, amelyből portfóliówebhelyünket építjük. Ehhez szükségünk van egy helyi webszerverre. WampServert használunk. Lehetővé teszi webes alkalmazások készítését Apache, PHP és MySQL adatbázisokkal.

Az 1. webhelysablon elindításához egyszerűen töltse fel a mappa tartalmát a helyi szerverre sablon_01 a /templates/ könyvtárból, valamint a mappa tartalmából kezelőpanel.

Ezt követően a Moto CMS Vezérlőpultjára lépünk úgy, hogy beírjuk az URL-t a böngésző címsorába, a végére hozzáadva az /admin parancsot.

Jegyzet: Jelenleg nem fogja tudni megtekinteni az oldalt, mert még nem tartalmaz oldalakat. Megjelenik egy 404-es hibaoldal.

4. lépés: A config.xml szerkesztése

Csak annyit kell tennünk, hogy módosítsuk a webhely szélességét és magasságát, és állítsuk be a háttérszínt.

Projektünk mérete 980×800 pixel. Ahhoz, hogy a méret megváltozzon a nagy képernyőn, be kell állítanunk a "100%"-ot a webhely szélességéhez és magasságához. És ahhoz, hogy kis felbontású képernyőn helyesen jelenjen meg, meg kell adnunk a webhely minimális szélességét és magasságát (megjelennek a görgetősávok). A háttérszín fekete (#000000).

5. lépés: Módosítsa a style.css fájlt

Most meg kell nyitnunk a style.css fájlt, és be kell állítani a háttérszínt (fekete). Minden más szerkeszthető a Moto CMS vezérlőpultjával.

6. lépés: Hozza létre az előtöltőt

A moto.xfl és a website.xfl forrásfájlok a flamoto és a flawebsite mappákban találhatók.
A webhely-előtöltőt a moto.xfl-ben kell létrehozni. Az előtöltő lehet egy egyszerű klip 100 képkockával.

A klip Műveletek paneljén ezt írjuk: „Stop ();” az első képkockához. Ezután tetszés szerint animáljuk a többi képkockát.

Azt is írjuk, hogy „Stop ();” az idővonal első képkockájának akcióiban fla.

Ne felejtse el megadni a webhely méreteit (minimális szélesség és magasság) a moto.fla fájl tulajdonságaiban.

Következő lépésünk egy szép előbetöltő eltűnési animáció létrehozása. Az utolsó képkockán a „showWebsite()” funkció aktiválásával kell elindítanunk a weboldalt.

Nyissa meg a website.xfl fájlt, és frissítse az előtöltőt.

7. lépés: A webhely háttere

Nyissa meg a Moto CMS Media Library-t (Beállítások > Médiatár), és a többi szükséges képpel együtt (a főoldalhoz, a főoldalakhoz vagy a galériához) töltsön fel egy háttérképet a „Média hozzáadása” gombbal.

Ezt követően térjen vissza a Vezérlőpultra, hozzon létre egy új oldalt, és helyezzen be egy háttérképet a "Fotó" gombbal. Húzza el a képet, és középre helyezze.

A betűkészlet-kezelő lehetővé teszi a felhasználók számára a webhely-betűkészletek kezelését, amelyek SWF-fájlként tárolódnak és letölthetők.

A betűtípus betöltése előtt először át kell alakítanunk SWF formátumba. Erre fogjuk használni Online Font Creator a MotoCMS csapata által kifejlesztett praktikus online alkalmazás, amely lehetővé teszi a TTF és OTF fájlok egyszerű konvertálását SWF formátumba. Nincs más dolgunk, mint kiválasztani a kívánt .TTF vagy .OTF kiterjesztésű font fájlt, hozzáadni az Online Font Creatorhoz, rákattintani a „Betűtípus létrehozása” gombra, és letölteni az elkészült SWF fájlt, amely után felhasználhatjuk portfóliónkon. weboldalt.

Hozzon létre egy weboldal nevet és szlogent

Az új betűtípus feltöltése után a Szöveg eszközzel létrehozhatja a webhely címét és szlogenjét, és alkalmazhatja a kívánt betűtípust. A szlogen elkészítéséhez a Tahoma betűtípust használjuk, mérete: 10, színe: # 727272. Ezt követően állítsa be az oldal nevét és szlogenjét a .PSD-ben lévő dizájnnak megfelelően.

9. lépés: Kép hozzáadása a kezdőlaphoz

A galéria képét az oldal főoldalára helyezzük el. Ehhez válasszon ki egy képet a Médiatárból a bal oldali eszköztár „Fotó” elemére kattintva. Ha szükséges, állítsa be a helyét a főoldal kialakításának megfelelően.

10. lépés: Hozza létre az alsó menüt

Az Alakzat eszközzel hozzon létre egy szürke keskeny téglalapot, és a Szöveg eszközzel hozzon létre rajta gombokat. Állítson be mindent webhelye kialakításának megfelelően.
Mentse el az összes változtatást, és tekintse meg az eredményt az „Előnézet” gombra kattintva.
A beépített menümodul segítségével menüt is létrehozhat.

11. lépés: Tartalomtárolók létrehozása

Jegyzet: A tárolók olyan klipek a website.fla oldalon, ahol dinamikusan lehet tartalmat hozzáadni. 4 típusúak lehetnek: 1) konténer olyan objektumokkal, amelyek az egész oldalon láthatók, 2) konténer elrendezési objektumokkal; 3) konténer oldalobjektumokkal; 4) konténer felugró objektumokkal.

Az általunk választott #1 webhelysablon alapértelmezés szerint két tárolóval rendelkezik: egy tároló a webhelyen látható objektumokkal és egy oldalobjektumokat tartalmazó tároló. Ha megnyitjuk a website.fla fájlt, látni fogjuk őket:

Ezek a tárolók a structure.xml fájlba vannak írva. Győződjön meg arról, hogy a szélessége 980, a magassága pedig 800 képpont.

Tároló olyan objektumokkal, amelyek az egész webhelyen láthatók:

Tároló oldalobjektumokkal:

Ahhoz, hogy az oldalelemek, például a háttér, a webhely neve, a szlogen és az alsó menü szürke mezővel minden oldalon láthatóak legyenek, el kell helyeznünk őket egy teljes webhelyre kiterjedő objektumtárolóba. Ezt egyszerűen megtehetjük a Moto CMS vezérlőpultjával. Egyszerűen kattintson a kívánt elemre, és válassza ki a helyét - Webhely. (A teljes webhelyen).

12. lépés: Hozza létre a Rólunk oldalt

Hozzon létre egy üres oldalt

A bal felső sarokban kattintson a "Létrehozás" gombra, amellyel új oldalt hozhatunk létre.

A szükséges menügombok csatlakoztatása az új oldalhoz

Ehhez visszatérünk a főoldalra, és az új oldalhoz kapcsoljuk a menü gombot. Egyszerűen jelölje ki a menügomb szövegét, és kattintson a jobb oldalon található hivatkozás ikonra a hivatkozásszerkesztő megnyitásához. Esetünkben a Portfólió menü gomb az oldal főoldalára, a Rólunk gomb pedig a Rólunk oldalra hivatkozik.

Háttérkép hozzáadása a Névjegy oldalhoz

Úgy döntöttünk, hogy fekete hátteret adunk az oldalhoz. Ehhez lépjen a Médiatárba a bal oldali panelen található "Fotó" gombra kattintva, válasszon ki egy előre betöltött képet (egy szabályos fekete téglalapot), és állítsa be a helyét az oldalon a tervnek megfelelően.

Szöveg hozzáadása a Rólunk oldalhoz

Szöveges információk hozzáadása egy oldalhoz a Szöveg eszközzel. A beépített WYSIWYG szerkesztő mindent megmutat, amit csinál, így a szöveg formázása gyerekjáték. A kapcsolattartási cím hozzáadása is elég egyszerű, csak meg kell nyitnia a Hivatkozásszerkesztőt, és be kell írnia egy e-mail címet.

Ha végzett, ne felejtse el elhelyezni a Rólunk oldal elemeit egy oldalobjektumokat tartalmazó tárolóban. Válassza ki az egyes elemeket egyenként, és válassza ki az elhelyezést: Oldal (oldal tartalma).

13. lépés: Az előbetöltő kép módosítása

Lehet, hogy észrevette a fehér kör alakú előtöltőket, amikor az oldalak között navigál. Beállításukhoz nyissa meg a website.fla fájlt, és lépjen a könyvtárba. Kattintson a jobb gombbal az előtöltőre, és válassza a Tulajdonságok menüpontot.

A szimbólum tulajdonságai ablakban kiválaszthatja az „Alaposztály szerkesztése” elemet, majd a kívánt módon animálhatja az előtöltőt. Üresen hagyjuk az előtöltőt, és töröljük a grafikus képet.

14. lépés: Weboldal animáció

Végül elérkezünk útmutatónk legérdekesebb részéhez: a webhely-animációkhoz. Jelenleg, ahogy észrevehette, a webhely statikus, mivel egyetlen tároló sem animált. Következő lépésünk tehát a konténerek animálása és további animációk hozzáadása, hogy életre keltsük webhelyünket.

Alapértelmezett tárolók animálása

A tartalomtároló könnyen animálható az idővonal mentén. Nyissa meg a website.fla fájlt, és hozzon létre egy fade in animációt minden tárolóhoz.

Először animáljuk a fő tárolót a webhelyen látható objektumokkal. Ez a website_holder_1 réteg. Egyszerű animációt készítünk átlátszósággal, de majd díszítjük valamivel. Hozzon létre egy második kulcskockát a rétegen, állítsa az Alpha 0%-ot az első kulcskockához (tegye átlátszóvá), hozzon létre egy köztes keretet az elsőtől a másodikig, majd adjon hozzá könnyítést.

Ugyanígy készítsünk animációt az oldalobjektumokat tartalmazó tárolóhoz (oldal_1_tartó_2 réteg), de egy kicsit később jelenítsük meg.

Így további két kulcskockát adunk a réteghez, átlátszóvá tesszük a tárolót az első és a második képkockánál, és könnyítést hozunk létre a második kulcskockától a harmadikig.

Amikor összeállítjuk és betöltjük az oldalt, látni fogjuk, hogy minden elem már animáltnak tűnik. Ám amikor egyik oldalról a másikra lépünk, nincs animáció, csak szokatlan pislogás. Az idővonal második része felelős ezért.

Így készítjük el a konténer megjelenésének és eltűnésének animációját.

Mivel a szöveg betűtípusa a rendszer betűtípusaiból származik, a keverési módot a normál rétegről a szintre kell változtatnunk a tárolórétegeken lévő összes movieclip példánynál.

További konténereket hozunk létre és animálunk.

Egy jó flash oldalhoz ez az animáció nem elég, ezért az oldal más részeit is animálttá tesszük, mint például a tetejét (az alábbi képen sárgával kiemelve), az alját (zölddel kiemelve) és magát a tartalmat ( a képen a piros mezőben).

Mivel a felső és az alsó rész a teljes telephely szintjén fekszik, ehhez a két részhez két tárolót adunk. A konténerek hozzáadása előtt meg kell határoznunk méretüket és elhelyezkedésüket. Ez könnyen megtehető a Photoshop Szelet eszközével.

A felső rész a következő méretekkel rendelkezik: x=0, y=0, szélesség=980, magasság=120.

Alsó zóna: x=0, y=765, szélesség=980, magasság=35.

A felső tároló tartalmazza a webhely nevét, az alsó tároló a menüt, és eltérően jelennek meg. Ezenkívül a képernyő tetejére és aljára tapadnak, amikor teljes képernyőre váltanak.

A konténerek méreteinek meghatározása után megnyitjuk a structure.xml fájlt, és új konténereket adunk hozzá (telephely szinten), megadva azok koordinátáit, szélességét, magasságát és mélységét.


Miután hozzáadtuk a tárolókat az .xml fájlhoz, létre kell hoznunk őket a website.fla fájlban. Nyissa meg a website.fla fájlt, és hozzon létre új rétegeket tárolóinkhoz. A rétegek sorrendjének meg kell egyeznie az xml fájlban beállított mélységértékekkel.

A website_holder_1 rétegből kimásolhatjuk az üres filmrészletet, és beilleszthetjük a website_holder_3 és website_holder_4 mappába.

Ugyanazokat a koordinátákat állítjuk be a klipben, mint a szerkezet.xml fájlban.

A 3. tárolóhoz: x = 0, y = 0;

A 4. tárolóhoz: x = 0, y = 765.

Mióta lemásoltuk a klipet, megmaradtak a régi nevek. Azonosító szerint változtatjuk őket, hogy könnyen megtalálhatóak legyenek.

Ugyanezt kell eljárni a 4-es tartálynál is.

Az idővonalon beállítjuk az első kulcskockát a 3. és 4. tárolóhoz, hogy azok később kezdjenek megjelenni, mint a teljes webhely objektumait tartalmazó tároló. Ezután létrehozzuk a második kulcskockákat, és animáljuk a köztes képkockákat. Az első kulcskockák a tárolók kezdőpozícióját, a második kulcskockák pedig a tárolók végső pozícióját tartalmazzák a webhelyen. A fő tároló a képernyő tetejéről jelenik meg, így áthelyezzük az első kulcskockába; az alsó konténer az alsó oldalon van, így azt is áthelyezzük az első kulcskockába. És könnyítéseket is adunk a köztes dolgok élénkítésére.

Íme, amit kaptunk:

Ezt követően a következő kódot kell hozzáadnunk a műveleti réteghez tárolóink ​​első animációs kulcskockájának szintjén.

Ezután összeállítjuk a webhelyet, és frissítjük a Vezérlőpultot.

Helyezze el az objektumokat konténerekbe

Ha bármelyik objektumot kiválasztja, látni fogja, hogy a legördülő menü lehetséges elhelyezéseinek listájában két új tároló jelenik meg: a felső és az alsó.

A legfelső tárolóba a szlogennel ellátott oldal nevét, az alsóba pedig a szürke téglalappal ellátott oldalmenüt kell elhelyezni.

Változtassa meg az alsó tartály tartalmát

Most kívánatos, hogy egy nagy képernyőn az alsó tartály a képernyő aljához tapadjon. Ehhez át kell helyeznünk a konténer animációját egy másik klipbe, mert mint tudod, az animált klipet nem tudjuk programozottan mozgatni (az animáció nem fog működni). Nevezzük ezt a klipet website_holder_4_c-nek.

Ezt követően menjünk a fő jelenetre, kattintsunk a 3. és 4. tároló első kulcskockáira, és szerkesszük a kódot.

Az oldal összeállítása után látható, hogy az alsó konténer a képernyő aljához tapad, akárhogyan is méretezzük át a képernyőt. Ha a képernyő felbontása túl kicsi, akkor az alsó konténer nem fedi át az oldal tartalmát, és a helyén marad.

15. lépés: Animálja a tartalomtárolót

A webhely tartalmának animálásához ugyanúgy animálnunk kell a tárolót a teljes webhely objektumaival, mint a felső és alsó tárolók esetében.

16. lépés: Hozza létre a kapcsolati oldalt

Új oldal létrehozása előtt frissítsük az oldalsablont. Készítsük el az összes új oldal sablonját, a „Rólunk” oldalt. Kattintson jobb gombbal a Rólunk oldalra, és válassza az Oldalsablon frissítése lehetőséget.

Miután frissítettük az oldalsablont, kattintson a „Létrehozás” gombra, írja be az oldal nevét, címét, rendeljen hozzá egy URL-t és válassza ki a helyét a webhely struktúrájában, ahogy az alábbi képernyőképen látható.

Elkészült a "Kapcsolatok" oldal. Most már csak szerkeszteni kell a tartalmát egy kényelmes WYSIWYG szerkesztővel, és a hivatkozásszerkesztővel csatlakoztatni kell a megfelelő menügombhoz.

17. lépés: Hozzon létre egy egyszerű slotot

A Moto Flash CMS-ben a slotok animált objektumok szerepét töltik be. A foglalat nagyszámú animált funkciót tartalmazhat, amelyek közvetlenül a Vezérlőpultról vezérelhetők.

Először megpróbálunk létrehozni egy egyszerű slotot, majd javítani.

Kezdjük a "Bezárás" gombbal, adjuk hozzá képként az oldalhoz, alkalmazzunk rá néhány effektust, és rendeljük hozzá a "Go to Page" -> "Home" műveletet.

A bezárás gomb animálása egyáltalán nem nehéz, mert ezt egy slot segítségével fogjuk megtenni. Hozzunk létre egy helyet a website.fla fájlban. Ehhez a „Bezárás” gomb képét importáljuk a könyvtárba. A Slots részben létre kell hoznunk egy új filmet, és el kell neveznünk CloseButtonSlot-nak.

Állítsuk be az osztályt CloseButtonSlot néven. Nem kell új osztályt létrehozni, elég az AbstractMotoSlot osztályt örökölni. Csak másolja ki: com.moto.template.shell.view.components.AbstractMotoSlot, és illessze be az Alaposztály mezőbe.

Ezután hozzáadunk egy CloseButtonIcon képet a színpadhoz (a CloseButtonSlot MovieClipnek nyitva kell lennie), és átalakítjuk a CloseButtonIcon nevű klippé. Mivel a slotunkat az AbstractMotoSlot osztályból örököltük, ez adja a fő animációt. Most szép kibontás/összecsukás hatást fogunk készíteni.

A következő lépés egy új réteg létrehozása, és kulcskockák létrehozása, ahol a "Stop ();"-t kell elhelyezni. Helyezze el a fő címkéket „over” (az első és második leállító képkocka közé) és „out” (a második és harmadik stop kulcsképkocka közé) – lásd a képernyőképet:

Ugyanazt a kulcsot és a köztes kereteket hozzuk létre a kliprétegünkön.

Például a "Bezárás" gomb az óramutató járásával megegyező irányban forog, ha az egeret fölé viszi, és az óramutató járásával ellentétes irányba, ha eltávolítja.

Adjunk hozzá forgatási fényerőt és könnyítést a mozgási animációhoz.

Az animáció elkészülte után összeállítjuk a website.fla fájlt az új slotunkkal (Ctrl + Enter).

Ahhoz, hogy a slottal Moto CMS-sel dolgozhassunk, meg kell adnunk a paramétereit a következő fájlban: structure.xml:

librarySymbolLinkage=” ” – filmklip nyílás exportálása (osztálynév).
animated=”true” – attribútum, amely meghatározza, hogy a slot animált-e vagy sem.
resizable="false" – van-e logika a slot átméretezéséhez vagy sem.
locked=”false” – meg kell-e jeleníteni a nyílást a Vezérlőpulton vagy sem.
– slot neve a Vezérlőpulton
– a funkcionalitást bővítő slot tulajdonságok. Ebben a példában nem fogjuk használni.