Cara membuat file (dokumen) baru di Flash CS6. Membuat game flash Cara membuat animasi flash

Pembuatan situs flash ndash; soalnya agak rumit. Ini membutuhkan pengetahuan di banyak bidang: pemrograman, grafik komputer, dasar-dasar mengoptimalkan dan mempromosikan situs, Anda perlu mengetahui flash itu sendiri dengan baik, pada akhirnya, baik pada tingkat pengetahuan lingkungan pengembangan dan skrip tindakan bahasa pemrograman 2.0. atau skrip tindakan 3.0, yang saat ini merupakan prioritas yang lebih tinggi.
Aplikasi Flash dikembangkan dalam Adobe Flash Professional ndash; adalah program multimedia yang digunakan untuk membuat konten seperti aplikasi web, film, game, aplikasi untuk ponsel, dan perangkat tertanam lainnya.
Flash ndash; sebuah fenomena yang unik. Sebelumnya produk ini bernama "Macromedia Flash", setelah diakuisisi oleh Adobe, program ini kemudian dikenal sebagai "Adobe Flash" sejak tahun 2005. Animasi flash digunakan untuk streaming halaman web. Kadang-kadang siram ndash; ini adalah bagian dari halaman html, dan kebetulan seluruh halaman seluruhnya dibuat dalam Flash, atau seluruh situs dibuat dengannya. File Flash yang dihasilkan adalah file swf ("ShockWave Flash") khusus yang memerlukan plug-in browser gratis khusus untuk melihat konten, mereka dapat dengan mudah dan cepat diunduh dan diinstal dari situs web resmi Adobe. Keuntungan film flash adalah memuat sangat cepat dan bekerja dengan animasi vektor dengan interaktivitas. Flash dapat dimuat sebelum seluruh video ditampilkan di layar, yaitu, Anda dapat menerapkan opsi saat Anda mulai menonton animasi, dan sisa "aliran" di layar dimuat di latar belakang.
Grafik flash yang digunakan dalam vektor ditambah kode program memungkinkan untuk membuat aplikasi berfitur lengkap yang dapat menggantikan beberapa raster, fragmen video, kode program, tetapi membuatnya jauh lebih optimal, lebih sedikit bandwidth yang digunakan untuk streaming, lebih sedikit daya prosesor dikonsumsi. Selain rendering vektor, Flash Player (pemutar yang diperlukan untuk melihat film Flash) menyertakan mesin virtual (ActionScript Virtual (AVM)) untuk mendukung skrip interaksi run-time, dan juga mendukung video, mp3.
Mari kita pertimbangkan jenis grafik yang ada dan sorot kelebihan grafik vektor, yang langsung digunakan oleh Flash.
Semua grafik dapat dibagi menjadi tiga jenis: raster, vektor, 3D. Dalam grafik raster, seperti pada monitor TV, setiap gambar terdiri dari satu set elemen ndash kecil; piksel ndash; adalah singkatan dari elemen gambar.
Prinsip grafik titik sangat sederhana: ketika seorang anak menggambar sel di sekolah, hanya di sini sel-sel ini jauh lebih kecil. Jenis grafik ini sederhana baik dalam implementasi maupun pemrosesan dan presentasi, secara teknis nyaman untuk diterapkan, mengotomatiskan input atau digitalisasi informasi bergambar.
Tetapi grafik raster memiliki kelemahan: banyak, berat file menjadi besar, dan ketika gambar diperkecil atau diperbesar, kualitas gambar hilang.
Pengkodean informasi grafik dalam grafik vektor berbeda: semua gambar ditetapkan sebagai kontur ndash; objek matematika. Kontur ini adalah objek independen yang dapat dipindahkan, diubah ukurannya, diskalakan, dan berapa kali pun. Garis diatur oleh titik awal, rumus yang menunjukkan garis itu sendiri. Berkat ini, saat mengubah pola, proporsinya selalu dijaga dengan tepat. Grafik vektor juga merupakan grafik berorientasi objek, karena gambar terdiri dari objek individu - garis lurus dan melengkung, elips, persegi panjang, bentuk tertutup dan terbuka, dll., Yang memiliki karakteristik ketebalan garis, warna, gaya garis, dll. D.
Grafik vektor ekonomis dalam hal sumber daya, informasi tentangnya disimpan dalam bentuk rumus, dan bukan informasi untuk setiap titik, deskripsi warna tidak secara signifikan meningkatkan ukuran file. Grafik vektor mudah dimodifikasi tanpa kehilangan kualitas gambar. Ada area grafik di mana pelestarian kontur yang jelas sangat penting, misalnya, dalam membuat logo, font, dll.
Vektor mengambil keuntungan penuh dari resolusi semua perangkat output, seperti printer. Gambar selalu terlihat berkualitas tinggi, jernih, semuanya hanya akan bergantung pada printer itu sendiri.
Juga, keuntungan dari grafik vektor dapat disebut fakta bahwa itu mudah diubah menjadi grafik raster, tetapi tidak sebaliknya! Dan itu dapat mencakup objek grafik raster, meskipun tidak dapat diproses dengan cara yang sama.
Keuntungan serius dari grafik vektor dianggap sebagai sarana untuk mengintegrasikan teks dan gambar, satu pendekatan untuk mereka, masing-masing, kemampuan untuk membuat produk akhir. Editor grafis vektor paling populer adalah CorelDRAW, Adobe Illustrator dan, tentu saja, Adobe Flash.
Vektor dibatasi saat membuat gambar realistis: ndash yang jelas dan kartun; ya, tapi inilah cara merumuskan pohon pinus atau awan. Ada juga masalah saat memasukkan informasi grafik: misalnya, pemindai mengirimkan informasi tentang piksel gambar demi piksel: lokasi dan warna setiap titik tergantung pada reaksi berkas cahaya. Itu tidak bisa menutupi objek demi objek, dan tidak semua gambar, seperti yang saya tulis di atas, bisa diformalkan.

Flash menjadi ndash yang populer secara universal; spanduk kartun muncul di hampir setiap halaman Web. Mereka interaktif, memutar animasi dan mengambil sedikit ruang disk, yang penting saat bekerja di jaringan.
Animasi dibuat dengan menampilkan setiap frame flash untuk jangka waktu tertentu. Ketika ada banyak bingkai, ilusi gerakan tercipta. Teknologi flash sebelumnya muncul animasi GIF, tetapi kemungkinan Flash jauh lebih luas. Jadi dengan bantuannya Anda dapat membuat elemen navigasi, kartun bersuara, logo animasi, kalkulator, seluruh situs dengan serangkaian elemen interaktif yang berbeda, dan keajaiban animasi apa yang dapat dibuat dengan flash: mereka terlihat sangat mengesankan dan teknologi lain untuk web tidak dapat membanggakan kemampuan seperti itu.
Animasi flash disebut film. Kemungkinan animasi tidak terbatas pada animasi, berbagai objek dianimasikan: menu, gambar, tautan, teks.
Saat program dimulai, sebuah jendela terbuka dengan ruang kerja dan bilah alat, serta jendela tambahan yang dapat dihubungkan selama bekerja. Tab untuk bekerja dengan garis waktu, pengaturan pemeriksaan kesalahan, dll. juga ditampilkan. Dalam program ini, film dibuat dengan menggambar atau mengimpor gambar yang sudah jadi, ditempatkan di area khusus jendela kerja ndash; adegan (Stage), dan frame dibuat menggunakan Timeline (garis waktu).
Mungkin ada beberapa adegan dalam film; saat Anda memulai film, adegan tersebut diputar sesuai urutan pembuatannya, kecuali urutan ini sengaja diubah. Ini memungkinkan Anda untuk dengan mudah dan cepat mengubah setiap episode, mengubah urutannya.
Animasi itu sendiri dilakukan dengan mengubah bingkai satu demi satu, mengubah kontennya, yaitu, objek dengan parameter yang diperlukan ditambahkan ke bingkai. Objek di atas panggung dapat diputar, posisi, warna, transparansi, bentuknya, ukurannya dapat diatur, hal yang sama dapat dilakukan dengan objek lainnya.
Animasi dapat dibuat dengan cara berikut:
Animasi Frame-by-frame ndash; gambar di setiap bingkai dilakukan dengan tangan dan bingkai berbaris;
dihitung (Animasi Tweened) ndash; hanya bingkai awal dan akhir yang dibuat (disebut bingkai kunci), dan di antara mereka program itu sendiri membangun bingkai; dua jenis animasi tersebut: gerak (Motion Tweening, ketika parameter gerak berubah, putar, ukuran, posisi), bentuk (Shape Tweening);
secara terprogram ndash; ketika parameter untuk mengubah objek diatur menggunakan perintah bahasa pemrograman Action Script.
Dalam proses pengerjaan film, data asli disimpan dalam file khusus dengan ekstensi .fla. Ini termasuk adegan dengan semua objek, serta parameter tambahan tentang objek yang tidak termasuk dalam film, tetapi dibuat di dalamnya, serta opsi suara, komentar, kode skrip, pengaturan program, dll. Setelah membuat sumber seperti itu, Anda perlu menerjemahkannya ke dalam format yang sesuai untuk Internet ndash; yaitu SWF, jadi kami mempublikasikan film atau mengkompilasi kode. Ini akan menghapus informasi dari file yang tidak diperlukan untuk pemutaran dalam bentuk film yang diinginkan. Dengan demikian, ukuran file menjadi minimal dan cepat dimuat oleh pengguna. File tersebut dapat dibuka secara terpisah oleh ndash; pemain akan memainkannya, tetapi Anda dapat menghubungkannya ke halaman html mana pun sebagai objek.

Film ini dibuat dari elemen ndash prefabrikasi; standar (Simbol) atau simbol. Referensi adalah gambar, tombol, animasi, klip video yang digunakan berulang kali dalam video. Mereka dapat dibuat atau diimpor. Setelah dibuat, simbol disimpan di toko ndash khusus; Perpustakaan. Dalam proses perakitan film, di tempat-tempat di mana diperlukan, itu adalah contoh (Instance) dari standar (yang disimpan di perpustakaan) yang dimasukkan, dan tidak sepenuhnya setiap kali. Dan Anda dapat memasukkannya beberapa kali dan di mana saja. Dalam hal ini, Anda dapat mengubah parameter instans sesuka Anda: lokasi, ukuran, skala, rotasi, tikungan, transparansi, nada, dll., sedangkan simbol referensi itu sendiri tidak berubah. Ini sangat nyaman ndash; Anda tidak perlu membuat elemen baru setiap kali atau menyalinnya, elemennya adalah satu, dan modifikasinya sebanyak yang Anda suka. Dan selama proses penerbitan, file video akhir, yang dibuat dalam format swf, dirangkai sedemikian rupa sehingga di satu tempat akan ada objek referensi secara langsung, dan di semua tempat lainnya ndash; hanya petunjuk untuk itu. Bayangkan berapa banyak bobot video yang dikurangi dengan cara ini dibandingkan dengan menyalin elemen yang hampir identik.
Standarnya adalah:
banteng; Klip Film (moviklip) ndash; termasuk suara, grafik, animasi, dapat ditulis secara terprogram;
banteng; Grafis (Grafik) ndash; gambar statis, animasi, suara, tetapi tidak dikontrol secara terprogram;
banteng; Tombol (tombol) - termasuk gambar, suara; dibandingkan dengan jenis referensi simbol lainnya, ini hanya mencakup empat bingkai, yang menunjukkan perubahan status tombol ketika berbagai peristiwa mouse terjadi.
Sebelum langsung membuat simbol referensi, Anda perlu mengatur jenisnya, nanti bisa diubah.
Selain simbol referensi dan contohnya, film dapat berisi gambar dari file eksternal, font.
Seluruh video dalam Adobe Flash ndash; ini adalah urutan frame (Frames), mereka ditampilkan secara bergantian pada kecepatan yang ditentukan. Mereka bekerja dengan bantuan Timeline. Di sebelah kiri pada skala adalah lapisan yang namanya perlu diatur, di ndash kanan; satu set bingkai kosong yang diisi sebagai objek dibuat dan ditempatkan di atas panggung. Segera setelah bingkai penuh dengan objek, ia berubah warna menjadi abu-abu. Keyframes ditunjukkan dengan titik hitam. Pada garis waktu, bingkai saat ini ditandai dengan penanda ndash merah; kepala bermain di mana garis merah tipis melewati secara vertikal, yang melintasi semua lapisan dan laquo, melihat traquo; bingkai saat ini di masing-masing. Bingkai-bingkai inilah, yaitu, isinya dalam bentuk klip video, yang ditampilkan di layar.

Untuk menerapkan interaktivitas dan kemampuan untuk membuat situs lengkap, Adobe Flash menggunakan bahasa pemrograman Action Script.
Untuk membuat film menjadi interaktif, Flash menggunakan program skrip (script-script), yang berisi sekumpulan instruksi (tindakan) dalam ActionScript, dan dieksekusi ketika peristiwa tertentu terjadi: pengguna menekan tombol, mencapai bingkai film tertentu, reaksi terhadap gerakan mouse, rodanya, memposisikan penunjuk di atas area tertentu, dan banyak lainnya. Perintah skrip menentukan bagaimana Flash bereaksi ketika suatu peristiwa terjadi.

Perintah skrip yang dibuat ketika suatu peristiwa diimplementasikan ditentukan untuk klip, bingkai, tombol, dan ini dilakukan pada tab khusus di bagian bawah layar Tindakan (Perintah) (Bingkai Tindakan, Klip Film Tindakan), Tombol Tindakan.
Kemungkinan peristiwa:
Tekan Tombol ndash; ketika pengguna menekan tombol keyboard, parameter fungsi adalah nama tombol.
Arahkan (Berguling) ndash; ketika penunjuk tetikus berada di atas objek, tetapi tetikus tidak ditekan;
Lepaskan ndash; jika tombol mouse dilepaskan saat penunjuk berada di atas tombol yang telah diprogram, yaitu jika pengguna mengklik manipulator laquo;mouseraquo;;
Tekan ndash; jika tombol mouse (kiri) ditekan saat penunjuk berada di atas tombol yang diprogram. Dalam hal ini, area aktuasi diperhitungkan, dan bukan gambar yang terlihat, ini ditentukan dalam bingkai Hit;
Hapus (Roll Out) ndash; ada penunjuk mouse di atas tombol, itu tidak ditekan dan mouse diambil dari tombol yang dapat diprogram;
Shift (Drag Out) - tombol mouse ditempatkan di atas objek, ditekan dan dihapus;
Rilis Luar ndash; jika tombol mouse ditekan pada objek, dan kemudian dilepaskan oleh pengguna di luar objek;
Seret Lebih dari ndash; pointer dipasang pada objek, tombol kiri mouse ditekan dan tidak dilepaskan, tetapi pointer diarahkan ke belakang objek, lalu dikembalikan lagi.

Bahasa ActionScript 3.0, jika dibandingkan dengan ActionScript 2.0, lebih modern karena didasarkan pada dasar-dasar pemrograman berorientasi objek. Dimana konsep utamanya adalah kelas, objek, atribut atau propertinya, serta metode yang melekat pada objek ini.
ActionScript dijalankan menggunakan mesin virtual (Virtual Machine ActionScript), yang merupakan bagian dari Flash Player.
Dasar dari setiap kode program adalah variabel, yang dalam ActionScript diatur seperti ini: var ndash; perintah Flash khusus, yang berarti bahwa di bagian ini variabel ditetapkan dan jenisnya ditentukan; nama ndash; nama variabel, ditentukan dalam format teks-numerik, tetapi tidak dimulai dengan angka; ketik ndash; indikasi tipe variabel (numerik - Angka, ndash logis; Boolean, teks - String, dll.). yaitu, Anda akan menentukan: Var x: String;
Pastikan untuk menyertakan titik dua setelah nama variabel dan titik koma di akhir baris. Selama eksekusi kode, nilai, dan sesuai dengan jenis variabel, dapat diubah.
Variabel yang menyimpan sejumlah besar data disebut array. Di AC3.0. ditentukan dengan tipe Array: Var Mas: Array.
Semua elemen array diberi nomor mulai dari 0, jadi untuk mengakses, misalnya elemen pertama, Anda perlu menentukan Mas. Artinya, dalam tanda kurung siku Anda menunjukkan posisi elemen yang diinginkan dalam array.
Kode itu sendiri akan terdiri dari fungsi-fungsi yang menggambarkan urutan perintah yang terjadi pada acara ndash tertentu; klik mouse, tekan tombol, mencapai beberapa nilai, dll.
Fungsi ditentukan menggunakan fungsi kata yang dicadangkan, lalu Anda menentukan namanya - nama - nama teks-numerik apa pun, tetapi tidak dimulai dengan angka, kemudian dalam tanda kurung () Anda dapat menentukan parameter fungsi ndash; apa yang diumpankan sebagai input, mereka mungkin tidak ada, lalu titik dua dan tipe data yang dikembalikan fungsi atau batal ndash; ketika fungsi tidak mengembalikan apa pun. Setelah itu, lampirkan seluruh kode fungsi dalam kurung kurawal ( ). Dan Anda mengakses fungsi, menentukan nama dan parameternya jika perlu: nama (). "Kondisi di AC 3.0. diatur melalui operator jika: if(x==y), yaitu, dalam tanda kurung bulat, Anda perlu menentukan kondisi perbandingan itu sendiri. Loop didefinisikan melalui for(), di mana parameternya diatur dalam tanda kurung: variabel penghitung, langkah perubahannya.
Setiap objek dicirikan oleh parameter atau propertinya; Anda dapat melampirkan event listener ke objek dalam flash menggunakan fungsi addEventListener. Listener ini akan menangani peristiwa yang terjadi dengan objek, dan jika reaksi terhadapnya dijelaskan dalam fungsi oleh programmer, program akan bereaksi sesuai dengan itu.

Ini hanyalah sebagian kecil dari apa yang perlu Anda ketahui saat mulai membuat situs flash. Anda tidak perlu membuat situs dari awal, ada template khusus yang dapat Anda beli dan modifikasi sesuai dengan kebutuhan Anda (misalnya, situs templatemonsters). Desain sudah sepenuhnya dikembangkan di sana, Anda perlu mengubah konten dan dalam implementasi perangkat lunak semua yang diperlukan dapat diprogram ulang. Kemudian Anda perlu membeli domain dan hosting, tempatkan file html di mana swf terhubung.
Membaca buku (misalnya, buku laquo; 100% tutorial M.Flash MXraquo; membantu saya untuk pekerjaan dan artikel), belajar dari kolega di forum (demiart, flasher.ru), dan juga apa yang harus menjadi Asisten pertama Anda bantuan di situs web resmi Adobe. Opsian bahasa ActionScript sangat rinci dan rinci, contoh ditampilkan, dan materi disajikan dalam bahasa Rusia juga.
Setelah membuat video, Anda perlu mempublikasikannya. Anda dapat mengatur opsi penerbitan program di item menu File Opsi Penerbitan. Ini menunjukkan dalam format mana untuk mengunggah video, apa pengaturan kualitas untuk grafik dan suara, dan banyak lainnya. Setelah Anda memiliki file swf, Anda dapat menggunakannya sebagai aplikasi selesai lengkap. Untuk mengubah, memperbarui video yang dibuat, Anda perlu mengedit sumber ndash; fla file dan mempublikasikan lagi.

Untungnya, sebagian besar pengguna Internet aktif dapat membuat game flash. Untuk pemula, bahkan keterampilan pemrograman awal sangat membantu dalam hal ini (memperolehnya, omong-omong, tidak begitu sulit - akan ada keinginan). Benar, Anda perlu waktu untuk menguasai salah satu dari banyak desainer game flash khusus (misalnya, Macromedia Flash).

Banyak situs perangkat lunak berisi, antara lain, hanya konstruktor seperti itu. Menginstalnya di komputer, sebagai suatu peraturan, tidak menimbulkan masalah khusus bagi pengguna. Ingatlah bahwa program yang dipilih harus didaftarkan dan diinstal dengan semua perubahan yang diperlukan - maka itu akan melayani Anda dengan setia, yaitu tanpa gangguan. Sebagian besar desainer game dibuat dalam bahasa Inggris, tetapi Anda dapat mencari crack atau versi dalam bahasa Rusia. Seringkali dalam pengaturan itu sendiri ada jendela di mana Anda dapat mengatur bahasa asli Anda.

Cara membuat game flash: persiapan awal

Bahkan sebelum Anda duduk untuk menguasai perancangnya, Anda seharusnya sudah memiliki skenario perkiraan untuk permainan tersebut, sebuah alur cerita. Sebaiknya pikirkan tentang animasi dan desain terlebih dahulu - ini akan menghemat waktu Anda secara signifikan. Sebelum Anda membuat game flash, tentukan jenis yang diinginkan. Untuk inspirasi, kunjungi situs yang menampilkan perpustakaan permainan flash.

Profesional merekomendasikan agar pemula memulai dengan membuat aplikasi sederhana, seperti game arcade. Dan hanya dengan begitu Anda dapat beralih ke jenis permainan yang lebih kompleks dan bahkan membuat strategi Anda sendiri. Anda dapat memilih jenis mainan masa depan di konstruktor yang sama, di mana semua genre diurutkan dengan mudah. Aktifkan, misalnya, arcade (klik dua kali).

Cara membuat game flash: bekerja di desainer game

Buka template dan seret objek yang diinginkan dari bagian Objek Animasi dan Objek Statis ke atasnya. Buat latar belakang dengan memilih tekstur dan warna. Untuk objek, pilih warna menggunakan palet warna. Gunakan Pemutar Animasi untuk memeriksa fitur lain mana yang tidak diaktifkan. Dalam pengaturan, atur level pergerakan karakter game (di arcade) atau objek (di mainan logika).

Setelah Anda melakukan semua yang Anda butuhkan, luncurkan debugger. Dalam mode ini, Anda dapat menjalani permainan Anda sendiri, mulai dari level mana pun - ini penting untuk menguji kinerjanya. Hilangkan kesalahan yang terdeteksi dan periksa kembali game flash. Jika semuanya baik-baik saja, simpan perubahan Anda.

Cara membuat game flash: bawa game "ke pikiran"

Sekarang Anda dapat menemukan nama asli untuk gagasan flash Anda, tulis anotasi singkat. Gunakan perancang layar pembuka untuk membuat layar pembuka yang spektakuler untuk game Anda. Simpan juga perubahan yang Anda buat.

Telusuri permainan flash Anda sendiri dari awal hingga akhir untuk menemukan (atau tidak menemukan) kesalahan dan malfungsi di dalamnya, dan tidak ada salahnya untuk melihat hasil karya Anda secara kritis. Sangat penting bahwa permainan memiliki bagian yang logis dan terdefinisi dengan baik, seperti buku atau film yang bagus: awal, perkembangan peristiwa, akhir.

Kirim versi permainan Anda yang bersih ke teman-teman Anda - biarkan kritikus yang paling jujur mengevaluasi hasil yang telah Anda capai. Nah, setelah itu, Anda sudah bisa mengupload game flash ke Web.

Bagaimana cara membuat game flash jika Anda memiliki keinginan, tetapi tidak memiliki pengetahuan?

Kepada banyak pengguna yang begitu peduli dengan masalah ini, kami tentu ingin memberikan jawaban. Ingatlah bahwa pengetahuan apa pun tidak bisa datang begitu saja. Setiap bisnis baru harus dimulai di suatu tempat. Seiring waktu, Anda akan mulai memahami pengetahuan seperti apa yang Anda miliki untuk membuat game. Anda akan mulai meminta saran, mencari rekomendasi, membaca literatur yang relevan, berkat itu Anda akan mulai semakin maju dalam keterampilan Anda. Jangan takut dengan yang baru, jika tidak, Anda tidak akan pernah mencapai apa yang Anda inginkan. Semoga beruntung!

Program untuk membuat game flash tanpa pengetahuan tentang bahasa pemrograman. Memungkinkan Anda membuat game dari blok logis dan gambar yang telah disiapkan sebelumnya.

Terkadang, mungkin sudah beberapa tahun yang lalu, program Game Maker muncul di situs web kami, yang memungkinkan Anda membuat game tanpa pengetahuan tentang bahasa pemrograman apa pun!

Sampai saat ini halaman ini menjadi salah satu yang paling banyak dibicarakan dengan kami, dan seringkali di kolom komentar terdapat keluhan tidak bisa digunakan untuk membuat game yang bisa dimainkan secara online. Hari ini kita akan kembali ke topik pengembangan game lagi dan mempertimbangkan program serupa yang masih dapat membuat game flash - stensil!

Fitur Program

Dengan bantuan Stencyl, Anda dapat membuat game 2D dari genre apa pun, tetapi yang terpenting, mesin program "dipertajam" untuk berbagai penembak rpg. Secara struktural, program ini adalah seperangkat alat yang memungkinkan Anda, jika diinginkan, membuat game dari awal tanpa menggunakan aplikasi pihak ketiga.

Kami menutup jendela pop-up dengan informasi tentang versi baru program dengan tombol "Tutup" atau "Jangan tampilkan ini lagi" (jika kami tidak ingin melihat jendela ini setiap kali program dimulai) dan sebagai gantinya kita mendapatkan jendela berikut:

Di sini kami ditawari untuk membuat akun kami sendiri di komunitas pengembang Stencyl. Pada prinsipnya, Anda tidak perlu membuat akun (untuk ini, klik tombol "Ingatkan Saya Nanti" di bawah), tetapi pendaftaran memberi Anda kesempatan untuk mengunduh templat dan tindakan tambahan dari penyimpanan online bernama StencylForge, sehingga tidak tidak sakit :). Untuk membuat akun, klik tombol "Buat Akun" dan buka formulir pendaftaran:

Di sini kami mengisi kolom standar dengan nama pengguna, kata sandi (dua kali) dan alamat email Anda, lalu klik tombol "Daftar". Jika semuanya berjalan dengan baik, maka antarmuka jendela awal program akhirnya akan terbuka di depan Anda.

Mulai antarmuka jendela

Secara eksternal, ruang kerja jendela mulai Stencyl dibagi menjadi beberapa zona:

Di bagian atas secara tradisional adalah bilah menu dan bilah alat. Semua pengaturan utama dan tombol kontrol dikumpulkan di sini. Di bawah bilah alat, kami memiliki garis abu-abu kecil yang sempit. Ini berisi tab (ya - antarmuka Stencyl adalah multi-tab, yang sangat nyaman) dan tombol untuk beralih di antara mereka dengan cepat (di sebelah kanan).

Ruang kerja utama dibagi menjadi dua bagian: di sebelah kiri ada bilah navigasi untuk bagian program, dan di sebelah kanan - konten utama (di layar utama - daftar permainan), yang berubah tergantung pada yang sedang aktif modus operasi. Di bagian bawah ada beberapa tombol tambahan yang memungkinkan Anda untuk:

Buka folder tempat Stencyl menyimpan semua sumber daya dari game yang dibuat dan game itu sendiri (tombol "Lihat Folder Game" di sudut kiri bawah).
Luncurkan kursus pelatihan tentang bekerja dengan program ("Mulai Kursus Singkat" pada panel hijau di sudut kanan bawah). Omong-omong, ada juga tombol di sebelahnya untuk menyembunyikan tawaran menjalani pelatihan (“Jangan tampilkan ini lagi”).
Buka game yang saat ini dipilih dari daftar, yang mirip dengan mengklik dua kali ikon game ("Buka Game" di sudut kanan bawah).

Untuk menjelajahi kemungkinan Stencyl sendiri, Anda dapat mengambil kursus pelatihan (dan akan diinginkan untuk lulus), serta membuka salah satu game siap pakai yang paling sesuai dengan ide Anda dan melihat bagaimana semuanya bekerja di sana. Dan saya mengusulkan untuk mempelajari pekerjaan program pada contoh membuat game tentang petualangan simbol situs kami dan penghuni virtualnya - Frida Best!

Cara mulai membuat game di Stencyl

Jika Anda, sebelum membuat game, melihat contoh standar game di Stencyl, Anda mungkin telah memperhatikan bahwa pada dasarnya semuanya cukup sederhana, satu layar dan memiliki tampilan samping. Kami akan membuat penembak top-down dinamis dengan penembakan mouse! Semuanya seperti di game "besar" :).

Untuk proyek Anda, Anda dapat mengubah logika salah satu templat yang sudah jadi, tetapi kami tidak mencari cara sederhana dan karenanya - hanya "dari awal", hanya "hardcore" :). Untuk melakukan ini, klik pada bilah alat ruang kerja (atau di menu "File" - "Buat Baru") tombol "Buat Game Baru" dan masuk ke jendela berikut:

Di sini kita dapat memilih template game berdasarkan genre dengan serangkaian fungsi dan tindakan yang telah dipilih sebelumnya untuk proyek Anda. Namun, kami akan membuat game dari awal, jadi pilih item "Game Kosong" dan klik tombol "Berikutnya".

Pada langkah selanjutnya, kita perlu membuat beberapa pengaturan dasar:

Di bidang "Nama", kita perlu menentukan nama permainan kita, dan di bagian "Ukuran Layar", atur dimensi lapangan bermain dengan menentukan lebar (Lebar) dan tinggi (Tinggi) dalam piksel. Setelah itu, klik tombol "Buat" dan langsung menuju ke antarmuka editor game:

Secara default, tab "Dasbor" terbuka di depan kami, di mana seluruh pohon sumber daya permainan dikumpulkan di sebelah kiri, dan di sebelah kanan adalah ruang kerja itu sendiri. Di sini, saya pikir, akan tepat untuk membuat beberapa klarifikasi tentang struktur "pohon".

Ini terdiri dari empat cabang, dua yang pertama berisi set sumber daya standar (SUMBER DAYA) dan logika (LOGIKA), dan dua yang terakhir secara opsional dapat menyimpan paket sumber daya yang dimuat secara manual (PAKET SUMBER DAYA) dan ekstensi (Ekstensi).

Cabang master di sini adalah cabang RESOURCES. Ini berisi bagian-bagian berikut:

Jenis Aktor - sprite dari semua karakter game disimpan di sini dan tindakan animasi dan interaksi mereka satu sama lain dikonfigurasi.
Latar Belakang - di bagian ini kita dapat menyimpan semua latar belakang yang diperlukan untuk permainan. Selain itu, latar belakang dapat menjadi latar belakang (latar belakang) dan latar depan (latar depan), yang memungkinkan Anda untuk menempatkan latar belakang di atas satu sama lain, mencapai, misalnya, dengan demikian efek paralaks.
Font - bagian di mana kita dapat mengunggah berbagai font indah untuk membuat tulisan asli. Namun, perlu dipertimbangkan bahwa Stencyl hanya dapat bekerja dengan set karakter bahasa Inggris, jadi untuk menambahkan huruf Rusia ke file font, kita perlu mengganti beberapa karakter Latin dengannya.
Adegan adalah tempat untuk membuat dan mengedit level game. Di sinilah kita dapat mengatur tampilan panggung apa pun dan menempatkan semua karakter, bonus, dan elemen permainan lainnya.
Suara - masing-masing gudang semua suara yang digunakan dalam game.
Tileset - cabang khusus yang menyimpan ubin - sprite khusus yang bisa kita gunakan untuk membangun level game.

Membuat dan mengonfigurasi ubin

Tidak ada pendapat yang jelas tentang urutan penerapan permainan ini atau itu. Pada titik ini, nyaman bagi siapa saja, tetapi saya akan merekomendasikan algoritme berikut:

Buat adegan pertama - buat karakter - buat musuh - buat power-up - buat sisa tahapan

Untuk membuat adegan di Stencyl, Anda perlu menggambar penampilannya di cabang Scenes. Namun, untuk menggambar, pertama-tama kita harus memiliki balok yang bisa kita "gambar". Blok-blok ini dalam program disebut ubin (tiles) dan disimpan di bagian Tileset:

Sebuah ubin adalah matriks sederhana dari gambar yang Anda muat ke dalamnya. Anda dapat mengunggah matriks yang sudah jadi (gambar yang terdiri dari beberapa gambar berukuran sama dalam satu atau beberapa baris) atau melengkapi set yang ada dengan gambar terpisah.

Pertama kita perlu membuat satu set ubin baru (tombol "Buat Baru" di bagian Tileset), setelah itu kita akan melihat jendela, seperti pada gambar di atas. Untuk mengunggah gambar, kita perlu mengklik tombol "Pilih Gambar" dan pilih file yang sudah disiapkan sebelumnya dengan gambar yang diinginkan di jendela Explorer yang terbuka.

Saat gambar dimuat, kami akan mengatur parameter tata letak dan dimensi lebar dan tinggi, setelah itu (jika semuanya ditampilkan dengan benar) Anda dapat menambahkan gambar ke set dengan mengklik tombol "Tambah".

Untuk setiap gambar (ubin) dalam matriks, Anda dapat mengonfigurasi parameter interaksi dengan karakter dan objek game. Untuk melakukan ini, pilih ubin yang diinginkan dan akses jendela berikut:

Bagian "Tabrakan Batas" akan terbuka di bagian atas panel kanan. Di sini kita dapat memilih bentuk arbitrer yang menunjukkan batas-batas interaksi objek kita dengan karakter game. Secara default, semua ubin memiliki parameter "Persegi" (persegi), yang membuat ubin sepenuhnya tidak dapat dilewati dan kokoh. Jika Anda perlu membuat ubin "transparan" untuk karakter (misalnya, lantai), maka cukup untuk mengatur parameter "Tanpa Tabrakan".

Selain batas, animasi dapat diatur untuk setiap ubin dengan menambahkan bingkai menggunakan tombol "Sisipkan Bingkai" di panel bawah. Secara default, kecepatan animasi adalah 100 milidetik, tetapi angka ini dapat diubah secara sewenang-wenang untuk setiap frame.

Untuk melakukan ini, cukup klik dua kali pada bingkai yang diinginkan dengan tombol kiri mouse dan di jendela yang terbuka, ubah indikator penundaan sesuai kebutuhan. Dimungkinkan juga untuk memperbaiki bingkai yang dipilih menggunakan editor grafis bawaan, yang dibuka dengan tombol "Edit Bingkai".

Render pemandangan di Stencyl

Setelah set ubin terbentuk, logis untuk melanjutkan ke langkah berikutnya - pembentukan ruang permainan yang sudah jadi dari gambar yang ditambahkan. Anda dapat melakukan ini dengan mengklik tombol "Buat Baru" di bagian Adegan. Setelah menekan tombol, kita akan masuk ke jendela pengaturan adegan:

Di sini kita pasti perlu menetapkan nama unik untuk adegan kita di bidang "Nama", menentukan dimensi (lebar dan tinggi dalam ubin (secara default) atau piksel), dan secara opsional (yaitu, atas permintaan kita sendiri) mengatur latar belakang warna untuk adegan baru. Klik "Ok" dan masuk ke editor level:

Sepertinya editor grafis. Di tengah adalah ruang kerja, tempat kami menggambar level kami. Di sebelah kiri dan atas adalah toolbar kecil. Di sebelah kanan adalah panel palet, pemilihan set ubin dan manajemen lapisan. Sekarang bagaimana semuanya bekerja ...

Pertama-tama, kita menggambar latar belakang ruang kerja kita. Untuk melakukan ini, di panel kanan, aktifkan tab "Palet" dan di atasnya tab "Ubin" dan pilih ubin yang diinginkan dari daftar yang disajikan. Kemudian, pada panel kiri, pilih Pencil tool dan gambar area yang diinginkan dengan ubin yang dipilih.

Karena dukungan lapisan, ubin dapat saling tumpang tindih, jadi paling logis untuk mengatur level, dengan mempertimbangkan fakta bahwa, misalnya, pada lapisan "Lapisan 0" kita akan memiliki substrat latar belakang, di atas, a lapisan dengan rintangan dan karakter, dan bahkan lebih tinggi - lapisan dengan berbagai penghitung dan indikator permainan.

Lapisan dapat dikontrol menggunakan tombol di bawah panel "Lapisan". Ada tombol untuk membuat, menghapus, memindahkan, dan mengganti nama layer. Selain itu, setiap lapisan dapat disembunyikan atau ditampilkan dengan mengklik tombol berbentuk mata di sebelah kanan nama lapisan.

Penciptaan Karakter

Setelah adegan pertama kita dibuat, saatnya untuk mengisinya dengan berbagai karakter yang dapat dimainkan. Di Stencyl mereka disebut "aktor" dan disimpan masing-masing di bagian "Jenis Aktor". Aktor dibuat sesuai dengan prinsip yang sama, jadi kami akan mempertimbangkan proses ini menggunakan contoh pembuatan karakter utama game kami - Frida.

Untuk menambahkan aktor baru, cukup buka bagian Jenis Aktor yang disebutkan di atas dan klik tombol "Buat Baru" di sana. Kami sudah terbiasa ditanya lagi tentang bagaimana kami ingin memberi nama objek game baru, setelah itu jendela pengeditan animasi karakter akan muncul di depan kami:

Di sini, di sisi kiri, daftar animasi tambahan dari aktor ditampilkan (defaultnya adalah bingkai kosong "Animasi 0"), dan di sisi kanan ada alat untuk menambahkan dan mengonfigurasi animasi yang sama ini.

Pilih animasi kosong (atau tambahkan yang baru dengan mengklik tombol dengan tanda tambah di bagian bawah) dan klik bidang "Klik di sini untuk menambahkan bingkai" di sisi kanan. Setelah itu, jendela untuk menambahkan gambar akan terbuka, yang mirip dengan jendela serupa untuk menambahkan ubin baru ke set. Klik tombol "Pilih gambar", pilih gambar yang diinginkan dan sesuaikan tata letak dan dimensinya (jika perlu).

Ketika semuanya sudah diatur, klik tombol "Tambah" di bagian kanan bawah jendela tambah - animasi akan ditampilkan sebagai pratinjau di bagian kiri:

Sekarang kita hanya perlu menyesuaikan frame rate (klik dua kali pada salah satu frame) dan beberapa parameter tambahan, seperti nama (Nama) animasi (sangat berguna untuk proyek yang kompleks), pemutaran perulangan (Looping) (aktif secara default ), sinkronisasi dan titik dasar (Origin Point) asal sprite (secara default - tengah).

Pada toolbar bawah di bagian kanan kita akan menemukan serangkaian tombol. Mereka mengizinkan:

tambahkan bingkai baru ke animasi (Impor Bingkai);
edit bingkai yang dipilih dalam editor eksternal (Edit Bingkai (Eksternal));
buat bingkai di editor eksternal (Buat Bingkai (Eksternal));
edit bingkai di editor bawaan (Edit Bingkai);
hapus bingkai (Hapus Bingkai);
bingkai fotokopi (Copy Frame);
menyisipkan bingkai (Tempel Bingkai);
memindahkan satu frame ke belakang (Move Back) atau maju (Move Forward).

Mengatur parameter dan perilaku karakter

Di atas, kami membuat animasi lari Frida, hanya menggunakan dua bingkai untuk ini, yang sebenarnya adalah gambar yang sama yang dipantulkan secara horizontal. Sekarang kita perlu memastikan bahwa kita dapat menggunakan mouse dan keyboard untuk mengontrol pergerakan pahlawan wanita kita, dan juga bahwa dia cukup bereaksi terhadap benturan dengan rintangan yang telah kita gambar di atas panggung.

Pertama-tama, mari kita atur tabrakan. Untuk melakukan ini, lihat baris di bawah daftar tab yang terbuka dan temukan tombol "Tabrakan" di sana.

Secara default, area tumbukan adalah persegi yang dibatasi di sekitar seluruh sprite animasi. Artinya, peristiwa tumbukan akan terjadi di seluruh area objek. Namun, dalam praktiknya, gambar kami paling sering mengandung elemen tambahan (untuk Frida, misalnya, blaster), yang, menurut ide, tidak boleh berinteraksi dengan apa pun. Dengan bantuan bagian inilah kita dapat mengatur semua area tumbukan.

Untuk memulainya, kita akan mengurangi area di sekitar Frida menjadi hanya seukuran tubuhnya. Di sini kita perlu memperhitungkan bahwa kita tidak dapat memindahkan area dengan mouse, dan empat parameter numerik di bagian "Bentuk Saat Ini" digunakan untuk pengaturan. Pertama, kita atur offset area secara horizontal (dari tepi kiri) dan vertikal (dari atas), lalu kita tentukan lebar dan tinggi baru area tumbukan.

Di bawah ini ada beberapa parameter lagi yang dikelompokkan di bawah bagian "Properti Fisik". Di sini kita dihadapkan dengan kotak centang "Apakah Sensor?" dan konsep kelompok.

Jika Anda mengaktifkan bendera "sensor", maka area yang dipilih tidak akan lagi menjadi objek fisik: karakter atau bagiannya akan menjadi, seolah-olah, "transparan" untuk berbagai rintangan, tetapi pada saat yang sama akan mempertahankan kemampuan untuk meluncurkan tindakan apa pun dalam kondisi tertentu.

Contoh dari kehidupan nyata dapat berupa pensinyalan modern menggunakan laser: kita tidak melihat laser itu sendiri, tetapi jika kita menyentuhnya, proses pemberitahuan dimulai bahwa kita memanjat tempat yang salah :).

Sekarang, untuk apa grupnya ... Misalkan karakter kita tidak memiliki blaster di tangannya, tetapi pedang yang dengannya dia (lebih tepatnya, dia :)) memotong musuh menjadi kubis (omong-omong, Frida memiliki laser pisau dalam kode sumber;)).

Tugasnya adalah ketika Anda menyentuh musuh dengan pedang, musuh mati, tetapi jika kita meleset, dan musuh mengenai Frida, maka sebagian energinya diambil. Dan masalah utama di sini adalah bahwa animasi dampak yang kita miliki, pada kenyataannya, adalah gambar di mana Frida dan pedang hadir secara bersamaan ...

Jika kita mengikat aksi pedang ke gambar, maka siapa pun yang menyentuh pahlawan wanita kita saat memainkan animasi akan mati karena pukulan. Dan hanya untuk membagi gambar menjadi beberapa objek dengan kemampuan dan parameter yang berbeda, mekanisme grup diciptakan.

Secara default, kami hanya memiliki satu area, yang sesuai dengan karakter itu sendiri ("Sama seperti Tipe Aktor"). Namun, dengan menggunakan alat menggambar di atas area kerja utama, kita dapat membuat objek virtual baru dan mengatur grup untuknya menggunakan tombol "Edit Grup".

Dengan tabrakan, mungkin, itu saja, dan sekarang saya mengusulkan untuk berurusan dengan yang paling mendasar - pengaturan perilaku aktor di atas panggung. Untuk melakukan ini, kita perlu pergi ke bagian "Perilaku":

Secara default, tidak ada tindakan di sini di awal, tetapi kita dapat menambahkannya dengan mengklik tombol "Tambah Perilaku" di sudut kiri bawah. Anda akan melihat daftar fungsi siap pakai untuk mengontrol karakter atau berinteraksi dengan aktor lain di atas panggung.

Misalnya, saya memilih perilaku "Gerakan 8 Arah", yang melibatkan gerakan aktor dalam lingkaran ke segala arah. Sekarang kita memilih tindakan yang ditambahkan dalam daftar di sebelah kiri dan di sebelah kanan kita dapat mengonfigurasi parameternya.

Menambahkan aktor ke panggung dan menguji level

Jika Anda mengikuti instruksi, maka Anda seharusnya sudah memiliki sumber daya minimum yang diperlukan untuk gim tersebut. Masih belajar bagaimana menambahkan aktor ke panggung dan menguji kinerja ruang permainan.

Kami kembali ke editor adegan yang dibuat sebelumnya dan mengaktifkan kembali palet (Palette), tetapi sekarang alih-alih ubin, aktifkan tab "Aktor" (Aktor). Kita akan melihat daftar karakter yang dibuat sebelumnya yang dapat kita tambahkan ke adegan menggunakan alat Pencil:

Kami memiliki satu karakter utama, jadi hanya satu klik dengan pensil sudah cukup untuk menambahkannya ke adegan. Dan sekarang saat kebenaran telah tiba - ujian pertama! Untuk memulai pra-kompilasi proyek, cukup klik tombol "Test Scene" di sudut kanan atas tab dengan adegan kami. Setelah beberapa waktu (kompilasi pertama selalu memakan waktu lebih lama), kami dapat mengagumi pekerjaan kami di flash player:

Selain pemain itu sendiri dengan permainan di samping, kami memiliki jendela yang menunjukkan log permainan. Dengan bantuan mereka, kami dapat dengan cepat menemukan masalah dalam pekerjaan dan mencoba memperbaikinya.

Seperti yang Anda lihat, kita sudah dapat memindahkan Frida ke arah yang berbeda, tetapi panggung itu sendiri tetap tidak bergerak dan segera setelah pahlawan wanita kita melampaui tepi bagian panggung yang terlihat, dia menghilang ... Gangguan :). Anda dapat memecahkan masalah dengan menambahkan perilaku "Ikuti Kamera" ke Frida atau dengan mengatur parameter yang diinginkan menggunakan peristiwa.

Juga, akan berguna untuk mengganti kursor standar dengan sesuatu yang lebih cocok, misalnya, crosshair. Kita dapat menerapkan ini dengan menambahkan aktor baru sebagai crosshair, menghapus area tumbukan dan melampirkannya ke adegan menggunakan perilaku "Kustor Mouse Kustom" standar:

Sistem acara di Stencyl

Game sederhana di Stencyl dapat dibuat hanya dengan menggunakan perilaku standar (Perilaku), namun, jika kita membutuhkan sesuatu yang tidak standar, maka kita sudah harus memikirkan untuk menggunakan acara yang dikonfigurasi untuk aktor dan adegan di bagian "Acara":

Faktanya, perilaku (Behaviors) juga dibangun berdasarkan peristiwa, tetapi mereka juga memiliki antarmuka visual, yang membuat pengeditan menjadi lebih mudah. Di sini kita berhadapan langsung dengan blok fungsional yang melakukan tindakan tertentu.

Jendela acara dibagi menjadi tiga bagian:

Bagian kiri berisi daftar acara dan tombol untuk mengelola (membuat/menghapus/memindahkannya). Untuk menambahkan acara, kita perlu mengklik tombol "Tambah Acara", lalu pilih grup yang diinginkan di daftar drop-down dan tentukan fungsi spesifik yang kita butuhkan. Di sebelah kanan acara yang dibuat, ada kotak centang yang memungkinkan kita untuk menonaktifkannya jika perlu.
Di bagian kanan, kami memiliki daftar semua tindakan yang tersedia, dikelompokkan menjadi 10 bagian, yang masing-masing diaktifkan oleh tombol yang sesuai. Untuk kenyamanan lebih, tindakan di setiap bagian diurutkan ke dalam tab tematik dan memiliki warna uniknya sendiri. Di bagian bawah ada tiga tab lagi. Secara default, tab "Palette" (palet) aktif, di mana daftar tindakan berada. Tab kedua - "Atribut" - berfungsi untuk menampilkan variabel lokal (lebih lanjut tentangnya di bawah), dan yang ketiga - "Favorit" - berfungsi untuk menampilkan tindakan favorit Anda.
Bagian tengah adalah ruang kerja. Di sinilah kami membentuk contoh akhir dari perilaku karakter menggunakan berbagai kombinasi blok tindakan dan peristiwa, yang menurutnya tindakan ini terjadi. Menggabungkan terjadi hanya dengan menyeret blok ke ruang kerja dan kemudian mengedit parameter yang ditentukan di dalamnya. Harus diingat bahwa fungsi hanya terdiri dari blok-blok yang digabungkan satu sama lain dan termasuk dalam blok acara utama. Jadi, untuk menghapus sementara kombinasi tertentu yang saat ini tidak perlu (tetapi berguna), kita hanya perlu memindahkannya dari struktur umum ke ruang kosong. Jika tindakan tersebut ternyata sama sekali tidak perlu seiring waktu, maka tindakan tersebut dapat dihapus sepenuhnya dengan memindahkannya ke tempat sampah, yang terletak di bagian kanan atas ruang kerja.

Sebenarnya, kami telah menjelaskan algoritme untuk membuat acara, tetapi, sayangnya, saya tidak dapat memberikan rekomendasi universal - untuk setiap permainan, acara akan berbeda dan mungkin ada cukup banyak ... Sebagai contoh, Anda dapat lihat kode sumber permainan tentang Frida, yang akan Anda temukan di arsip dengan program, tetapi ini hanya pedoman, karena mengerjakan acara adalah kreativitas pribadi Anda :).

Mengatur fisika dan properti

Anda dan saya telah membahas banyak hal, tetapi belum menyentuh beberapa topik tambahan yang bisa menjadi sangat penting saat membuat game - saya berbicara tentang mengatur semua jenis properti aktor dan adegan kita. Parameter ini disimpan di dua tab terakhir. Dan yang pertama adalah "Fisika":

Untuk adegan dan aktor, tab pengaturan fisika terlihat berbeda. Hanya ada dua parameter pada tab pengaturan fisika pemandangan - pengaturan gravitasi horizontal dan vertikal. Tampilan bagian pengaturan parameter fisik aktor ditunjukkan pada tangkapan layar di atas dan terdiri dari lima tab dengan opsi berbeda:

tab umum. Di sini kita memiliki tiga parameter: jenis aktor (stasioner, platform (bisa bergerak sesuai aturan yang diberikan, tetapi aktor lain tidak bisa memindahkannya) dan bergerak), rotasi aktor (bisa berputar atau tidak), dan pengaruh gravitasi.
Tab "Berat" ("Berat"). Pada tab ini, Anda dapat mengatur massa benda virtual dan kelembamannya.
Tab "Material" memungkinkan Anda untuk mengatur karakteristik aktor yang akan mensimulasikan perilaku objek nyata yang terbuat dari bahan tertentu. Kami memiliki opsi untuk memilih salah satu preset dari daftar dropdown "Preset Materials", atau secara manual mengatur karakteristik gesekan dan elastisitas aktor kami.
Tab Damping memberi kita kemampuan untuk menyempurnakan parameter interaksi aktor dengan lingkungan dengan memasukkan nilai-nilai seperti resistensi linier (misalnya, ke udara) dan sudut (selama rotasi).
Tab "Lanjutan" memberi kita akses ke berbagai pengaturan tambahan yang tidak disertakan di bagian sebelumnya. Di sini Anda dapat mengaktifkan model fisika yang disederhanakan (untuk mengoptimalkan permainan), deteksi otomatis area tabrakan, peristiwa tabrakan ulang, dan kemampuan untuk menerapkan jeda pada aktor.

Kami menemukan fisika, dan sekarang mari kita lihat properti yang dipanggil dengan menekan tombol "Properti":

Seperti pada kasus sebelumnya, properti akan berbeda untuk adegan dan aktor. Di properti pemandangan, kita dapat menentukan namanya ("Nama"), dimensi ("Ukuran") dan warna latar belakang ("Warna Latar").

Di properti aktor, selain nama, Anda dapat menentukan deskripsi (bidang "Deskripsi") objek, grup tempat aktor tersebut berada (bagian "Pilih Grup") dan lapisan animasi untuk seluler perangkat (Anda tidak dapat mengubah apa pun di sini, karena versi gratis dari program ini tidak memungkinkan Anda mengekspor game ke format untuk ponsel.

Tapi ini tidak semua pengaturan yang tersedia untuk kita di Stencyl. Pengaturan permainan umum tersedia untuk kami dengan menekan tombol "Pengaturan" pada bilah alat utama:

Di jendela pengaturan, di sebelah kiri adalah daftar grup parameter, dan di sebelah kanan adalah area utama (terkadang dibagi menjadi beberapa tab) yang berisi semua jenis opsi. Di sini kami tertarik pada bagian berikut:

"Pengaturan" ("Pengaturan"). Kelompok pengaturan pertama, yang memungkinkan kita untuk mempersonalisasi permainan kita sedikit. Grup ini berisi tiga tab. Pada yang pertama ("Utama"), kami dapat memberi nama baru, deskripsi singkat, serta gambar pratinjau dan ikon untuk game tersebut. Pada tab "Tampilan", ukuran akhir ruang permainan dikonfigurasi, dan pada yang terakhir ("Lanjutan"), dimungkinkan untuk mengaktifkan fisika yang disederhanakan dan mengatur parameter anti-aliasing.
"Pemuat" ("Pemuat"). Di grup ini, kita dapat sebagian (dengan mempertimbangkan beberapa batasan versi gratis) menyesuaikan tampilan preloader (loader), yang akan ditampilkan sebelum game dimuat penuh. Sudah ada empat tab. Pada yang pertama ("Umum" - umum), Anda dapat menentukan tautan ke situs Anda, mengaktifkan perlindungan salinan game pada sumber daya lain (kami mencantumkan daftar situs yang diizinkan di baris kedua yang dipisahkan oleh koma) dan salah satu pemuat kulit. Pada tab Appearence, kita dapat mengatur warna layar bootloader dan gambar latar belakang. Menggunakan tab "Bar Style", Anda dapat menentukan ukuran strip loader, dan "Bar Color" memungkinkan Anda untuk mengatur, masing-masing, warnanya.
"Atribut" ("Atribut"). Kelompok pengaturan ini adalah salah satu yang paling dasar! Di sini Anda dapat mengontrol variabel global yang digunakan dalam game (lebih lanjut tentang variabel di bagian selanjutnya di bawah).
"Kontrol" ("Manajemen"). Sesuai dengan namanya, dalam grup ini kita dapat mengkonfigurasi ulang dan menambahkan tombol keyboard yang akan digunakan untuk melakukan aksi game tertentu.
"Grup" ("Grup"). Kami telah mempertimbangkan mekanisme kelompok sedikit lebih tinggi. Di sini kita memiliki kesempatan untuk melihat semua grup yang dibuat dan mengeditnya.

Sebenarnya, hanya itu pengaturan yang kita perlukan untuk membuat game flash di Stencyl versi gratis. Tetapi karena bagian ini adalah tentang pengaturan, adalah dosa untuk tidak menyebutkan parameter program itu sendiri. Anda dapat mengaksesnya dengan mengaktifkan item "Preferensi" di menu "File":

Program ini menyediakan dukungan untuk antarmuka multibahasa, namun, saat ini hanya ada lokalisasi bahasa Inggris, jadi kami langsung membuka tab kedua - "Ruang kerja". Faktanya adalah bahwa di Stencyl versi ketiga, sebuah fungsi muncul untuk secara otomatis menghasilkan gambar adaptif dari sprite yang dimuat.

Dan secara default, sprite digandakan, yang menyebabkan penurunan kualitas grafis. Untuk mencegah hal ini terjadi, saya menyarankan Anda untuk menonaktifkan pengubahan ukuran gambar dengan memilih Standar (1x) di bidang Skala.

Saya juga menyarankan Anda untuk melihat tab ketiga - "Editor". Di sini Anda dapat mengaitkan tindakan untuk memproses grafik, suara, dan teks dengan editor eksternal yang lebih canggih (bukan yang ada di dalam Stencyl).

Sedikit tentang variabel

Kami telah mempertimbangkan hampir semua nuansa bekerja di Stencyl, tetapi kami belum menyentuh salah satu fitur paling kuat - bekerja dengan variabel.

Variabel dalam bahasa pemrograman apa pun memungkinkan Anda untuk beroperasi pada berbagai peristiwa, mengekspresikannya melalui angka tertentu (variabel numerik), kondisi (variabel boolean), teks (variabel string), dll. Fitur utama dari variabel adalah kemampuan untuk mengganti nilai apa pun dalam batas yang telah ditentukan. Contoh sederhana dari variabel: petugas di kelas. Hari ini mungkin Ivanov, besok Petrov, dan lusa Sidorov :).

Dalam kasus kami, variabel "bertugas" dapat mengambil salah satu dari tiga nilai, yang akan secara otomatis diganti tergantung pada kondisi yang ditentukan (misalnya, urutan nama keluarga dalam daftar).

Di Stencyl, variabel bisa lokal atau global. Kita dapat mendeklarasikan variabel lokal dalam kerangka beberapa peristiwa atau perilaku, dan variabel tersebut hanya akan berfungsi untuk tindakan yang ditentukan. Anda dapat membuat variabel lokal di editor acara dengan memanggil bagian "Atribut":

Di sini kami memiliki beberapa tab:

Tab "Getter" memungkinkan Anda untuk mengatur variabel yang akan menerima nilai dari setiap perhitungan atau instruksi langsung.
Tab "Pengatur" memungkinkan untuk menetapkan nilai apa pun untuk variabel yang dibuat sebelumnya.
Tab "Atribut Game" menyimpan blok variabel global dan, jika diinginkan, memungkinkan Anda untuk menambahkan yang baru (walaupun kami akan mempertimbangkan cara melakukannya dengan lebih baik di bawah).
Tab Daftar memberi kita kemampuan untuk membuat larik data.
Tab Fungsi digunakan untuk mengatur fungsi yang dibuat.

Algoritme untuk membuat variabel lokal sederhana: pertama, buat blok baru di tab "Getter", lalu temukan variabel yang baru dibuat di tab "Setter" dan tambahkan blok ke ruang kerja, menyamakannya dengan beberapa parameter permainan. Itu saja - variabel dideklarasikan dan telah menerima serangkaian nilai yang valid.

Variabel global (Atribut Game) di Stencyl segera disetel untuk keseluruhan game dan dapat dipanggil dalam acara atau perilaku apa pun. Seperti disebutkan di atas, Anda dapat membuatnya di bagian "Atribut" pada tab "Atribut Game":

Namun, jauh lebih nyaman untuk melihat dan mengelola semua variabel yang dibuat menggunakan bagian "Atribut" di pengaturan (tombol "Pengaturan" pada bilah alat atau "Tampilkan Atribut Game" pada tab "Atribut Game" di editor acara ):

Di sini kita memiliki seluruh daftar variabel global dan dimungkinkan untuk membuat yang baru dengan menekan tombol "Buat Baru". Untuk variabel baru, kita dapat segera mengatur jenis (numerik, teks, boolean atau array) dan nilai awal tanpa meninggalkan jendela, yang menurut saya sangat nyaman.

Menggunakan variabel global, sangat mudah untuk menerapkan berbagai penghitung, karena data di dalamnya disimpan ketika pemain pindah ke level baru dan disimpan dalam memori selama permainan itu sendiri dihidupkan. Juga, saya sarankan menggunakan variabel global untuk melacak animasi yang sedang diputar.

Setelah memberi aktor sprite tertentu dalam acara, kita dapat menetapkan nilai spesifik untuk sprite ini dalam variabel di bawah ini (misalnya, nomor seri atau nama animasi). Jadi, dengan mengikat suatu tindakan ke variabel, kita dapat memanggilnya kapan saja dengan menyetel variabel ini ke nilai yang diinginkan.

Menerbitkan, mengimpor, dan mengekspor game

Akhirnya, kami, meskipun sebentar, berkenalan dengan prinsip-prinsip dasar bekerja dengan Stencyl. Misalkan kita membuat game, mengujinya, dan semuanya ternyata berfungsi. Sekarang terserah Anda untuk mengubah game dari proyek menjadi file SWF nyata yang dapat diposting di Internet. Untuk melakukan ini, kita hanya perlu membuka menu "Terbitkan" dan klik item "Flash" di daftar "Web".

Kompilasi file game akan dimulai, setelah itu akan muncul permintaan di mana dan dengan nama apa untuk menyimpan file flash yang dihasilkan. Kami menyimpan dan hanya itu - permainan sudah siap :).

Proses sebaliknya adalah mengimpor game. Berkat fungsi impor, Anda dapat membuka proyek game pengguna lain, misalnya, untuk melihat bagaimana mereka menerapkan fungsi ini atau itu;). Anda juga dapat mengimpor game dari menu File. Setelah impor berhasil, game akan muncul di layar utama dalam daftar proyek. Namun, di sini ada baiknya membuat reservasi kecil.

Masalahnya adalah bahwa Stencyl 3.0 baru hanya kompatibel sebagian dengan proyek yang dibuat di versi sebelumnya, sehingga fungsionalitas proyek game yang Anda impor mungkin tidak lengkap atau, dalam kasus terburuk, game tidak akan dimulai sama sekali, memberikan kesalahan . Anda akan memiliki beberapa opsi - baik mencari dan memperbaiki kesalahan, atau menerimanya dan membiarkan semuanya apa adanya :).

Keuntungan dan kerugian dari program

kemudahan membuat game dengan sedikit atau tanpa keterampilan pemrograman;
kemampuan untuk membuat game dari hampir semua genre;
koleksi besar perilaku siap pakai dan sumber daya game;
kemampuan untuk bertukar proyek game;
tidak ada batasan saat membuat game flash.

intensitas sumber daya yang agak tinggi dari program itu sendiri dan game yang dibuat;
sejumlah objek di atas panggung - semakin banyak, semakin lambat permainan berjalan (hingga gagal untuk memulai);
tidak ada dukungan untuk font Cyrillic (Anda perlu mengedit gambar vektor alfabet Latin, menggantinya dengan huruf yang diperlukan);
kompatibilitas yang tidak lengkap dari versi baru program dengan proyek game yang dibuat di versi sebelumnya.

kesimpulan

Dari semua program untuk membuat game flash yang ada saat ini, Stencyl adalah kompromi yang paling masuk akal antara kemudahan pengoperasian dan luasnya kemungkinan. Kabar baiknya adalah bahwa fungsionalitas konstruktor dalam edisi gratis praktis tidak terbatas, yang memungkinkan Anda untuk mengimplementasikan ide apa pun hampir sepenuhnya.

Namun, jangan lupakan "hampir" ... Faktanya adalah bahwa Stencyl sendiri bekerja berdasarkan mesin JAVA, yang, seperti yang Anda tahu, cukup menuntut sumber daya. Jika kita menambahkan beban ini juga beban yang dibuat game, ternyata untuk operasi normal kita membutuhkan komputer modern yang kuat.

Ini adalah yang pertama "hampir". Dan yang kedua adalah pembatasan implisit pada jumlah objek di atas panggung, yang telah saya sebutkan secara sepintas. Meskipun objek ini hanya ubin, tetapi jumlahnya banyak, permainan dapat memberikan kesalahan selama pengujian dan tidak dimulai sampai Anda mengurangi jumlahnya.

Singkatnya, kita dapat mengatakan bahwa Stencyl akan menjadi mesin yang ideal untuk membuat semua jenis game flash kasual dan penembak gulir samping. Selain itu, setelah berlatih membuat game flash, Anda dapat membeli salah satu jenis lisensi dan, dengan sedikit perubahan dalam mekanisme, mem-porting game Anda ke format yang didukung oleh Android dan iOS. Dan ini adalah cara nyata untuk mendapatkan uang dengan menempatkan game di Play Market atau App Store!

Akhirnya, tetap hanya berharap semoga sukses bagi semua orang yang memutuskan untuk serius terlibat dalam pengembangan game. Biarkan algoritme Anda bekerja untuk pertama kalinya, dan kompiler duduk dan tidak bersuara saat Anda memulai gim Anda :).

P.S. Diperbolehkan untuk menyalin dan mengutip artikel ini secara bebas, asalkan tautan aktif terbuka ke sumbernya ditunjukkan dan kepengarangan Ruslan Tertyshny dipertahankan.

* Program yang digunakan: Flash CS3, Photoshop CS3
* Kompleksitas: sedang
* Perkiraan waktu tunggu: 3 jam

Sebuah situs portofolio sangat penting bagi setiap seniman kontemporer, fotografer, desainer, dan bahkan musisi. Dia menunjukkan pendekatan yang serius untuk bisnis dan profesionalisme. Hari ini kami akan menunjukkan bagaimana Anda dapat membuat portofolio foto asli dan bergaya berdasarkan sistem manajemen konten Flash modern Moto CMS.

Kami akan menggunakan versi mandiri Moto CMS, yang berisi berbagai utilitas, komponen, contoh bawaan, dan templat situs bersih dengan struktur berbeda. Dan kami menggunakan template yang paling sederhana, yaitu kami akan membuat situs web portofolio foto dari awal.

Dalam panduan ini, kami akan membahas topik-topik berikut:

* Pembuatan wadah.
* Buat slot (tombol Tutup, tombol sederhana).
* Buat modul (pemutar musik dan galeri gambar).
* Edit prapemuat situs
* Pembuatan halaman situs dan mengisinya dengan konten.

Kami juga akan berbicara tentang fitur dan fungsionalitas Panel Kontrol Moto CMS.

Kita akan butuh:
* Adobe Photoshop;
* Adobe Flash CS3;
* Moto CMS versi offline (percobaan gratis);
* Desain situs web c. format PSD.

Pratinjau hasil akhir

Langkah 1: Unduh File Moto CMS

Untuk mulai membangun situs portofolio fotografi kami, Anda perlu mengunduh Moto Flash CMS versi mandiri. Untuk mengulangi semua langkah dari panduan ini dan memahami kemampuan Moto CMS, versi uji coba sudah cukup.

Langkah 2: Ikhtisar singkat tentang file Moto CMS

Berikut adalah ikhtisar singkat tentang file dan folder Moto CMS:

* Komponen. Folder ini berisi komponen mxp yang dikelola oleh Adobe Extension Manager.
* panel kendali. Berisi semua file Panel Kontrol.
* dokumen. Folder ini berisi dokumentasi API.
* Contoh. Berisi 4 contoh situs flash yang sudah jadi, dari yang paling sederhana hingga yang paling kompleks, dengan modul galeri, modul berita, pemutar musik dan video, formulir kontak, dll.
* Template. 5 template yang bisa Anda gunakan untuk membuat situs berbasis Moto CMS. Setiap template memiliki kumpulan file yang diperlukan dan berbeda dalam strukturnya. Hari ini kita akan menggunakan salah satu template ini, khususnya template #1, sebagai dasar dari portofolio foto kita.
* file readme, yang menjelaskan cara memulai membuat situs dengan Moto CMS.

Langkah 3: Jalankan di Localhost

Langkah kami selanjutnya adalah meluncurkan template situs web yang akan kami gunakan untuk membangun situs web portofolio kami. Untuk melakukan ini, kita memerlukan server web lokal. Kami menggunakan WampServer. Hal ini memungkinkan Anda untuk membangun aplikasi web dengan Apache, PHP dan database MySQL.

Untuk meluncurkan templat situs No. 1, cukup unggah konten folder ke server lokal template_01 dari direktori /templates/, serta isi folder panel kendali.

Setelah itu, kita masuk ke Control Panel Moto CMS dengan memasukkan URL kita di address bar browser, tambahkan /admin di akhir

Catatan: Anda tidak akan dapat melihat situs itu sekarang karena belum berisi halaman apa pun. Halaman kesalahan 404 akan muncul.

Langkah 4: Mengedit config.xml

Yang perlu kita lakukan adalah mengubah lebar dan tinggi situs dan mengatur warna latar belakang.

Ukuran proyek kami adalah 980x800 piksel. Agar ukuran berubah di layar lebar, kita perlu mengatur "100%" untuk lebar dan tinggi situs. Dan agar dapat ditampilkan dengan benar di layar dengan resolusi kecil, kita harus menentukan lebar dan tinggi minimum situs (scroll bar akan muncul). Warna latar belakang hitam (#000000).

Langkah 5: Ubah style.css

Sekarang kita harus membuka file style.css dan mengatur warna latar belakang (hitam). Segala sesuatu yang lain dapat diedit menggunakan Panel Kontrol Moto CMS.

Langkah 6: Buat prapemuat

File sumber moto.xfl dan website.xfl masing-masing ada di folder flamoto dan flawebsite.
Prapemuat situs harus dibuat di moto.xfl. Preloader dapat berupa klip sederhana dengan 100 bingkai.

Di panel Tindakan klip ini, kami menulis: "Stop ();" untuk bingkai pertama. Kemudian kami menganimasikan sisa bingkai sesuai keinginan.

Kami juga menulis “Stop();” dalam aksi frame pertama dari timeline di fla.

Jangan lupa untuk menentukan dimensi situs (lebar dan tinggi minimum) di properti file moto.fla.

Langkah kita selanjutnya adalah membuat animasi menghilang preloader yang bagus. Pada frame terakhir, kita harus memulai website dengan mengaktifkan fungsi “showWebsite()”.

Buka file website.xfl dan perbarui preloader.

Langkah 7: Latar Belakang Situs

Buka Pustaka Media Moto CMS (Pengaturan > Pustaka Media) dan bersama dengan gambar lain yang diperlukan (untuk halaman utama, halaman utama, atau galeri), unggah gambar latar belakang menggunakan tombol “Tambah Media”.

Setelah itu, kembali ke Control Panel, buat halaman baru dan masukkan gambar latar belakang menggunakan tombol "Foto". Seret gambar dan pusatkan.

Manajer font memungkinkan pengguna untuk mengelola font situs, yang disimpan sebagai file SWF dan dapat diunduh.

Sebelum memuat font apa pun, kita harus terlebih dahulu mengonversinya ke format SWF. Untuk ini kita akan menggunakan Pembuat Font Online adalah aplikasi online praktis yang dikembangkan oleh tim MotoCMS yang memungkinkan Anda dengan mudah mengonversi file TTF dan OTF ke SWF. Yang harus kita lakukan adalah memilih file font yang diperlukan dengan ekstensi .TTF atau .OTF, tambahkan ke Online Font Creator, klik tombol "Buat Font" dan unduh file SWF yang sudah jadi, setelah itu kita dapat menggunakannya di portofolio kita situs web

Buat nama dan slogan situs web

Setelah font baru diunggah, Anda dapat membuat judul dan slogan situs menggunakan alat Teks dan menerapkan font yang diinginkan. Untuk membuat slogan, kami menggunakan font Tahoma, ukuran: 10, warna: #727272. Setelah itu, sesuaikan nama dan slogan situs sesuai dengan desain di .PSD.

Langkah 9: Menambahkan Gambar ke Halaman Beranda

Kami akan menempatkan gambar galeri di halaman utama situs. Untuk melakukan ini, pilih gambar dari Perpustakaan Media dengan mengklik "Foto" di bilah alat kiri. Jika perlu, sesuaikan lokasinya dengan desain halaman utama.

Langkah 10: Buat Menu Bawah

Menggunakan alat Bentuk, buat persegi panjang sempit abu-abu dan gunakan alat Teks untuk membuat tombol di atasnya. Sesuaikan semuanya sesuai dengan desain situs Anda.
Simpan semua perubahan dan lihat hasilnya dengan mengklik "Pratinjau".
Anda juga dapat menggunakan modul menu bawaan untuk membuat menu.

Langkah 11: Buat Wadah Konten

Catatan: Wadah adalah klip di website.fla di mana konten dapat ditambahkan secara dinamis. Mereka dapat terdiri dari 4 jenis: 1) wadah dengan objek yang terlihat di seluruh situs, 2) wadah dengan objek tata letak; 3) wadah dengan objek halaman; 4) wadah dengan objek popup.

Templat situs #1 yang kami pilih memiliki dua wadah secara default: wadah dengan objek yang terlihat di seluruh situs dan wadah dengan objek halaman. Jika kita membuka file website.fla kita akan melihatnya:

Wadah ini ditulis dalam file structure.xml. Pastikan lebarnya 980 dan tingginya 800px.

Wadah dengan objek yang terlihat di seluruh situs:

Wadah dengan objek halaman:

Untuk membuat elemen situs seperti latar belakang, judul situs, slogan, dan menu bawah dengan kotak abu-abu terlihat di semua halaman, kita perlu menempatkannya di wadah objek di seluruh situs. Kita dapat dengan mudah melakukan ini menggunakan Control Panel Moto CMS. Cukup klik pada elemen yang diinginkan dan pilih lokasinya - Situs Web. (Di Seluruh Situs Web).

Langkah 12: Buat Halaman Tentang Kami

Buat halaman kosong

Di sudut kiri atas, klik tombol "Buat", yang memungkinkan kita membuat halaman baru.

Menghubungkan tombol menu yang diperlukan ke halaman baru

Untuk melakukan ini, kami kembali ke halaman utama dan menghubungkan tombol menu ke halaman baru. Cukup sorot teks tombol menu dan klik ikon tautan di sebelah kanan untuk membuka editor tautan. Dalam kasus kami, tombol menu Portofolio menautkan ke halaman utama situs, dan tombol Tentang Kami menautkan ke halaman Tentang Kami.

Menambahkan Gambar Latar Belakang ke Halaman Tentang

Kami memutuskan untuk menambahkan latar belakang hitam ke halaman. Untuk melakukan ini, buka Perpustakaan Media dengan mengklik tombol "Foto" di panel kiri, pilih gambar yang dimuat sebelumnya (persegi panjang hitam biasa) di sana dan sesuaikan lokasinya di halaman sesuai dengan desain.

Menambahkan Teks ke Halaman Tentang Kami

Menambahkan informasi teks ke halaman menggunakan alat Teks. Editor WYSIWYG bawaan menunjukkan semua yang Anda lakukan, jadi pemformatan teks sangat mudah. Menambahkan alamat kontak juga cukup mudah, Anda hanya perlu membuka Link Editor dan memasukkan alamat email.

Setelah selesai, jangan lupa untuk menempatkan elemen halaman Tentang Kami dalam wadah dengan objek halaman. Pilih setiap elemen satu per satu dan pilih penempatan: Halaman (konten halaman).

Langkah 13: Ubah Gambar Preloader

Anda mungkin telah memperhatikan preloader melingkar putih saat Anda menavigasi halaman. Untuk mengaturnya, buka file website.fla dan buka perpustakaan. Klik kanan pada preloader dan pilih Properties.

Di jendela properti simbol, Anda dapat memilih item "Edit kelas Dasar" dan kemudian menganimasikan prapemuat seperti yang Anda inginkan. Kami akan membiarkan preloader kosong dan menghapus gambar grafik.

Langkah 14: Animasi Situs Web

Akhirnya, kita sampai pada bagian paling menarik dari panduan kita: animasi situs. Saat ini, seperti yang mungkin Anda perhatikan, situs tersebut statis, karena tidak ada satu pun wadah yang dianimasikan. Jadi langkah kita selanjutnya adalah menganimasikan wadah dan menambahkan animasi lain untuk menghidupkan situs kita.

Menganimasikan wadah default

Wadah konten mudah dianimasikan di sepanjang garis waktu. Buka file website.fla dan buat animasi fade in untuk setiap container.

Pertama, mari kita menganimasikan wadah utama dengan objek yang terlihat di seluruh situs. Ini adalah lapisan website_holder_1. Kami sedang membuat animasi sederhana dengan transparansi, tetapi kami akan menghiasinya dengan sesuatu. Buat keyframe kedua pada layer, atur Alpha 0% untuk keyframe pertama (buat transparan), buat inbetween frame dari pertama ke kedua, lalu tambahkan easing.

Mari kita membuat animasi untuk wadah dengan objek halaman (lapisan halaman_1_holder_2) dengan cara yang sama, tetapi membuatnya muncul sedikit kemudian.

Jadi kita akan menambahkan dua keyframe lagi pada layer, membuat container transparan pada frame pertama dan kedua, dan membuat easing peralihan dari keyframe kedua ke yang ketiga.

Saat kami mengkompilasi dan memuat situs, kami akan melihat bahwa setiap elemen muncul sudah dianimasikan. Namun saat berpindah dari satu halaman ke halaman lain, tidak ada animasi, hanya kedipan yang tidak biasa. Bagian kedua dari timeline bertanggung jawab untuk ini.

Beginilah cara kita membuat animasi muncul dan menghilangnya container.

Karena font teks berasal dari font sistem, kita perlu mengubah blend mode dari layer normal ke level untuk semua instance movieclip pada layer container.

Kami membuat wadah tambahan dan menganimasikannya.

Untuk situs flash yang bagus, animasi ini saja tidak cukup, jadi kami juga akan membuat bagian lain dari situs tersebut dianimasikan, seperti bagian atas (disorot dengan warna kuning pada gambar di bawah), bagian bawah (disorot dengan warna hijau) dan konten itu sendiri ( pada gambar di kotak merah).

Karena bagian atas dan bawah terletak pada tingkat seluruh situs, kami akan menambahkan dua wadah untuk dua bagian ini. Sebelum menambahkan wadah, kita harus menentukan ukuran dan lokasinya. Ini mudah dilakukan dengan alat Slice di Photoshop.

Bagian atas memiliki dimensi berikut: x=0, y=0, lebar=980, tinggi=120.

Zona bawah: x=0, y=765, lebar=980, tinggi=35.

Wadah atas akan berisi nama situs, wadah bawah akan berisi menu, dan mereka akan ditampilkan secara berbeda. Juga, mereka akan menempel di bagian atas dan bawah layar masing-masing saat menggunakan layar penuh.

Setelah menentukan dimensi wadah, kami membuka file structure.xml dan menambahkan wadah baru (di tingkat situs), menentukan koordinat, lebar, tinggi, dan kedalamannya.

Setelah menambahkan container ke file .xml, kita perlu membuatnya di file website.fla. Buka file website.fla dan buat layer baru untuk container kita. Urutan lapisan harus sesuai dengan nilai kedalaman yang kita tetapkan di file xml.

Kita dapat menyalin movieklip kosong dari lapisan website_holder_1 dan menempelkannya ke website_holder_3 dan website_holder_4.

Kami mengatur koordinat yang sama di klip seperti yang ditentukan dalam file structure.xml.

Untuk wadah ke-3: x = 0, y = 0;

Untuk wadah ke-4: x = 0, y = 765.

Sejak kami menyalin klipnya, nama-nama lama tetap ada. Kami mengubahnya sesuai dengan ID sehingga mudah ditemukan.

Hal yang sama harus dilakukan untuk wadah 4.

Pada timeline, kami menetapkan keyframe pertama untuk container 3 dan 4 sehingga mereka mulai muncul lebih lambat dari container dengan objek dari seluruh situs. Kami kemudian membuat keyframe kedua dan menganimasikan frame inbetween. Keyframe pertama berisi posisi awal container, dan keyframe kedua berisi posisi akhir container di situs. Wadah utama muncul dari atas layar, jadi kami memindahkannya ke bingkai utama pertama; wadah bawah ada di sisi bawah, jadi kami memindahkannya ke bingkai utama pertama juga. Dan kami juga menambahkan easing untuk menghidupkan peralihan.

Inilah yang kami dapatkan:

Setelah itu, kita perlu menambahkan kode berikut pada lapisan tindakan pada tingkat bingkai utama animasi pertama dari wadah kita.

Kemudian kami mengkompilasi situs dan memperbarui Control Panel.

Tempatkan benda-benda dalam wadah

Saat Anda memilih objek apa pun, Anda akan melihat dua wadah baru muncul dalam daftar kemungkinan penempatan di menu tarik-turun: bagian atas dan bawah.

Nama situs dengan slogan harus ditempatkan di wadah atas, dan menu situs dengan persegi panjang abu-abu di wadah bawah.

Ubah konten wadah bawah

Sekarang diinginkan bahwa pada layar besar, wadah bawah menempel ke bagian bawah layar. Untuk melakukan ini, kita harus memindahkan animasi wadah ke klip lain, karena, seperti yang Anda tahu, kita tidak dapat memindahkan klip animasi secara terprogram (animasi tidak akan berfungsi). Sebut saja klip ini website_holder_4_c.

Setelah itu, mari kita pergi ke adegan utama, klik pada keyframe pertama dari container 3 dan 4 dan edit kodenya.

Setelah mengkompilasi situs, Anda dapat melihat bahwa wadah bawah menempel di bagian bawah layar tidak peduli bagaimana kami mengubah ukuran layar. Jika resolusi layar terlalu kecil, wadah bawah tidak akan tumpang tindih dengan konten situs, dan akan tetap di tempatnya.

Langkah 15: Animasikan Wadah Konten

Untuk menganimasikan konten situs, kita perlu menganimasikan wadah dengan objek seluruh situs dengan cara yang sama seperti yang kita lakukan untuk wadah atas dan bawah.

Langkah 16: Buat Halaman Kontak

Sebelum membuat halaman baru, mari perbarui template halaman. Mari kita buat template untuk semua halaman baru, halaman "Tentang Kami". Klik kanan pada halaman Tentang Kami dan pilih Perbarui Template Halaman.

Setelah kami memperbarui template halaman, klik tombol "Buat", masukkan nama halaman, judul, tetapkan URL dan pilih lokasinya di struktur situs Anda, seperti yang ditunjukkan di bawah ini, di tangkapan layar.

Halaman "Kontak" sudah siap. Sekarang tinggal mengedit kontennya menggunakan editor WYSIWYG yang nyaman, dan menggunakan editor tautan untuk menghubungkannya ke tombol menu yang sesuai.

Langkah 17: Buat Slot Sederhana

Di Moto Flash CMS, slot berperan sebagai objek animasi. Slot mungkin berisi sejumlah besar fitur animasi yang dapat dikontrol langsung dari Panel Kontrol.

Pertama kami akan mencoba membuat slot sederhana, dan kemudian memperbaikinya.

Mari kita mulai dengan tombol "Tutup", tambahkan ke situs sebagai gambar, terapkan beberapa efek padanya, dan tetapkan tindakan "Pergi ke Halaman" -> "Beranda".

Menganimasikan tombol close sama sekali tidak sulit karena kita akan melakukannya menggunakan slot. Mari kita buat slot di file website.fla. Untuk melakukan ini, kami mengimpor gambar tombol "Tutup" ke perpustakaan. Di bagian Slots, kita perlu membuat movieclip baru dan beri nama CloseButtonSlot.

Mari kita atur kelasnya sebagai CloseButtonSlot. Tidak perlu membuat kelas baru, cukup mewarisi kelas AbstractMotoSlot. Cukup salin: com.moto.template.shell.view.components.AbstractMotoSlot dan tempel ke bidang Kelas Dasar.

Kami kemudian menambahkan gambar CloseButtonIcon ke panggung (CloseButtonSlot MovieClip harus terbuka) dan mengubahnya menjadi klip yang disebut CloseButtonIcon. Karena kami mewarisi slot kami dari kelas AbstractMotoSlot, ini memberi kami animasi utama. Sekarang kita akan membuat efek expand/collapse yang bagus.

Langkah selanjutnya adalah membuat layer baru dan membuat keyframe di mana Anda perlu meletakkan "Stop();". Tempatkan label utama “over” (antara frame stop pertama dan kedua) dan “out” (antara keyframe stop kedua dan ketiga) – lihat tangkapan layar:

Kami membuat kunci yang sama dan bingkai di antara pada lapisan klip kami.

Misalnya, tombol "Tutup" kami akan berputar searah jarum jam saat mouse diarahkan ke atasnya dan berlawanan arah jarum jam saat dilepas.

Mari tambahkan kecerahan rotasi dan easing untuk animasi gerak.

Setelah animasi selesai, kami mengkompilasi file website.fla dengan slot baru kami (Ctrl + Enter).

Untuk bekerja dengan slot menggunakan Moto CMS, kita perlu menentukan parameternya di file: structure.xml:

librarySymbolLinkage=” ” – mengekspor slot movieklip (Nama kelas).
animasi="true" – atribut yang menentukan apakah slot dianimasikan atau tidak.
resizable="false" - apakah ada logika untuk mengubah ukuran slot atau tidak.
terkunci=”false” – apakah slot harus ditampilkan di Panel Kontrol atau tidak.
– nama slot di Panel Kontrol
– properti slot yang memperluas fungsionalitas. Kami tidak akan menggunakannya dalam contoh ini.

rumah > tes