Baru-baru ini, berbagai jenis animasi grafik SVG (Scalable Vector Graphics) di situs web dan aplikasi menjadi sangat populer. Ini karena fakta bahwa semuanya browser terbaru sudah mendukung format ini. Berikut info tentang dukungan browser untuk SVG.

Artikel ini membahas contoh paling sederhana Animasikan vektor SVG dengan mudah plugin jquery Pelukis Garis Malas.

sumber

Untuk menyelesaikan dan memahami sepenuhnya tugas ini, diperlukan pengetahuan dasar tentang HTML, CSS, Jquery, tetapi tidak diperlukan jika Anda hanya ingin menganimasikan SVG) Ayo mulai!

Jadi langkah-langkah yang perlu kita ikuti:

1. Buat struktur file yang benar
2. Unduh dan sambungkan plugin
3. Menggambar Seni Garis Keren di Adobe Illustrator
4. Ubah gambar kita menjadi Lazy Line Converter
5. Rekatkan kode yang dihasilkan ke main.js
6. Tambahkan beberapa CSS secukupnya

1. Buat struktur file yang benar
Layanan Initializr akan membantu kami dalam hal ini, di mana Anda perlu memilih parameter seperti pada gambar di bawah.

• H5BP Klasik (Pelat Boiler HTML5)
• Tanpa Templat
• Hanya HTML5 Shiv
• diperkecil
• Kelas .IE
• Bingkai krom
• Kemudian klik Unduh!

2. Unduh dan sambungkan plugin

Karena initializr hadir dengan library Jquery terbaru, dari arsip yang perlu kita unduh dari repositori proyek Lazy Line Painter, hanya 2 file yang perlu ditransfer ke proyek kita. Yang pertama adalah 'jquery.lazylinepainter-1.1.min.js' (versi plugin mungkin berbeda) terletak di root folder yang dihasilkan. Yang kedua adalah example/js/vendor/raphael-min.js.

2 file ini ditempatkan di folder js. Dan kami memasukkannya ke dalam index.html kami sebelum main.js seperti ini:

3. Buatlah gambar garis luar yang keren di Adobe Illustrator

1. Gambar garis besar kita di Illustrator (cara termudah untuk melakukannya adalah dengan Pen Tool)
2. Perlu agar kontur gambar kita tidak menutup, karena untuk efek kita membutuhkan awal dan akhir
3. Seharusnya tidak ada isian
4. Ukuran file maksimum adalah 1000×1000 px, 40kb
5. Mari potong batas objek Object>Artboards>Fit To Artboards Bounds
6. Simpan sebagai SVG (pengaturan penyimpanan standar baik-baik saja)

Misalnya, Anda dapat menggunakan ikon di lampiran.

4. Ubah gambar kita menjadi Lazy Line Converter
Cukup seret dan lepas ikon Anda ke kotak di bawah ini.
Ketebalan, warna garis luar, dan kecepatan animasi dapat diubah dalam kode itu sendiri yang akan muncul setelah konversi!

5. Rekatkan kode yang dihasilkan ke main.js
Sekarang cukup rekatkan kode yang dihasilkan ke dalam file main.js yang kosong
Pilihan:
strokeWidth — ketebalan garis luar
strokeColor - warna garis luar
Anda juga dapat mengubah kecepatan menggambar setiap vektor dengan mengubah nilai parameter durasi (default 600)

6. Tambahkan beberapa CSS secukupnya
Hapus paragraf dari index.html

Halo Dunia! Ini adalah HTML5 Boilerplate.

Dan sebagai gantinya, kami memasukkan blok tempat animasi kami akan berlangsung

lalu tambahkan beberapa CSS ke file main.css untuk tampilan yang lebih bagus:

Body ( background:#F3B71C; ) #icons ( position: fixed; top:50%; left:50%; margin: -300px 0 0 -400px; )

menyimpan semua file.
Sekarang buka index.html di browser modern dan nikmati efeknya.

P.S. saat dijalankan di mesin lokal, permulaan animasi mungkin tertunda beberapa detik.

Halo semua! Hari ini saya akan mencoba membuat gambaran tentang fitur-fitur program Adobe Ilustrator, membandingkannya dengan kemampuan flush. Ini bukan analisis global dari program oleh tulang, melainkan deskripsi dari beberapa keripik yang menarik yang saya temukan dalam program ini. Saya mengumpulkan informasi sepotong demi sepotong ketika saya mempelajarinya untuk meletakkan semuanya dalam satu posting. Saya harus segera mengakui bahwa saya bukan pengguna ilustrator yang sangat berpengalaman, hanya selama enam bulan terakhir saya menggunakannya dalam menggambar (sebelumnya, saya menggambar semuanya dalam sekejap). Banyak yang mengeluh bahwa ilustratornya rumit, tidak selalu intuitif. Sampai batas tertentu, saya setuju bahwa setelah flash, program ini sulit. Tetapi hal utama di sini bukanlah berhenti, tetapi terus belajar. Dan setelah beberapa minggu, muncul pemikiran, bagaimana saya bisa melakukannya tanpa itu sebelumnya!

Jadi, apa yang saya suka tentang ilustrator, dan apa yang saya temukan sendiri tidak dalam sekejap.
1. Saya akan mulai dengan yang paling sederhana, tetapi pada saat yang sama perlu. Cobalah untuk mengatur objek dalam lingkaran dalam sekejap. Sebelumnya adalah Alat Deco, tetapi dihapus, tampaknya dianggap tidak perlu. Kami memutuskan bahwa akan lebih menyenangkan melakukannya dengan tangan. Illustrator memiliki fitur ini: Efek - Distorsi&Transformasi - Transformasi.

Semuanya cepat dan sederhana, kami mengatur sendiri nilai (jarak antar objek, jumlah salinan) di pengaturan.

2. Berliku-liku

Bahkan lebih sederhana, namun tetap berguna. Tampaknya sepele, tetapi dalam sekejap Anda harus menggambar dengan tangan, di ilustrator ini hanya hitungan detik.

3. Deformasi benda (Warp)

Tidak ada yang seperti ini di Flash. Pada contoh di bawah ini, saya hanya menunjukkan 2 cara untuk mendeformasi bentuk sederhana (Efek - Warp - Arc / Fish). Sebenarnya ada 15 dari mereka. versi terbaru program.

4. Pembulatan sudut otomatis (Round Corners)

Itu dapat dilakukan secara manual: pada objek grafis, ketika dipilih di sudut (di semua sudut), titik putih dan tanda garis bulat muncul. Tarik mouse, sesuaikan dengan selera Anda.

Tapi ini hanya berlaku untuk bentuk, dengan garis pensil sedikit berbeda - terapkan efek pembulatan ( Effect - Stylize - Round Corners). Pada output kita mendapatkan hasil yang sama.

5. Kasar

Efek diterapkan ke bentuk sederhana (Effect-Distort&Transform-Roughen). Hasilnya, kami mendapatkan sesuatu yang menyerupai model 3D poli rendah. Saya pikir itu keren :) Dan yang terpenting - sangat sederhana.

6 Kerutan & Kembung(Tarik dan Mengembang)
Contoh pada gambar di bawah ini:

7. Ekstensi formulir (Jalur Offset)

Di flash ada fungsi Expand Fill (ekstensi isi), itu tidak bekerja dengan garis pensil sama sekali, tidak seperti ilustrator.

8. Kuas (Kuas Seni, Kuas Pola, Kuas Sebar)
Lihat gambar di bawah ini untuk contoh:

9. Kuas Tekstur (Kuas Tekstur)

Ada juga banyak kuas tekstur di ilustrator yang saya tulis dan bagaimana tampilannya versi baru kilatan - . Terlihat bahwa penggunaan kuas di Adobe Animate sangat lambat. Itu dia:(

10. Saya tidak yakin apakah ini tipuan, tetapi saya ingin fokus pada kuas dengan nama yang lucu gumpalSikat. Terletak di bilah alat, kuas yang sangat bagus untuk digunakan. Ini memiliki banyak pengaturan, saya menyukainya lebih dari biasanya. Sulit menjelaskan manfaatnya dengan kata-kata, lebih baik mencobanya sekali.

10.Split ke Grid

Fitur berguna lainnya adalah fungsi Split to Grid (Object-Path-Split to Grid) yang memungkinkan Anda untuk memotong formulir menjadi segmen yang sama. Hal ini mengingatkan kita akan apa? Benar - jendela di gedung bertingkat tinggi. Bagi saya, hal yang keren untuk menggambar, misalnya pemandangan kota;)

Alat lain yang berguna diperkenalkan di ilustrator, mungkin sejak rilis pertamanya. Dengannya, Anda dapat membuat, misalnya, tekstur kayu:

12. Pindah (kanan - Transform - Pindah)

Mengimbangi objek dengan jarak tertentu. Jika diinginkan, Anda dapat langsung membuat salinan yang ditempatkan pada jarak yang diinginkan dari objek yang dipilih secara horizontal / atau vertikal. Versi flash sebelumnya memiliki plugin yang melakukannya fungsi ini. Sayangnya, saya tidak ingat namanya.

Sangat nyaman untuk membuat pola mulus di ilustrator ( Objek-Pola-Membuat). Saya ingat bagaimana saya dengan panik unggul dalam sekejap dengan pembuatan . Dalam versi ilustrator CC 2015, semuanya otomatis, banyak pengaturan akan membantu Anda membuat pola dalam lusinan variasi, hanya dengan beberapa elemen grafis. Di versi program sebelumnya, semuanya harus dilakukan secara manual, seperti di flash sejauh ini.

(Catatan - pola dapat dijadikan objek vektor yang dapat diedit menggunakan fungsi parse ( Objek-Perluas Penampilan).

14. Benda Mosaik (Mosaik)

Buat palet warna berdasarkan gambar yang ada. Impor gambar yang Anda suka ke dalam ilustrasi (Buka), lalu Objek - Membuat Mosaik Objek. Dalam pengaturan, kami menentukan frekuensi pembagian tinggi dan lebar.

Dan pada output kita mendapatkan:

15.Blend (Pencampuran)

Digunakan untuk membuat gradien. Anda dapat membuat transisi langkah demi langkah, seperti pada gambar. Saya tidak bisa mengatakan bahwa saya sering menggunakannya, tetapi mungkin berguna bagi seseorang. Menurut saya ini dapat digunakan untuk membuat gambar latar belakang yang sederhana.

Alat ini juga dapat digunakan untuk mengkloning objek. Kami menempatkan dua objek pada jarak satu sama lain dan menerapkan Blend Options, pilih jumlah langkah (jumlah objek yang dikloning).

16. Bangun Alat Bentuk. Hal yang sangat berguna untuk bekerja dengan primitif. Dalam sekejap, menurut saya, itu kurang nyaman.

Menahan Alt dan mengklik segmen yang dipilih - hapus segmen tersebut. Jika kita cukup menyeret mouse ke beberapa area yang dipilih - koneksi.

Penambahan - alat yang membantu memotong, menghubungkan, dll secara otomatis. formulir yang dipilih. Bagi saya, itu sangat tidak nyaman, saya lebih sering menggunakannya Membangunmembentukalat.

(artboard)

18. Panel Alat Kustom

Kemampuan untuk membuat bilah alat Anda sendiri, membuang yang tidak perlu, dan hanya memilih yang Anda gunakan.

Dalam sekejap, artboards, yaitu adegan ( Adegan 1,2,3..) terletak secara terpisah dan Anda perlu beralih di antara keduanya (Shift + F2). Di ilustrator, semuanya dapat diposisikan di depan mata Anda. Akan lebih mudah jika Anda membuat beberapa versi dari gambar yang sama, sehingga semua opsi ada di depan mata Anda untuk perbandingan.

19. Isometrik dengan Gaya Grafis

Dan yang terakhir adalah pembuatan isometri tanpa menggunakan 1 klik (atau lebih tepatnya, 3 klik, karena kita memiliki 3 sisi;) menggunakan gaya grafis ( Gaya Grafis). Bagaimana ini dilakukan, saya akan menulis lain kali.

Kesamaan yang dimiliki ilustrator dengan flash adalah kemampuan untuk menyimpan objek menjadi simbol (simbol) dan simbol ini juga dapat ditransfer ke flash tanpa masalah (buka file .ai di flash, dengan Impor - Impor ke tahap).
Simbol di ilustrator memiliki sifat yang sama seperti di flash.
Dan pada akhirnya, saya akan menulis apa di ilustrator, menurut saya, lebih rendah dari flash. Ya, ya, dan ada. Dan ini adalah alat isian ( ember cat). Tidak peduli seberapa keras saya mencoba membiasakannya di illa, lebih nyaman di flash.
Jika catatan saya bermanfaat bagi Anda atau jika Anda ingin menambahkan sesuatu sendiri - selamat datang di komentar! Semoga sukses untuk semua;)

Format File Flash (SWF) didasarkan pada grafis vektor dan dirancang untuk grafik yang dapat diskalakan dan ringkas untuk web. Karena format file ini didasarkan pada grafik vektor, objek mempertahankan kualitas gambar pada resolusi apa pun dan ideal untuk membuat bingkai animasi. Di Illustrator, Anda dapat membuat bingkai animasi individual pada lapisan dan kemudian mengekspor lapisan gambar sebagai bingkai individual untuk digunakan di situs web. Anda juga dapat menentukan simbol dalam file Illustrator untuk mengurangi ukuran animasi. Saat diekspor, setiap simbol ditentukan hanya sekali dalam file SWF.

Perintah ekspor (SWF)

Memberikan kontrol terbesar atas animasi dan kompresi bit.

Memberikan kontrol lebih besar atas campuran format SWF dan bitmap dalam tata letak yang terfragmentasi. Perintah ini menawarkan lebih sedikit opsi gambar daripada perintah Ekspor (SWF), tetapi menggunakan opsi perintah Ekspor yang terakhir digunakan (lihat ).

Ingatlah panduan berikut saat menyiapkan objek untuk disimpan sebagai SWF.

Gunakan aplikasi Device Central untuk melihat seperti apa grafik Illustrator di aplikasi Pemutar Flash pada berbagai perangkat genggam.

Memasukkan grafik Illustrator

Objek grafik yang dibuat di Illustrator dapat dengan cepat, mudah, dan mudah disalin dan ditempelkan ke dalam aplikasi Flash.

Saat Anda menempelkan grafik Illustrator ke dalam aplikasi Flash, atribut berikut dipertahankan.

Kontur dan bentuk

• Ketebalan goresan

  Definisi gradien

  Teks (termasuk font OpenType)

  Gambar terkait

• Mode Campuran

Selain itu, Illustrator dan Flash mendukung fitur-fitur berikut saat menempelkan grafik.

Saat memilih lapisan dalam karya seni Illustrator level tertinggi Seluruhnya dan menempelkannya ke dalam aplikasi Flash, lapisan dan propertinya (visibilitas dan pemblokiran) dipertahankan.

Format warna ilustrator selain RGB (CMYK, skala abu-abu, dan format khusus) dikonversi oleh Flash ke RGB. Warna RGB dimasukkan dengan cara biasa.

Saat Anda mengimpor atau menempelkan karya seni Illustrator, Anda dapat menggunakan berbagai opsi untuk menyimpan efek tertentu (seperti bayangan oleh teks) sebagai filter Flash.

Flash menyimpan topeng Illustrator.

Ekspor file SWF dari Illustrator

File SWF yang diekspor dari Illustrator memiliki kualitas dan kompresi yang sama dengan file SWF yang diekspor dari Flash.

Saat mengekspor, Anda dapat memilih dari berbagai gaya yang telah ditentukan sebelumnya untuk hasil yang optimal, dan menentukan bagaimana beberapa artboards digunakan, bagaimana karakter, lapisan, teks, dan topeng dikonversi. Misalnya, Anda dapat memilih untuk mengekspor simbol Illustrator sebagai film atau gambar grafis, serta membuat simbol SWF dari lapisan Illustrator.

Impor File ilustrator ke aplikasi Flash

Untuk membuat tata letak lengkap di Illustrator dan kemudian mengimpornya ke Flash dalam satu langkah, Anda dapat menyimpan karya seni Anda dalam format asli Illustrator (AI) dan mengimpornya dengan fidelitas tinggi ke Flash menggunakan perintah File > Import To Workspace.area" atau " File"> "Impor ke Perpustakaan".

Jika file Illustrator berisi beberapa artboards, pilih artboard yang akan diimpor dari kotak dialog Impor Flash dan tentukan pengaturan untuk setiap lapisan di artboard tersebut. Semua objek di artboard yang dipilih diimpor ke Flash sebagai satu lapisan. Saat Anda mengimpor artboard lain dari file AI yang sama, objek dari artboard tersebut diimpor ke Flash sebagai layer baru.

Saat Anda mengimpor karya seni Illustrator sebagai file AI, EPS, atau PDF, Flash mempertahankan atribut yang sama seperti saat Anda menempelkan karya seni Illustrator. Selain itu, jika file Illustrator yang Anda impor berisi lapisan, Anda dapat mengimpornya menggunakan salah satu metode berikut.

Ubah layer Illustrator menjadi layer Flash.

Ubah lapisan Illustrator menjadi bingkai Flash.

Ubah semua layer Illustrator menjadi satu layer Flash.

Adobe Ilustrator dan setelah efek
Impor dan animasi sederhana

Halo. Hari ini kami meninjau animasi sederhana di After Effects.

Sumber daya: Adobe Ilustrator CC
Adobe After Effects CC

Mari kita mulai dengan menggambar di Illustrator.

Kami menggambar
1) Gambar Persegi Panjang kuning sebagai latar belakang

Gambar 1 - Persegi Panjang

2) Gambar Lingkaran dan isi dengan gradien
Mari kita bekerja pada lingkaran sedikit:
- hapus titik bawah pada kontur, kita mendapatkan busur;
- gambar garis lurus, tutup bagian bawah busur, kita dapatkan setengah lingkaran

Gambar 2 - 1) menggambar lingkaran; 2) gradien; 3) hapus titik

3) Gambar Persegi Panjang dan buat salinannya
- satu persegi panjang abu-abu;
- persegi panjang abu-abu gelap lainnya
4) Gambarlah Segitiga dari tanda bintang dengan mengatur jumlah sinar - 3

Gambar 3 - 1) lampu persegi panjang; 2) gelap gulita; 3) segi tiga

5) Gambar kucing dengan Pena dan bentuk sederhana

Gambar 4 - 1) kepala; 2) leher; 3) tubuh; 4) kaki; 5) ekor

Dan sekarang paling banyak UTAMA momen
Mari bagikan gambar ke dalam lapisan (apa yang akan dianimasikan - pada lapisan terpisah) seperti ini:

Gambar 5 - semua foto (tandai merah lapisan penting)

Semuanya, sekarang kita simpan.
Mari kita lihat pengaturan penyimpanan

Gambar 6 - Simpan

Dan sekarang tahap selanjutnya. MenutupAdobe Illustrator dan buka After Effects.

Impor ke After Effects
File - Impor - File - pilih file yang kami simpan Ilustrator.
Mari kita pilih untuk mengimpor layer dari Illustrator, jika kita meletakkan footage, kita akan mendapatkan gambar dengan layer gabungan, tetapi kita tidak membutuhkan ini.

Gambar 7 - Impor Sebagai Komposisi

Semua diimpor.
Sekarang mari kita lihat apa yang kita miliki. Klik dua kali pada komposisi , apa yang akan terbuka dan kita akan melihat lapisannya (jika semuanya dilakukan dengan benar, akan ada beberapa lapisan). Kami mendapatkan ini, lihat gambar

Gambar 8 - Buka komposisi

Dan sekarang untuk apa kita di sini hari ini - Animasi.

Animasi di setelah efek
Tetapkan titik pivot di bagian atas panah menggunakan Pan Behind Tool ( tombol pintas- Y). Ambil satu titik dan pindahkan ke tempat yang Anda inginkan. Hasilnya akan seperti ini..

Gambar 9 - Pan tool dan Layers

Itu saja, sekarang mari beralih ke layer untuk animasi.
Kami membutuhkan lapisan Panah dan Head_cat.
Mari kita mulai dengan panah.
Luaskan daftar, temukan dan klik pada jam. Jadi kami menempatkan titik pertama pada nol detik. Secara total, animasi akan berlangsung selama 2 detik.
Jadi, ini adalah pengaturan yang perlu Anda buat (kami akan menempatkan total 3 poin)

Kedua	0	1	2
	+66	- 70	+66

Seperti inilah tampilannya:

Gambar 10 - Panah rotasi

Sekarang mari kita menghidupkan kepala kucing.
Luaskan head_cat dan temukan posisi.
Akan ada 4 poin.
Itu hanya akan mengubah koordinat terakhir tanpa menyentuh sisanya.

Kedua	0.1	0.17	1.12	2.0
posisi	689.3	729.3	729.3	689.3

Mari kita lihat gambarnya.

Gambar 11 - Posisi kepala

Jadi, prinsip animasinya seperti ini. Panah berayun dari sisi ke sisi, segera setelah mendekati anak kucing, ia menarik kepalanya ke dalam dirinya sendiri, bertahan sebentar dalam posisi ini, dan kemudian mengembalikannya ke tempatnya.

Tahap akhir

Produksi
Anda perlu membuat produk jadi dari pekerjaan Anda.
Pergi ke menu- Tambahkan ke Render Queue
Panel Render terbuka dan di Output Module (dua klik) pilih format output. Saya mengambil *.mov

Gambar 12 - Render

Klik tombol RENDER dan dapatkan hasilnya (jangan lupa tentukan jalurnya).
Itu saja.

Hari ini kami tidak seperti biasanya Pelajaran Adobe Ilustrator. Karena kali ini kita tidak akan membuat gambar statis, melainkan animasi nyata. Bayangkan ternyata bantuan dari Adobe Illustrator juga bisa menggambar kartun :)

Dan kami tidak membutuhkan apa pun untuk ini. Organisasi lapisan yang kompeten dan ekspor karya akhir ke format swf, di mana setiap lapisan diubah menjadi bingkai animasi. Dalam tutorial hari ini kita akan menggambar animasi hitung mundur dengan gaya film retro. Outputnya harus berupa film flash dengan hitungan mundur yang sama.

Hal pertama yang harus dilakukan adalah menggambar semuanya elemen yang diperlukan untuk animasi masa depan. Untuk melakukan ini, saya membuat dua posisi bingkai film dalam dokumen terpisah, lingkaran untuk referensi, yang dipotong menjadi sektor terpisah, tekstur dan goresan vertikal untuk menambahkan efek kuno, serta semua angka dan prasasti.

Saat semua bagian kartun kita sudah siap, Anda dapat mulai membuat animasinya sendiri. Untuk kenyamanan, ini paling baik dilakukan di dokumen baru. Dalam hal ini, layer akan berperan sebagai bingkai animasi. Dan di lapisan pertama, Anda hanya perlu menyalin bingkai filmnya. Posisikan di tengah area kerja.

Sekarang buat layer kedua dan salin bingkai film ke dalamnya, di mana lubang di tepinya dibuat dengan pergeseran. Itu juga perlu dipusatkan.

Dari dua layer ini, Anda sudah bisa mendapatkan animasi film bergerak. Tapi nanti kita akan membutuhkan lebih banyak lapisan. Jadi pilih dua layer pertama, buka opsi panel dan buat salinan layer.

Dengan cara yang sama, kita perlu mengumpulkan 12 lapisan dengan bingkai film yang menentukan pergerakannya.

Sekarang kami memiliki sejumlah besar lapisan dan semuanya terlihat. Dalam artian lapisan atas memblokir lapisan bawah, yang sangat tidak nyaman untuk bekerja. Oleh karena itu, Anda dapat menonaktifkan beberapa layer dengan mengklik ikon mata di sebelah kiri nama layer. Untuk mematikan atau menghidupkan semua lapisan sekaligus, tahan tombol Alt sambil mengklik ikon mata. Menghidupkan dan mematikan lapisan, Anda dapat melihat dengan tepat apa yang terletak di bingkai tertentu dari animasi masa depan kita. Dan sekarang, untuk menambahkan sedikit guncangan pada gerakan film, kita perlu memindahkan bingkai yang diterima sedikit ke arah yang berbeda. Untuk melakukan ini, aktifkan hanya lapisan yang akan Anda gunakan saat ini, lalu pindahkan bingkai beberapa piksel ke kedua sisi.

Setelah Anda melewati semua lapisan dan menambahkan sedikit pergeseran, Anda dapat mulai membuat animasi lingkaran yang bergerak. Untuk melakukan ini, salin lingkaran yang terdiri dari sektor-sektor dari dokumen bagian kartun dan letakkan di lapisan pertama di atas bingkai film.

Jika Anda menghapus pilihan dari lingkaran, itu akan terlihat seperti satu kesatuan. Inilah yang kita butuhkan.

Tetapi karena terdiri dari sektor-sektor terpisah, dimungkinkan, dengan mengubah warnanya, untuk membuat animasi dengan sangat cepat dan mudah. Untuk melakukan ini, salin lingkaran ini ke lapisan kedua dan buat sektor pertama lebih terang. Anda ingat bahwa film bergetar saat bergerak, jadi tidak perlu meletakkan lingkaran tepat di tengah bingkai. Letakkan di atas mata.

Demikian pula, Anda perlu menyalin lingkaran ke setiap lapisan berikutnya, sambil mengecat dengan warna yang lebih terang satu sektor lebih banyak dari waktu sebelumnya. Bersama-sama, 12 lapisan ini membentuk animasi gerakan film dengan lingkaran yang mengisi.

Selanjutnya kita perlu menambahkan tekstur pada layer kita. Nyalakan layer pertama dan salin tekstur dari sana. sumber data dengan suku cadang.

Kemudian hidupkan lapisan berikutnya secara bergantian dan salin tekstur yang sama di sana. Agar terlihat berbeda di setiap bingkai, putar saja 90 derajat. Seperti yang sudah Anda duga, kita perlu menambahkan tekstur ke semua 12 frame.

Jika Anda sudah agak lelah menyalin, saya dapat menyenangkan Anda - hanya ada sedikit yang tersisa. Bagian tersulit sudah berakhir. Tetap menambahkan goresan vertikal, dan hampir semuanya. Untuk melakukan ini, sekali lagi, salin goresan asli dan letakkan di tempat yang sewenang-wenang dalam beberapa lapisan. Dalam kasus saya, goresan muncul hanya dalam dua lapisan.

Sekarang siklus utama dengan animasi film sudah siap, tinggal menambahkan angka. Karena kita menghitung dari 3 sampai 1 ditambah kata Go!!!, kita membutuhkan lebih banyak layer. Bukan 12, tapi sebanyak 48. Untuk melakukan ini, Anda perlu membuat tiga salinan lagi dari lapisan yang sudah jadi dengan animasi film.

Dan kemudian semuanya sederhana. Nyalakan lapisan pertama dan letakkan nomor tiga di sana.

Maka Anda perlu menyalin gambar ini ke lapisan berikutnya hingga animasi lingkaran berakhir. Saat Anda mendapatkan salinan layer berikutnya, di mana lingkaran akan terisi penuh lagi, Anda harus meletakkan nomor dua. Dengan cara yang sama, salin nomor satu ke lapisan yang diinginkan. Dan saat Anda mencapai lapisan terakhir untuk label Go!!!, cukup hapus lingkaran sebelum menyalin label ke lapisan yang diinginkan.

Itu semua dengan animasi. Hal utama di sini adalah jangan bingung. Anda dapat memberikan beberapa nama yang nyaman pada layer, tetapi saya terlalu malas :) Namun, setelah selesai, pastikan untuk mengaktifkan kembali semua layer dengan mengklik ikon mata.

Di jendela pengaturan ekspor, pastikan untuk mengatur Export As: AI Layers ke SWF Frames. Opsi inilah yang mengubah layer Illustrator menjadi bingkai animasi. Selanjutnya, klik tombol Lanjutan.

Akan buka pengaturan tambahan. Di sini Anda perlu mengatur Frame Rate. Saya memiliki 12 frame per detik. Kotak centang Looping bertanggung jawab untuk memutar animasi. Berkat dia, video akan diputar dalam lingkaran. Dan opsi Layer Order: Bottom Up merender layer ilustrator dari bawah ke atas di panel. Ini persis bagaimana kami membangun animasi kami.

Hasilnya, kami mendapatkan film flash dengan animasi kami.

Sekarang Anda lihat bahwa membuat animasi sederhana di Adobe Illustrator tidak sesulit kelihatannya pada pandangan pertama.

Namun untuk membuat video panjang atau aplikasi interaktif masih lebih baik digunakan Adobe Flash atau editor flash lainnya. Misalnya, saya membuat kucing ini di Macromedia Flash lama yang saya gali di tempat kerja.

Juga baru-baru ini, HTML5 dan CSS3 semakin banyak digunakan untuk membuat animasi. Kode yang diberikan didukung browser modern dan tidak memerlukan penggunaan flash player.

Romawi alias dacascas terutama untuk blognya

Berlangganan buletin kami agar Anda tidak ketinggalan sesuatu yang baru: