Membuat animasi Lucu Gerakan lingkaran terus menerus

Sebuah animasi populer dari situs kirupa.com yaitu pembuatan animasi lingkaran atau
objek lainnya yang berjalan terus menerus,
Animasi berikut adalah apa yang saya maksud,

[Gerakan dengan pemrograman di hanya 856 byte! ]

Animasi di atas adalah apa yang Anda akan pelajari . tutorial kali ini akan membantu sobat2
dalam membuat animasi seperti itu.
Membuat Gerakan Terus menerus:
i.

ii.

Membuat animasi baru di Flash MX. Atur lebar dan tinggi stage ke 300 dan 120. Terakhir,
pastikan untuk mengatur frame-rate minimal 25 fps.

buatlah persegi panjang .Pastikan persegi panjang adalah memiliki ketinggian sesuai dengan
stagenya

[Persegi panjang telah ditarik melampaui tepi kanan panggung]

Setelah persegi panjang telah dibuat , pilih dan tekan F8. Para Convert ke kotak Simbol dialog
akan muncul. Pilih Movie Clip dan tekan OK. Pilih persegi panjang (sekarang klip video) dan beri
nama instance "blok" :

[Memberikan persegi panjang 'blok' nama contoh]

sekarang waktunya untuk menggambar lingkaran! Di dalam stage Anda, menggambar

lingkaran. Setelah Anda membuat lingkaran, tekan F8. dan Convert ke kotak Simbol dialog akan
muncul. Pilih Movie Clip dan tekan OK.

[Mengkonversi ke kotak dialog simbol]

Setelah Anda membuat lingkaran klip video, klik kanan pada lingkaran dan pilih Actions: Copy
dan paste kode berikut ke dalam kotak dialog Anda Actions:

onClipEvent (enterFrame) {
//generating movement
location = this._x;
var i;
i = 1+_root._xmouse/5;
if (this, hitTest(_root.block)) {
this._x = -1000;
} else {
this._x = location+i++;
}
//clips are scaled according to y-mouse;
this._xscale = 40+_root._ymouse;
this._yscale = 40+_root._ymouse;
}
i

Setelah proses Menyalin dan Menempelkan , Tekan F8 lagi dan pilih Movie Clip (lagi) dari
Convert to Symbol kotak dialog yang muncul.

Klik kanan pada lingkaran dan pilih Salin. Paste lingkaran di lokasi secara acak di seluruh stage.

i.

Terus ulangi copy / paste sampai Anda mendapatkan lingkaran cukup menghiasi stage
Anda. Karena ini adalah klip video, Anda dapat menyesuaikan skala dan warna / alpha
pengaturan untuk membuat lingkaran Anda terlihat "keren".Oleh karena itu, sesuaikan tine / alpha
/ skala / dll. lingkaran Anda untuk membuat mereka berwarna-warni dan cerah:

[Acak mengatur lingkaran Anda dengan warna yang berbeda / lokasi]

Pastikan bahwa lingkaran sedikit yang di luar batas stage di sisi kiri. Lihat gambar di atas; melihat
tiga lingkaran di daerah abu-abu di luar stage . Hal ini dilakukan untuk memastikan transisi yang
mulus tanpa jeda atau kesenjangan dalam animasi sementara kalangan sedang "respawned" di
sebelah kiri.

i.

Menyimpan animasi dan buka File | Publish Preview | HTML. Anda akan melihat lingkaran yang
Anda buat bergerak ke kiri dan kembali muncul di sebelah kanan.

Contoh Sederhana di animasi Gerak Acak Flash dexter.fla

[Bunga-bunga - mereka hidup! ]

Tutorial ini akan membantu Anda untuk menciptakan efek di atas. Anda juga akan belajar aksi 'balik layar'
dari kode yang membuat benda bergerak secara acak.
Inilah Cara
Langkah-langkah berikut dirancang untuk bekerja di Flash MX 2004, tetapi mereka harus
bekerja di Flash MX dan mungkin bahkan Flash 5:
i.

Buat dokumen baru di Flash. Mengatur lebar film untuk 300 dan tinggi film sampai 200. Set frame
rate Anda Flash film ke 25.

ii.

Sekarang, menggambar sebuah lingkaran penuh-dalam menggunakan alat Circle.Area gambar

Anda akan terlihat seperti gambar berikut:

[Menggambar lingkaran]

Setelah lingkaran telah ditarik, pilih lingkaran dan tekan F8. Para Convert ke kotak dialog Symbol
akan muncul. Pilih opsi untuk Movie Clip dan tekan OK.

ii

Pilih klip video yang baru dikonversi Anda jika tidak dipilih. Berikan klip film Anda nama
contoh, dot :

[Memberikan film Anda klip contoh nama 'dot']

i

Sekarang, pilih klip video Anda dan tekan F9. Kotak dialog tindakan akan muncul.Salin dan
sisipkan bagian kode berikut:
onClipEvent (load) {
//data you may want to change
width = 300;
height = 200;
speed = Math.round(Math.random()*2)+1;
//initial positions
x = this._x=Math.random()*width;
y = this._y=Math.random()*height;
x_new = Math.random()*width;
y_new = Math.random()*height;
}
onClipEvent (enterFrame) {
//x movement
if (x_new>this._x) {
sign_x = 1;
} else {
sign_x = -1;
}
dx = Math.abs(x_new-this._x);
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}
//y movement
if (y_new>this._y) {
sign_y = 1;
} else {

sign_y = -1;
}
dy = Math.abs(y_new-this._y);
if ((dy>speed) || (dy<-speed)) {
this._y += sign_y*speed;
} else {
y_new = Math.random()*height;
}
}

Sekarang, pilih bingkai pertama dari garis waktu Anda. Tekan F9 lagi untuk menampilkan kotak
dialog untuk Tindakan frame. Salin dan sisipkan bagian kode berikut ke dalam bingkai bahwa:
i = 0;
while (i<25) {
//duplicateMovieClip(dot, "dot"+i, i);
dot.duplicateMovieClip("dot"+i, i);
i++;
}

Simpan file ini. Berikan nama yang Anda inginkan. Buka File | Publish Preview | HTML. Anda
akan melihat sesuatu yang sangat mirip dengan apa yang Anda lihat dalam animasi contoh di
atas. Tentu saja, Anda akan melihat lingkaran bergerak secara acak sebagai lawan secara acak
bergerak grafis.

Dalam pembahasan sebelumnya , Anda belajar bagaimana untuk menyalin dan menyisipkan kode. Pada
halaman ini, Anda benar-benar akan mempelajari mengapa ActionScript sebenarnya menggerakkan
lingkaran atau objek lain secara acak sekitar.
Membedah Kode
saya akan mencoba menjelaskan setiap baris atau bagian kode dan apa menyelesaikan:

onClipEvent (load) {

Hal ini memastikan bahwa kode yang terkandung dalam bagian ini dijalankan langsung
ketika beban film. Kode hanya mengeksekusi sekali, dan tidak akan diulang terus
menerus.Ini adalah tempat yang baik untuk mendefinisikan sifat-sifat film Anda yang akan
tetap konstan sepanjang kehidupan film Anda.
/ / Data yang Anda mungkin ingin mengubah
width = 300;

height = 200;

Kedua baris menentukan batas-batas gerakan acak. Untuk sebagian besar, mereka akan
menjadi wakil dari lebar film Anda dan tinggi. Anda harus mengubah dimensi untuk lebar
dan tinggi jika dimensi film Anda berbeda.
speed = Math.round(Math.random()*2)+1;

Kontrol kecepatan variabel, baik, seberapa cepat bergerak film klip. Aku mengatur
kecepatan menjadi nilai acak antara 1 dan 3, dan masing-masing klip video dapat bergerak
dengan kecepatan berbeda. Tentu saja, Anda dapat mengubah nilai ke sejumlah konstan jika
Anda ingin semua klip video Anda untuk bergerak dengan kecepatan yang sama.
/ / Posisi awal
x = this._x=Math.random()*width;
y = this._y=Math.random()*height;

Kedua nilai menentukan posisi awal klip video Anda. Karena aku ingin setiap film mulai dari
lokasi yang berbeda, Anda akan melihat bahwa posisi terjadi secara acak dalam batas-batas
lebar film Anda dan tinggi. Anda dapat melihat fitur yang dengan melihat
variabellebar dan tinggi membuat penampilan mereka bersama dengan fungsi acak.
Jika Anda ingin, Anda dapat menulis dua baris di atas menggunakan empat baris seperti
berikut:
/ / Posisi awal
x = Math.random()*width;
y = Math.random()*height;
this._x = x;
this._y = y;

Karena x dan y yang digunakan dua kali, saya hanya dikombinasikan mereka masing-masing
ke dalam satu baris seperti apa yang Anda lihat dalam kode dalam animasi Flash Anda.
x_new = Math.random()*width;
y_new = Math.random()*height;

Garis ini menentukan di mana posisi akhir klip video Anda akan. Anda memiliki posisi awal
yang saya dijelaskan di bagian atas, dan sekarang Anda memiliki posisi akhir. Perhatikan
bahwa posisi ini juga memperhitungkan lebar dan tinggi dari film Anda dengan
menggunakan favorit kami lebar dan tinggi variabel.
onClipEvent (enterFrame) {

Ini memberitahu Flash yang setiap bagian dari kode yang terdapat setelah baris ini akan
mengeksekusi terus menerus tergantung pada frame rate Anda. Jika frame rate Anda adalah
25, kode akan mengeksekusi 25 kali per detik.
Ini sangat berbeda dari pernyataan onLoad kami sebelumnya. Dalam aksi onLoad kita
sebelumnya, kode akan mengeksekusi sekali ketika klip video yang dimuat. enterFrame
adalah, seperti saya jelaskan di atas, loop terus menerus.
Gerakan
Bagian berikut ini mencakup secara rinci bagaimana klip video bergerak secara horizontal:
/ / X gerakan
if (x_new>this._x) {
sign_x = 1;

} else {
sign_x = -1;
}

Bagian dari kode ini sangat penting. Bagian ini menentukan arah partikel akan
bergerak.Pada dasarnya, dalam laporan jika, saya cek untuk melihat di mana partikel saat
ini (this._x), dan di mana ia akan kemudian (x_new).
Jika posisi partikel adalah di sebelah KIRI posisi terakhir, itu berarti partikel perlu bergerak
KANAN untuk sampai ke posisi akhir. Sejak tepat adalah positif dengan terhadap sumbu (x)
horizontal, sign_x variabel adalah angka positif.
Sebaliknya, jika partikel perlu kepala KIRI karena tujuan akhir adalah di sebelah kiri di mana
partikel saat ini, arah yang ditentukan oleh sign_x mengambil angka negatif.
Saya menggunakan -1 dan 1 sebagai nilai karena saya hanya tertarik pada nilai tanda
arah.Seperti yang akan Anda lihat di bagian berikutnya, jika saya menggunakan nomor
dengan kekuatan lain dari 1, maka akan mengacaukan kecepatan di mana partikel bergerak
masuk
dx = Math.abs(x_new-this._x);

Saya menentukan di baris ini besarnya perubahan antara mana partikel itu dan di mana
akan. Saya menempatkan seluruh pernyataan dalam fungsi nilai absolut (Math.abs) karena
saya tidak terlalu tertarik pada tanda jawaban baru. Misalnya, jika x_new adalah di sebelah
kiri this._x, jumlah itu akan berakhir menjadi negatif!
Pada dasarnya, sebagai klip film Anda mendekati tujuan akhir, nilai dx akan menurun
menuju nol.
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}

Sementara semua bagian kode penting, bagian ini mungkin adalah = PALING penting)
Jika pernyataan cek untuk melihat apakah klip video berada dalam area kecil antara
kecepatan dan kecepatan. Selama klip video berada di luar daerah itu, klip video akan
bergerak pada kecepatan yang ditentukan dalam pernyataan (beban) onClipEvent.
Perhatikan bahwa kecepatan dikalikan dengan variabel sign_x. Jika Anda ingat, kami
sebelumnya belajar bagaimana tanda dari variabel sign_x ditentukan. Dengan begitu, jika
sign_x variabel adalah negatif, this._x meningkat dengan angka negatif - karena itu bergerak
pergi. Jika sign_x positif, posisi klip video bergerak ke kanan.
if ((dx>speed) || (dx<-speed)) {
this._x += sign_x*speed;
} else {
x_new = Math.random()*width;
}

Jika klip video tidak menjadi sangat dekat dengan tujuan akhir, posisi baru ditentukan. Klip
video tidak pernah bersandar dan selalu bergerak. Baris kode ini memastikan bahwa.
Penjelasan untuk gerakan y adalah hampir persis sama dengan penjelasan untuk gerakan
x.Saya mencoba untuk menjaga nama variabel yang sama dengan pengecualian dari _x dan
_y ujungnya, sehingga Anda harus dapat beradaptasi pengetahuan Anda tentang horizontal
(x) gerakan untuk gerakan (y) vertikal.

Membuat Efek Bayangan Sederhana Flash Macromedia

Sebuah efek yang mudah untuk menciptakan efek bayangan. Secara teknis, sobat
simulasikan bayangan dengan menyalin objek, menyisipkan obyek di lapisan yang lebih
rendah, offsetting objek beberapa piksel, dan mengubah warna objek yang terlihat seperti
bayangan.
Animasi berikut menunjukkan contoh efek bayangan diterapkan pada baris teks bersama
dengan sesuatu yang dibuat menggunakan bitmap (Wingding) font:

[Di atas adalah contoh dari bayangan]

Membuat Efek ini: Langkah-langkah berikut akan memandu Anda dalam menciptakan
bayangan:
i.

Buat dokumen baru di Flash MX dengan pergi ke File | New. A, lembar baru kosong Flash MX
akan ditampilkan.

ii.

Dari Toolbox ditampilkan di sebelah kiri, klik ikon Text Tool.

iii.

Setelah Anda mengklik pada ikon Text Tool, klik di area gambar Anda dan menggambar kotak
teks:

[Menggunakan alat teks untuk menarik]

Setelah Anda telah menarik kotak teks, ketik kata "Shadow". Untuk hasil terbaik, membuat teks
Anda besar. Menggunakan ukuran font yang lebih kecil

[Bayangan kata saya hanya menggambar]

Sekarang, pilih teks dan dan pergi ke Edit | Copy. Anda juga dapat menekan Ctrl + C untuk
menyalin teks.

i.

Dengan teks disalin, sekarang saatnya untuk memasukkan layer baru. Masukkan layer baru di
bawah layer Anda saat ini. Untuk melakukannya, klik kanan pada layer yang berisikan text field
Anda (Layer 1 jika Anda mulai dari awal) dan pilih insert layer. Drag layer baru di bawah lapisan
lama Anda:

[Masukkan layer baru di bawah lapisan yang ada]

Sekarang, layer pertama yang berisi teks sobat. Setelah Anda telah mengunci bahwa lapisan,
pilih keyframe kosong pada lapisan yang baru saja dibuat (Layer 2 pada gambar di atas).

i.

Tekan CTRL + SHIFT + V atau pergi untuk mengedit Tempel di Tempat. Setelah teks tersebut
telah disisipkan, tekan Anda panah kanan satu dan panah bawah satu.Teks Anda akan terlihat
seperti gambar berikut:

[Teks tersebut telah disisipkan di bawah teks asli dan bergerak sedikit]

Sekarang, pilih teks menggunakan pointer mouse Anda sehingga Properties Panel dapat
muncul. Dari Properties Panel (ke arah bawah layar Anda) klik Teks (mengisi) tombol warna dan
pilih warna cahaya abu-abu:

[Pilih warna abu-abu gelap untuk teks Anda]

Setelah Anda telah memilih gelap abu-abu, perhatikan bahwa teks yang baru saja dipindahkan
sekitar terlihat seperti itu adalah bayangan:

[Efek bayangan selesai]

Replay! sebenarnya sangat sederhana. Saya terlalu diuraikan beberapa langkah, tetapi jika
tutorial ini adalah untuk ditulis ulang dalam 6 langkah, di sini adalah bagaimana hal itu akan
terlihat seperti:
i.

Buat teks dan menyalin teks yang Anda buat.

ii.

Masukkan lapisan baru untuk pergi di bagian bawah.

iii.

Kunci lapisan atas.

iv.

Paste In Place (Ctrl + Shift + V).

v.

Pilih teks disisipkan dan bergerak di sekitar untuk membuat lokasi bayangan.

vi.

Mengubah warna teks menjadi warna, bayangan lebih gelap.