July 25, 2024

Membuat Animasi Sederhana Pada Halaman Intro

2 min read

Artikel kali ini saya mencoba untuk membuat sebuah halaman depan atau halaman intro dengan menggunakan efek animasi masking sederhana, sebenarnya untuk animasi halaman depan tergantung kreatifitas yang kita gunakan. Apa yang dimaksud intro disini? apabila website tersebut dikunjungi tidak langsung ke halaman utama, namun terlebih dahulu disuguhkan oleh sebuah halaman yang umumnya adalah ucapan selamat datang atau navigasi, ada juga yang berupa gambar animasi ataupun dalam bentuk flash, di artikel ini saya membuat halaman tersebut dengan menggunakan Adobe Flash CS3.

Langkah 1

Siapkan dua buah gambar, disini saya memilih gambar bunga. Gambar dapat diunduh [download id=”79″]

Langkah 2

Siapkan stage dengan background berwarna hitam.

Pada layer satu masukkan Gambar Satu dengan cara File > Import > Import Stage.

Tambahkan layer baru dengan cara klik insert layer, kemudian masukkan gambar dua dengan cara yang sama dengan langkah sebelumnya.

Langkah 3

Hide terlebih dahulu layer kedua, Pada layer ke 1, kemudian pada gambar satu lakukan perintah Modify > Convert To symbol, pilih type movie clip klik OK.

Tambahkan Keyframe pada Frame 10 Layer 1, kemudian Create Motion Tween.

Kemudian klik pada gambar atur, pada bagian properties, atur color = apha setting menjadi 0%.

Langkah 4

Insert frame pada frame 40 di layer 1.

Di layer 2, Insert Blank Keyframe pada frame 10, tambahkan layer ke 3 klik kanan pada layer 3, pilih mask.

Kemudian Insert Frame kembali di Layer 2 frame 39.

Langkah 5

Untuk membuat animasi kotak, lakukan Insert Blank Keyframe di layer 3 Frame 10,masih di frame yang sama buat lah sebuah kota berwarna putih dengan stroke color juga berwarna putih.

Masih pada Layer 3, Insert keyframe pada frame 20 di layer 3, kemudian properties pilih tween ubah menjadi shape.

Sebelumnya untuk membuat efek rectangle yang membesar, pada layer 3 Frame 10 ubah menjadi lebih kecil dengan fasilitas free transform tool.

Langkah 6

Lakukan langkah yang sama untuk membuat efek animasi kotak yang lebih dari satu, tambahkan layer ulangi langkah yang sama atau dengan cara copy dan paste frame. Ubah posisi setiap rectangle nya agar tidak saling menutupi satu sama lain.

Langkah 7

Untuk menambahkan tulisan “welcome”, tambahkan layer baru, kemudian klik kanan pada frame 10 layer 8 > insert keyframe tuliskan huruf W, kemudian pada di layer sama pada frame 12 lakukan insert keyframe dan tuliskan huruf E, lakukan langkah yang sama di frame selanjutnya dan menuliskan huruf c, o, m dan e.

Hasil Akhir

Selamat mencoba, silahkan berkreasi 😀

0 thoughts on “Membuat Animasi Sederhana Pada Halaman Intro

  1. href=’#comment-4481′>@fajar –
    arghhhhhhh…… Fajar..namaku niar ..bukan astrid……….catet

    href=’#comment-4483′>@nissa – <a lanjutkan semangat 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.