Iklan adalah produk Laptop Queen. Iklan ini bertujuan untuk mempromosikan ptoduk laptop dengan merek Queen, iklan ini juga menampilkan beberapa seri laptop dari produk Queen. Contoh animasinya seperti Gambar di bawah ini.
Contoh Gambar iklan Laptop Queen
Tahap pertama dalam pembuatan iklan Laptop Queen ini adalah membuat animasi bagian 1. Langkah pembuatannya adalah sebagai berikut :
1. Siapkan stage ukuran 400 x 400 pixel, Background Color : Hitam.
2. Import gambar Background1.png lalu drag ke area stage.
3. Pastikan gambar Background1.png dalam keadaan terseleksi lalu tekan Ctrl+Alt+9 dan Ctrl+Alt+7.
4. Tekan Insert Layer.
5. Import ketiga gambar LaptopA1.png, LaptopB1.png dan Laptop C1.png, lalu tempatkan seperti gambar berikut.
Gambar 32 Menempatkan masing-masing gambar laptop
6. Buat efek bayangan pada ketiga gambar laptop dengan Alpha Amount: 40%.
Gambar 33 Membuat efek bayangan
7. Pilih gambar LaptopA1 dan bayangannya lalu tekan F8, Behavior: Botton beri nama Laptop1_btn dan Registration Point: Tengah, kemudian klik OK.
8. Ulangi langkah sebelumnya yaitu mengubah gambar menjadi tombol pada gambar LaptopB1.png dan LaptopC1.png dengan nama Laptop2_btn dan Laptop3_btn.
9. Klik ganda gambar Laptop1_btn.
10. Aktifkan Text Tool, Font: Arial, Size: 15, Fill Color: Hitam. Lalu ketik teks Queen 01 n, tempatkan seperti Gambar 34.
Gambar 34 Menempatkan teks
11. Tekan F6 pada frame Over lalu import gambar WajahAyu.png. Lalu dengan menggunakan Free Transform Tool tempatkan gambar seperti gambar di bawah ini.
Gambar 35 Menempatkan gambar Wajah ayu.png di area stage
12. Seleksi teks Queen 01 n lalu pada properties ubah Fill Color: Abu-abu (#666666).
13. Tekan F6 pada frame Down lalu ubah kembali warna teks menjadi Biru (#0000FF).
14. Tekan Ctrl+E untuk kembali ke Scene 1.
15. Aktifkan Text Tool, Font: Arial, Size: 15, Fill Color: Hitam. Ketik teks Queen 12 s, tempatkan di bawah gambar Laptop B1. Lihat Gambar 36.
16. Klik ganda gambar Laptop2_btn lalu tekan F6 pada frame Over.
17. Import gambar LayarHijau.png lalu tempatkan pada area layar Laptop B1. Lihat Gambar 37.
Gambar 36 Menempatkan teks
Gambar 37 Menempatkan gambar Layar Hijau.png pada area stage
18. Ubah Text (fill) Color menjadi Abu-abu (#666666).
19. Tekan F6 pada frame Down lalu ubah kembali Text (fill) Color menjadi Biru (#0000FF).
20. Tekan Ctrl+E untuk kembali ke Scene 1.
21. Ulangi langkah membuat Tombol pada gambar laptop3_btn dengan menempatkan gambar Layar 2.png pada frame Over.
22. Tekan Ctrl+S untuk menyimpan animasi dengan nama Laptop Queen.
B.2 Membuat ActionScript
Sekarang kita akan membuat script untuk masing-masing tombol. Ikuti langkah berikut :
1. Pilih gambar Laptop1_btn lalu tekan F9 dan ketik script berikut.
2. Kemudian pilih gambar Laptop2_btn lalu ketik script berikut.
Gambar 40 Script untuk gambar Laptop2_btn
3. Selanjutnya pilih gambar Laptop3_btn lalu ketik script berikut.
Penjelasan Scrip di atas adalah: Apabila tombol di klik maka animasi akan berpindah ke animasi frame 2, 3 dan 4.
B.3 Membuat Animasi ( bagian 2)
Tahap selanjutnya ialah membuat animasi bagian 2. Ikuti langkah-langkahnya :
1. Tekan Insert Layer lalu tekan F7 pada frame 1 dan 2.
2. Pilih frame 2 lalu impor video Computer Lights, tempatkan seperti gambar di bawah ini.
Gambar 42 Menempatkan video Computer Lights
3. Dengan menekan Ctrl, drag frame yang telah memanjang menjadi satu frame saja, sehingga gambar akan tampak seperti di bawah ini.
Gambar 43 Mendrag frame yang memanjang menjadi 1 frame
4. Pilih video Computer Lights lalu tekan F8, Behavior: Movie clip beri nama Video1_mc dan Registration Point: Tengah, kemudian klik OK.
5. Klik ganda Video1_mc untuk masuk ke jendela Edit Symbol.
6. Tekan Insert Layer kemudian Import to Stage gambar LaptopA2, LaptopA3, LaptopA4 dan LaptopA5.
Gambar 44 Mengimport 4 gambar sekaligus
7. Pilih frame 1 lalu pilih menu Modify>timeline>Distribute to Layer.
8. Delete Layer 2.
9. Atur penempatan keempat layer seperti gambar di bawah ini.
Gambar 45 Menempatkan gambar pada masing-masing layer
10. Berikan Create Motion Tween pada keempat layer Laptop.
11. Tekan F6 pada frame 3, 18 dan 20 di semua layer Laptop.
12. Pilih frame 1 lalu pada properties atur Color Styles: Tint dengan Fill Color: Putih.
13. Selanjutnya pilih frame 20 lalu pilih Color Styles: Alpha 0%.
14. Tekan F7 pada frame 21.
15. Klik dahulu Layer 2 lalu drag frame 1 ke frame 20. Ulangi langkah tersebut pada layer yang lain hingga pada timeline akan tampak seperti Gambar 46.
16. Dengan menekan Ctrl drag frame yang berlebih.
Gambar 46 Tampilan timeline
17. Khusus pada layer Laptop A5 pada frame 20 dan 21 lakukan klik kanan lalu pilih Clear Keyframe.
18. Kemudian tekan F6 pada frame 114 dan 120.
19. Pilih frame 120, pada properties atur nilai Alpha: 0%.
20. Tekan Insert Layer lalu drag layer tersebut ke atas.
21. Aktifkan Text Tool, Font: Arial, Size: 35, Fill Color: Putih. Ketik teks Queen, tempatkan seperti gambar di bawah ini.
Gambar 47 Menempatkan teks Oueen pada area stage
22. Ubah teks menjadi simbol Movie Clip dengan Registration Point: Tengah.
23. Klik ganda untuk masuk ke jendela Edit Symbol.
24. Berikan Create Motion Tween pada frame 1.
25. Tekan F6 pada frame 5, 10, 15 dan 25.
26. Pilih frame 5 lalu pilih Color Styles: Tint dengan Fill Color: Abu-abu (#CCCCCC).
27. Untuk frame 10 ubah Fill Color: Ungu gelap (#660066).
28. Selanjutnya untuk frame 20 ubah Fill Color: Abu-abu gelap (#333333).
29. Tekan tanda Symbol 7 di atas panel Timeline.
Gambar 48 Menekan Symbol 7
30. Tekan Insert Layer lalu Import to Stage animasi 3D Arow kemudian pilih menu Modify>Transform>Flip horizontal.
31. Tempatkan 3D Arow seperti gambaar di bawah ini.
Gambar 49 Menempatkan animasi 3D Arow.
32. Pilih gambar animasi 3D Arow lalu tekan F8, Behavior: Botton dan Registration Point: Tengah. Kemudian klik OK.
33. Seleksi kembali aniamsi 3D Arow lalu ketik script berikut.
Gambar 50 Script untuk tombol 3D Arow
Penjelasan scrip tersebut adalah, apabila tombol di klik maka animasi akan kembali ke frame sebelumnya yaitu frame 1.
34. Tekan Ctrl+E untuk kembali ke Scene 1.
35. Tekan Ctrl+S untuk menyimpan ulang animasi yang telah Anda buat.
36. Tekan Ctrl+Enter untuk menjalankan animasi.
B.4 Membuat Animasi ( bagian 3)
Tahap selanjutnya kita akan membuat animasi bagian 3. Ikuti langkah-langkah berikut :
1. Tekan F7 pada frame 3.
2. Import video Circuit Board lalu tempatkan pada area stage.
Gambar 51 Menempatkan video Circuit Board
3. Dengan menekan Ctrl, drag kembali frame yang memanjang menjadi satu frame saja.
4. Ubah video menjadi Movie Clip, dengan Registration Point: Tengah.
5. Klik ganda Movie Clip.
6. Selanjutnya tekan Insert Layer kemudian Import to Stage gambar Laptop B2.png, Laptop B3.png, Laptop B4.png, Laptop B5.png dan Laptop B6.png.
7. Kemudian pilih menu Modify>Timeline>Distribute to Layers.
8. Atur urutan Layer seperti gambar berikut.
Gambar 52 Mengatur penempatan layer
9. Tempatkan kelima gambar Laptop seperti gambar di bawah.
10. Pilih layer 2 lalu tekan Deleta Layer.
11. Berikan Create Motion Tween pada semua layer Laptop.
12. Tekan F6 pada frame 4, 13, 15 dan 18 di semua layer Laptop.
13. Pilih frame 1 di semua layer laptop lalu beri nilai Alpha: 0%.
14. Selanjutnya pilih frame 15 dari semua layer Laptop lalu pilih Color Style: Tint dengan Fill Color: Putih.
15. Tekan F6 pada frame 65 dan 70 pada semua layer Laptop.
16. Tekan F6 pada frame 4, 13, 15 dan 18 di semua layer Laptop.
17. Pilih frame 70 lalu beri nilai Alpha: 0%.
18. Klik Layer Laptop B3 dan Laptop B4 lalu drag frame 1 ke frame 15. Lihat gambar di bawah ini.
Gambar 54 Men-drag frame pada layer Laptop B3 dan Laptop B4
19. Klik layer Laptop B2 lalu drag frame 1 ke frame 29.
20. Tahan Ctrl lalu drag frame yang berlebih.
21. Tekan Insert Layer, lalu ulangi membuat animasi teks Queen seperti langkah sebelumnya.
22. Kembali tekan Insert Layer lalu drag animasi 3D Arow lalu tempatkan di tempat yang sama.
Gambar 56 Menempatkan animasi 3D Arow
23. Pilih kembali gambar animasi 3D Arow lalu tekan F8, Behavior: Botton dan Registration Point: Tengah, kemudian klik OK.
24. Seleksi aniamsi 3D Arow lalu ketik script yang sama yaitu:
Gambar 57 Script untuk tombol 3D Arow
25. Tekan Ctrl+E untuk kembali ke Scene 1.
26. Tekan Ctrl+S untuk menyimpan ulang animasi.
27. Tekan Ctrl+Enter untuk menjalankan animasi.
B.5 Membuat Animasi ( bagian 4)
Selanjutnya untuk membuat animasi bagian 4, ikuti langkah berikut :
1. Tekan F7 pada frame 4.
2. Import video E-Commerce 1 lalu tempatkan pada area stage. Lihat Gambar 58.
Tempatkan teks Queen di sini
3. Pastikan video ini hanya berupa 1 frame seperti sebelumnya.
4. Ubah video menjadi symbol Movie Clip.
5. Klik ganda video untuk masuk ke jendela Edit Symbol.
6. Tekan Insert Layer lalu Import to Stage gambar Laptop C2.png, Laptop C3.png, Laptop C4.png dan Laptop C5.png.
7. Pilih satu persatu gambar Laptop lalu tekan Ctrl+Alt+9 dan Ctrl+Alt+7.
8. Kembali klik frame 1 lalu pilih menu Modify>Timeline>Distribute to Layers.
9. Atur penempatan layer seperti gambar di bawah ini.
10. Berikan Create Motion tween pada frame 1 di semua layer Laptop.
11. Tekan F6 pada frame 4, 15 dan 20.
12. Pilih frame 1 di semua layer Laptop lalu atur nilai Alpha: 0%.
13. Selanjutnya pilih frame 20 lalu pada properties atur Color Styles: Brighness dan Brighness Amount: 70%.
14. Tekan F7 pada frame 21 pada semua layer Laptop.
15. Klik layer Laptop C3 lalu drag frame 1 ke frame 20.
16. Ulangi langkah mendrag satu persatu frame pada masing masing layer Laptop seperti gambar di bawah ini.
17. Drag frame berlebih.
18. Buat laer baru lalu ulangi langkah membuat animasi teks seperti pada langkah Membuat Animasi bagian 2, halaman 21 sampai 28.
19. Selanjutnya buat layer baru lagi untuk gambar animasi 3D Arow.
20. Ubah menjadi tombol Botton lalu ketik Script yang sama.
21. Tekan Ctrl+S untuk menyimpan ulang animasi yang telah Anda buat.
No comments:
Post a Comment