Kako stvoriti novu datoteku (dokument) u Flash CS6. Izrada flash igrica Kako napraviti flash animaciju

Izrada flash stranice ndash; stvar je prilično komplicirana. Za to je potrebno znanje iz mnogih područja: programiranje, računalna grafika, osnove optimizacije i promocije stranica, potrebno je dobro poznavati sam flash, u konačnici, kako na razini poznavanja razvojnog okruženja, tako i na razini znanja programskog jezika akcijske skripte 2.0. ili akcijska skripta 3.0, koja je trenutno viši prioritet.
Flash aplikacije su razvijene u Adobe Flash Professional ndash; je multimedijski program koji se koristi za izradu sadržaja kao što su web aplikacije, filmovi, igre, aplikacije za mobilne i druge ugrađene uređaje.
Flash ndash; jedinstvena pojava. Ranije se ovaj proizvod zvao "Macromedia Flash", nakon preuzimanja od strane Adobea, ovaj program je od 2005. godine postao poznat kao "Adobe Flash". Flash animacija se koristi za streaming web stranica. Ponekad flush ndash; ovo je dio html stranice, a događa se da je cijela stranica u cijelosti napravljena u Flashu ili je cijela stranica napravljena s njom. Rezultirajuće Flash datoteke su posebne swf (“ShockWave Flash”) datoteke koje zahtijevaju posebne besplatne dodatke preglednika za pregled sadržaja, mogu se jednostavno i brzo preuzeti i instalirati sa službene web stranice tvrtke Adobe. Prednost flash filmova bilo je vrlo brzo učitavanje i rad s vektorskom animacijom s interaktivnošću. Flash se može učitati prije nego se cijeli video prikaže na ekranu, odnosno možete implementirati opciju kada počnete gledati animaciju, a ostali "streamovi" na ekranu se učitavaju u pozadini.
Korištena flash grafika u vektoru plus programski kod omogućavaju izradu aplikacije s punim mogućnostima koja može zamijeniti neke rastere, video fragmente, programske kodove, ali je čini mnogo optimalnijom, manje se koristi za streamove, manje snage procesora se konzumira. Uz vektorsko renderiranje, Flash Player (player potreban za gledanje Flash filmova) uključuje virtualni stroj (ActionScript Virtual (AVM)) koji podržava skripte interakcije tijekom izvođenja, a podržava i video, mp3.
Razmotrimo postojeće vrste grafike i istaknimo prednosti vektorske grafike s kojom Flash izravno radi.
Sva grafika se može podijeliti u tri vrste: rasterska, vektorska, 3D. U rasterskoj grafici, kao na TV monitoru, svaka slika se sastoji od skupa malih ndash elemenata; pikseli ndash; je skraćenica za element slike.
Princip točkaste grafike je vrlo jednostavan: dok dijete crta ćelije u školi, samo su ovdje te stanice mnogo manje. Ova vrsta grafike je jednostavna kako u implementaciji tako i u obradi i prezentaciji, tehnički je pogodna za implementaciju, automatizirati unos ili digitalizaciju slikovnih informacija.
Ali rasterska grafika ima nedostatke: opsežna je, težina datoteke kao rezultat postaje velika, a kada se slika smanji ili poveća, kvaliteta slike se gubi.
Kodiranje grafičkih informacija u vektorskoj grafici je drugačije: sve slike su specificirane kao ndash konture; matematički objekti. Ove konture su neovisni objekt koji se može pomicati, mijenjati veličinu, skalirati i bilo koji broj puta. Linije su postavljene početnim točkama, formulama koje označavaju same crte. Zahvaljujući tome, prilikom promjene uzorka, proporcije se uvijek točno održavaju. Vektorska grafika je također objektno orijentirana grafika, jer se crtež sastoji od pojedinačnih objekata - ravnih i zakrivljenih linija, elipse, pravokutnika, zatvorenih i otvorenih oblika itd., koji imaju svoje karakteristike debljine obrisa, boje, stila linije itd. d.
Vektorska grafika je ekonomična u smislu resursa, informacije o njoj se pohranjuju u obliku formula, a ne informacija za svaku točku, opisi boja ne povećavaju značajno veličinu datoteke. Vektorsku grafiku lako je mijenjati bez gubitka kvalitete slike. Postoje područja grafike u kojima je očuvanje jasnih kontura temeljno, na primjer, u stvaranju logotipa, u fontovima itd.
Vektor u potpunosti iskorištava razlučivost svih izlaznih uređaja, kao što je pisač. Slika uvijek izgleda kvalitetno, jasno, sve će ovisiti samo o samom pisaču.
Također, prednost vektorske grafike može se nazvati i to što se lako pretvara u rastersku grafiku, ali ne i obrnuto! I može uključivati rasterske grafičke objekte, iako se ne može obraditi na isti način.
Ozbiljna prednost vektorske grafike smatra se sredstvom za integraciju teksta i slika, jedan pristup njima, odnosno sposobnost stvaranja konačnog proizvoda. Najpopularniji uređivači vektorske grafike su CorelDRAW, Adobe Illustrator i, naravno, Adobe Flash.
Vektor je ograničen pri stvaranju realističnih slika: jasan i crtan ndash; da, ali evo kako formulirati bor ili oblak. Problem postoji i kod unosa grafičkih informacija: na primjer, skener prenosi podatke o slici piksel po piksel: mjesto i boju svake točke ovisno o reakciji svjetlosnog snopa. Ne može pokrivati objekt po objekt, a ne mogu se sve slike, kao što sam gore napisao, formalizirati.

Flash je postao univerzalno popularan ndash; crtani banneri pojavljuju se na gotovo svakoj web stranici. Interaktivni su, reproduciraju animaciju i zauzimaju malo prostora na disku, što je važno pri radu na mreži.
Animacija se stvara prikazivanjem svakog okvira bljeskalice tijekom određenog vremena. Kada ima mnogo okvira, stvara se iluzija kretanja. Ranije su se flash tehnologije pojavile GIF-animacije, ali su mogućnosti Flasha puno šire. Dakle, uz njegovu pomoć možete kreirati navigacijske elemente, glasovne crtiće, animirane logotipe, kalkulatore, cijele stranice sa nizom raznih interaktivnih elemenata i kakva se čuda animacije mogu stvoriti na flashu: izgledaju vrlo impresivno, a druge tehnologije za web ne mogu pohvaliti se takvim sposobnostima.
Flash animacije se nazivaju filmovi. Mogućnosti animacije nisu ograničene samo na animaciju, animirani su razni objekti: izbornici, slike, linkovi, tekstovi.
Prilikom pokretanja programa otvara se prozor s radnim prostorom i alatnom trakom, kao i dodatnim prozorima koji se mogu povezati tijekom rada. Prikazuju se i kartice za rad s vremenskom trakom, postavke provjere grešaka itd. U programu se filmovi stvaraju crtanjem ili uvozom gotovih crteža, postavljaju se u posebno područje ndash radnog prozora; scena (Stage), a okviri se stvaraju pomoću vremenske trake (vremenska traka).
U filmu može biti nekoliko scena; kada pokrenete film, reproduciraju se redoslijedom kojim su stvorene, osim ako je taj redoslijed namjerno promijenjen. To vam omogućuje praktičnu i brzu promjenu pojedinačnih epizoda, promjenu njihovog redoslijeda.
Sama animacija radi se mijenjanjem okvira koji slijede jedan za drugim, mijenjanjem njihovog sadržaja, odnosno u okvir se dodaju objekti s potrebnim parametrima. Objekti na pozornici se mogu rotirati, postaviti položaj, boja, prozirnost, oblik, veličina, isto se može učiniti sa bilo kojim drugim objektima.
Animacija se može izraditi na sljedeće načine:
Animacija okvir po kadar ndash; crtanje u svakom okviru se radi ručno i okviri idu u nizu;
izračunato (Tweened Animation) ndash; izrađuju se samo početni i završni okviri (zvani ključni okviri), a između njih program sam gradi okvire; dvije vrste takve animacije: kretanje (Motion Tweening, kada se mijenjaju parametri pokreta, okret, veličina, položaj), oblici (Shape Tweening);
programski ndash; kada se parametri za promjenu objekta postavljaju pomoću naredbi programskog jezika Action Script.
U procesu rada na filmu izvorni podaci se spremaju u posebnu datoteku s nastavkom .fla. To uključuje scenu sa svim objektima, kao i dodatne parametre o objektima koji nisu bili uključeni u film, ali su u njemu stvoreni, kao i opcije zvuka, komentare, kodove skripte, postavke programa itd. Nakon što izradite takav izvor, trebate ga prevesti u format prikladan za Internet ndash; naime SWF, pa objavljujemo film ili kompajliramo kod. To će ukloniti informacije iz datoteke koje nisu potrebne za reprodukciju u željenom obliku filma. Dakle, veličina datoteke postaje minimalna i korisnik se brzo učitava. Takva se datoteka može zasebno otvoriti pomoću ndash; player će ga igrati, ali ga možete povezati s bilo kojom html stranicom kao objekt.

Film je kreiran od montažnih ndash elemenata; standardi (Simboli) ili simboli. Referenca je slika, gumb, animacija, filmski isječak koji se više puta koriste u videu. Mogu se kreirati ili uvoziti. Jednom kreirani, simboli se pohranjuju u posebnoj ndash trgovini; knjižnica. U procesu sastavljanja filma, na onim mjestima gdje je potrebno, ubacuju se instance (Instance) standarda (koji su pohranjeni u knjižnici), a ne svaki put u potpunosti. I možete ih umetnuti bilo koji broj puta i bilo gdje. U tom slučaju možete promijeniti parametre instance kako želite: mjesto, veličinu, mjerilo, rotaciju, zavoj, prozirnost, ton, itd., dok se sami referentni simboli ne mijenjaju. Ovo je vrlo zgodno ndash; ne trebate svaki put iznova kreirati element ili ga kopirati, element je jedan, a njegovih modifikacija ima koliko god želite. A tijekom procesa objavljivanja, datoteka završnog videa, koja je kreirana u swf formatu, sastavlja se na način da će na jednom mjestu biti izravno referentni objekt, a na svim ostalim ndash; samo ukazuje na to. Zamislite koliko je na ovaj način smanjena težina videa u odnosu na kopiranje gotovo identičnih elemenata.
Standardi su:
bik; Filmski isječak (moviklip) ndash; uključuje zvuk, grafiku, animaciju, može se programski skriptirati;
bik; Grafički (Grafički) ndash; statični crteži, animacija, zvuk, ali nisu programski kontrolirani;
bik; Gumb (gumb) - uključuje slike, zvuk; u usporedbi s drugim tipovima referenci simbola, uključuje samo četiri okvira, koji pokazuju promjene u stanju gumba kada se dogode različiti događaji mišem.
Prije izravnog kreiranja referentnog simbola, morate postaviti njegovu vrstu, kasnije se može promijeniti.
Osim referentnih simbola i njihovih instanci, film može sadržavati slike iz vanjskih datoteka, fontove.
Cijeli video u Adobe Flashu ndash; ovo je slijed okvira (Frames), oni se prikazuju naizmjence određenom brzinom. Rade uz pomoć vremenske trake. S lijeve strane na ljestvici su slojevi čija imena treba postaviti, s desne strane ndash; skup praznih okvira koji se popunjavaju kako se objekti stvaraju i postavljaju na pozornicu. Čim se okvir napuni objektima, mijenja boju u sivu. Ključni okviri označeni su crnom točkom. Na vremenskoj traci, trenutni okvir je označen crvenom ndash oznakom; glava za igranje kroz koju okomito prolazi tanka crvena linija, koja prelazi sve slojeve i laquo;vidi traquo; trenutni okvir u svakom od njih. Upravo se ti okviri, odnosno njihov sadržaj u obliku filmskih isječaka, prikazuju na ekranu.

Za implementaciju interaktivnosti i mogućnosti stvaranja punopravnih web stranica, Adobe Flash koristi programski jezik Action Script.
Kako bi film učinio interaktivnim, Flash koristi skripte (script-script), oni sadrže skup instrukcija (akcija) u ActionScript-u, a izvršavaju se kada se dogode određeni događaji: korisnik pritisne gumb, dođe do određenog kadra filma, reakcije na kretanje miša, njegov kotačić, pozicioniranje pokazivača na određeno područje i mnoge druge. Naredbe skripte određuju kako će Flash reagirati kada se dogodi neki događaj.

Naredbe skripte koje se izrađuju prilikom implementacije događaja određuju se za isječak, okvir, gumb, a to se radi na posebnoj kartici pri dnu zaslona Akcije (naredbe) (Okvir radnji, filmski isječak radnje), gumb Akcije.
Mogući događaji:
Pritisnite tipku ndash; kada korisnik pritisne tipke na tipkovnici, parametar funkcije je naziv tipke.
Lebdjeti (Roll Over) ndash; kada je pokazivač miša iznad objekta, ali miš nije pritisnut;
Otpustite ndash; ako se tipka miša otpusti kada je pokazivač iznad programirane tipke, odnosno ako korisnik klikne na manipulator laquo;mouseraquo;;
Pritisnite ndash; ako je tipka miša (lijeva) pritisnuta dok je pokazivač iznad tipke koja je programirana. U tom slučaju se uzima u obzir područje aktiviranja, a ne njegova vidljiva slika, to se određuje u okviru Hit;
Ukloni (izbaci) ndash; iznad tipke je bio pokazivač miša, nije pritisnut i miš je oduzet od programabilne tipke;
Shift (Drag Out) - tipka miša se postavlja iznad objekta, pritisne i ukloni;
Release Outside ndash; ako je tipka miša pritisnuta na objektu, a zatim ju je korisnik otpustio izvan objekta;
Povucite preko ndash; na objekt se postavlja pokazivač, pritisne se i ne otpusti lijeva tipka miša, već se pokazivač vodi iza objekta, a zatim se ponovno vraća.

Jezik ActionScript 3.0, u usporedbi s ActionScript 2.0, moderniji je po tome što se temelji na osnovama objektno orijentiranog programiranja. Gdje su glavni koncepti klasa, objekt, njegovi atributi ili svojstva, kao i metode svojstvene ovom objektu.
ActionScript se izvršava pomoću virtualnog stroja (Virtual Machine ActionScript), dio je Flash Playera.
Osnova bilo kojeg programskog koda je varijabla koja se u ActionScript postavlja ovako: var ndash; posebna Flash naredba, što znači da se u ovom odjeljku označava varijabla i određuje njezin tip; ime ndash; ime varijable, navedeno u tekstualno-numeričkom formatu, ali ne počinje brojem; upišite ndash; indikacija tipa varijable (numerički - Broj, logički ndash; Boolean, tekst - String, itd.). to jest, odredit ćete: Var x: String;
Obavezno uključite dvotočku nakon naziva varijable i točku-zarez na kraju retka. Tijekom izvršavanja koda vrijednost, a prema tome i tip varijable, može se mijenjati.
Varijabla koja sadrži veliku količinu podataka naziva se niz. U AC 3.0. specificira se s tipom Niz: Var Mas: Niz.
Svi elementi niza su numerirani počevši od 0, tako da za pristup, na primjer, prvom elementu, morate navesti Mas. To jest, u uglatim zagradama označavate položaj željenog elementa u nizu.
Sam kod će se sastojati od funkcija koje opisuju slijed naredbi koje se javljaju na određenom ndash događaju; klik mišem, pritisak tipke, postizanje neke vrijednosti itd.
Funkcija je navedena pomoću funkcije rezervirane riječi, zatim navedete njezino ime - ime - bilo koji tekstualno-numerički naziv, ali ne počinje brojem, zatim u zagradama () možete odrediti parametre funkcije ndash; ono što mu se šalje kao ulaz, oni mogu biti odsutni, zatim dvotočka i tip podataka koji funkcija vraća ili void ndash; kada funkcija ne vraća ništa. Nakon toga stavite cijeli kod funkcije u vitičaste zagrade ( ). I pristupate funkciji, navodeći njezin naziv i parametre ako je potrebno: ime (). "Uvjeti u AC 3.0. se postavljaju putem operatora if: if(x==y), odnosno u okruglim zagradama, trebate navesti sam uvjet usporedbe. Petlje su definirane kroz for(), gdje su njegovi parametri postavljeni u zagradama: varijabla brojača, korak njezine promjene.
Svaki objekt karakteriziraju njegovi parametri ili svojstva; možete priložiti slušatelje događaja objektima u flashu pomoću funkcije addEventListener. Ovaj slušatelj će rukovati događajima koji se događaju s objektom, a ako su reakcije na njih opisane u funkciji od strane programera, program će reagirati u skladu s tim.

Ovo je samo mali dio onoga što trebate znati kada počnete stvarati flash stranicu. Ne morate kreirati web stranicu od nule. Postoje posebni predlošci koje možete kupiti i modificirati kako bi odgovarali svojim potrebama (na primjer, stranica templatemonsters). Dizajn je tu već u potpunosti razvijen, potrebno je promijeniti sadržaj i u softverskoj implementaciji sve što će biti potrebno može se reprogramirati. Zatim morate kupiti domenu i hosting, postaviti html datoteku u koju je spojen swf.
Čitajte knjige (na primjer, knjiga laquo; 100% tutorial M.Flash MXraquo; pomogao mi je u radu i člancima), učite od kolega na forumima (demiart, flasher.ru), a također i koji bi trebao biti vaš prvi asistent je pomoć na službenoj web stranici tvrtke Adobe. Opsian jezik ActionScript je vrlo detaljan i detaljan, prikazani su primjeri, a materijal je predstavljen i na ruskom jeziku.
Nakon što izradite video, morate ga objaviti. Možete postaviti opcije objavljivanja programa u stavci izbornika Datoteka Opcije objavljivanja. Označava u kojim formatima treba prenijeti video, koje su postavke kvalitete grafike i zvuka i mnoge druge. Nakon što imate swf datoteku, možete je koristiti kao potpunu gotovu aplikaciju. Da biste promijenili, ažurirali stvoreni video, trebate urediti ndash izvor; fla datoteku i ponovno objaviti.

Srećom, većina aktivnih korisnika interneta može stvoriti flash igru. Za početnike, čak i početne vještine programiranja puno pomažu u tome (stjecanje ih, usput, nije tako teško - postojala bi želja). Istina, trebat će vam neko vrijeme da savladate jedan od mnogih posebnih dizajnera flash igara (na primjer, Macromedia Flash).

Mnoge softverske stranice sadrže, između ostalog, upravo takve konstruktore. Njihova instalacija na računalo, u pravilu, ne stvara nikakve posebne probleme za korisnika. Zapamtite da odabrani program treba biti registriran i instaliran sa svim potrebnim promjenama - tada će vam služiti vjerno, odnosno neprekidno. Većina dizajnera igara izrađena je na engleskom, ali možete potražiti krek ili verziju na ruskom. Često se u samim postavkama nalazi prozor u kojem možete postaviti svoj materinji jezik.

Kako napraviti flash igru: preliminarna priprema

Čak i prije nego što sjednete svladati dizajnera, već biste trebali imati približan scenarij za igru, priču. Dobro je unaprijed razmisliti o animaciji i dizajnu - to će vam značajno uštedjeti vrijeme. Prije nego što izradite svoju flash igru, odlučite se za njenu željenu vrstu. Za inspiraciju posjetite web-mjesta koja sadrže biblioteke flash igara.

Profesionalci preporučuju početnicima da počnu stvaranjem jednostavnih aplikacija, poput arkadnih igara. I tek tada će se moći prijeći na složenije vrste igara, pa čak i stvoriti vlastite strategije. U istom konstruktoru možete odabrati vrstu buduće igračke, gdje su svi žanrovi prikladno razvrstani. Aktivirajte, na primjer, arkadu (dvostruki klik).

Kako napraviti flash igru: rad u dizajneru igara

Otvorite predložak i povucite željene objekte iz odjeljaka Animirani objekti i Statični objekti na njega. Stvorite pozadinu odabirom teksture i boje. Za objekte odaberite boje pomoću palete boja. Koristite Animation Player da provjerite koje druge značajke nisu omogućene. U postavkama postavite razine kretanja likova igre (u arkadama) ili objekata (u logičkim igračkama).

Nakon što ste učinili sve što trebate, pokrenite program za ispravljanje pogrešaka. U ovom načinu možete proći kroz vlastitu igru, počevši od bilo koje razine - to je važno kako biste provjerili njezinu izvedbu. Uklonite otkrivene pogreške i ponovno provjerite flash igru. Ako je sve u redu, spremite promjene.

Kako stvoriti flash igru: dovedite igru "na pamet"

Sada možete smisliti originalno ime za svoju flash zamisao, napišite kratku bilješku. Upotrijebite dizajner uvodnog zaslona za stvaranje spektakularnog početnog zaslona za svoju igru. Spremite i sve promjene koje napravite.

Prođite kroz vlastitu flash igru od početka do kraja kako biste pronašli (ili ne pronašli) greške i kvarove u njoj, a ne škodi kritičan pogled na svoj ručni rad. Vrlo je važno da igra ima logične i dobro definirane dijelove, poput dobre knjige ili filma: početak, razvoj događaja, završetak.

Pošaljite čistu verziju svoje igre prijateljima - neka najiskreniji kritičari ocijene koje ste rezultate postigli. Pa, nakon toga već možete prenijeti flash igru na web.

Kako napraviti flash igru ako imate želju, ali nemate znanja?

Onim brojnim korisnicima koji su toliko zabrinuti zbog ovog problema, svakako želimo dati odgovor. Zapamtite da nikakvo znanje ne može doći niotkuda. Svaki novi posao mora negdje početi. S vremenom ćete početi shvaćati kakvo vam znanje nedostaje za stvaranje igara. Počet ćete tražiti savjet, tražiti preporuke, čitati relevantnu literaturu, zahvaljujući kojoj ćete početi sve više napredovati u svojoj vještini. Nemojte se bojati novog, inače nikada nećete postići ono što želite. Sretno!

Program za kreiranje flash igrica bez znanja programskih jezika. Omogućuje stvaranje igara od logičkih blokova i unaprijed pripremljenih slika.

Negdje, vjerojatno već prije nekoliko godina, na našoj web stranici pojavio se program Game Maker koji vam je omogućio da pravite igre bez praktički nikakvog poznavanja bilo kojeg programskog jezika!

Do sada je ova stranica kod nas bila jedna od najviše raspravljanih, a često se u komentarima javljaju pritužbe da se na njoj ne mogu kreirati igrice koje bi se mogle igrati online. Danas ćemo se ponovno vratiti na temu razvoja igara i razmotriti sličan program koji još uvijek može napraviti flash igre - Stencyl!

Značajke programa

Uz pomoć Stencyla možete kreirati 2D igre bilo kojeg žanra, ali prije svega, programski motor je "izoštren" za razne rpg pucače. Strukturno, program je cijeli skup alata u kojima možete, po želji, stvoriti igru od nule bez korištenja aplikacija trećih strana.

Skočni prozor s informacijama o novoj verziji programa zatvaramo tipkom "Zatvori" ili "Ne prikazuj više" (ako ne želimo vidjeti ovaj prozor svaki put kada se program pokrene) i umjesto toga dobivamo sljedeći prozor:

Ovdje nam se nudi da stvorimo vlastiti račun u zajednici programera Stencyl. U principu, ne morate kreirati račun (za to kliknite gumb "Podsjeti me kasnije" u nastavku), ali registracija vam daje priliku da preuzmete dodatne predloške i radnje iz online pohrane pod nazivom StencylForge, tako da neće boli me :). Za kreiranje računa kliknite gumb "Kreiraj račun" i idite na obrazac za registraciju:

Ovdje popunjavamo standardna polja vašim korisničkim imenom, lozinkom (dva puta) i e-mail adresom, a zatim kliknemo gumb "Prijavi se". Ako sve prođe kako treba, tada će se pred vama konačno otvoriti sučelje početnog prozora programa.

Pokreni sučelje prozora

Izvana, radni prostor početnog prozora Stencyl podijeljen je u nekoliko zona:

Na vrhu je tradicionalno traka izbornika i alatna traka. Ovdje su sakupljene sve glavne postavke i kontrolni gumbi. Ispod alatne trake imamo malu usku sivu traku. Sadrži kartice (da - Stencyl sučelje je multi-tab, što je vrlo zgodno) i tipke za brzo prebacivanje između njih (desno).

Glavni radni prostor podijeljen je u dva dijela: s lijeve strane nalazi se navigacijska traka za dijelove programa, a s desne strane - glavni sadržaj (na glavnom ekranu - popis igara), koji se mijenja ovisno o trenutno aktivnim način rada. Na dnu se nalazi još nekoliko dodatnih gumba koji vam omogućuju:

Otvorite mapu u koju Stencyl pohranjuje sve resurse stvorenih igara i samih igara (gumb "Prikaži mapu igara" u donjem lijevom kutu).
Pokrenite tečaj za rad s programom (“Start Crash Course” na zelenoj ploči u donjem desnom kutu). Inače, pored njega se nalazi i gumb za skrivanje ponude za obuku ("Ne prikazuj više").
Otvorite trenutno odabranu igru s popisa, što je slično dvostrukom kliku na ikonu igre (“Otvori igru” u donjem desnom kutu).

Kako biste sami istražili mogućnosti Stencyla, možete proći tečaj (i bilo bi poželjno da ga prođete), kao i otvoriti neku od gotovih igrica koja najviše odgovara vašoj ideji i vidjeti kako sve tamo funkcionira. I predlažem da proučimo rad programa na primjeru stvaranja igre o avanturama simbola naše stranice i njegovog virtualnog stanovnika - Fride Best!

Kako početi stvarati igru u Stencylu

Ako ste, prije nego što krenete stvarati svoju igru, pogledali standardne primjere igara na Stencylu, možda ste primijetili da su u osnovi sve prilično jednostavne, na jednom zaslonu i imaju bočni pogled. Napravit ćemo dinamičan top-down pucač s gađanjem mišem! Sve je kao u "velikim" igrama :).

Za svoj projekt možete promijeniti logiku nekog od gotovih predložaka, ali mi ne tražimo jednostavne načine i stoga - samo "od nule", samo "hardcore" :). Da biste to učinili, kliknite na alatnoj traci radnog prostora (ili u izborniku "Datoteka" - "Kreiraj novu") gumb "Kreiraj novu igru" i uđite u sljedeći prozor:

Ovdje možemo odabrati predložak igre po žanru s unaprijed odabranim skupom funkcija i radnji za vaš projekt. Međutim, kreirat ćemo igru od nule, stoga odaberite stavku "Prazna igra" i kliknite gumb "Dalje".

U sljedećem koraku moramo napraviti neke osnovne postavke:

U polju "Naziv" trebamo odrediti naziv naše igre, a u odjeljku "Screen Size" postaviti dimenzije polja za igru navodeći njegovu širinu (Width) i visinu (Height) u pikselima. Nakon toga kliknite gumb "Kreiraj" i idite izravno na sučelje uređivača igre:

Prema zadanim postavkama, ispred nas se otvara kartica "Nadzorna ploča" na kojoj je s lijeve strane prikupljeno cijelo stablo resursa igre, a desno je sam radni prostor. Ovdje bi, mislim, bilo prikladno napraviti neka pojašnjenja o strukturi "stabla".

Sastoji se od četiri grane, od kojih prve dvije sadrže standardne skupove resursa (RESOURCES) i logiku (LOGIC), a posljednje dvije mogu po želji pohraniti ručno učitane pakete resursa (RESOURCE PACKS) i proširenja (EXTENSIONS).

Glavna grana ovdje je grana RESOURCES. Sadrži sljedeće odjeljke:

Vrste glumaca - ovdje se pohranjuju sprijtovi svih likova igre i konfiguriraju se akcije njihove animacije i međusobne interakcije.
Pozadine - u ovom dijelu možemo pohraniti sve potrebne pozadine za igru. Štoviše, pozadina može biti i za pozadinu (pozadinu) i za prednji plan (foreground), što vam omogućuje da pozadine postavite jednu na drugu, postižući, na primjer, učinak paralakse.
Fontovi - odjeljak u koji možemo učitati razne lijepe fontove za stvaranje originalnih natpisa. Međutim, vrijedi uzeti u obzir da Stencyl može raditi samo s engleskim skupom znakova, pa da bismo dodali ruska slova u datoteku fonta, moramo njima zamijeniti neke od latiničnih znakova.
Scene su mjesto za stvaranje i uređivanje razina igre. Ovdje možemo postaviti izgled bilo koje pozornice i smjestiti sve likove, bonuse i ostale elemente igre.
Zvukovi - odnosno spremište svih zvukova korištenih u igri.
Tilesets - posebna grana koja pohranjuje pločice - posebne spriteove koje možemo koristiti za izgradnju razina igre.

Izrada i konfiguracija pločica

Ne postoji jednoznačno mišljenje o slijedu u kojem se provodi ova ili ona igra. U ovom trenutku, to je prikladno za svakoga, ali bih preporučio sljedeći algoritam:

Napravite prvu scenu - stvorite lik - stvorite neprijatelje - stvorite pojačanja - stvorite ostale faze

Da biste stvorili scenu u Stencylu, trebate nacrtati njezin izgled u grani Scene. Međutim, da bismo crtali, prvo moramo imati blokove kojima možemo "crtati". Ovi blokovi u programu nazivaju se pločice (pločice) i pohranjeni su u odjeljku Tileset:

Tileset je jednostavna matrica slika koju u njega učitavate. Možete prenijeti ili gotovu matricu (slika koja se sastoji od nekoliko slika jednake veličine u jednom ili nekoliko redaka) ili dopuniti postojeće setove zasebnim slikama.

Prvo moramo stvoriti novi skup pločica (gumb "Stvori novo" u odjeljku Tilesets), nakon čega ćemo vidjeti prozor, kao na gornjoj snimci zaslona. Za prijenos slike potrebno je kliknuti na gumb "Odaberi sliku" i u prozoru Explorera koji se otvori odabrati unaprijed pripremljenu datoteku sa željenom(ima) slikom(ima).

Kada se slika učita, postavit ćemo njene parametre izgleda i dimenzije po širini i visini, nakon čega (ako je sve ispravno prikazano) možete dodati sliku u set pritiskom na tipku "Dodaj".

Za svaku sliku (pločicu) u matrici možete konfigurirati parametre interakcije s likovima i objektima igre. Da biste to učinili, odaberite željenu pločicu i pristupite sljedećem prozoru:

Odjeljak "Granice sudara" otvorit će se na vrhu desnog okna. Ovdje možemo odabrati proizvoljan oblik koji označava granice interakcije našeg objekta s likovima igre. Standardno, sve pločice imaju parametar "Kvadrat" (kvadrat), što pločicu čini potpuno neprohodnom i čvrstom. Ako pločicu trebate učiniti "prozirnom" za likove (na primjer, pod), tada je dovoljno postaviti parametar "Bez sudara".

Osim obruba, animacija se može postaviti za svaku pločicu dodavanjem okvira pomoću gumba "Umetni okvire" na donjoj ploči. Prema zadanim postavkama, brzina animacije je 100 milisekundi, ali se taj broj može proizvoljno promijeniti za svaki okvir.

Da biste to učinili, samo dvaput kliknite na željeni okvir lijevom tipkom miša i u prozoru koji se otvori promijenite indikatore kašnjenja prema potrebi. Također je moguće ispraviti odabrani okvir pomoću ugrađenog grafičkog uređivača koji se otvara tipkom "Uredi okvir".

Renderiranje scene u Stencylu

Nakon što se formira set pločica, logično je prijeći na sljedeći korak - formiranje gotovog prostora za igru od dodanih slika. To možete učiniti klikom na gumb "Kreiraj novo" u odjeljku Scene. Nakon pritiska na tipku, dolazimo do prozora postavki scene:

Ovdje svakako moramo postaviti jedinstveni naziv za našu scenu u polju "Naziv", odrediti dimenzije (širina i visina u pločicama (prema zadanim postavkama) ili pikselima), te opcionalno (odnosno na vlastiti zahtjev) postaviti pozadinu boja za novu scenu. Kliknite "U redu" i uđite u uređivač razina:

Izgleda kao grafički uređivač. U središtu je radni prostor, gdje crtamo svoju razinu. S lijeve i gornje strane su male alatne trake. S desne strane su paneli paleta, odabir setova pločica i upravljanje slojevima. E sad kako sve funkcionira...

Prije svega crtamo pozadinu našeg radnog prostora. Da biste to učinili, na desnoj ploči aktivirajte karticu "Paleta" i na njoj karticu "Pločice" i odaberite željenu pločicu s prikazanog popisa. Zatim na lijevoj ploči odaberite alat Pencil i odabranom pločicom nacrtajte željena područja.

Zbog podrške slojeva, pločice se mogu preklapati jedna s drugom, pa je najlogičnije organizirati razinu, uzimajući u obzir činjenicu da ćemo, na primjer, na sloju “Layer 0” imati pozadinski supstrat, iznad, sloj s preprekama i likovima, a još viši - sloj s raznim brojačima i indikatorima igre.

Slojevima se može upravljati pomoću gumba ispod ploče "Slojevi". Postoje gumbi za stvaranje, brisanje, premještanje i preimenovanje slojeva. Osim toga, bilo koji sloj se može sakriti ili prikazati klikom na gumb u obliku oka desno od naziva sloja.

Stvaranje likova

Nakon što smo stvorili našu prvu scenu, vrijeme je da je popunimo raznim likovima za igru. U Stencylu se zovu "glumci" i pohranjeni su u odjeljku "Vrste glumaca". Glumci su stvoreni po istom principu, pa ćemo ovaj proces razmotriti na primjeru stvaranja glavnog lika naše igre - Fride.

Da biste dodali novog glumca, samo idite na prethodno spomenuti odjeljak Vrste glumaca i tamo kliknite gumb "Stvori novi". Već nas uobičajeno ponovno pitaju kako želimo imenovati novi objekt igre, nakon čega će se pred nama pojaviti prozor za uređivanje animacije likova:

Ovdje se s lijeve strane prikazuje popis dodanih animacija glumca (zadana postavka je prazan okvir "Animacija 0"), a s desne strane nalaze se alati za dodavanje i konfiguraciju tih istih animacija.

Odaberite praznu animaciju (ili dodajte novu klikom na gumb s plusom na dnu) i kliknite na polje "Kliknite ovdje za dodavanje okvira" na desnoj strani. Nakon toga će se otvoriti prozor za dodavanje slika, koji je sličan sličnom prozoru za dodavanje novih pločica u set. Kliknite gumb "Odaberi sliku", odaberite željenu sliku i prilagodite njezin izgled i dimenzije (ako je potrebno).

Kada je sve postavljeno, kliknite gumb "Dodaj" u donjem desnom dijelu prozora za dodavanje - animacija bi se trebala prikazati kao pregled u lijevom dijelu:

Sada samo moramo podesiti brzinu kadrova (dvostruki klik na bilo koji okvir) i neke dodatne parametre, kao što je naziv (Naziv) animacije (vrlo korisno za složene projekte), petlja (looping) reprodukcija (aktivno prema zadanim postavkama ), sinkronizacija i osnovna točka (Origin Point) ishodište sprite-a (prema zadanim postavkama - središte).

Na donjoj alatnoj traci u desnom dijelu naći ćemo niz gumba. Oni dopuštaju:

dodati nove okvire animaciji (Uvoz okvira);
uredite odabrani okvir u vanjskom uređivaču (Edit Frame (External));
stvoriti okvir u vanjskom uređivaču (Create Frame (External));
uredite okvir u ugrađenom uređivaču (Edit Frame);
ukloniti okvir (Remove Frame);
okvir za kopiranje (Copy Frame);
umetni okvir (Paste Frame);
pomaknite jedan okvir unatrag (Move Back) ili naprijed (Move Forward).

Postavljanje parametara i ponašanja likova

Iznad smo napravili animaciju Fridinog trčanja, koristeći samo dva okvira, koji su zapravo ista figura reflektirana horizontalno. Sada se moramo pobrinuti da pomoću miša i tipkovnice kontroliramo kretanje naše junakinje, a također i da ona adekvatno reagira na sudare s preprekama koje smo nacrtali na pozornici.

Prije svega, postavimo kolizije. Da biste to učinili, pogledajte redak ispod popisa otvorenih kartica i tamo pronađite gumb "Sudar".

Prema zadanim postavkama, područje sudara je kvadrat opisan oko cijelog animacijskog spritea. To jest, događaj sudara će se dogoditi na cijelom području objekta. No, u praksi naša slika najčešće sadrži dodatne elemente (za Fridu, na primjer, blaster), koji, prema zamisli, ne bi smjeli komunicirati ni s čim. Uz pomoć ovog odjeljka možemo postaviti sva područja sudara.

Za početak ćemo područje oko Fride svesti na veličinu samo njezina tijela. Ovdje trebamo uzeti u obzir da područje ne možemo pomicati mišem, a za postavke se koriste četiri numerička parametra u odjeljku “Trenutni oblik”. Prvo postavljamo pomak područja vodoravno (od lijevog ruba) i okomito (od vrha), a zatim specificiramo novu širinu i visinu područja sudara.

U nastavku se nalazi još nekoliko parametara grupiranih u odjeljku "Fizička svojstva". Ovdje smo suočeni s potvrdnim okvirom "Je li senzor?" i koncept grupa.

Ako aktivirate zastavicu "senzor", tada odabrano područje više neće biti fizički objekt: lik ili njegov dio postat će takoreći "transparentan" za razne prepreke, ali će u isto vrijeme zadržati sposobnost pokretanja bilo kakvih radnji pod određenim uvjetima.

Primjer iz stvarnog života može biti moderna signalizacija pomoću lasera: ne vidimo sam laser, ali ako ga dodirnemo, počinje proces obavijesti da smo se popeli na krivo mjesto :).

E sad, čemu služe grupe... Pretpostavimo da naš lik nema blaster u rukama, već mač kojim on (točnije, ona :)) sjecka neprijatelje u kupus (usput, Frida ima laser blade u izvornom kodu;)).

Zadatak je da kada dotaknete neprijatelja mačem, neprijatelj umire, ali ako smo promašili, a protivnik je pogodio Fridu, tada joj je oduzeto nešto energije. A glavni je problem ovdje što je udarna animacija koju imamo, zapravo, slika u kojoj su i Frida i mač prisutni u isto vrijeme...

Ako radnju mača vežemo za sliku, onda će onaj tko dotakne našu heroinu tijekom igranja animacije umrijeti od udarca. I samo kako bi se slika podijelila na nekoliko objekata s različitim mogućnostima i parametrima, izumljen je grupni mehanizam.

Prema zadanim postavkama imamo samo jedno područje koje odgovara samom liku ("Isto kao i vrsta glumca"). Međutim, pomoću alata za crtanje iznad glavnog radnog područja, možemo stvoriti nove virtualne objekte i postaviti grupu za njih pomoću gumba "Uredi grupe".

S sudarima je to možda sve, a sada predlažem da se pozabavimo najosnovnijim - postavljanjem glumčevog ponašanja na pozornici. Da bismo to učinili, moramo otići u odjeljak "Ponašanje":

Prema zadanim postavkama, ovdje na početku nema radnji, ali ih možemo dodati klikom na gumb "Dodaj ponašanje" u donjem lijevom kutu. Vidjet ćete popis funkcija spremnih za korištenje za upravljanje likom ili interakciju s drugim glumcima na pozornici.

Na primjer, odabrao sam ponašanje "8 Way Movement" koje uključuje kretanje glumca u krugu u bilo kojem smjeru. Sada odabiremo dodanu radnju na popisu s lijeve strane i na desnoj strani možemo konfigurirati njezine parametre.

Dodavanje glumaca na pozornicu i testiranje razine

Ako ste slijedili upute, tada bi već trebali imati potrebne minimalne resurse za igru. Ostaje naučiti kako dodati glumce na pozornicu i testirati izvedbu prostora igre.

Vraćamo se uređivaču ranije stvorene scene i ponovno aktiviramo paletu (Paleta), ali sada umjesto pločica uključite karticu "Glumci" (Glumci). Vidjet ćemo popis prethodno kreiranih likova koje možemo dodati sceni pomoću alata Olovka:

Imamo jednu glavnu junakinju pa je dovoljan samo jedan klik olovkom da je dodamo na pozornicu. A sada je došao trenutak istine – prvi test! Za početak pre-kompilacije projekta, samo kliknite gumb "Test Scene" u gornjem desnom kutu kartice s našom scenom. Nakon nekog vremena (prva kompilacija uvijek traje duže), možemo se diviti našem radu u flash playeru:

Osim samog igrača s igrom na strani, imamo prozor koji prikazuje zapisnike igre. Uz njihovu pomoć možemo brzo pronaći probleme u radu i pokušati ih riješiti.

Kao što vidite, Fridu već možemo pomicati u različitim smjerovima, ali sama pozornica ostaje nepomična i čim naša junakinja prijeđe rub vidljivog dijela pozornice, nestaje... Poremećaj :). Problem možete riješiti dodavanjem ponašanja "Camera Follow" na Frida ili postavljanjem željenih parametara pomoću događaja.

Također, bilo bi korisno zamijeniti standardni pokazivač nečim prikladnijim, na primjer, križić. To možemo učiniti dodavanjem novog glumca križića, uklanjanjem područja sudara iz njega i pričvršćivanjem na scenu koristeći standardno ponašanje "Custom Mouse Cursor":

Sustav događaja u Stencylu

Jednostavne igre u Stencylu mogu se kreirati koristeći samo standardna ponašanja (Ponašanja), međutim, ako trebamo nešto nestandardno, onda već moramo razmišljati o korištenju događaja koji su konfigurirani za glumce i scene u odjeljku "Događaji":

Zapravo, ponašanja (Behaviors) se također grade na temelju događaja, ali imaju i vizualno sučelje, što olakšava uređivanje. Ovdje imamo posla izravno s funkcionalnim blokovima koji izvode određene radnje.

Prozor događaja podijeljen je u tri dijela:

Lijevi dio sadrži popis događaja i gumbe za upravljanje (stvaranje/brisanje/premještanje) njima. Da bismo dodali događaj, moramo kliknuti gumb "Dodaj događaj", zatim na padajućem popisu odabrati željenu grupu i odrediti konkretnu funkciju koja nam je potrebna. Desno od kreiranog događaja nalazi se potvrdni okvir koji nam omogućuje da ga deaktiviramo ako je potrebno.
U desnom dijelu imamo popis svih dostupnih radnji, grupiranih u 10 odjeljaka, od kojih se svaki aktivira odgovarajućim gumbom. Radi veće praktičnosti, radnje u svakom odjeljku razvrstane su u tematske kartice i imaju svoju jedinstvenu boju. Na dnu se nalaze još tri kartice. Prema zadanim postavkama aktivna je kartica "Paleta" (paleta) na kojoj se nalaze popisi radnji. Druga kartica - "Atributi" - služi za prikaz lokalnih varijabli (više o njima u nastavku), a treća - "Favoriti" - služi za prikaz vaših omiljenih radnji.
Središnji dio je radno područje. Ovdje formiramo konačne primjere ponašanja likova koristeći različite kombinacije akcijskih blokova i događaja prema kojima se te radnje događaju. Kombiniranje se događa jednostavnim povlačenjem blokova na radni prostor, a zatim uređivanjem parametara navedenih u njima. Treba imati na umu da se funkcija sastoji od samo onih blokova koji su međusobno kombinirani i uključeni u glavni blok događaja. Dakle, da bismo privremeno uklonili određene trenutno nepotrebne (ali korisne) kombinacije, samo ih trebamo premjestiti iz opće strukture u slobodni prostor. Ako se radnje s vremenom pokažu potpuno nepotrebne, onda se mogu potpuno izbrisati premještanjem u smeće koje se nalazi u gornjem desnom dijelu radnog prostora.

Zapravo, već smo opisali algoritam za kreiranje događaja, ali, nažalost, ne mogu dati nikakve univerzalne preporuke - za svaku igru događaji će biti drugačiji i može ih biti dosta... Kao primjer, možete pogledajte izvorne kodove igrice o Fridi, koje ćete pronaći u arhivi s programom, ali ovo je samo smjernica, budući da je rad na eventima vaša osobna kreativnost :).

Postavljanje fizike i svojstava

Vi i ja smo već pokrili puno stvari, ali nismo dotakli neke dodatne teme koje mogu biti vrlo važne pri kreiranju igrica - govorim o postavljanju svih vrsta svojstava naših glumaca i scena. Ovi parametri su pohranjeni u posljednje dvije kartice. A prva je "Fizika":

Za scene i glumce kartica postavki fizike izgleda drugačije. Na kartici postavki fizike scene postoje samo dva parametra - horizontalne i vertikalne postavke gravitacije. Izgled odjeljka postavki za fizičke parametre glumaca prikazan je na gornjoj snimci zaslona i sastoji se od pet kartica s različitim opcijama:

Kartica Općenito. Ovdje imamo tri parametra: tip aktera (stacionaran, platforma (može se kretati prema zadanim pravilima, ali ga drugi akteri ne mogu pomicati) i pokretni), rotaciju aktera (može se rotirati ili ne) i utjecaj gravitacije.
Kartica "Težina" ("Težina"). Na ovoj kartici možete postaviti masu virtualnog objekta i njegovu inerciju.
Kartica "Materijal" omogućuje postavljanje karakteristika za glumca koje će simulirati ponašanje stvarnog predmeta izrađenog od određenog materijala. Imamo mogućnost odabrati jednu od unaprijed postavljenih postavki s padajućeg popisa "Preset Materials" ili ručno postaviti karakteristike trenja i elastičnosti našeg glumca.
Kartica Prigušivanje daje nam mogućnost finog podešavanja parametara interakcije glumca s okolinom uvođenjem takvih vrijednosti kao što su linearni (na primjer, zrak) i kutni (tijekom rotacije) otpor.
Kartica "Napredno" daje nam pristup raznim dodatnim postavkama koje nisu uključene u prethodnim odjeljcima. Ovdje možete aktivirati pojednostavljeni fizički model (za optimizaciju igre), automatsko otkrivanje područja sudara, događaje ponovnog sudara i mogućnost primjene pauze na glumca.

Shvatili smo fiziku, a sada pogledajmo svojstva koja se pozivaju pritiskom na gumb "Svojstva":

Kao iu prethodnom slučaju, svojstva će biti različita za scene i glumce. U svojstvima scene možemo odrediti njezin naziv (“Naziv”), dimenzije (odjeljak “Veličina”) i boju pozadine (“Boja pozadine”).

U svojstvima glumca, osim naziva, možete odrediti opis (polje "Opis") objekta, grupu kojoj glumac pripada (odjeljak "Odaberi grupu") i sloj animacije za mobilne uređaje uređaja (ovdje ne možete ništa promijeniti, jer besplatna verzija programa ne dopušta izvoz igara u formate za mobilne telefone.

Ali to nisu sve postavke koje su nam dostupne u Stencylu. Opće postavke igre dostupne su nam pritiskom na gumb "Postavke" na glavnoj alatnoj traci:

U prozoru postavki, s lijeve strane je popis grupa parametara, a s desne strane je glavno područje (ponekad podijeljeno u nekoliko kartica) koje sadrži sve vrste opcija. Ovdje nas zanimaju sljedeći odjeljci:

"Postavke" ("Postavke"). Prva skupina postavki, koja nam omogućuje da malo personaliziramo našu igru. Ova grupa sadrži tri kartice. Na prvom od njih ("Glavni") igri možemo dati novo ime, kratki opis, kao i sliku za pregled i ikonu. Na kartici "Display" konfigurira se konačna veličina prostora za igru, a na posljednjoj ("Advanced") moguće je omogućiti pojednostavljenu fiziku i postaviti parametre anti-aliasinga.
"Utovarivač" ("Utovarivač"). U ovoj grupi možemo djelomično (uzimajući u obzir neka ograničenja besplatne verzije) prilagoditi izgled preloadera (loadera), koji će se prikazati prije nego što se igra potpuno učita. Već postoje četiri kartice. Na prvom (“Općenito” - općenito) možete odrediti vezu na svoju web-lokaciju, omogućiti zaštitu od kopiranja igre na drugim resursima (popis dopuštenih web-mjesta navodimo u drugom retku odvojenom zarezom) i jedan od učitavača kože. Na kartici Izgled možemo postaviti boju zaslona i pozadinsku sliku pokretača. Pomoću kartice "Stil trake" možete odrediti veličinu trake za utovar, a "Boja trake" vam omogućuje da postavite, odnosno, njegove boje.
"Atributi" ("Atributi"). Ova grupa postavki jedna je od najosnovnijih! Ovdje možete kontrolirati globalne varijable koje se koriste u igri (više o varijablama u sljedećem odjeljku ispod).
"Kontrole" ("Upravljanje"). Kao što naziv govori, u ovoj grupi možemo rekonfigurirati i dodati tipke tipkovnice s kojima će se izvoditi određene radnje igre.
"Grupe" ("Grupe"). Već smo malo više razmotrili mehanizam grupa. Ovdje imamo priliku vidjeti sve stvorene grupe i urediti ih.

Zapravo, to su sve postavke koje će nam trebati za stvaranje flash igrica u besplatnoj verziji Stencyla. No, budući da je ovaj odjeljak o postavkama, bio bi grijeh ne spomenuti parametre samog programa. Možete im pristupiti aktiviranjem stavke "Postavke" u izborniku "Datoteka":

Program pruža podršku za višejezično sučelje, međutim, trenutno postoji samo engleska lokalizacija, pa smo otišli ravno na drugu karticu - "Radni prostor". Činjenica je da se u trećoj verziji Stencyla pojavila funkcija koja automatski generira prilagodljive slike iz učitanih spriteova.

A prema zadanim postavkama, sprite se udvostručuje, što dovodi do pogoršanja kvalitete grafike. Kako se to ne bi dogodilo, savjetujem vam da onemogućite promjenu veličine slike odabirom Standard (1x) u polju Scale.

Savjetujem vam i da pogledate treću karticu - "Urednici". Ovdje možete povezati radnje za obradu grafike, zvuka i teksta s vanjskim naprednijim (a ne onima ugrađenim u Stencyl) uređivačima.

Malo o varijablama

Razmotrili smo gotovo sve nijanse rada u Stencylu, ali nismo dotakli jednu od najmoćnijih značajki - rad s varijablama.

Varijable u bilo kojem programskom jeziku omogućuju vam rad s različitim događajima, izražavajući ih kroz određene brojeve (numeričke varijable), uvjete (booleove varijable), tekstove (string varijable) itd. Glavna značajka varijabli je mogućnost zamjene bilo koje vrijednosti unutar unaprijed određenih granica. Jednostavan primjer varijable: polaznik u razredu. Danas može biti Ivanov, sutra Petrov, a prekosutra Sidorov :).

U našem slučaju varijabla "dežurni" može imati jednu od tri vrijednosti, koje će se automatski zamijeniti ovisno o navedenom uvjetu (na primjer, redoslijed prezimena na popisu).

U Stencylu varijable mogu biti lokalne ili globalne. Lokalne varijable možemo deklarirati u okviru nekog događaja ili ponašanja, a one će raditi samo za navedene radnje. Možete stvoriti lokalnu varijablu u uređivaču događaja pozivanjem odjeljka "Atributi":

Ovdje imamo nekoliko kartica:

Kartica "Getters" omogućuje vam postavljanje varijabli koje će dobiti vrijednost iz bilo kojeg izračuna ili izravnih uputa.
Kartica "Setters" omogućuje postavljanje bilo koje vrijednosti za prethodno kreirane varijable.
Kartica "Atributi igara" pohranjuje blokove globalnih varijabli i, ako želite, omogućuje vam dodavanje novih (iako ćemo u nastavku razmotriti kako to bolje učiniti).
Kartica Popisi nam daje mogućnost stvaranja nizova podataka.
Kartica Funkcije služi za organiziranje kreiranih funkcija.

Algoritam za stvaranje lokalne varijable je jednostavan: prvo stvorite novi blok na kartici "Getters", a zatim pronađite novostvorenu varijablu na kartici "Setters" i dodajte blok s njom u radni prostor, izjednačujući ga s nekim parametar igre. To je sve - varijabla je deklarirana i dobila je skup valjanih vrijednosti.

Globalne varijable (atributi igre) u Stencylu se postavljaju odmah za cijelu igru i mogu se pozvati u bilo kojem događaju ili ponašanju. Kao što je gore spomenuto, možete ih stvoriti u odjeljku "Atributi" na kartici "Atributi igre":

Međutim, mnogo je praktičnije pregledati i upravljati svim stvorenim varijablama pomoću odjeljka "Atributi" u postavkama (gumb "Postavke" na alatnoj traci ili "Prikaži atribute igre" na kartici "Atributi igre" u uređivaču događaja ):

Ovdje imamo cijeli popis globalnih varijabli i moguće je kreirati nove pritiskom na gumb "Create New". Za novu varijablu možemo odmah postaviti tip (numerički, tekstualni, boolean ili niz) i početnu vrijednost bez napuštanja prozora, što je po mom mišljenju vrlo zgodno.

Koristeći globalne varijable, vrlo je prikladno implementirati razne brojače, budući da se podaci u njima spremaju kada igrač prijeđe na nove razine i pohranjuju u memoriju sve dok je sama igra uključena. Također, preporučujem korištenje globalnih varijabli za praćenje animacije koja se reproducira.

Nakon što smo dali glumcu određeni sprite u događajima, možemo dodijeliti određenu vrijednost ovom spriteu u varijabli ispod (na primjer, serijski broj ili naziv animacije). Dakle, vezivanjem radnje na varijablu, možemo je pozvati u bilo kojem trenutku postavljanjem ove varijable na željenu vrijednost.

Izdavanje, uvoz i izvoz igara

Na kraju smo se, doduše ukratko, upoznali s osnovnim principima rada sa Stencylom. Pretpostavimo da smo stvorili igru, testirali je i pokazalo se da sve radi. Sada je na vama da igru iz projekta pretvorite u pravu SWF datoteku koja se može postaviti na internet. Da bismo to učinili, samo trebamo otvoriti izbornik "Objava" i kliknuti stavku "Flash" na popisu "Web".

Započet će kompilacija datoteke igre, nakon čega će se pojaviti zahtjev gdje i pod kojim imenom spremiti rezultirajuću flash datoteku. Spremamo i to je to - igra je spremna :).

Obrnuti proces je uvoz igre. Zahvaljujući funkciji uvoza, možete otvoriti projekte igara drugih korisnika, na primjer, da vidite kako implementiraju ovu ili onu funkciju;). Igru možete uvesti i iz izbornika Datoteka. Nakon uspješnog uvoza, igra će se pojaviti na glavnom zaslonu u popisu projekata. Međutim, ovdje vrijedi napraviti malu rezervaciju.

Problem je u tome što je novi Stencyl 3.0 samo djelomično kompatibilan s projektima stvorenim u ranijim verzijama, tako da funkcionalnost projekta igre koju ste uvezli možda neće biti potpuna ili, u najgorem slučaju, igra se uopće neće pokrenuti, što daje pogrešku . Imat ćete nekoliko opcija - ili tražite i ispravljajte greške, ili se pomirite s tim i ostavite sve kako jest :).

Prednosti i nedostaci programa

jednostavnost stvaranja igara s malo ili nimalo vještina programiranja;
mogućnost stvaranja igara gotovo bilo kojeg žanra;
velika zbirka gotovih ponašanja i resursa za igru;
mogućnost razmjene projekata igara;
nema ograničenja pri izradi flash igrica.

prilično visok intenzitet resursa i samog programa i kreiranih igara;
ograničen broj objekata na pozornici - što je više, igra sporije teče (do neuspjeha pri pokretanju);
nema podrške za ćiriličke fontove (morate urediti vektorske slike latinice, zamjenjujući ih potrebnim slovima);
nepotpuna kompatibilnost nove verzije programa s projektima igara stvorenim u ranijim verzijama.

nalazima

Od svih programa za kreiranje flash igara koji danas postoje, Stencyl je najrazumniji kompromis između jednostavnosti rada i širine mogućnosti. Dobra vijest je da je funkcionalnost dizajnera u besplatnom izdanju praktički neograničena, što vam omogućuje gotovo u potpunosti implementirati svaku ideju.

Međutim, ne zaboravite na "skoro" ... Činjenica je da sam Stencyl radi na bazi JAVA stroja, koji je, kao što znate, prilično zahtjevan u pogledu resursa. Ako ovom opterećenju dodamo i opterećenje koje igra stvara, ispada da nam je za normalan rad potrebno moderno moćno računalo.

Ovo je prvi "skoro". A drugo je implicitno ograničenje broja objekata na pozornici, što sam već usput spomenuo. Čak i ako su ti objekti samo pločice, ali ih ima puno, igra može dati pogrešku tijekom testiranja i neće početi dok ne smanjite njihov broj.

Ukratko, možemo reći da će Stencyl biti idealan motor za kreiranje svih vrsta casual flash igara i side-scrolling pucačina. Štoviše, nakon što ste uvježbali kreiranje flash igara, možete kupiti jednu od vrsta licenci i, uz malu promjenu u mehanici, prenijeti svoju igru na formate koje podržavaju Android i iOS. A ovo je pravi način da zaradite novac postavljanjem igre na Play Market ili App Store!

Na kraju, ostaje samo poželjeti sreću svima onima koji se odluče ozbiljno baviti razvojem igara. Neka vaši algoritmi rade prvi put, a kompajler sjedi i šuti u krpi kad pokrenete svoje igre :).

p.s. Dopušteno je slobodno kopirati i citirati ovaj članak, pod uvjetom da je naznačena otvorena aktivna poveznica na izvor i da je sačuvano autorstvo Ruslana Tertyshnyja.

* Korišteni programi: Flash CS3, Photoshop CS3
* Složenost: srednji
* Procijenjeno vrijeme isporuke: 3 sata

Portfolio stranica je od velike važnosti za svakog suvremenog umjetnika, fotografa, dizajnera, pa čak i glazbenika. Pokazuje ozbiljan pristup poslu i profesionalnost. Danas ćemo pokazati kako možete stvoriti originalan i moderan portfelj fotografija na temelju modernog Flash sustava za upravljanje sadržajem Moto CMS.

Koristit ćemo samostalnu verziju Moto CMS-a, koja sadrži razne uslužne programe, komponente, ugrađene primjere i čiste predloške stranica s različitim strukturama. I koristimo najjednostavniji predložak, odnosno izradit ćemo web stranicu portfelja fotografija od nule.

U ovom vodiču ćemo pokriti sljedeće teme:

* Izrada kontejnera.
* Napravite utore (gumb za zatvaranje, jednostavan gumb).
* Stvaranje modula (glazbeni player i galerija slika).
* Uredite predloader web-mjesta
* Izrada stranica stranice i njihovo popunjavanje sadržajem.

Također ćemo govoriti o značajkama i funkcionalnosti Moto CMS Control Panela.

Mi ćemo trebati:
* Adobe Photoshop;
* Adobe Flash CS3;
* Izvanmrežna verzija Moto CMS-a (besplatna probna verzija);
* Dizajn web stranice c. PSD format.

Pregled konačnog rezultata

Korak 1: Preuzmite Moto CMS datoteke

Da biste započeli graditi našu web-stranicu s portfeljem fotografija, morate preuzeti samostalnu verziju Moto Flash CMS-a. Kako biste ponovili sve korake iz ovog vodiča i razumjeli mogućnosti Moto CMS-a, bit će dovoljna probna verzija.

Korak 2: Kratak pregled Moto CMS datoteka

Evo kratkog pregleda Moto CMS datoteka i mapa:

* Komponente. Ova mapa sadrži mxp komponente kojima upravlja Adobe Extension Manager.
* upravljačka ploča. Sadrži sve datoteke upravljačke ploče.
* doku. Ova mapa sadrži dokumentaciju za API.
* Primjeri. Sadrži 4 primjera gotovih flash stranica, od najjednostavnijih do najsloženijih, s modulom galerije, modulom vijesti, glazbenim i video playerom, kontakt formom itd.
* Predlošci. 5 predložaka koje možete koristiti za izradu web stranice temeljene na Moto CMS-u. Svaki predložak ima potreban skup datoteka i razlikuje se po svojoj strukturi. Danas ćemo koristiti jedan od ovih predložaka, točnije predložak #1, kao osnovu našeg foto portfelja.
* readme datoteku, koji opisuje kako započeti s izradom web-mjesta s Moto CMS-om.

Korak 3: Pokrenite na lokalnom hostu

Naš sljedeći korak je pokretanje predloška web-mjesta od kojeg ćemo izraditi web-stranicu našeg portfelja. Za to nam je potreban lokalni web poslužitelj. Koristimo WampServer. Omogućuje vam izradu web aplikacija s Apache, PHP i MySQL bazama podataka.

Za pokretanje predloška stranice br. 1, jednostavno prenesite sadržaj mape na lokalni poslužitelj predložak_01 iz direktorija /templates/, kao i sadržaj mape upravljačka ploča.

Nakon toga idemo na Moto CMS Control Panel unosom našeg URL-a u adresnu traku preglednika, dodajući /admin na kraju

Bilješka: Trenutno nećete moći pogledati web-mjesto jer još ne sadrži nijednu stranicu. Pojavit će se stranica s greškom 404.

Korak 4: Uređivanje config.xml

Sve što trebamo učiniti je promijeniti širinu i visinu stranice i postaviti boju pozadine.

Veličina našeg projekta je 980×800 piksela. Kako bi se veličina promijenila na velikom ekranu, moramo postaviti "100%" za širinu i visinu stranice. A da bi se ispravno prikazao na zaslonu male rezolucije, moramo odrediti minimalnu širinu i visinu stranice (pojavit će se trake za pomicanje). Boja pozadine je crna (#000000).

Korak 5: Promijenite style.css

Sada moramo otvoriti datoteku style.css i postaviti boju pozadine (crnu). Sve ostalo se može uređivati pomoću Moto CMS Control Panela.

Korak 6: Kreirajte program za predučitavanje

Izvorne datoteke moto.xfl i website.xfl nalaze se u mapama flamoto i flawebsite.
Preloader stranice trebao bi biti kreiran u moto.xfl. Preloader može biti jednostavan isječak sa 100 okvira.

Na ploči Radnje ovog isječka pišemo: "Stop ();" za prvi kadar. Zatim animiramo ostale okvire kako želimo.

Također pišemo "Stop ();" u radnjama prvog okvira vremenske crte u fla.

Ne zaboravite navesti dimenzije stranice (minimalna širina i visina) u svojstvima datoteke moto.fla.

Naš sljedeći korak je stvoriti lijepu animaciju nestajanja preloadera. Na posljednjem okviru moramo pokrenuti web stranicu aktiviranjem funkcije “showWebsite()”.

Otvorite datoteku website.xfl i ažurirajte program za predučitavanje.

Korak 7: Pozadina stranice

Otvorite Moto CMS Media Library (Postavke > Media Library) i zajedno s ostalim potrebnim slikama (za glavnu stranicu, glavne stranice ili galeriju), prenesite pozadinsku sliku pomoću gumba "Dodaj medije".

Nakon toga se vratite na upravljačku ploču, stvorite novu stranicu i umetnite pozadinsku sliku pomoću gumba "Fotografija". Povucite sliku i centrirajte je.

Upravitelj fontova korisnicima omogućuje upravljanje fontovima web-mjesta, koji se pohranjuju kao SWF datoteke i mogu se preuzeti.

Prije učitavanja bilo kojeg fonta, prvo ga moramo pretvoriti u SWF format. Za to ćemo koristiti Online kreator fontova je zgodna online aplikacija koju je razvio MotoCMS tim koja vam omogućuje jednostavnu konverziju TTF i OTF datoteka u SWF. Sve što trebamo učiniti je odabrati potrebnu datoteku fonta s .TTF ili .OTF ekstenzijom, dodati je u Online Font Creator, kliknuti gumb “Kreiraj font” i preuzeti gotovu SWF datoteku, nakon čega je možemo koristiti u našem portfelju web stranica .

Napravite naziv web stranice i slogan

Nakon što se novi font učita, možete kreirati naslov i slogan stranice pomoću alata za tekst i primijeniti željeni font. Za izradu slogana koristimo font Tahoma, veličina: 10, boja: # 727272. Nakon toga prilagodite naziv i slogan stranice u skladu s dizajnom u .PSD-u.

Korak 9: Dodavanje slike na početnu stranicu

Sliku galerije postavit ćemo na glavnu stranicu stranice. Da biste to učinili, odaberite sliku iz biblioteke medija klikom na "Fotografija" na lijevoj alatnoj traci. Ako je potrebno, prilagodite njegovo mjesto u skladu s dizajnom glavne stranice.

Korak 10: Napravite donji izbornik

Koristeći alat Shape, stvorite sivi uski pravokutnik i pomoću alata Text izradite gumbe na njemu. Prilagodite sve prema dizajnu vaše stranice.
Spremite sve promjene i pogledajte rezultat klikom na "Pregled".
Također možete koristiti ugrađeni modul izbornika za izradu izbornika.

Korak 11: Napravite spremnike sadržaja

Bilješka: Spremnici su isječci u website.fla gdje se sadržaj može dinamički dodavati. Mogu biti 4 vrste: 1) kontejner s objektima koji su vidljivi na cijelom mjestu, 2) kontejner s objektima izgleda; 3) spremnik s objektima stranice; 4) spremnik sa popup objektima.

Predložak web-mjesta broj 1 koji smo odabrali prema zadanim postavkama ima dva spremnika: spremnik s objektima vidljivim na cijeloj web-lokaciji i spremnik s objektima stranice. Ako otvorimo datoteku website.fla, vidjet ćemo ih:

Ti su spremnici zapisani u datoteci structure.xml. Provjerite je li širina 980, a visina 800 px.

Kontejner s objektima koji su vidljivi na cijelom web mjestu:

Spremnik s objektima stranice:

Da bi elementi web-mjesta kao što su pozadina, naziv web-mjesta, slogan i donji izbornik sa sivim okvirom bili vidljivi na svim stranicama, moramo ih smjestiti u spremnik objekata na cijelom web-mjestu. To možemo jednostavno učiniti pomoću Moto CMS upravljačke ploče. Jednostavno kliknite na željeni element i odaberite njegovu lokaciju - Web stranica. (Na cijeloj web stranici).

Korak 12: Napravite stranicu O nama

Napravite praznu stranicu

U gornjem lijevom kutu kliknite gumb "Kreiraj" koji će nam omogućiti stvaranje nove stranice.

Povezivanje potrebnih gumba izbornika na novu stranicu

Da bismo to učinili, vraćamo se na glavnu stranicu i povezujemo gumb izbornika na novu stranicu. Jednostavno označite tekst gumba izbornika i kliknite na ikonu veze s desne strane da otvorite uređivač veza. U našem slučaju, gumb izbornika Portfolio povezuje na glavnu stranicu stranice, a gumb O nama povezuje na stranicu O nama.

Dodavanje pozadinske slike na stranicu s podacima

Odlučili smo dodati crnu pozadinu na stranicu. Da biste to učinili, idite na Media Library klikom na gumb "Fotografija" na lijevoj ploči, tamo odaberite unaprijed učitanu sliku (običan crni pravokutnik) i prilagodite njezino mjesto na stranici u skladu s dizajnom.

Dodavanje teksta na stranicu O nama

Dodavanje tekstualnih informacija na stranicu pomoću alata za tekst. Ugrađeni WYSIWYG uređivač prikazuje sve što radite, tako da je oblikovanje teksta jednostavno. Dodavanje kontakt adrese je također dovoljno jednostavno, samo trebate otvoriti Link Editor i unijeti adresu e-pošte.

Kada završite, ne zaboravite postaviti elemente stranice O nama u spremnik s objektima stranice. Odaberite svaki element jedan po jedan i odaberite položaj: Stranica (sadržaj stranice).

Korak 13: Promijenite sliku programa za učitavanje

Možda ste primijetili bijele kružne preloadere dok se krećete kroz stranice. Da biste ih postavili, otvorite datoteku website.fla i idite u knjižnicu. Desnom tipkom miša kliknite predučitavač i odaberite Svojstva.

U prozoru sa svojstvima simbola možete odabrati stavku "Uredi osnovnu klasu" i zatim animirati program za predučitavanje kako želite. Preloader ćemo ostaviti praznim i izbrisati grafičku sliku.

Korak 14: Animacija web stranice

Konačno, dolazimo do najzanimljivijeg dijela našeg vodiča: animacije stranice. U ovom trenutku, kao što ste možda primijetili, stranica je statična, jer niti jedan spremnik nije animiran. Stoga je naš sljedeći korak animirati spremnike i dodati druge animacije kako bismo oživjeli našu stranicu.

Animiranje zadanih spremnika

Spremnik sadržaja lako je animirati duž vremenske trake. Otvorite datoteku website.fla i izradite animaciju zatamnjenja za svaki spremnik.

Prvo, animiramo glavni spremnik s objektima vidljivim na cijelom mjestu. Ovo je sloj website_holder_1. Radimo jednostavnu animaciju s prozirnošću, ali ćemo je nečim ukrasiti. Napravite drugi ključni okvir na sloju, postavite Alpha 0% za prvi ključni kadar (učinite ga transparentnim), stvorite okvir između prvog do drugog, a zatim dodajte ublažavanje.

Napravimo animaciju za spremnik s objektima stranice (sloj page_1_holder_2) na isti način, ali neka se pojavi nešto kasnije.

Tako ćemo dodati još dva ključna okvira na sloj, učiniti spremnik prozirnim na prvom i drugom kadru i stvoriti popuštanje između drugog ključnog okvira do trećeg.

Kada kompajliramo i učitamo stranicu, vidjet ćemo da je svaki element već animiran. No, pri prelasku s jedne stranice na drugu nema animacije, samo neobično treperi. Za to je zaslužan drugi dio vremenske trake.

Ovako radimo animaciju pojave i nestanka kontejnera.

Budući da je font teksta iz sistemskih fontova, moramo promijeniti način miješanja iz normalnog sloja na razinu za sve instance filmskih isječaka na slojevima spremnika.

Izrađujemo dodatne kontejnere i animiramo ih.

Za dobru flash stranicu ova animacija nije dovoljna, pa ćemo animirati i ostale dijelove stranice, kao što su vrh (na slici ispod označen žutom), donji dio (označen zelenom bojom) i sam sadržaj ( na slici u crvenom okviru).

Budući da gornji i donji dio leže na razini cijele stranice, za ova dva dijela ćemo dodati dva spremnika. Prije dodavanja spremnika, moramo odrediti njihovu veličinu i mjesto. To je lako učiniti pomoću alata Slice u Photoshopu.

Gornji dio ima sljedeće dimenzije: x=0, y=0, širina=980, visina=120.

Donja zona: x=0, y=765, širina=980, visina=35.

Gornji spremnik sadržavat će naziv web-mjesta, donji spremnik sadržavat će izbornik i prikazivat će se drugačije. Također, zalijepit će se za vrh i dno zaslona kada idu preko cijelog zaslona.

Nakon što odredimo dimenzije spremnika, otvaramo strukturu.xml datoteku i dodajemo nove kontejnere (na razini web-mjesta), navodeći njihove koordinate, širinu, visinu i dubinu.

Nakon dodavanja spremnika u .xml datoteku, moramo ih stvoriti u datoteci website.fla. Otvorite web stranicu.fla datoteku i stvorite nove slojeve za naše spremnike. Redoslijed slojeva trebao bi odgovarati vrijednostima dubine koje smo postavili u xml datoteci.

Možemo kopirati prazan filmski isječak iz sloja website_holder_1 i zalijepiti ga u website_holder_3 i website_holder_4.

U isječku postavljamo iste koordinate kao što je navedeno u datoteci structure.xml.

Za 3. spremnik: x = 0, y = 0;

Za 4. spremnik: x = 0, y = 765.

Otkako smo kopirali klip, ostala su stara imena. Mijenjamo ih prema ID-u kako bi ih bilo lako pronaći.

Isto se mora učiniti za spremnik 4.

Na vremenskoj traci postavljamo prvi ključni okvir za spremnike 3 i 4 tako da se počnu pojavljivati kasnije od spremnika s objektima cijele stranice. Zatim stvaramo druge ključne kadrove i animiramo okvire između. Prvi ključni okviri sadrže početnu poziciju spremnika, a drugi ključni okviri sadrže konačnu poziciju spremnika na web mjestu. Glavni spremnik se pojavljuje s vrha zaslona, pa ga premještamo na prvi ključni kadar; donji spremnik nalazi se na donjoj strani, pa ga također premještamo na prvi ključni okvir. I također dodajemo olakšice kako bismo animirali između.

Evo što smo dobili:

Nakon toga, moramo dodati sljedeći kod na sloj akcija na razini prvog ključnog okvira animacije naših spremnika.

Zatim kompajliramo stranicu i ažuriramo upravljačku ploču.

Stavite predmete u posude

Kada odaberete bilo koji objekt, vidjet ćete da se na popisu mogućih položaja u padajućem izborniku pojavljuju dva nova spremnika: gornji i donji.

Naziv stranice sa sloganom mora biti postavljen u gornji spremnik, a izbornik stranice sa sivim pravokutnikom u donji.

Promijenite sadržaj donjeg spremnika

Sada je poželjno da se na velikom ekranu donji spremnik zalijepi za dno zaslona. Da bismo to učinili, moramo premjestiti animaciju spremnika u drugi isječak, jer, kao što znate, ne možemo programski premjestiti animirani isječak (animacija neće raditi). Nazovimo ovaj isječak website_holder_4_c.

Nakon toga, idemo na glavnu scenu, kliknite na prve ključne kadrove kontejnera 3 i 4 i uredite kod.

Nakon sastavljanja stranice, možete vidjeti da se donji spremnik lijepi za dno zaslona bez obzira na to kako promijenimo veličinu zaslona. Ako je razlučivost zaslona premala, tada se donji spremnik neće preklapati sa sadržajem stranice i ostat će na svom mjestu.

Korak 15: Animirajte spremnik sadržaja

Kako bismo animirali sadržaj stranice, morat ćemo animirati spremnik s objektima cijele stranice na isti način kao što smo to učinili za gornji i donji kontejner.

Korak 16: Napravite stranicu za kontakt

Prije kreiranja nove stranice, ažurirajmo predložak stranice. Napravimo predložak za sve nove stranice, stranicu "O nama". Desnom tipkom miša kliknite stranicu O nama i odaberite Ažuriraj predložak stranice.

Nakon što smo ažurirali predložak stranice, kliknite na gumb "Kreiraj", unesite naziv stranice, naslov, dodijelite URL i odaberite njegovu lokaciju u strukturi vaše stranice, kao što je prikazano u nastavku, na snimci zaslona.

Stranica "Kontakti" je spremna. Sada ostaje urediti njegov sadržaj pomoću prikladnog uređivača WYSIWYG i pomoću uređivača veza povezati ga s odgovarajućim gumbom izbornika.

Korak 17: Napravite jednostavan utor

U Moto Flash CMS-u utori igraju ulogu animiranih objekata. Utor može sadržavati velik broj animiranih značajki kojima se može upravljati izravno s upravljačke ploče.

Prvo ćemo pokušati stvoriti jednostavan utor, a zatim ga poboljšati.

Počnimo s gumbom "Zatvori", dodajte ga na stranicu kao sliku, primijenite neke efekte na nju i dodijelite akciju "Idi na stranicu" -> "Početna".

Animirati gumb za zatvaranje uopće nije teško jer ćemo to učiniti pomoću utora. Napravimo utor u datoteci website.fla. Da bismo to učinili, uvozimo sliku gumba "Zatvori" u biblioteku. U odjeljku Slots, moramo stvoriti novi filmski isječak i nazvati ga CloseButtonSlot.

Postavimo klasu kao CloseButtonSlot. Nema potrebe za kreiranjem nove klase, dovoljno je naslijediti klasu AbstractMotoSlot. Samo kopirajte: com.moto.template.shell.view.components.AbstractMotoSlot i zalijepite ga u polje Base Class.

Zatim dodajemo CloseButtonIcon sliku na pozornicu (CloseButtonSlot MovieClip mora biti otvoren) i pretvaramo je u isječak pod nazivom CloseButtonIcon. Budući da smo svoj utor naslijedili od klase AbstractMotoSlot, ovo nam daje glavnu animaciju. Sada ćemo napraviti lijep efekt proširenja/kolapsa.

Sljedeći korak je stvaranje novog sloja i kreiranje ključnih kadrova u koje trebate staviti "Stop ();". Postavite glavne oznake "preko" (između prvog i drugog okvira zaustavljanja) i "out" (između drugog i trećeg zaustavnog okvira) - pogledajte snimku zaslona:

Izrađujemo isti ključ i okvire između na našem sloju isječaka.

Na primjer, naš gumb "Zatvori" rotirati će se u smjeru kazaljke na satu kada se miš pređe preko njega i suprotno od kazaljke na satu kada se ukloni.

Dodajmo svjetlinu rotacije i ublažavanje za animaciju pokreta.

Nakon što je animacija gotova, kompajliramo datoteku website.fla s našim novim utorom (Ctrl + Enter).

Da bismo radili sa utorom pomoću Moto CMS-a, moramo navesti njegove parametre u datoteci: structure.xml:

librarySymbolLinkage=” ” – utor za izvoz filmskog isječka (naziv klase).
animated=”true” – atribut koji određuje je li utor animiran ili ne.
resizable="false" - postoji li logika za promjenu veličine utora ili ne.
locked=”false” – treba li utor biti prikazan na upravljačkoj ploči ili ne.
– naziv utora na upravljačkoj ploči
– svojstva utora koja proširuju funkcionalnost. Nećemo ga koristiti u ovom primjeru.

Dom > Testovi