Kaip sukurti naują failą (dokumentą) naudojant „Flash CS6“. Flash žaidimų kūrimas Kaip sukurti flash animaciją

Flash svetainės ndash sukūrimas; reikalas gana sudėtingas. Tam reikalingos žinios daugelyje sričių: programavimas, kompiuterinė grafika, svetainių optimizavimo ir reklamavimo pagrindai, reikia gerai išmanyti patį „flash“, galų gale, tiek kūrimo aplinkos, tiek programavimo kalbos veiksmų scenarijaus 2.0 žinių lygiu. arba veiksmo scenarijus 3.0, kuris šiuo metu yra didesnis prioritetas.
Flash programos kuriamos Adobe Flash Professional ndash; yra daugialypės terpės programa, naudojama kuriant turinį, pvz., žiniatinklio programas, filmus, žaidimus, programas mobiliesiems ir kitiems įterptiesiems įrenginiams.
Flash ndash; unikalus reiškinys. Anksčiau šis produktas vadinosi „Macromedia Flash“, „Adobe“ įsigijus, nuo 2005 metų ši programa tapo žinoma kaip „Adobe Flash“. „Flash“ animacija naudojama tinklalapiams transliuoti. Kartais praplaukite ndash; tai yra html puslapio dalis, ir atsitinka, kad visas puslapis yra visiškai sukurtas naudojant „Flash“ arba visa svetainė buvo sukurta naudojant ją. Gauti „Flash“ failai yra specialūs swf („ShockWave Flash“) failai, kuriems norint peržiūrėti turinį reikia specialių nemokamų naršyklės papildinių, juos galima lengvai ir greitai atsisiųsti ir įdiegti iš oficialios „Adobe“ svetainės. Flash filmų privalumas buvo labai greitas įkėlimas ir darbas su vektorine animacija su interaktyvumu. Blykstę galima įkelti anksčiau nei ekrane rodomas visas vaizdo įrašas, tai yra, galite įgyvendinti parinktį, kai pradedate žiūrėti animaciją, o likę ekrano „srautai“ įkeliami fone.
Naudojama „flash“ grafika vektoryje ir programos kodas leidžia sukurti visapusišką programą, kuri gali pakeisti kai kuriuos rastrus, vaizdo fragmentus, programų kodus, tačiau padaryti ją daug optimalesnę, srautams naudojamas mažesnis pralaidumas, mažesnė procesoriaus galia. yra suvartojama. Be vektorinio atvaizdavimo, „Flash Player“ (grotuvas, reikalingas „Flash“ filmams žiūrėti) apima virtualią mašiną („ActionScript Virtual“ (AVM)), kuri palaiko vykdymo laiko sąveikos scenarijus, taip pat palaiko vaizdo įrašus, mp3.
Panagrinėkime esamus grafikos tipus ir pabrėžkime vektorinės grafikos, su kuria „Flash“ tiesiogiai veikia, pranašumus.
Visą grafiką galima suskirstyti į tris tipus: rastrinę, vektorinę, 3D. Rastrinėje grafikoje, kaip ir televizoriaus monitoriuje, kiekvienas vaizdas susideda iš mažų ndash elementų rinkinio; pikselių ndash; yra vaizdo elemento santrumpa.
Taškinės grafikos principas labai paprastas: kaip mokykloje vaikas piešia ląstelėse, tik čia šios ląstelės yra daug mažesnės. Tokio tipo grafika yra nesudėtinga tiek įgyvendinant, tiek apdorojant ir pateikiant, techniškai patogu diegti, automatizuoti vaizdinės informacijos įvedimą ar skaitmeninimą.
Tačiau rastrinė grafika turi trūkumų: ji yra didelė, todėl failo svoris tampa didelis, o sumažinus arba padidinus vaizdą, prarandama vaizdo kokybė.
Grafinės informacijos kodavimas vektorinėje grafikoje yra skirtingas: visi vaizdai nurodomi kaip ndash kontūrai; matematiniai objektai. Šie kontūrai yra nepriklausomas objektas, kurį galima perkelti, keisti dydį, keisti mastelį ir bet kokį skaičių kartų. Linijos nustatomos pradžios taškais, formulėmis, kurios nurodo pačias linijas. Dėl to keičiant modelį proporcijos visada tiksliai išlaikomos. Vektorinė grafika taip pat yra objektinė grafika, nes piešinys susideda iš atskirų objektų – tiesių ir lenktų linijų, elipsių, stačiakampių, uždarų ir atvirų formų ir kt., kurie turi savo kontūro storio, spalvos, linijos stiliaus ir kt. d.
Vektorinė grafika yra ekonomiška išteklių požiūriu, informacija apie ją kaupiama formulių pavidalu, o ne kiekvieno taško informacija, spalvų aprašymai failo dydžio ženkliai nepadidina. Vektorinę grafiką lengva modifikuoti, praktiškai neprarandant vaizdo kokybės. Yra grafikos sričių, kuriose labai svarbu išlaikyti aiškius kontūrus, pavyzdžiui, kuriant logotipus, šriftus ir pan.
Vektorius visiškai išnaudoja visų išvesties įrenginių, pvz., spausdintuvo, skiriamąją gebą. Vaizdas visada atrodo kokybiškas, aiškus, viskas priklausys tik nuo paties spausdintuvo.
Taip pat vektorinės grafikos pranašumu galima vadinti tai, kad ji lengvai transformuojama į rastrinę grafiką, bet ne atvirkščiai! Ir tai gali apimti rastrinės grafikos objektus, nors jo negalima apdoroti tomis pačiomis priemonėmis.
Rimtu vektorinės grafikos pranašumu laikoma teksto ir vaizdų integravimo priemonė, vienas požiūris į juos, atitinkamai galimybė sukurti galutinį produktą. Populiariausi vektorinės grafikos redaktoriai yra CorelDRAW, Adobe Illustrator ir, žinoma, Adobe Flash.
Vektorius yra ribotas kuriant tikroviškus vaizdus: aiškus ir karikatūriškas ndash; taip, bet štai kaip suformuluoti pušis ar debesis. Taip pat kyla problemų įvedant grafinę informaciją: pavyzdžiui, skaitytuvas pikselis po pikselio perduoda informaciją apie vaizdą: kiekvieno taško vieta ir spalva priklauso nuo šviesos pluošto reakcijos. Jis negali aprėpti objekto po objekto, o ne visi vaizdai, kaip rašiau aukščiau, gali būti formalizuoti.

Flash tapo visuotinai populiarus ndash; animacinių filmų reklamjuostės rodomos beveik kiekviename interneto puslapyje. Jie yra interaktyvūs, atkuria animaciją ir užima mažai vietos diske, o tai svarbu dirbant tinkle.
Animacija kuriama rodant kiekvieną blykstės kadrą tam tikrą laiką. Kai yra daug kadrų, susidaro judėjimo iliuzija. Ankstesnės „flash“ technologijos pasirodė GIF animacijos, tačiau „Flash“ galimybės yra daug platesnės. Taigi su jo pagalba galima kurti navigacijos elementus, įgarsintus animacinius filmus, animuotus logotipus, skaičiuotuvus, ištisas svetaines su įvairių interaktyvių elementų rinkiniu ir kokius animacijos stebuklus galima sukurti per „flash“: jie atrodo labai įspūdingai, o kitos žiniatinkliui skirtos technologijos negali. pasigirti tokiomis galimybėmis.
Flash animacija vadinama filmais. Animacijos galimybės neapsiriboja vien animacija, animuojami įvairūs objektai: meniu, paveikslėliai, nuorodos, tekstai.
Paleidus programą, atsidaro langas su darbo vieta ir įrankių juosta bei papildomais langais, kuriuos galima prijungti darbo metu. Taip pat rodomi skirtukai, skirti darbui su laiko juosta, klaidų tikrinimo nustatymais ir kt. Programoje filmai kuriami braižant arba importuojant jau paruoštus brėžinius, jie dedami į specialią ndash darbo lango sritį; scena (Stage), o kadrai sukuriami naudojant laiko juostą (laiko juostą).
Filme gali būti kelios scenos; paleidus filmą jos paleidžiamos ta tvarka, kokia buvo sukurtos, nebent ši tvarka buvo pakeista tyčia. Tai leidžia patogiai ir greitai keisti atskirus epizodus, keisti jų tvarką.
Pati animacija atliekama keičiant vieną po kito einančius kadrus, keičiant jų turinį, tai yra, į kadrą pridedami objektai su reikiamais parametrais. Scenoje esančius objektus galima pasukti, nustatyti jų padėtį, spalvą, skaidrumą, formą, dydį, tą patį galima padaryti su bet kuriais kitais objektais.
Animaciją galima kurti šiais būdais:
Kadras po kadro Animacija ndash; piešinys kiekviename kadre daromas rankomis, o rėmeliai eina iš eilės;
apskaičiuotas (Tweened Animation) ndash; daromi tik pradiniai ir galutiniai kadrai (vadinami raktiniais kadrais), o tarp jų pati programa stato kadrus; dvi tokios animacijos rūšys: judesys (Motion Tweening, kai keičiasi judesio parametrai, posūkis, dydis, padėtis), formos (Shape Tweening);
programiškai ndash; kai objekto keitimo parametrai nustatomi naudojant Action Script programavimo kalbos komandas.
Dirbant su filmu, pirminiai duomenys išsaugomi specialiame faile su plėtiniu .fla. Tai apima sceną su visais objektais, taip pat papildomus parametrus apie objektus, kurie nebuvo įtraukti į filmą, bet buvo sukurti jame, taip pat garso parinktis, komentarus, scenarijaus kodus, programos nustatymus ir kt. Sukūrę tokį šaltinį, turite jį išversti į formatą, tinkamą interneto ndash; būtent SWF, todėl paskelbiame filmą arba sudarome kodą. Taip iš failo bus pašalinta informacija, kuri nereikalinga norint atkurti norima filmo forma. Taigi failo dydis tampa minimalus ir vartotojas greitai įkeliamas. Tokį failą galima atidaryti atskirai naudojant ndash; grotuvas leis jį, bet galite prijungti jį prie bet kurio html puslapio kaip objektą.

Plėvelė sukurta iš surenkamų ndash elementų; standartai (Simboliai) arba simboliai. Nuoroda yra vaizdas, mygtukas, animacija, filmo klipas, kurie pakartotinai naudojami vaizdo įraše. Juos galima sukurti arba importuoti. Sukūrę simboliai saugomi specialioje ndash parduotuvėje; biblioteka. Filmo surinkimo procese tose vietose, kur reikia, įterpiami standartų (kurie saugomi bibliotekoje) egzemplioriai (Instance), o ne kiekvieną kartą visiškai. Ir jūs galite juos įterpti bet kokį skaičių kartų ir bet kur. Tokiu atveju galite keisti egzempliorių parametrus, kaip jums patinka: vietą, dydį, mastelį, pasukimą, lenkimą, skaidrumą, toną ir kt., o patys atskaitos simboliai nesikeičia. Tai labai patogu ndash; nereikia kiekvieną kartą iš naujo kurti elemento ar jo kopijuoti, elementas yra vienas, o jo modifikacijų yra tiek, kiek norite. O publikavimo procese galutinio vaizdo įrašo failas, kuriamas swf formatu, surenkamas taip, kad vienoje vietoje tiesiogiai bus nuorodos objektas, o visame likusiame ndash; tik nuorodas į jį. Įsivaizduokite, kiek tokiu būdu sumažinamas vaizdo įrašo svoris, lyginant su beveik identiškų elementų kopijavimu.
Standartai yra šie:
jautis; Filmo klipas (moviklip) ndash; apima garsą, grafiką, animaciją, gali būti sudarytas programiškai;
jautis; Grafinis (Graphic) ndash; statiniai piešiniai, animacija, garsas, bet ne programiškai valdomi;
jautis; Mygtukas (mygtukas) - apima paveikslėlius, garsą; palyginti su kitų tipų simbolių nuorodomis, jame yra tik keturi kadrai, kurie rodo mygtuko būsenos pokyčius, kai įvyksta įvairūs pelės įvykiai.
Prieš tiesiogiai kurdami nuorodos simbolį, turite nustatyti jo tipą, vėliau jį galima pakeisti.
Be nuorodų simbolių ir jų egzempliorių, filme gali būti vaizdų iš išorinių failų, šriftų.
Visas vaizdo įrašas Adobe Flash ndash; tai yra kadrų (Frames) seka, jie rodomi paeiliui nurodytu greičiu. Jie dirba naudodamiesi laiko juosta. Skalės kairėje yra sluoksniai, kurių pavadinimus reikia nustatyti, dešinėje ndash; tuščių rėmelių rinkinys, kuris užpildomas kaip objektai sukuriami ir dedami ant scenos. Kai tik rėmelis prisipildo objektų, jis pakeičia spalvą į pilką. Pagrindiniai kadrai pažymėti juodu tašku. Laiko juostoje dabartinis kadras pažymėtas raudonu ndash žymekliu; žaidimo galva, per kurią vertikaliai eina plona raudona linija, kuri kerta visus sluoksnius ir laką; mato traquo; esamas kadras kiekviename iš jų. Būtent šie kadrai, tai yra jų turinys filmų klipų pavidalu, rodomas ekrane.

Siekdama įgyvendinti interaktyvumą ir galimybę kurti visavertes svetaines, Adobe Flash naudoja Action Script programavimo kalbą.
Kad filmas būtų interaktyvus, „Flash“ naudoja scenarijaus programas (scenarijus-scenarijus), jose yra „ActionScript“ instrukcijų (veiksmų) rinkinys ir jie vykdomi, kai įvyksta tam tikri įvykiai: vartotojas paspaudžia mygtuką, pasiekia tam tikrą filmo kadrą, reakcijos į pelės judėjimą, jos ratukas, žymeklio padėtis tam tikroje srityje ir daugelis kitų. Scenarijaus komandos nustato, kaip „Flash“ reaguoja įvykus įvykiui.

Scenarijaus komandos, kurios atliekamos įgyvendinant įvykį, yra nurodytos klipui, rėmeliui, mygtukui, o tai daroma specialiame skirtuke, esančiame ekrano Veiksmai (komandos) apačioje (Veiksmų rėmelis, Veiksmų filmo klipas), Veiksmų mygtukas.
Galimi įvykiai:
Mygtuko paspaudimas ndash; kai vartotojas paspaudžia klaviatūros klavišus, funkcijos parametras yra klavišo pavadinimas.
Užveskite pelės žymeklį (Roll Over) ndash; kai pelės žymeklis yra virš objekto, bet pelė nespaudžiama;
Paleiskite ndash; jei pelės mygtukas atleidžiamas, kai žymeklis yra virš mygtuko, kuris buvo užprogramuotas, tai yra, jei vartotojas spusteli manipuliatorių laquo;mouseraquo;;
Paspauskite ndash; jei pelės mygtukas (kairysis) paspaudžiamas, kai žymeklis yra virš užprogramuoto mygtuko. Šiuo atveju atsižvelgiama į paleidimo sritį, o ne į jo matomą vaizdą, tai nustatoma Hit kadre;
Pašalinti (išleisti) ndash; virš mygtuko buvo pelės žymeklis, jis nebuvo paspaustas ir pelė nuimama nuo programuojamo mygtuko;
Shift (Drag Out) – pelės mygtukas uždedamas ant objekto, paspaudžiamas ir nuimamas;
Išleisk Outside ndash; jei pelės mygtukas buvo paspaustas ant objekto, o po to vartotojas jį atleido už objekto ribų;
Vilkite per ndash; ant objekto uždedamas žymeklis, kairysis pelės mygtukas paspaudžiamas ir neatleidžiamas, tačiau žymeklis nuvedamas už objekto, tada vėl grąžinamas.

„ActionScript 3.0“ kalba, palyginti su „ActionScript 2.0“, yra šiuolaikiškesnė, nes yra pagrįsta objektinio programavimo pagrindais. Kur pagrindinės sąvokos yra klasė, objektas, jo atributai ar savybės, taip pat šiam objektui būdingi metodai.
„ActionScript“ vykdomas naudojant virtualią mašiną („Virtual Machine ActionScript“), ji yra „Flash Player“ dalis.
Bet kurio programos kodo pagrindas yra kintamasis, kuris ActionScript yra nustatytas taip: var ndash; speciali Flash komanda, kuri reiškia, kad šiame skyriuje nurodomas kintamasis ir nustatomas jo tipas; vardas ndash; kintamojo pavadinimas, nurodytas tekstiniu-skaitiniu formatu, bet neprasideda skaičiumi; įveskite ndash; kintamojo tipo nuoroda (skaitinis - Skaičius, loginis ndash; Būlis, tekstas - String ir kt.). tai yra, nurodysite: Var x: String;
Po kintamojo pavadinimo būtinai įtraukite dvitaškį, o eilutės pabaigoje – kabliataškį. Kodo vykdymo metu gali būti keičiama reikšmė ir atitinkamai kintamojo tipas.
Kintamasis, kuriame yra daug duomenų, vadinamas masyvu. AC 3.0 versijoje. jis nurodomas tipu Array: Var Mas: Array.
Visi masyvo elementai numeruojami pradedant nuo 0, todėl norint pasiekti, pavyzdžiui, pirmąjį elementą, reikia nurodyti Mas. Tai yra, laužtiniuose skliaustuose nurodote norimo elemento vietą masyve.
Pats kodas susideda iš funkcijų, kurios aprašo komandų seką, atsirandančią konkrečiame ndash įvykyje; pelės paspaudimas, klavišo paspaudimas, tam tikros reikšmės pasiekimas ir pan.
Funkcija nurodoma naudojant rezervuoto žodžio funkciją, tada nurodomas jos pavadinimas - pavadinimas - bet koks tekstinis-skaitinis pavadinimas, bet neprasideda skaičiumi, tada skliausteliuose () galite nurodyti funkcijos ndash parametrus; kas jai pateikiama kaip įvestis, jų gali nebūti, tada dvitaškis ir duomenų tipas, kurį funkcija grąžina, arba void ndash; kai funkcija nieko negrąžina. Po to visą funkcijos kodą įtraukite į riestinius skliaustus ( ). Ir jūs pasiekiate funkciją, jei reikia, nurodydami jos pavadinimą ir parametrus: pavadinimas (). "Sąlygos AC 3.0. nustatomi per operatorių, jei: if(x==y), tai yra, apvaliuose skliaustuose, reikia nurodyti pačią palyginimo sąlygą. Ciklos apibrėžiamos per for(), kur jo parametrai nustatomi skliausteliuose: skaitiklio kintamasis, jo keitimo žingsnis.
Kiekvienas objektas apibūdinamas jo parametrais arba savybėmis; prie objektų galite prijungti įvykių klausytojus naudodami funkciją addEventListener. Šis klausytojas tvarkys įvykius, kurie atsiranda su objektu, ir jei reakcijas į juos funkcijoje aprašys programuotojas, programa atitinkamai reaguos.

Tai tik maža dalis to, ką reikia žinoti pradedant kurti „flash“ svetainę. Jums nereikia kurti svetainės nuo nulio. Yra specialių šablonų, kuriuos galite nusipirkti ir modifikuoti pagal savo poreikius (pavyzdžiui, svetainė šablono monsters). Ten jau pilnai išvystytas dizainas, reikia keisti turinį ir programinėje įrangoje viską, ko reikės, galima perprogramuoti. Tada reikia nusipirkti domeną ir hostingą, įdėti html failą, kuriame yra prijungtas swf.
Skaitykite knygas (pavyzdžiui, knygą laquo; 100 % mokymo programa M.Flash MXraquo; padėjo man dirbti ir straipsnius), mokykitės iš kolegų forumuose (demiart, flasher.ru), taip pat koks turėtų būti jūsų pirmasis padėjėjas. Pagalba oficialioje „Adobe“ svetainėje. Opsų kalba ActionScript yra labai detalus ir detalus, rodomi pavyzdžiai, medžiaga pateikiama ir rusų kalba.
Sukūrę vaizdo įrašą, turite jį paskelbti. Programos publikavimo parinktis galite nustatyti meniu Failas punkte Publikavimo parinktys. Jame nurodoma, kokiais formatais įkelti vaizdo įrašą, kokie yra grafikos ir garso kokybės nustatymai ir daugelis kitų. Kai turėsite swf failą, galėsite jį naudoti kaip užbaigtą programą. Norėdami pakeisti, atnaujinti sukurtą vaizdo įrašą, turite redaguoti ndash šaltinį; fla failą ir paskelbti dar kartą.

Laimei, dauguma aktyvių interneto vartotojų gali sukurti „flash“ žaidimą. Pradedantiesiems tam labai padeda net pirminiai programavimo įgūdžiai (juos įgyti, beje, nėra taip sunku – noro būtų). Tiesa, jums prireiks šiek tiek laiko, kad įsisavintumėte vieną iš daugelio specialių „flash“ žaidimų dizainerių (pavyzdžiui, „Macromedia Flash“).

Daugelyje programinės įrangos svetainių, be kita ko, yra tik tokie konstruktoriai. Jų įdiegimas kompiuteryje, kaip taisyklė, nesukelia jokių ypatingų problemų vartotojui. Nepamirškite, kad pasirinkta programa turi būti užregistruota ir įdiegta su visais reikiamais pakeitimais – tada ji jums tarnaus ištikimai, tai yra nepertraukiamai. Dauguma žaidimų dizainerių yra sukurti anglų kalba, tačiau galite ieškoti kreko ar versijos rusų kalba. Dažnai pačiuose nustatymuose yra langas, kuriame galite nustatyti savo gimtąją kalbą.

Kaip sukurti flash žaidimą: išankstinis pasiruošimas

Dar prieš sėsdami įvaldyti dizainerio, jau turėtumėte turėti apytikslį žaidimo scenarijų, siužetą. Pravartu iš anksto pagalvoti apie animaciją ir dizainą – tai žymiai sutaupys jūsų laiką. Prieš kurdami „flash“ žaidimą, nuspręskite, kokio tipo jis nori. Norėdami pasisemti įkvėpimo, apsilankykite svetainėse, kuriose yra „Flash“ žaidimų bibliotekos.

Profesionalai rekomenduoja pradedantiesiems pradėti kurti paprastas programas, pavyzdžiui, arkadinius žaidimus. Ir tik tada bus galima pereiti prie sudėtingesnių žaidimų tipų ir net kurti savo strategijas. Būsimo žaislo tipą galite pasirinkti tame pačiame konstruktoriuje, kur patogiai surūšiuoti visi žanrai. Suaktyvinkite, pavyzdžiui, arkadą (dukart spustelėkite).

Kaip sukurti „flash“ žaidimą: darbas žaidimų dizainerio srityje

Atidarykite šabloną ir vilkite norimus objektus iš skilčių Animuoti objektai ir Statiniai objektai. Sukurkite foną pasirinkdami tekstūrą ir spalvą. Objektams pasirinkite spalvas naudodami spalvų paletę. Norėdami patikrinti, kurios kitos funkcijos neįjungtos, naudokite animacijos leistuvą. Nustatymuose nustatykite žaidimo simbolių (arkadose) arba objektų (loginiuose žaisluose) judėjimo lygius.

Atlikę viską, ko reikia, paleiskite derinimo programą. Šiuo režimu galite žaisti savo žaidimą, pradedant nuo bet kurio lygio – tai svarbu norint patikrinti jo našumą. Pašalinkite aptiktas klaidas ir dar kartą patikrinkite „Flash“ žaidimą. Jei viskas gerai, išsaugokite pakeitimus.

Kaip sukurti „flash“ žaidimą: atneškite žaidimą „į protą“

Dabar galite sugalvoti originalų savo „flash“ idėjos pavadinimą, parašyti trumpą anotaciją. Naudokite ekrano dizainą, kad sukurtumėte įspūdingą savo žaidimo paleidimo ekraną. Taip pat išsaugokite visus atliktus pakeitimus.

Peržvelkite savo „flash“ žaidimą nuo pradžios iki pabaigos, kad surastumėte (arba nerastumėte) jame klaidų ir gedimų, ir nepakenks kritiškai pažvelgti į savo rankų darbą. Labai svarbu, kad žaidime būtų logiškos ir aiškiai apibrėžtos dalys, kaip gera knyga ar filmas: pradžia, įvykių raida, pabaiga.

Nusiųskite švarią savo žaidimo versiją savo draugams – leiskite sąžiningiausiems kritikams įvertinti, kokių rezultatų pasiekėte. Na, o po to jau galite įkelti flash žaidimą į internetą.

Kaip sukurti flash žaidimą, jei turi noro, bet neturi žinių?

Tiems daugeliui vartotojų, kurie taip susirūpinę šia problema, tikrai norime atsakyti. Atminkite, kad jokios žinios negali atsirasti iš niekur. Bet koks naujas verslas turi kažkur prasidėti. Laikui bėgant pradėsite suprasti, kokių žinių jums trūksta kuriant žaidimus. Pradėsite klausti patarimo, ieškoti rekomendacijų, skaityti aktualią literatūrą, kurios dėka pradėsite vis labiau tobulinti savo įgūdžius. Nebijokite naujo, kitaip niekada nepasieksite to, ko norite. Sėkmės!

Programa, skirta kurti flash žaidimus be programavimo kalbų žinių. Leidžia kurti žaidimus iš loginių blokų ir iš anksto paruoštų vaizdų.

Kažkada, tikriausiai jau prieš porą metų, mūsų svetainėje pasirodė Game Maker programa, kuri leido kurti žaidimus praktiškai nemokant jokios programavimo kalbos!

Iki šiol šis puslapis su mumis buvo vienas labiausiai aptarinėjamų, o dažnai komentaruose pasigirsta skundų, kad iš jo negalima kurti žaidimų, kuriuos būtų galima žaisti internete. Šiandien vėl grįšime prie žaidimų kūrimo temos ir apsvarstysime panašią programą, kuri vis dar gali kurti flash žaidimus - Stencyl!

Programos ypatybės

Stencyl pagalba galima kurti bet kokio žanro 2D žaidimus, bet labiausiai programų variklis yra „paaštrintas“ įvairiems rpg šaudyklėms. Struktūriškai programa yra visas įrankių rinkinys, kuriame, jei norite, galite sukurti žaidimą nuo nulio, nenaudodami trečiųjų šalių programų.

Iššokantįjį langą su informacija apie naują programos versiją uždarome mygtuku „Uždaryti“ arba „Daugiau to nerodyti“ (jei nenorime, kad šis langas būtų rodomas kiekvieną kartą paleidus programą) ir vietoj jo gauname tokį langą:

Čia mums siūloma susikurti savo paskyrą Stencyl kūrėjų bendruomenėje. Iš esmės jums nereikia kurti paskyros (tam spustelėkite žemiau esantį mygtuką „Priminti vėliau“, bet registracija suteikia galimybę atsisiųsti papildomų šablonų ir veiksmų iš internetinės saugyklos, vadinamos StencylForge, todėl neskauda :). Norėdami sukurti paskyrą, spustelėkite mygtuką „Sukurti paskyrą“ ir eikite į registracijos formą:

Čia užpildome standartinius laukus savo vartotojo vardu, slaptažodžiu (du kartus) ir el. pašto adresu, tada spustelėkite mygtuką „Registruotis“. Jei viskas klostysis gerai, tada pagaliau prieš jus atsidarys programos pradžios lango sąsaja.

Pradžios lango sąsaja

Išoriškai Stencyl pradžios lango darbo sritis yra padalinta į kelias zonas:

Viršuje tradiciškai yra meniu juosta ir įrankių juosta. Čia surinkti visi pagrindiniai nustatymai ir valdymo mygtukai. Po įrankių juosta turime mažą siaurą pilką juostelę. Jame yra skirtukai (taip – ​​„Stencyl“ sąsaja yra kelių skirtukų, o tai labai patogu) ir mygtukai, skirti greitai perjungti juos (dešinėje).

Pagrindinė darbo sritis yra padalinta į dvi dalis: kairėje yra programos skyrių naršymo juosta, o dešinėje - pagrindinis turinys (pagrindiniame ekrane - žaidimų sąrašas), kuris keičiasi priklausomai nuo šiuo metu aktyvaus. veikimo būdas. Apačioje yra dar keli papildomi mygtukai, leidžiantys:

1. Atidarykite aplanką, kuriame Stencyl saugo visus sukurtų žaidimų išteklius ir pačius žaidimus (apatiniame kairiajame kampe yra mygtukas „Peržiūrėti žaidimų aplanką“).
2. Pradėkite mokymo kursą, kaip dirbti su programa ("Start Crash Course" žaliame skydelyje apatiniame dešiniajame kampe). Beje, šalia jo yra ir mygtukas, skirtas paslėpti pasiūlymą treniruotis („Daugiau to nerodyti“).
3. Atidarykite šiuo metu pasirinktą žaidimą iš sąrašo, panašiai kaip dukart spustelėjus žaidimo piktogramą („Atidaryti žaidimą“ apatiniame dešiniajame kampe).

Norėdami savarankiškai ištirti Stencyl galimybes, galite baigti mokymo kursą (o būtų pageidautina jį išlaikyti), taip pat atidaryti vieną iš paruoštų žaidimų, kurie geriausiai atitinka jūsų idėją ir pamatyti, kaip ten viskas veikia. Ir aš siūlau ištirti programos darbą žaidimo apie mūsų svetainės simbolio ir jo virtualios gyventojos - Fridos Best - nuotykius sukūrimo pavyzdžiu!

Kaip pradėti kurti žaidimą Stencyl

Jei prieš kurdami žaidimą pažvelgėte į standartinius „Stencyl“ žaidimų pavyzdžius, galbūt pastebėjote, kad iš esmės jie visi yra gana paprasti, vieno ekrano ir turi šoninį vaizdą. Sukursime dinamišką šaudyklę iš viršaus į apačią su pele! Viskas kaip „didžiuosiuose“ žaidimuose :).

Savo projektui galite pakeisti vieno iš paruoštų šablonų logiką, tačiau mes neieškome paprastų būdų ir todėl - tik "nuo nulio", tik "hardcore" :). Norėdami tai padaryti, spustelėkite darbo srities įrankių juostoje (arba meniu „Failas“ - „Sukurti naują“) mygtuką „Sukurti naują žaidimą“ ir patekti į šį langą:

Čia galime pasirinkti žaidimo šabloną pagal žanrą su iš anksto pasirinktu jūsų projekto funkcijų ir veiksmų rinkiniu. Tačiau mes sukursime žaidimą nuo nulio, todėl pasirinkite elementą „Tuščias žaidimas“ ir spustelėkite mygtuką „Kitas“.

Kitame veiksme turime atlikti keletą pagrindinių nustatymų:

Lauke „Pavadinimas“ turime nurodyti savo žaidimo pavadinimą, o skiltyje „Ekrano dydis“ nustatyti žaidimo lauko matmenis, nurodydami jo plotį (Width) ir aukštį (aukštis) pikseliais. Po to spustelėkite mygtuką „Sukurti“ ir eikite tiesiai į žaidimo rengyklės sąsają:

Pagal numatytuosius nustatymus priešais mus atsidaro skirtukas „Prietaisų skydelis“, kuriame kairėje yra surinktas visas žaidimo išteklių medis, o dešinėje - pati darbo sritis. Čia, manau, derėtų šiek tiek patikslinti „medžio“ sandarą.

Jį sudaro keturios šakos, iš kurių dviejose yra standartiniai išteklių rinkiniai (IŠTEKLIAI) ir logika (LOGIC), o paskutiniuose dviejuose galima pasirinktinai saugoti rankiniu būdu įkeltus išteklių paketus (RESOURCE PACKS) ir plėtinius (EXTENSIONS).

Pagrindinis filialas čia yra IŠTEKLIAI. Jame yra šie skyriai:

1. Aktorių tipai – čia saugomi visų žaidimo personažų spritai ir sukonfigūruojami jų animacijos bei sąveikos veiksmai.
2. Fonai – šioje skiltyje galime saugoti visus žaidimui reikalingus fonus. Be to, fonas gali būti skirtas ir fonui (fonui), ir pirmajam planui (priekinis planas), o tai leidžia uždėti fonus vieną ant kito ir taip pasiekti, pavyzdžiui, paralakso efektą.
3. Šriftai – skyrelis, kuriame galime įkelti įvairius gražius šriftus, kad sukurtume originalius užrašus. Tačiau verta manyti, kad „Stencyl“ gali veikti tik su anglišku simbolių rinkiniu, todėl norėdami į šrifto failą įtraukti rusiškas raides, turime jais pakeisti kai kuriuos lotyniškus simbolius.
4. Scenos yra vieta, kur galite kurti ir redaguoti žaidimo lygius. Būtent čia galime nustatyti bet kurios scenos išvaizdą ir sudėti visus personažus, premijas ir kitus žaidimo elementus.
5. Garsai – atitinkamai visų žaidime naudojamų garsų saugykla.
6. Tilesets – specialus filialas, kuriame saugomos plytelės – specialūs spraitai, kuriuos galime panaudoti kurdami žaidimo lygius.

Plytelių kūrimas ir konfigūravimas

Nėra vienareikšmės nuomonės apie seką, kaip įgyvendinti tą ar kitą žaidimą. Šiuo metu tai patogu bet kam, bet aš rekomenduočiau šį algoritmą:

Sukurkite pirmąją sceną - sukurkite personažą - sukurkite priešus - sukurkite galias - sukurkite likusias stadijas

Norėdami sukurti sceną Stencyl, turite nupiešti jos išvaizdą Scenų šakoje. Tačiau norėdami piešti, pirmiausia turime turėti blokus, su kuriais galėtume „piešti“. Šie programos blokai vadinami plytelėmis (plytelėmis) ir yra saugomi skyriuje Tileset:

Plytelių rinkinys yra paprasta vaizdų, kuriuos įkeliate į jį, matrica. Galite įkelti paruoštą matricą (paveikslėlį, sudarytą iš kelių vienodo dydžio vaizdų vienoje ar keliose eilutėse) arba papildyti esamus rinkinius atskirais paveikslėliais.

Pirmiausia turime sukurti naują plytelių rinkinį (mygtukas „Sukurti naują“, esantis skiltyje „Tilesets“), po kurio pamatysime langą, kaip ir aukščiau esančiame paveikslėlyje. Norėdami įkelti paveikslėlį, turime paspausti mygtuką „Pasirinkti vaizdą“ ir atsidariusiame Explorer lange pasirinkti iš anksto paruoštą failą su norimu (-iais) paveikslėliu (-ais).

Kai paveikslėlis bus įkeltas, mes nustatysime jo išdėstymo parametrus ir matmenis pločio ir aukščio atžvilgiu, po kurių (jei viskas rodoma teisingai) galite pridėti vaizdą į rinkinį paspausdami mygtuką "Pridėti".

Kiekvienam paveikslėliui (plytelei) matricoje galite konfigūruoti sąveikos su žaidimo personažais ir objektais parametrus. Norėdami tai padaryti, pasirinkite norimą plytelę ir atidarykite šį langą:

Dešiniosios srities viršuje atsidarys skiltis „Susidūrimo ribos“. Čia galime pasirinkti savavališką formą, nurodančią mūsų objekto sąveikos su žaidimo personažais ribas. Pagal numatytuosius nustatymus visos plytelės turi parametrą „Kvadratas“ (kvadratas), todėl plytelė visiškai nepravažiuojama ir tvirta. Jei reikia, kad plytelė būtų "skaidri" simboliams (pavyzdžiui, grindys), tada pakanka nustatyti parametrą "Nėra susidūrimų".

Be kraštinių, kiekvienai plytelei galima nustatyti animaciją, pridedant rėmelių, naudojant apatiniame skydelyje esantį mygtuką „Įterpti rėmelius“. Pagal numatytuosius nustatymus animacijos greitis yra 100 milisekundžių, tačiau šį skaičių galima savavališkai keisti kiekvienam kadrui.

Norėdami tai padaryti, tiesiog dukart spustelėkite norimą rėmelį kairiuoju pelės mygtuku ir atsidariusiame lange pakeiskite delsos indikatorius pagal poreikį. Pasirinktą kadrą taip pat galima koreguoti naudojant įmontuotą grafinį redaktorių, kuris atidaromas mygtuku „Redaguoti kadrą“.

Scenos perteikimas Stencyl

Suformavus plytelių rinkinį, logiška pereiti prie kito žingsnio – baigtos žaidimo erdvės formavimo iš pridėtų vaizdų. Tai galite padaryti spustelėję mygtuką „Sukurti naują“, esantį skiltyje „Scenos“. Paspaudę mygtuką pateksime į scenos nustatymų langą:

Čia tikrai turime nustatyti unikalų savo scenos pavadinimą lauke „Pavadinimas“, nurodyti matmenis (plotis ir aukštis plytelėmis (pagal numatytuosius nustatymus) arba pikseliais) ir pasirinktinai (tai yra mūsų pačių prašymu) nustatyti foną. spalva naujai scenai. Spustelėkite „Gerai“ ir eikite į lygių rengyklę:

Tai atrodo kaip grafinis redaktorius. Centre yra darbo vieta, kurioje mes nubrėžiame savo lygį. Kairėje ir viršuje yra mažos įrankių juostos. Dešinėje yra paletės plokštės, plytelių rinkinių pasirinkimas ir sluoksnių valdymas. Dabar kaip viskas veikia...

Pirmiausia nupiešime savo darbo vietos foną. Norėdami tai padaryti, dešiniajame skydelyje suaktyvinkite skirtuką „Paletė“ ir jame skirtuką „Plytelės“ ir iš pateikto sąrašo pasirinkite norimą plytelę. Tada kairiajame skydelyje pasirinkite pieštuko įrankį ir pasirinkta plytele nubrėžkite norimas sritis.

Dėl sluoksnių palaikymo plytelės gali persidengti viena kitą, todėl logiškiausia yra organizuoti lygį, atsižvelgiant į tai, kad, pavyzdžiui, ant „Layer 0“ sluoksnio turėsime fono pagrindą, aukščiau, a. sluoksnis su kliūtimis ir simboliais, o dar aukščiau - sluoksnis su įvairiais skaitikliais ir žaidimo indikatoriais.

Sluoksnius galima valdyti mygtukais, esančiais po skydeliu „Sluoksniai“. Yra mygtukai sluoksniams kurti, ištrinti, perkelti ir pervadinti. Be to, bet kurį sluoksnį galima paslėpti arba parodyti spustelėjus akies formos mygtuką sluoksnio pavadinimo dešinėje.

Charakterio kūrimas

Sukūrę pirmąją sceną, laikas užpildyti ją įvairiais vaidinamais personažais. „Stencyl“ jie vadinami „aktoriais“ ir atitinkamai saugomi skiltyje „Aktorių tipai“. Aktoriai kuriami pagal tą patį principą, todėl šį procesą nagrinėsime naudodamiesi pagrindinės mūsų žaidimo veikėjos Fridos kūrimo pavyzdžiu.

Norėdami pridėti naują aktorių, tiesiog eikite į pirmiau minėtą aktorių tipų skyrių ir spustelėkite mygtuką „Sukurti naują“. Mūsų jau įprastai vėl klausia, kaip norime pavadinti naują žaidimo objektą, po kurio prieš mus atsiras veikėjų animacijos redagavimo langas:

Čia, kairėje pusėje, rodomas pridėtų aktoriaus animacijų sąrašas (numatytasis yra tuščias kadras „Animacija 0“), o dešinėje – įrankiai, skirti tų pačių animacijų pridėjimui ir konfigūravimui.

Pasirinkite tuščią animaciją (arba pridėkite naują, spustelėdami mygtuką su pliusu apačioje) ir spustelėkite dešinėje pusėje esantį lauką „Spustelėkite čia, kad pridėtumėte rėmelį“. Po to atsidarys vaizdų pridėjimo langas, panašus į panašų naujų plytelių įtraukimo į rinkinį langą. Spustelėkite mygtuką „Pasirinkti vaizdą“, pasirinkite norimą vaizdą ir pakoreguokite jo išdėstymą bei matmenis (jei reikia).

Kai viskas bus nustatyta, spustelėkite mygtuką "Pridėti" apatinėje dešinėje pridėjimo lango dalyje - animacija turėtų būti rodoma kaip peržiūra kairėje skiltyje:

Dabar tereikia pakoreguoti kadrų dažnį (dukart spustelėkite bet kurį kadrą) ir kai kuriuos papildomus parametrus, tokius kaip animacijos pavadinimas (pavadinimas) (labai naudinga sudėtingiems projektams), ciklinis (ciklinis) atkūrimas (aktyvus pagal numatytuosius nustatymus). ), sinchronizavimo ir pagrindinio taško (Origin Point) pradžios sprite (pagal numatytuosius nustatymus – centras).

Apatinėje įrankių juostoje dešinėje skiltyje rasime mygtukų seriją. Jie leidžia:

• pridėti naujų kadrų į animaciją (Import Frames);
• redaguoti pasirinktą kadrą išoriniame redaktoriuje (Edit Frame (External));
• sukurti rėmelį išoriniame redaktoriuje (Create Frame (External));
• redaguoti rėmelį įtaisytajame redaktoriuje (Edit Frame);
• pašalinti rėmelį (Remove Frame);
• kopijavimo rėmelis (Copy Frame);
• įdėkite rėmelį (Paste Frame);
• perkelkite vieną kadrą atgal (Move Back) arba pirmyn (Move Forward).

Veikėjų parametrų ir elgesio nustatymas

Aukščiau sukūrėme Fridos bėgimo animaciją, naudodami tik du kadrus, kurie iš tikrųjų yra ta pati figūra, atspindėta horizontaliai. Dabar turime įsitikinti, kad galime naudoti pelę ir klaviatūrą savo herojės judėjimui valdyti, taip pat ar ji tinkamai reaguotų į susidūrimus su kliūtimis, kurias nubrėžėme scenoje.

Pirmiausia nustatykime susidūrimus. Norėdami tai padaryti, pažiūrėkite į eilutę po atidarytų skirtukų sąrašu ir suraskite mygtuką „Susidūrimas“.

Pagal numatytuosius nustatymus susidūrimo sritis yra kvadratas, apribotas aplink visą animacijos bangą. Tai yra, susidūrimo įvykis įvyks visame objekto plote. Tačiau praktikoje mūsų paveikslėlyje dažniausiai būna papildomų elementų (pavyzdžiui, Fridai – blasteris), kurie, pagal idėją, neturėtų su niekuo sąveikauti. Būtent šio skyriaus pagalba galime nustatyti visas susidūrimo zonas.

Pirmiausia sumažinsime plotą aplink Fridą iki jos kūno dydžio. Čia reikia atsižvelgti į tai, kad negalime perkelti srities su pele, o nustatymams naudojami keturi skaitiniai parametrai skiltyje „Dabartinė forma“. Pirmiausia nustatome ploto poslinkį horizontaliai (nuo kairiojo krašto) ir vertikaliai (iš viršaus), o tada nurodome naują susidūrimo srities plotį ir aukštį.

Žemiau yra dar keli parametrai, sugrupuoti skiltyje „Fizinės savybės“. Čia susiduriame su žymimuoju langeliu "Ar jutiklis?" ir grupių samprata.

Jei aktyvuosite vėliavėlę „jutiklis“, pasirinkta sritis nebebus fizinis objektas: veikėjas ar jo dalis taps tarsi „skaidri“ įvairioms kliūtims, tačiau tuo pačiu išsaugos galimybė tam tikromis sąlygomis pradėti bet kokius veiksmus.

Pavyzdys iš realaus gyvenimo gali būti šiuolaikinis signalizavimas naudojant lazerius: paties lazerio nematome, bet palietus prasideda pranešimo procesas, kad užlipome ne į tą vietą :).

O dabar kam skirtos grupės ... Tarkime, kad mūsų veikėjas rankose turi ne blasterį, o kardą, kuriuo jis (tiksliau ji :)) susmulkina priešus į kopūstą (beje, Frida turi lazerį blade šaltinio kode;)).

Užduotis tokia, kad palietus priešą kardu, priešas miršta, bet jei mes nepataikėme, o priešininkas pataikė į Fridą, tada dalis energijos buvo atimta. Ir pagrindinė problema čia yra ta, kad mūsų turima poveikio animacija iš tikrųjų yra paveikslėlis, kuriame tuo pačiu metu yra ir Frida, ir kardas ...

Jei kardo veiksmą susiesime su paveikslu, tai tas, kuris paliečia mūsų heroję žaidžiant animaciją, mirs nuo smūgio. Ir vien tam, kad paveikslą padalyti į kelis objektus su skirtingomis galimybėmis ir parametrais, buvo išrastas grupės mechanizmas.

Pagal numatytuosius nustatymus turime tik vieną sritį, kuri atitinka patį personažą („Tas pats kaip aktoriaus tipas“). Tačiau naudodamiesi piešimo įrankiais virš pagrindinės darbo srities, galime sukurti naujus virtualius objektus ir nustatyti jiems grupę naudodami mygtuką „Redaguoti grupes“.

Su susidūrimais, ko gero, viskas, o dabar siūlau spręsti patį elementariausią – aktoriaus elgesio scenoje nustatymą. Norėdami tai padaryti, turime eiti į skyrių „Elgesys“:

Pagal numatytuosius nustatymus čia iš pradžių nėra jokių veiksmų, tačiau juos galime pridėti paspaudę apatiniame kairiajame kampe esantį mygtuką „Pridėti elgesį“. Pamatysite paruoštų naudoti funkcijų, skirtų valdyti personažą arba bendrauti su kitais scenos aktoriais, sąrašą.

Pavyzdžiui, aš pasirinkau „8 krypčių judėjimo“ elgesį, kuris apima aktoriaus judėjimą ratu bet kuria kryptimi. Dabar kairėje esančiame sąraše pasirenkame pridėtą veiksmą, o dešinėje galime sukonfigūruoti jo parametrus.

Aktorių įtraukimas į sceną ir lygio išbandymas

Jei vykdėte instrukcijas, jau turėtumėte turėti reikiamus minimalius žaidimo išteklius. Belieka išmokti į sceną įtraukti aktorius ir išbandyti žaidimo erdvės pasirodymą.

Grįžtame į anksčiau sukurtos scenos redaktorių ir vėl aktyvuojame paletę (Paletę), bet dabar vietoj plytelių įjungiame skirtuką „Aktoriai“ (Aktoriai). Pamatysime sąrašą anksčiau sukurtų simbolių, kuriuos galime įtraukti į sceną naudodami pieštuko įrankį:

Turime vieną pagrindinę veikėją, tad užtenka vieno spustelėjimo pieštuku, kad ją įtrauktume į sceną. O dabar atėjo tiesos akimirka – pirmasis išbandymas! Norėdami pradėti išankstinį projekto kompiliavimą, tiesiog spustelėkite mygtuką „Test Scene“ viršutiniame dešiniajame skirtuko su mūsų scena kampe. Po kurio laiko (pirmasis kompiliavimas visada užtrunka ilgiau) galime grožėtis mūsų darbu flash grotuve:

Be paties žaidėjo su žaidimu šone, turime langą, kuriame rodomi žaidimo žurnalai. Jų pagalba galime greitai surasti darbe nesklandumus ir pabandyti jas taisyti.

Kaip matote, Fridą jau galime judinti įvairiomis kryptimis, tačiau pati scena lieka nejudanti ir vos tik mūsų herojė išeina už matomos scenos dalies krašto, ji dingsta... Netvarka :). Problemą galite išspręsti pridėję „Frida“ elgseną „Kameros sekimas“ arba nustatydami norimus parametrus naudodami įvykius.

Taip pat būtų naudinga standartinį žymeklį pakeisti kažkuo tinkamesniu, pavyzdžiui, kryželiu. Tai galime įgyvendinti pridėdami naują aktorių kaip kryželį, pašalindami jo susidūrimo sritį ir pridėdami jį prie scenos naudodami standartinį „Custom Mouse Cursor“ elgseną:

Renginių sistema Stencyl

Paprastus žaidimus Stencyl galima sukurti naudojant tik standartinį elgesį (Elgesys), tačiau jei mums reikia kažko nestandartinio, jau turime galvoti apie įvykius, kurie yra sukonfigūruoti aktoriams ir scenoms skyriuje „Įvykiai“:

Tiesą sakant, elgesys (elgesys) taip pat kuriamas remiantis įvykiais, tačiau jie taip pat turi vaizdinę sąsają, kuri palengvina redagavimą. Čia mes tiesiogiai susiduriame su funkciniais blokais, kurie atlieka tam tikrus veiksmus.

Įvykio langas yra padalintas į tris dalis:

1. Kairėje skiltyje yra įvykių sąrašas ir mygtukai, skirti jiems valdyti (kurti/trinti/perkelti). Norėdami įtraukti įvykį, turime paspausti mygtuką "Pridėti įvykį", tada išskleidžiamajame sąraše pasirinkti norimą grupę ir nurodyti konkrečią mums reikalingą funkciją. Sukurto įvykio dešinėje yra žymės langelis, leidžiantis, jei reikia, jį išjungti.
2. Dešinėje skiltyje turime visų galimų veiksmų sąrašą, sugrupuotą į 10 skyrių, kurių kiekvienas aktyvuojamas atitinkamu mygtuku. Kad būtų patogiau, kiekvienos skilties veiksmai yra surūšiuoti į teminius skirtukus ir turi savo unikalią spalvą. Apačioje yra dar trys skirtukai. Pagal numatytuosius nustatymus yra aktyvus skirtukas „Paletė“ (paletė), kuriame yra veiksmų sąrašai. Antrasis skirtukas – „Atributai“ – skirtas vietiniams kintamiesiems rodyti (apie juos plačiau žemiau), o trečiasis – „Mėgstamiausi“ – skirtas jūsų mėgstamiems veiksmams rodyti.
3. Centrinė dalis yra darbo zona. Čia mes formuojame galutinius veikėjų elgesio pavyzdžius naudodami įvairius veiksmų blokų ir įvykių derinius, pagal kuriuos šie veiksmai vyksta. Sujungimas įvyksta tiesiog nuvilkant blokus į darbo sritį ir redaguojant juose nurodytus parametrus. Reikėtų nepamiršti, kad funkciją sudaro tik tie blokai, kurie yra sujungti vienas su kitu ir įtraukti į pagrindinį įvykių bloką. Taigi, norint laikinai pašalinti tam tikrus šiuo metu nereikalingus (bet naudingus) derinius, tereikia juos perkelti iš bendros struktūros į laisvą erdvę. Jei laikui bėgant veiksmai pasirodo visiškai nereikalingi, juos galima visiškai ištrinti perkeliant juos į šiukšliadėžę, esančią viršutinėje dešinėje darbo srities dalyje.

Tiesą sakant, mes jau aprašėme įvykių kūrimo algoritmą, bet, deja, negaliu pateikti jokių universalių rekomendacijų - kiekvienam žaidimui įvykiai bus skirtingi ir jų gali būti gana daug... Pavyzdžiui, galite pažiūrėkite į žaidimo apie Fridą šaltinio kodus, kuriuos rasite archyve su programa, bet tai tik orientyras, nes darbas su renginiais yra jūsų asmeninė kūryba :).

Fizikos ir savybių nustatymas

Jūs ir aš jau daug ką aprašėme, bet nepalietėme kai kurių papildomų temų, kurios gali būti labai svarbios kuriant žaidimus – kalbu apie įvairiausių mūsų aktorių ir scenų savybių nustatymą. Šie parametrai saugomi paskutiniuose dviejuose skirtukuose. Ir pirmasis yra „Fizika“:

Scenoms ir aktoriams fizikos nustatymų skirtukas atrodo kitaip. Scenos fizikos nustatymų skirtuke yra tik du parametrai – horizontalūs ir vertikalūs gravitacijos nustatymai. Aktorių fizinių parametrų nustatymų skyriaus išvaizda parodyta aukščiau esančioje ekrano kopijoje ir susideda iš penkių skirtukų su skirtingomis parinktimis:

1. Bendra skirtukas. Čia turime tris parametrus: veikėjo tipą (stacionarus, platforma (gali judėti pagal nurodytas taisykles, bet kiti veikėjai negali judinti) ir judamąjį), veikėjo sukimąsi (gali suktis ar ne) ir įtaką. gravitacijos.
2. Skirtukas „Sunkumas“ („Svoris“). Šiame skirtuke galite nustatyti virtualaus objekto masę ir jo inerciją.
3. Skirtuke „Medžiaga“ galite nustatyti veikėjo charakteristikas, kurios imituos tikro objekto, pagaminto iš konkrečios medžiagos, elgesį. Turime galimybę pasirinkti vieną iš išankstinių nustatymų iš išskleidžiamojo sąrašo „Iš anksto nustatytos medžiagos“ arba rankiniu būdu nustatyti savo veikėjo trinties ir elastingumo charakteristikas.
4. Skirtukas Slopinimas suteikia galimybę tiksliai sureguliuoti veikėjo sąveikos su aplinka parametrus, įvedant tokias vertes kaip linijinis (pavyzdžiui, orui) ir kampinis (sukimosi metu) pasipriešinimas.
5. Skirtukas „Išplėstinis“ suteikia prieigą prie įvairių papildomų nustatymų, kurie nebuvo įtraukti į ankstesnes dalis. Čia galite suaktyvinti supaprastintą fizikos modelį (kad optimizuotų žaidimą), automatinį susidūrimo zonų aptikimą, pakartotinio susidūrimo įvykius ir galimybę pritaikyti aktoriui pauzę.

Mes išsiaiškinome fiziką, o dabar pažvelkime į savybes, kurios iškviečiamos paspaudus mygtuką „Ypatybės“:

Kaip ir ankstesniu atveju, scenų ir aktorių savybės skirsis. Scenos ypatybėse galime nurodyti jos pavadinimą ("Pavadinimas"), matmenis (skiltis "Dydis") ir fono spalvą ("Fono spalva").

Aktoriaus ypatybėse, be pavadinimo, galite nurodyti objekto aprašymą (lauką „Aprašymas“), grupę, kuriai aktorius priklauso (skiltis „Pasirinkite grupę“) ir animacijos sluoksnį mobiliesiems. įrenginiai (čia nieko pakeisti negalite, nes nemokama programos versija neleidžia eksportuoti žaidimų į mobiliųjų telefonų formatus.

Tačiau tai ne visi nustatymai, kuriuos galime pasiekti „Stencyl“. Bendrieji žaidimo nustatymai pasiekiami paspaudus mygtuką „Nustatymai“ pagrindinėje įrankių juostoje:

Nustatymų lange kairėje yra parametrų grupių sąrašas, o dešinėje - pagrindinė sritis (kartais padalinta į kelis skirtukus), kurioje yra visų rūšių parinktys. Čia mus domina šie skyriai:

1. „Nustatymai“ („Nustatymai“). Pirmoji nustatymų grupė, leidžianti šiek tiek suasmeninti žaidimą. Šioje grupėje yra trys skirtukai. Ant pirmojo iš jų („Pagrindinis“) galime suteikti žaidimui naują pavadinimą, trumpą aprašymą, taip pat peržiūros paveikslėlį ir piktogramą. Skirtuke „Ekranas“ sukonfigūruojamas galutinis žaidimo erdvės dydis, o paskutiniame („Advanced“) galima įjungti supaprastintą fiziką ir nustatyti anti-aliasing parametrus.
2. "Kroviklis" ("Krautas"). Šioje grupėje galime iš dalies (atsižvelgdami į kai kuriuos nemokamos versijos apribojimus) pritaikyti išankstinio įkėlimo programos (kroviklio) išvaizdą, kuri bus rodoma prieš visiškai įkeliant žaidimą. Jau yra keturi skirtukai. Pirmajame („Bendra“ - bendras) galite nurodyti nuorodą į savo svetainę, įjungti žaidimo apsaugą nuo kopijavimo kituose šaltiniuose (leidžiamų svetainių sąrašą pateikiame antroje eilutėje, atskirtoje kableliu) ir vieną iš įkroviklio. odos. Skirtuke Išvaizda galime nustatyti įkrovos įkrovos ekrano spalvą ir fono vaizdą. Naudodami skirtuką „Juostos stilius“ galite nurodyti krautuvo juostos dydį, o „Juostos spalva“ leidžia nustatyti atitinkamai jos spalvas.
3. "Atributai" ("Atributai"). Ši nustatymų grupė yra viena iš paprasčiausių! Čia galite valdyti žaidime naudojamus pasaulinius kintamuosius (daugiau apie kintamuosius kitame skyriuje).
4. „Valdymas“ („Valdymas“). Kaip rodo pavadinimas, šioje grupėje galime perkonfigūruoti ir pridėti klaviatūros mygtukus, su kuriais bus atliekami tam tikri žaidimo veiksmai.
5. „Grupės“ („Grupės“). Grupių mechanizmą jau svarstėme šiek tiek aukščiau. Čia turime galimybę matyti visas sukurtas grupes ir jas redaguoti.

Tiesą sakant, tai yra visi nustatymai, kurių mums reikės norint sukurti „flash“ žaidimus nemokamoje „Stencyl“ versijoje. Bet kadangi šis skyrius yra apie nustatymus, būtų nuodėmė nepaminėti pačios programos parametrų. Juos galite pasiekti meniu „Failas“ suaktyvinę elementą „Nuostatos“:

Programa palaiko daugiakalbę sąsają, tačiau šiuo metu yra tik anglų kalbos lokalizacija, todėl mes nuėjome tiesiai į antrą skirtuką - „Darbo sritis“. Faktas yra tas, kad trečiojoje „Stencyl“ versijoje pasirodė funkcija, kuri automatiškai generuoja prisitaikančius vaizdus iš įkeltų sprite.

Ir pagal numatytuosius nustatymus „Sprite“ yra padvigubintas, o tai lemia grafikos kokybės pablogėjimą. Kad taip nenutiktų, patariu išjungti vaizdo dydžio keitimą, lauke Scale pasirinkus Standartinis (1x).

Taip pat patariu pažvelgti į trečiąjį skirtuką – „Redaktoriai“. Čia galite susieti grafikos, garso ir teksto apdorojimo veiksmus su pažangesniais išoriniais (o ne įtaisytaisiais Stencyl) redaktoriais.

Šiek tiek apie kintamuosius

Apsvarstėme beveik visus darbo Stencyl niuansus, tačiau nepalietėme vienos galingiausių savybių – darbo su kintamaisiais.

Kintamieji bet kurioje programavimo kalboje leidžia operuoti įvairiais įvykiais, išreiškiant juos tam tikrais skaičiais (skaitiniais kintamaisiais), sąlygomis (loginiai kintamieji), tekstais (eilutės kintamieji) ir kt. Pagrindinis kintamųjų bruožas yra galimybė pakeisti bet kokią reikšmę iš anksto nustatytose ribose. Paprastas kintamojo pavyzdys: palydovas klasėje. Šiandien tai gali būti Ivanovas, rytoj Petrovas, o poryt Sidorovas :).

Mūsų atveju kintamasis „budi“ gali turėti vieną iš trijų reikšmių, kurios bus automatiškai pakeistos priklausomai nuo nurodytos sąlygos (pavyzdžiui, pavardžių eilės sąraše).

Stencyl kintamieji gali būti vietiniai arba globalūs. Mes galime deklaruoti vietinius kintamuosius tam tikro įvykio ar elgesio rėmuose ir jie veiks tik atliekant nurodytus veiksmus. Įvykių rengyklėje galite sukurti vietinį kintamąjį iškviesdami skyrių „Atributai“:

Čia yra keli skirtukai:

1. Skirtuke „Geters“ galite nustatyti kintamuosius, kurie gaus vertę iš bet kokių skaičiavimų ar tiesioginių nurodymų.
2. Skirtuke „Setters“ galima nustatyti bet kokias anksčiau sukurtų kintamųjų reikšmes.
3. Skirtuke „Žaidimų atributai“ saugomi visuotinių kintamųjų blokai ir, jei norite, galite pridėti naujų (nors toliau apsvarstysime, kaip tai padaryti geriau).
4. Skirtukas Sąrašai suteikia mums galimybę kurti duomenų masyvus.
5. Skirtukas Funkcijos naudojamas sukurtoms funkcijoms tvarkyti.

Vietinio kintamojo kūrimo algoritmas yra paprastas: pirmiausia sukurkite naują bloką skirtuke „Geters“, o tada raskite naujai sukurtą kintamąjį skirtuke „Setters“ ir pridėkite bloką su juo į darbo sritį, prilygindami jį kai kuriems žaidimo parametras. Tai viskas – kintamasis deklaruojamas ir gavo galiojančių reikšmių rinkinį.

Visuotiniai kintamieji (žaidimo atributai) Stencyl yra nustatomi iš karto visam žaidimui ir gali būti iškviečiami bet kokiu įvykiu ar elgesiu. Kaip minėta pirmiau, galite juos sukurti skirtuko „Žaidimo atributai“ skiltyje „Atributai“:

Tačiau daug patogiau peržiūrėti ir tvarkyti visus sukurtus kintamuosius naudojant nustatymų skiltį „Atributai“ (įrankių juostoje esantį mygtuką „Nustatymai“ arba įvykių rengyklės skirtuką „Žaidimo atributai“ – „Rodyti žaidimo atributus“). ):

Čia yra visas pasaulinių kintamųjų sąrašas ir galima sukurti naujus paspaudus mygtuką „Sukurti naują“. Naujam kintamajam galime iš karto nustatyti tipą (skaitinį, tekstinį, loginį ar masyvą) ir pradinę reikšmę neišeidami iš lango, kas, mano nuomone, yra labai patogu.

Naudojant globalius kintamuosius labai patogu diegti įvairius skaitiklius, nes juose esantys duomenys išsaugomi žaidėjui pereinant į naujus lygius ir saugomi atmintyje tol, kol įjungtas pats žaidimas. Taip pat rekomenduoju naudoti visuotinius kintamuosius, kad galėtumėte sekti leidžiamą animaciją.

Suteikę aktoriui konkretų sprite renginiuose, mes galime priskirti tam tikrą reikšmę šiam spritui žemiau esančiame kintamajame (pavyzdžiui, serijos numerį arba animacijos pavadinimą). Taigi, susiedami veiksmą su kintamuoju, galime bet kada jį iškviesti, nustatydami šiam kintamajam norimą reikšmę.

Žaidimų leidyba, importas ir eksportas

Galiausiai, nors ir trumpai, susipažinome su pagrindiniais darbo su Stencyl principais. Tarkime, sukūrėme žaidimą, išbandėme ir viskas pasirodė veikianti. Dabar jūs turite paversti žaidimą iš projekto į tikrą SWF failą, kurį galima paskelbti internete. Norėdami tai padaryti, tereikia atidaryti meniu „Paskelbti“ ir sąraše „Web“ spustelėti elementą „Flash“.

Bus pradėtas žaidimo failo kompiliavimas, po kurio pasirodys užklausa, kur ir kokiu pavadinimu išsaugoti gautą „flash“ failą. Išsaugome ir viskas – žaidimas paruoštas :).

Atvirkštinis procesas yra importuoti žaidimą. Importavimo funkcijos dėka galite atidaryti, pavyzdžiui, kitų vartotojų žaidimų projektus, kad pamatytumėte, kaip jie įgyvendina tą ar kitą funkciją;). Taip pat galite importuoti žaidimą iš meniu Failas. Sėkmingai importavus, žaidimas bus rodomas pagrindiniame projektų sąrašo ekrane. Tačiau čia verta padaryti nedidelę rezervaciją.

Problema ta, kad naujasis „Stencyl 3.0“ tik iš dalies suderinamas su ankstesnėse versijose sukurtais projektais, todėl jūsų importuoto žaidimo projekto funkcionalumas gali būti neišsamus arba, blogiausiu atveju, žaidimas išvis nepasileis, sukeldamas klaidą. . Turėsite mažai galimybių - arba ieškoti ir taisyti klaidas, arba taikstytis ir palikti viską kaip yra :).

Programos privalumai ir trūkumai

• žaidimo kūrimo paprastumas turint mažai arba visai neturint programavimo įgūdžių;
• galimybė kurti beveik bet kokio žanro žaidimus;
• didelė paruoštų elgesio ir žaidimų išteklių kolekcija;
• galimybė keistis žaidimų projektais;
• kuriant flash žaidimus nėra jokių apribojimų.

• gana didelis tiek pačios programos, tiek sukurtų žaidimų resursų intensyvumas;
• ribotas objektų skaičius scenoje – kuo daugiau, tuo žaidimas vyksta lėčiau (iki nesėkmės pradžios);
• nepalaikomi kirilicos šriftai (reikia redaguoti lotyniškos abėcėlės vektorinius vaizdus, ​​pakeičiant juos reikiamomis raidėmis);
• nepilnas naujos programos versijos suderinamumas su žaidimų projektais, sukurtais ankstesnėse versijose.

išvadų

Iš visų šiandien egzistuojančių „flash“ žaidimų kūrimo programų „Stencyl“ yra protingiausias kompromisas tarp lengvo veikimo ir galimybių platumo. Gera žinia ta, kad konstruktoriaus funkcionalumas nemokamame leidime yra praktiškai neribotas, o tai leidžia beveik iki galo įgyvendinti bet kurią idėją.

Tačiau nepamirškite apie „beveik“... Faktas yra tas, kad pats Stencyl veikia JAVA mašinos pagrindu, kuri, kaip žinote, yra gana reikli resursams. Jei prie šios apkrovos pridėtume ir žaidimo sukuriamą apkrovą, paaiškėtų, kad normaliam darbui mums reikia modernaus galingo kompiuterio.

Tai pirmasis „beveik“. O antrasis – numanomas objektų skaičiaus scenoje ribojimas, apie kurį jau praeityje užsiminiau. Net jei šie objektai yra tik plytelės, bet jų yra daug, žaidimas gali parodyti klaidą testavimo metu ir neprasidėti, kol nesumažinate jų skaičiaus.

Apibendrinant galima teigti, kad Stencyl bus idealus variklis kuriant įvairius atsitiktinius „flash“ žaidimus ir šoninius šaudmenis. Be to, pasipraktikavęs kurti „flash“ žaidimus, galite įsigyti vieną iš licencijų tipų ir, šiek tiek pakeitę mechaniką, perkelti žaidimą į „Android“ ir „iOS“ palaikomus formatus. Ir tai yra tikras būdas užsidirbti pinigų įtraukus žaidimą į Play Market arba App Store!

Galiausiai belieka tik palinkėti sėkmės visiems, nusprendusiems rimtai užsiimti žaidimų kūrimu. Tegul jūsų algoritmai veikia pirmą kartą, o kompiliatorius sėdi ir tyli, kai pradedate savo žaidimus :).

P.S. Leidžiama laisvai kopijuoti ir cituoti šį straipsnį, jei bus nurodyta atvira aktyvi nuoroda į šaltinį ir išsaugoma Ruslano Tertyšnio autorystė.

* Naudotos programos: Flash CS3, Photoshop CS3
* Sudėtingumas: vidutinis
* Numatomas pristatymo laikas: 3 valandos

Portfelio svetainė yra labai svarbi bet kuriam šiuolaikiniam menininkui, fotografui, dizaineriui ir net muzikantui. Jis rodo rimtą požiūrį į verslą ir profesionalumą. Šiandien parodysime, kaip galite sukurti originalų ir stilingą nuotraukų portfolio remiantis modernia Flash turinio valdymo sistema Moto CMS.

Naudosime atskirą Moto CMS versiją, kurioje yra įvairių paslaugų, komponentų, integruotų pavyzdžių ir švarių skirtingų struktūrų svetainių šablonų. O mes naudojame patį paprasčiausią šabloną, tai yra, sukursime nuotraukų aplanko svetainę nuo nulio.

Šiame vadove apimsime šias temas:

* Konteinerių kūrimas.
* Sukurkite lizdus (mygtukas „Uždaryti“, paprastas mygtukas).
* Kurti modulius (muzikos grotuvą ir vaizdų galeriją).
* Redaguoti svetainės išankstinį įkėliklį
* Svetainės puslapių kūrimas ir užpildymas turiniu.

Taip pat kalbėsime apie Moto CMS valdymo skydelio funkcijas ir funkcionalumą.

Mums reikės:
* Adobe Photoshop;
* Adobe Flash CS3;
* Moto TVS neprisijungus versija (nemokama bandomoji versija);
* Interneto svetainės dizainas c. PSD formatu.

Galutinio rezultato peržiūra

1 veiksmas: atsisiųskite „Moto CMS“ failus

Norėdami pradėti kurti mūsų fotografijos portfelio svetainę, turite atsisiųsti atskirą Moto Flash CMS versiją. Norint pakartoti visus šio vadovo veiksmus ir suprasti Moto TVS galimybes, pakaks bandomosios versijos.

2 veiksmas: trumpa Moto TVS failų apžvalga

Čia yra trumpa „Moto CMS“ failų ir aplankų apžvalga:

* Komponentai. Šiame aplanke yra mxp komponentų, kuriuos valdo „Adobe Extension Manager“.
* kontrolės skydelis. Yra visi valdymo skydelio failai.
* dok. Šiame aplanke yra API dokumentacija.
* Pavyzdžiai. Yra 4 paruoštų „flash“ svetainių pavyzdžiai, nuo paprasčiausių iki sudėtingiausių, su galerijos moduliu, naujienų moduliu, muzikos ir vaizdo grotuvu, kontaktine forma ir kt.
* Šablonai. 5 šablonai, kuriuos galite naudoti kurdami svetainę, pagrįstą Moto TVS. Kiekvienas šablonas turi reikalingą failų rinkinį ir skiriasi savo struktūra. Šiandien mes naudosime vieną iš šių šablonų, konkrečiai 1 šabloną, kaip savo nuotraukų aplanko pagrindą.
* skaitykite mane failą, kuriame aprašoma, kaip pradėti kurti svetainę naudojant Moto TVS.

3 veiksmas: paleiskite „Localhost“.

Kitas mūsų žingsnis – paleisti svetainės šabloną, iš kurio kursime savo portfelio svetainę. Norėdami tai padaryti, mums reikia vietinio žiniatinklio serverio. Mes naudojame WampServer. Tai leidžia kurti žiniatinklio programas naudojant Apache, PHP ir MySQL duomenų bazes.

Norėdami paleisti svetainės šabloną Nr. 1, tiesiog įkelkite aplanko turinį į vietinį serverį šablonas_01 iš /templates/ katalogo, taip pat aplanko turinio kontrolės skydelis.

Po to einame į „Moto CMS“ valdymo skydelį naršyklės adreso juostoje įvesdami savo URL ir pabaigoje pridėdami /admin.

Pastaba: Šiuo metu negalėsite peržiūrėti svetainės, nes joje dar nėra jokių puslapių. Bus rodomas 404 klaidos puslapis.

4 veiksmas: redaguokite config.xml

Viskas, ką turime padaryti, tai pakeisti svetainės plotį ir aukštį bei nustatyti fono spalvą.

Mūsų projekto dydis yra 980×800 pikselių. Kad dydis pasikeistų dideliame ekrane, turime nustatyti „100%“ svetainės pločiui ir aukščiui. Ir tam, kad jis būtų tinkamai rodomas mažos skiriamosios gebos ekrane, turime nurodyti minimalų svetainės plotį ir aukštį (pasirodys slinkties juostos). Fono spalva yra juoda (#000000).

5 veiksmas: pakeiskite style.css

Dabar turime atidaryti style.css failą ir nustatyti fono spalvą (juodą). Visa kita galima redaguoti naudojant Moto CMS valdymo skydelį.

6 veiksmas: sukurkite išankstinį įkroviklį

Šaltinio failai moto.xfl ir website.xfl yra atitinkamai flamoto ir flawebsite aplankuose.
Svetainės preloader turėtų būti sukurta moto.xfl. Išankstinis įkroviklis gali būti paprastas klipas su 100 kadrų.

Šio klipo veiksmų skydelyje rašome: „Stop ();“ pirmam kadrui. Tada animuojame likusius kadrus, kaip mums patinka.

Taip pat rašome „Stop ();“ pirmojo laiko juostos kadro veiksmuose fla.

Nepamirškite moto.fla failo ypatybėse nurodyti svetainės matmenis (minimalus plotis ir aukštis).

Kitas mūsų žingsnis yra sukurti gražią išankstinio įkėlimo programos išnykimo animaciją. Paskutiniame kadre turime paleisti svetainę suaktyvinę funkciją „showWebsite()“.

Atidarykite failą website.xfl ir atnaujinkite išankstinį įkėliklį.

7 veiksmas: svetainės fonas

Atidarykite Moto CMS medijos biblioteką (Nustatymai > Medijos biblioteka) ir kartu su kitais reikalingais vaizdais (pagrindiniam puslapiui, pagrindiniams puslapiams ar galerijai) įkelkite fono paveikslėlį naudodami mygtuką „Pridėti laikmeną“.

Po to grįžkite į valdymo skydelį, sukurkite naują puslapį ir įterpkite fono paveikslėlį naudodami mygtuką „Nuotrauka“. Vilkite vaizdą ir centre jį.

Šriftų tvarkyklė leidžia vartotojams valdyti svetainės šriftus, kurie saugomi kaip SWF failai ir kuriuos galima atsisiųsti.

Prieš įkeldami bet kokį šriftą, pirmiausia turime jį konvertuoti į SWF formatą. Tam naudosime Internetinis šriftų kūrėjas yra patogi internetinė programa, kurią sukūrė MotoCMS komanda, kuri leidžia lengvai konvertuoti TTF ir OTF failus į SWF. Tereikia pasirinkti reikiamą šrifto failą su plėtiniu .TTF arba .OTF, pridėti jį prie internetinio šriftų kūrėjo, paspausti mygtuką „Sukurti šriftą“ ir atsisiųsti baigtą SWF failą, po kurio galėsime jį naudoti savo portfelyje. svetainė .

Sukurkite svetainės pavadinimą ir šūkį

Įkėlę naują šriftą, galite sukurti svetainės pavadinimą ir šūkį naudodami įrankį Tekstas ir pritaikyti norimą šriftą. Šūkiui sukurti naudojame šriftą Tahoma, dydis: 10, spalva: # 727272. Po to pakoreguokite svetainės pavadinimą ir šūkį pagal dizainą .PSD.

9 veiksmas: pridėkite vaizdą prie pagrindinio puslapio

Galerijos vaizdą patalpinsime pagrindiniame svetainės puslapyje. Norėdami tai padaryti, pasirinkite vaizdą iš medijos bibliotekos, kairiojoje įrankių juostoje spustelėdami „Nuotrauka“. Jei reikia, pakoreguokite jo vietą pagal pagrindinio puslapio dizainą.

10 veiksmas: sukurkite apatinį meniu

Naudodami įrankį Shape sukurkite pilką siaurą stačiakampį ir įrankį Tekstas sukurkite jame mygtukus. Sureguliuokite viską pagal savo svetainės dizainą.
Išsaugokite visus pakeitimus ir pamatysite rezultatą spustelėdami „Peržiūrėti“.
Norėdami sukurti meniu, taip pat galite naudoti įtaisytąjį meniu modulį.

11 veiksmas: sukurkite turinio konteinerius

Pastaba: Sudėtiniai rodiniai yra website.fla klipai, kuriuose turinį galima pridėti dinamiškai. Jie gali būti 4 tipų: 1) konteineris su objektais, kurie matomi visoje aikštelėje, 2) konteineris su maketavimo objektais; 3) konteineris su puslapio objektais; 4) konteineris su iššokančiais objektais.

1. pasirinktame svetainės šablone pagal numatytuosius nustatymus yra du konteineriai: konteineris su objektais, matomais visoje svetainėje, ir konteineris su puslapio objektais. Jei atidarysime failą website.fla, pamatysime juos:

Šie konteineriai yra įrašyti į structure.xml failą. Įsitikinkite, kad plotis yra 980, o aukštis - 800 pikselių.

Konteineris su objektais, kurie matomi visoje svetainėje:

Sudėtinis rodinys su puslapio objektais:

Kad svetainės elementai, tokie kaip fonas, svetainės pavadinimas, šūkis ir apatinis meniu su pilku langeliu, būtų matomi visuose puslapiuose, turime juos įdėti į visos svetainės objektų konteinerį. Tai galime lengvai padaryti naudodami „Moto CMS“ valdymo skydelį. Tiesiog spustelėkite norimą elementą ir pasirinkite jo vietą – Tinklalapis . (Visoje svetainėje).

12 veiksmas: sukurkite puslapį „Apie mus“.

Sukurkite tuščią puslapį

Viršutiniame kairiajame kampe spustelėkite mygtuką „Sukurti“, kuris leis mums sukurti naują puslapį.

Reikiamų meniu mygtukų prijungimas prie naujo puslapio

Norėdami tai padaryti, grįžtame į pagrindinį puslapį ir meniu mygtuką prijungiame prie naujo puslapio. Tiesiog pažymėkite meniu mygtuko tekstą ir spustelėkite nuorodos piktogramą dešinėje, kad atidarytumėte nuorodų rengyklę. Mūsų atveju Portfelio meniu mygtukas nukreipia į pagrindinį svetainės puslapį, o mygtukas Apie mus – į puslapį Apie mus.

Fono paveikslėlio pridėjimas prie puslapio „Apie“.

Nusprendėme puslapį pridėti juodu fonu. Norėdami tai padaryti, eikite į medijos biblioteką spustelėdami mygtuką „Nuotrauka“ kairiajame skydelyje, pasirinkite ten iš anksto įkeltą vaizdą (įprastą juodą stačiakampį) ir pakoreguokite jo vietą puslapyje pagal dizainą.

Teksto įtraukimas į puslapį „Apie mus“.

Tekstinės informacijos įtraukimas į puslapį naudojant teksto įrankį. Integruotas WYSIWYG redaktorius rodo viską, ką darote, todėl teksto formatavimas yra paprastas. Pridėti kontaktinį adresą taip pat pakankamai paprasta, tereikia atidaryti nuorodų rengyklę ir įvesti el. pašto adresą.

Baigę nepamirškite puslapio Apie mus elementų įdėti į konteinerį su puslapio objektais. Pasirinkite kiekvieną elementą po vieną ir pasirinkite vietą: Puslapis (puslapio turinys).

13 veiksmas: pakeiskite išankstinio įkėlimo programos vaizdą

Galbūt pastebėjote baltus apskritus išankstinius įkėliklius, kai naršote puslapius. Norėdami juos nustatyti, atidarykite failą website.fla ir eikite į biblioteką. Dešiniuoju pelės mygtuku spustelėkite išankstinį įkėliklį ir pasirinkite Ypatybės.

Simbolių ypatybių lange galite pasirinkti elementą „Redaguoti bazinę klasę“ ir animuoti išankstinį įkėliklį taip, kaip norite. Išankstinį įkėliklį paliksime tuščią ir ištrinsime grafinį vaizdą.

14 veiksmas: svetainės animacija

Galiausiai pereiname prie įdomiausios mūsų vadovo dalies: svetainės animacijos. Šiuo metu, kaip galbūt pastebėjote, svetainė yra statiška, nes nei vienas konteineris nėra animuotas. Taigi kitas mūsų žingsnis yra suaktyvinti konteinerius ir pridėti kitų animacijų, kad mūsų svetainė būtų gyva.

Animuojami numatytieji konteineriai

Turinio konteinerį lengva animuoti pagal laiko juostą. Atidarykite failą website.fla ir sukurkite kiekvieno sudėtinio rodinio išnykimo animaciją.

Pirmiausia animuokime pagrindinį konteinerį su objektais, matomais visoje svetainėje. Tai yra website_holder_1 sluoksnis. Darome paprastą animaciją su skaidrumu, bet ją kažkuo papuošime. Sluoksnyje sukurkite antrą pagrindinį kadrą, pirmam pagrindiniam kadrui nustatykite alfa 0 % (padarykite jį skaidrų), sukurkite tarpinį kadrą nuo pirmojo iki antrojo ir pridėkite palengvinimą.

Sukurkime animaciją konteineriui su puslapio objektais (sluoksnis puslapis_1_turėtojas_2), bet parodykite jį šiek tiek vėliau.

Taigi prie sluoksnio pridėsime dar du pagrindinius kadrus, padarysime konteinerį skaidrų pirmame ir antrame kadruose ir sukursime palengvinimą tarp antrojo pagrindinio kadro į trečiąjį.

Kai kompiliuosime ir įkelsime svetainę, pamatysime, kad kiekvienas elementas jau atrodo animuotas. Tačiau pereinant iš vieno puslapio į kitą nėra animacijos, tik neįprastas mirksėjimas. Už tai atsakinga antroji laiko juostos dalis.

Taip sukuriame konteinerio atsiradimo ir išnykimo animaciją.

Kadangi teksto šriftas yra iš sistemos šriftų, turime pakeisti maišymo režimą iš įprasto sluoksnio į visų filmų klipų egzempliorių lygį konteinerio sluoksniuose.

Kuriame papildomus konteinerius ir juos animuojame.

Gerai „flash“ svetainei šios animacijos neužtenka, todėl animuotus padarysime ir kitas svetainės dalis, tokias kaip viršus (žemiau esančiame paveikslėlyje paryškintas geltonai), apačia (paryškinta žalia spalva) ir pats turinys ( paveikslėlyje raudoname langelyje).

Kadangi viršutinė ir apatinė dalys yra visos aikštelės lygyje, mes pridėsime du konteinerius šioms dviem dalims. Prieš pridėdami konteinerius, turime nustatyti jų dydį ir vietą. Tai lengva padaryti naudojant „Photoshop“ įrankį „Slice“.

Viršutinės dalies matmenys yra tokie: x=0, y=0, plotis=980, aukštis=120.

Apatinė zona: x = 0, y = 765, plotis = 980, aukštis = 35.

Viršutiniame konteineryje bus svetainės pavadinimas, apatiniame – meniu ir jie bus rodomi skirtingai. Be to, jie prilips atitinkamai ekrano viršuje ir apačioje, kai pereina per visą ekraną.

Nustačius konteinerių matmenis, atsidarome failą structure.xml ir pridedame naujus konteinerius (svetainės lygiu), nurodydami jų koordinates, plotį, aukštį ir gylį.


Pridėję konteinerius prie .xml failo, turime juos sukurti svetainėje.fla faile. Atidarykite failą website.fla ir sukurkite naujus mūsų konteinerių sluoksnius. Sluoksnių tvarka turi atitikti gylio reikšmes, kurias nustatėme xml faile.

Tuščią filmo klipą galime nukopijuoti iš sluoksnio website_holder_1 ir įklijuoti į website_holder_3 ir website_holder_4.

Klipe nustatome tas pačias koordinates, kaip nurodyta faile structure.xml.

3-iajam konteineriui: x = 0, y = 0;

4-ajam konteineriui: x = 0, y = 765.

Kadangi klipą nukopijavome, liko seni pavadinimai. Keičiame juos pagal ID, kad būtų lengva rasti.

Tą patį reikia padaryti su 4 konteineriu.

Laiko juostoje nustatome pirmąjį 3 ir 4 sudėtinių rodinių pagrindinį kadrą, kad jie būtų rodomi vėliau nei konteineris su visos svetainės objektais. Tada sukuriame antruosius pagrindinius kadrus ir animuojame tarpinius kadrus. Pirmuosiuose pagrindiniuose kadruose yra pradinė sudėtinių rodinių padėtis, o antruosiuose - galutinė konteinerių padėtis svetainėje. Pagrindinis konteineris pasirodo iš ekrano viršaus, todėl perkeliame jį į pirmąjį pagrindinį kadrą; apatinis konteineris yra apatinėje pusėje, todėl jį taip pat perkeliame į pirmąjį pagrindinį kadrą. Taip pat pridedame lengvinimų, kad pagyvintume tarpą.

Štai ką gavome:

Po to veiksmų sluoksnyje turime pridėti šį kodą pirmojo mūsų sudėtinių rodinių animacijos pagrindinio kadro lygyje.

Tada mes sudarome svetainę ir atnaujiname valdymo skydelį.

Sudėkite daiktus į konteinerius

Pasirinkę bet kurį objektą pamatysite, kad išskleidžiamojo meniu galimų vietų sąraše atsiras du nauji konteineriai: viršuje ir apačioje.

Viršutiniame konteineryje turi būti svetainės pavadinimas su šūkiu, o apatiniame – svetainės meniu su pilku stačiakampiu.

Pakeiskite apatinės talpyklos turinį

Dabar pageidautina, kad dideliame ekrane apatinis konteineris priliptų prie ekrano apačios. Norėdami tai padaryti, konteinerio animaciją turime perkelti į kitą klipą, nes, kaip žinote, animacinio klipo programiškai perkelti negalime (animacija neveiks). Pavadinkime šį klipą website_holder_4_c.

Po to eikime į pagrindinę sceną, spustelėkite pirmuosius 3 ir 4 konteinerių pagrindinius kadrus ir redaguokite kodą.

Sukūrę svetainę, galite pamatyti, kad apatinis konteineris prilimpa prie ekrano apačios, nesvarbu, kaip pakeistume ekrano dydį. Jei ekrano skiriamoji geba per maža, apatinis konteineris nepersidengs su svetainės turiniu ir liks savo vietoje.

15 veiksmas: animuokite turinio sudėtinį rodinį

Norėdami animuoti svetainės turinį, konteinerį su visos svetainės objektais turėsime animuoti taip pat, kaip ir viršutiniame ir apatiniame konteineriuose.

16 veiksmas: sukurkite kontaktų puslapį

Prieš kurdami naują puslapį atnaujinkime puslapio šabloną. Sukurkime visų naujų puslapių šabloną, puslapį „Apie mus“. Dešiniuoju pelės mygtuku spustelėkite puslapį Apie mus ir pasirinkite Atnaujinti puslapio šabloną.

Atnaujinę puslapio šabloną, spustelėkite mygtuką „Sukurti“, įveskite puslapio pavadinimą, pavadinimą, priskirkite URL ir pasirinkite jo vietą savo svetainės struktūroje, kaip parodyta toliau, ekrano kopijoje.

Puslapis „Kontaktai“ paruoštas. Dabar belieka redaguoti jo turinį naudojant patogų WYSIWYG redaktorių ir naudoti nuorodų rengyklę, kad prijungtumėte jį prie atitinkamo meniu mygtuko.

17 veiksmas: sukurkite paprastą lizdą

Moto Flash TVS lizdai atlieka animuotų objektų vaidmenį. Lizdas gali turėti daug animuotų funkcijų, kurias galima valdyti tiesiai iš valdymo skydelio.

Pirmiausia bandysime sukurti paprastą lizdą, o tada jį patobulinsime.

Pradėkime nuo mygtuko „Uždaryti“, pridėkime jį prie svetainės kaip paveikslėlį, pritaikykime tam tikrus efektus ir priskirkime veiksmą „Eiti į puslapį“ -> „Pagrindinis“.

Animuoti uždarymo mygtuką visai nesunku, nes tai darysime naudodami lizdą. Sukurkime plyšį svetainė.fla faile. Norėdami tai padaryti, į biblioteką importuojame mygtuko „Uždaryti“ vaizdą. Skyriuje Slots turime sukurti naują filmo klipą ir pavadinti jį CloseButtonSlot.

Nustatykime klasę kaip CloseButtonSlot. Nereikia kurti naujos klasės, užtenka paveldėti AbstractMotoSlot klasę. Tiesiog nukopijuokite: com.moto.template.shell.view.components.AbstractMotoSlot ir įklijuokite jį į lauką Bazinė klasė.

Tada prie scenos pridedame CloseButtonIcon vaizdą (CloseButtonSlot MovieClip turi būti atidarytas) ir konvertuojame jį į klipą, pavadintą CloseButtonIcon. Kadangi mes paveldėjome savo lizdą iš AbstractMotoSlot klasės, tai suteikia mums pagrindinę animaciją. Dabar sukursime gražų išplėtimo / sutraukimo efektą.

Kitas žingsnis yra sukurti naują sluoksnį ir sukurti pagrindinius kadrus, kur reikia įdėti "Stop ();". Padėkite pagrindines etiketes „over“ (tarp pirmojo ir antrojo sustojimo kadrų) ir „out“ (tarp antrojo ir trečiojo sustojimo pagrindinių kadrų) – žiūrėkite ekrano kopiją:

Savo klipų sluoksnyje sukuriame tą patį raktą ir tarpinius kadrus.

Pavyzdžiui, mūsų mygtukas „Uždaryti“ suksis pagal laikrodžio rodyklę, kai pelė bus užvedama virš jo, ir prieš laikrodžio rodyklę, kai ji bus pašalinta.

Pridėkime judesio animacijos sukimosi ryškumą ir palengvinimą.

Pasibaigus animacijai, mes sukompiliuojame website.fla failą su mūsų nauju lizdu (Ctrl + Enter).

Norėdami dirbti su lizdu naudodami Moto TVS, turime nurodyti jo parametrus faile: structure.xml:

librarySymbolLinkage=” ” – eksportuoti filmo klipo lizdą (klasės pavadinimas).
animated=”true” – atributas, nurodantis, ar lizdas animuotas, ar ne.
resizable="false" – ar yra lizdo dydžio keitimo logika, ar ne.
locked=”false” – ar lizdas turi būti rodomas valdymo skydelyje, ar ne.
– lizdo pavadinimas valdymo skydelyje
– lizdo savybės, praplečiančios funkcionalumą. Šiame pavyzdyje jo nenaudosime.