Tutorial macromedia flash

Membuat Animasi Flash dengan PHP dan Ming

2009-01-01T11:19:00.000-08:00

Mohammad DAMT

Dilengkapi banyak contoh, Mdamt memperkenalkan cara mengakses library Ming dari PHP untuk generasi animasi Flash secara dinamik.

Situs-situs dengan animasi Flash sekarang makin digemari. Bukan saja karena dapat membuat tampilan lebih menarik, namun juga bisa membuat suatu situs menjadi interaktif secara instan.

Animasi Flash bisa dibuat dengan berbagai macam software selain Macromedia Flash. Dengan menggunakan library Ming buah karya Dave Hayden, kita bisa membuat animasi Flash sendiri menggunakan PHP, C, C++, Python, atau Ruby. Dalam artikel ini saya akan mengupas sedikit mengenai pembuatan animasi Flash dengan PHP. Di PHP sendiri, selain dengan Ming, kita juga bisa menggunakan libswf atau PHP Flash Turbine dari Blue Pacific. Namun keunggulan Ming dari dua library di atas adalah bahwa Ming adalah produk open source.

Instalasi

Instalasi Library

Library Ming menggunakan lisensi LGPL dan source codenya tersedia bebas. Silahkan download terlebih dahulu lalu ekstrak sourcenya. Setelah terekstrak, ketikkan:

$ cd ming-0.1.1
$ make
$ su -c 'make install'

Perintah-perintah di atas menginstruksikan sistem untuk menginstall library Ming di dalam direktori /usr/lib.

Instalasi Modul PHP

Ming dapat diinstal mulai dari PHP versi 4.0.2, dan sejak versi 4.0.5, Ming sudah dimasukkan sebagai fungsi builtin PHP. Untuk menginstal modul Ming, PHP perlu dikompile dengan parameter --with-ming=/usr.

Apabila tidak ingin mengkompile ulang PHP, download saja file php_ming.so dan masukkan ke dalam konfigurasi di file php.ini. Tambahkan baris berikut ke file php.ini.

extension=php_ming.so

Jangan lupa untuk meletakkan file php_ming.so ke dalam direktori modul PHP yang benar.

Konsep Dasar

Flash Object

Dalam Ming, semua komponen animasi Flash adalah objek yang bisa langsung dimanipulasi melalui metode dan atribut yang disediakan. Karena itu, latar belakang pengetahuan mengenai pemrograman berorientasi objek (OOP) pada PHP akan sangat membantu.

Twips

Semua nilai jarak, panjang, ukuran, dan sebagainya, diukur dalam satuan twips (twenty units per pixel). Jadi dua puluh satuan pada Flash sama dengan satu pixel di layar. Namun demikian, kenyataan di layar bisa berbeda, karena Flash akan secara otomatis melakukan skala terhadap angka panjang dan lebar layar animasi yang didefinisikan pada tag <EMBED> atau <OBJECT> di HTML atau bahkan akan melakukan skala sebesar panjang dan lebar browser bila Anda tidak mendefinisikan tag tersebut.

Animasi

Animasi Flash dibentuk dari urutan-urutan frame. Tiap-tiap frame dapat berisi objek gambar statik ataupun frame dari animasi lain. Jadi sebuah animasi Flash dapat berisi animasi Flash yang lain. Kita dapat menentukan besar laju frame pada suatu animasi Flash, namun kadang kala laju frame dapat diperlambat apabila player Flash yang tersedia tidak cukup cepat untuk menggambar isi frame dalam laju waktu tersebut, kecuali apabila kita menggunakan streaming audio, yang mana kualitas suara akan diutamakan hingga tidak terdengar terputus-putus.

Objek Flash

Pada artikel ini, saya tidak membahas semua objek Flash yang dapat diakses dari Ming, tetapi saya akan bahas tiga buah objek saja, yaitu Movie, Shape, dan Text. Objek-objek Flash lainnya telah menunggu untuk Anda eksplorasi.

Movie

Movie merupakan animasi utama dalam suatu animasi Flash. Semua yang ditampilkan di layar adalah isi dari objek Movie. Untuk membuat movie baru, kita buat objek movie:

$movie = new SWFMovie();

Kemudian kita perlu menentukan ukuran dimensi layar animasi Flash dengan metode berikut:

$movie->setdimension(1600,1200);

Dalam kode di atas kita membuat dimensi animasi Flash sebesar 800 x 600 pixel (ingat Twips!). Kita juga bisa menentukan laju frame (misalnya 20 frame per second) dengan kode:

$movie->setrate(20.0);

Lalu kita juga bisa mendefinisikan warna latar belakang animasi kita dengan kode:

$movie->setbackground(0x00,0xff,0x00);

Pada contoh di atas, kita baru saja membuat warna latar belakang menjadi warna hijau (kode RGB #00FF00).

Yang perlu kita ingat adalah bahwa semua yang kita buat dalam animasi Flash tidak akan bisa tampil di layar bila kita belum mengeluarkan perintah berikut:

header('Content-type: application/x-shockwave-flash');
$movie->output();

Perintah header() akan menginstruksikan kepada browser untuk menyiapkan player Flash untuk menampilkan data animasi yang barusan kita buat. Lalu $movie->output() akan mengirimkan data animasi tersebut untuk ditampilkan oleh player Flash. Dua baris kode di atas biasanya akan kita tempatkan pada akhir program, sebagaimana kita bisa lihat pada contoh di Listing 1.

Shape

Sekarang kita akan berkenalan dengan shape. Shape adalah suatu objek geometri dan dapat berupa garis, kurva, atau glif. Garis-garis yang membentuk area dapat kita isi dengan warna tertentu. Untuk membuat shape, kita tinggal membuat objek shape baru:

$shape = new SWFShape();

Untuk mulai menggambar, kita perlu menentukan ketebalan garis dan warna yang digunakan dengan metode setline() sebagaimana dicontohkan kode berikut:

$shape->setline(80,0xff,0x00,0x00);

Kode di atas akan menginstruksikan Flash untuk nantinya menggambar dengan ketebalan garis sebesar 80 twips dan menggunakan warna merah (#ff0000). Setelah sebuah garis didefinisikan, kita dapat memulai menggambar dengan garis tersebut. Pertama kali kita tempatkan kursor gambar di koordinat yang kita inginkan, misalnya:

$shape->movepento(1000,1000);

Kode di atas menempatkan kursor ke koordinat x = 1000 dan y = 1000.

$shape->drawline(500,500);

Baris di atas menggambar garis dari lokasi koordinat asli (1000,1000) ke koordinat baru (1500,1500). Yang barusan kita lakukan adalah penggambaran shape dengan cara relatif. Artinya, penggambaran garis berikutnya dilakukan pada jarak relatif terhadap koordinat asli. Bila pada pertama kali kita tempatkan kursor pada koordinat (1000,1000), lalu kita gambar garis dengan drawline() dengan parameter (500,500), berarti koordinat terakhir adalah (1000+500,1000+500)=(1500,1500).

Metode penggambaran yang lainnya adalah dengan menggunakan koordinat absolut. Untuk mendapatkan hasil yang sama dengan gambar pada contoh sebelumnya, kode kita untuk absolut adalah:

$shape->movepento(1000,1000);
$shape->drawlineto(1500,1500);

Pada baris kedua di atas kita menggunakan perintah drawlineto() dan bukan drawline(). Artinya koordinat yang kita sebutkan dalam parameter adalah koordinat absolut.

Garis yang barusan kita gambar tidak akan ditampilkan di layar sebelum kita berikan perintah berikut:

$movie->add($shape);

Artinya, objek $shape yang sudah kita buat akan ditambahkan ke frame aktif saat ini pada movie Flash. Kode lengkapnya bisa Anda perhatikan pada Listing 2.

Text

Ming telah menyediakan objek Text untuk menulis sebuah string pada animasi Flash. Untuk menuliskan sebuah teks di layar, kita pertama kali perlu meload font yang digunakan dengan menggunakan objek Font.

$font = new SWFFont("test.fdb");
$text = new SWFText();
$text->setfont($font);

Kode di atas akan meload font bernama test.fdb (font ini disediakan di file ming-examples.tgz di situs Ming). Font tersebut kemudian kita gunakan dengan perintah setfont().

Perhatikan bahwa tipe font yang didukung oleh Ming hanyalah tipe font fdb. Anda dapat memperoleh font dengan tipe ini di Internet atau membuat sendiri. Bila Anda ingin membuat sendiri font fdb dari suatu font TTF, yang harus Anda lakukan adalah menuliskan sembarang teks di Macromedia Flash dengan font tersebut, lalu simpan sebagai Generator Template. Kemudian gunakan utiliti makefdb yang disediakan oleh Ming (ada di dalam subdirektori util/) untuk menghasilkan font fdb dari file Flash yang baru Anda buat tadi.

$text->setHeight(50);
$text->setColor(0xff, 0x00, 0x00);
$text->moveTo(200, 200);
$text->addString("Flash Gordon v.s. Emperor Ming");

Kode di atas akan menuliskan kalimat Flash Gordon v.s. Emperor Ming pada koordinat (200,200) dengan warna merah dan tingginya 50 twips. Kode lengkapnya bisa disimak pada Listing 3.

Animasi

Seperti dijelaskan sebelumnya, animasi Flash adalah kumpulan frame-frame. Semua objek yang ditampilkan di player Flash sebenarnya adalah frame yang aktif. Suatu frame akan ditampilkan secara bergantian di layar dengan laju kecepatan yang ditentukan dengan perintah setrate().

Semua kode yang telah kita bahas di atas adalah sebuah animasi Flash dengan frame tunggal. Lalu bagaimana kita menggambar animasi Flash dengan banyak frame ? Mudah saja. Kita dapat menggunakan perintah nextframe() untuk menginstruksikan player Flash bahwa kita akan menggambar pada frame selanjutnya. Perintah ini mirip dengan fungsi Insert Keyframe di Macromedia Flash.

Sebagai contoh, kita akan menuliskan kalimat Flash Gordon v.s. Emperor Ming dan kita animasikan agar tulisan tersebut berjalan dari koordinat awal ke (0,0) dengan kode berikut:

$text->addString("Flash Gordon v.s. Emperor Ming");

$animasi = $movie->add($text);
for ($i=0;$i<50;$i++) {
  $animasi->move(5,5);
  $movie->nextframe();
}

Perhatikan pada baris

$animasi = $movie->add($text);

di sini kita membuat sebuah objek yang disebut DisplayItem. Objek ini adalah keluaran dari hasil metode add() sebuah objek Flash dan bisa selanjutnya kita modifikasi baik ukuran, lokasi, dan sebagainya. Pada contoh di atas yang kita modifikasi adalah lokasinya. Lokasi tulisan kita pindahkan ke koordinat relatif (5,5) twips dari koordinat awal sebanyak 50 kali. Setelah kita pindahkan, kita perintahkan player Flash untuk menggambar di frame baru dengan perintah nextframe(). Pada contoh di atas kita baru saja membuat animasi Flash dengan frame sebanyak 50 buah. Silakan disimak juga beberapa contoh animasi pada Listing 6.

Action

Kita bisa memperoleh kontrol terhadap animasi yang kita buat dengan bantuan Action. Action memungkinkan kita untuk menuliskan suatu skrip pada animasi Flash. Syntaxnya mirip dengan C dan fungsinya mirip dengan ActionScript pada Macromedia Flash.

Fungsi-fungsi lengkap Action bisa Anda lihat pada manual Ming di bagian objek SWFAction. Sebagai contohnya kita akan modifikasi contoh pada Listing 4. Pada bagian akhir kode kita tambahkan

$movie->add(new SWFAction("gotoFrame(0); stop();"));

Action di atas menginstruksikan player Flash untuk kembali ke frame 0 dan menghentikan animasi. Kode lengkapnya ada di Listing 5. Sebagaimana ActionScript pada Macromedia Flash, pemanfaatan Action hanya dibatasi oleh imajinasi Anda.

Action Script Dasar Flash

2008-12-04T09:16:00.000-08:00

Array dalam Flash

Array adalah suatu kumpulan data yang bertipe sama. Contoh array nama-nama hari berisi (“minggu”, “senin”, “selasa”, “rabu”, “kamis”, “jumat”, “sabtu”). Dalam flash untuk membuat sebuah array terdapat 2 cara yaitu:

variabel = new Array();

Action new dalam flash merupakan sebuah perintah untuk membuat obyek baru. Karena new diikuti oleh Array(), berarti kita membuat obyek baru bertipe array. Contoh aplikasi penggunaan action newArray(); adalah sebagai berikut :

namaHari = new Array(“minggu”, “senin”, “selasa”, “rabu”, “kamis”, “jumat”, “sabtu”);
trace(namaHari[1]);

Hasil program diatas adalah SENIN, hal ini dikarenakan perhitungan dimulai dari angka 0.

Sedangkan cara kedua adalah

variabel = [ ]

Dalam flash simbol [ ] dapat digunakan untuk menyatakan beberapa hal, salah satunya adalah untuk mengeset sebuah nilai array. Contoh :

namaHari = [“minggu”, “senin”, “selasa”, “rabu”, “kamis”, “jumat”, “sabtu”];
trace(namaHari[1]);

Script tersebut menghasilkan nilai yang sama dengan script sebelumnya.
[edit]
Dimensi Array

Array memiliki sebuah dimensi atau kedalaman. Yang paling umum digunakan adalah array berdimensi satu dan aray berdimensi 2. Contoh array berdimensi 1 adalah sebagai berikut :

namaHari = [“minggu”, “senin”, “selasa”, “rabu”, “kamis”, “jumat”, “sabtu”];

Sedangkan array berdimensi dua adalah sebagai berikut :

pola = [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0],
[0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
[0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0]]

Tips : Untuk memahami dimensi array, cukup dengan melihat berapakah jumlah simbol [ di awal pengesetan array.

Penggunaan array sangat bervariasi dan salah satunya array sangat bermanfaat dalam proses pembuatan tiling game.

PENJELASAN USER INTERFACE

2008-12-04T09:14:00.000-08:00

User interface di Flash terbagi atas 5 bagian, yaitu:

1. Stage
Stage merupakan daerah yang bewarna putih, dimana area kerja utama jika anda ingin membuat animasi maupun aplikasi flash lainnya. Seluruh objek/gambar/animasi yang ada di stage nantinya akan tampil di flash movie, dan sebaliknya apabila objek/gambar tersebut berada di daerah abu-abu di pinggiran Stage tidak akan terlihat di flash movie.

2. Tools
Merupakan kumpulan alat gambar dan mewarnai sesuatu yang ada di stage.

3.Panel
Merupakan kumpulan kotak-kotak yang berfungsi untuk mengubah, mengatur dan mempercantik objek yang ada di stage. Misalkan memberi warna gradasi, meletakan objek persis di tengah stage, dan merotasi objek dengan sudut yang tepat.

4. property inspector
merupakan bagian informasi objek yang ada di stage. sebagai contoh, klik saja salah satu objek di stage, maka informasinya akan terlihat disini. atau klik saja di daerah kosong yang ada di stage, maka informasi mengenai stage akan terlihat.

5. Timeline
terdiri dari baris dan kolom.
Kolom berhubungan dengan waktu, baris berhubungan dengan objek. Setiap software animasi pasti memliki timeline untuk mencatat aktivitas objek kapan harus tampil di stage dan kapan harus menghilang.

PENGENALAN TOOL UTAMA DALAM FLASH
_________________________________

1. selection tool (V)
Merupakan tool utama yang berfungsi untuk menseleksi benda, baik berupa shape, line, titik maupun symbol

2. subselection tool (A)
Merupakan tool utama yang berfungsi untuk menseleksi dan memodifikasi titik maupun garis (stroke)

3. Free Transform Tool (Q)
Merupakan tool yang berfungsi untuk memodifikasi scale(skala),skew(kemiringan), rotation(rotasi), distorsi, dan envelop

4. Gradien transform tool(F)
Merupakan tool yang berfungsi untuk memodifikasi warna warna gradasi .

5. Line tool (N)
Tool yang berfungsi untuk membentuk garis

6. Laso Tool (L)
Tool yang berfungsi untuk menyeleksi benda

7. Pen Tool (P)
Tool yang berfungsi untuk membuat sebuah bentuk path, dapat di gunakn juga untuk tracing.

8. Text Tool (T)
Tool yang berfungsi untuk membuat tulisan

9. Oval Tool (O)
Tool yang berfungsi untuk membuat bentuk lingkaran

10.Rectangle Tool ®
Tool yang berfungsi untuk membuat bentuk kotak.
Rectangle Tool juga memiliki sub tool, yakni polystar Tool yang berfungsi membuat bermacam bentuk segi.

11. Pencil Tool (Y)
Pencil Tool berfungsi untuk membuat goresan yang seperti pensil. setiap goresan akan menjadi tipe stroke

12. Brush Tool (B)
Berfungsi untuk membuat goresan seperti brush(kuas) yang merupakan tipe fill.

13. Ink bottle Tool (S)
berfungsi untuk membuat stroke

14. Paint bucket (K)
Berfungsi untuk membuat fill

15. Eye dropper (I)
berfungsi untuk mengambil sampel warna

16. Eraser (E)

HAL-HAL DASAR DALAM FLASH
_______________________________
1. Mengetahui dan mengubah properti
Property inspoector merupakan salah satu bagian yang sangat penting di flash.
Disini kalian bisa melihat properti/informasi detail tiap objek,

Cobalah Klik daerah kosong di stage, kemudian kita bisa melihat ada beberapa informasi:
size : 550 x 400. yang berarti tinggi stage adalah 550 pixel dan lebar stage 400 pixel.
Background: warna stage
Frame Rate: 12 fps (12 frame per second) yang berarti dalam 1 detik akan di jalankan 12 frame.
sedangkan tombol publish setting berfungsi untuk mengatur settingan detail pada saat akan mempublikasi file flash yang telah kita buat. (akan di bahasi di tutorial bagian akhir)

2. Mengerti konsep shape dan sifatnya
shape terdiri dari garis(stroke) dan warna isian (fill). Kita akan belajar memahami sifat sifat dari shape karena banyak orang yang kebingungan bila tidak memahami sifat shape.

##Fill
shape merupakan warna isian dari sebuah shape.

##Stroke
Stroke tidak memiliki garis karena stroke itu sendiri adalah garis.
Dengan adanya stroke style, bentuk stroke bisa di ubah menjadi beberapa pilihan.
cara mengubah stroke style:
seleksi terlebih dahulu stroke obyek yang ada, kemudian pilih stroke style di bagian property inspoector.
(setting default stroke style adalah solid)

ketika membuat sebuah shape, secara otomatis terbentuk fill dan stroke.
namun fill dan stroke ini bisa dipisahkan.
Cobalah klik 1x daerah fill, maka kita hanya menseleksi fill nya saja.
Untuk menseleksi kedua nya, klik 2x daerah fill.
untuk menseleksi stroke nya saja, klik 1x pada stroke.
untuk memisahkan fill dan stroke, seleksi fill atau stroke, lalu drag/tarik.
untuk melepas seleksi, klik daerah luar/workspace/stage yang tidak ada objek.

Dan perlu diingat, pemberian warna stroke dan fill memiliki cara yang berbeda.
Untuk memberi warna garis atau stroke, gunakanlah ink bottle Tool (S)
Untuk memberi warna fill, gunakanlah Paint bucket Tool (K)
Apabila shape sudah berisi warna dan ingin mengubahnya,pilih selection Tool (V) seleksi fill atau stroke yang akan di ubah warna nya, selanjutnya pada Tool Color, kita bisa menggunakan stroke color untuk mewarnai garis dan fill color untuk mewarnai daerah isian warna.

3. Group dan Ungroup
cobalah buat 2 bentuk lingkaran atau kotak yang jaraknya berjauhan, kemudian seleksi 1 objek di antaranya lalu pindahkan tepat di atas objek yang lain (menimpa), lalu pisahkan.
Yang terjadi adalah obejk yang tertimpa menjadi rusak.

Untuk menghindari hal ini, gunakanlah grup dengan cara seleksi terlebih dahulu objek yang akan di grup, lalu tekan menu Modify>Grup atau gunakan shortcut CTRL+G.
Untuk memecah grup, gunakan ungroup dengan cara pilih menu Modify>Ungroup atau dengan shortcut CTRL+SHIFT+G.

Perlu di ingat, objek yang sudah digrup tidak dapat diubah warnanya secara langsung seperti biasa.
Jika ingin mengubah warna objek, bisa di lakukan dengan cara masuk ke dalam grup dengan cara klik 2 kali grupnya, lalu ubah warna nya. atau dengan cara mengungroup terlebih dahulu objek tersebut.

4. Zoom dan Hand Tool

Zoom tool (gambar kaca pembesar, shortcut Z) berfungsi Untuk memperbesar dan memperkecil tampilan objek-objek yang ada di stage.
klik zoom tool, lalu klik pada stage untuk zoom-in, untuk zoom-out tahan tombol Alt, lalu klik.
Adapun cara alternatif selain zoom tool adalah CTRL + dan CTRL -

Hand Tool (gambar tangan, shortcut H) berfungsi sebagai penggeser tampilan stage.
Adapun cara alternatif dengan cara menahan tombol spasi.

Cara Membuat Logo Animasi

2008-12-04T09:05:00.000-08:00

Untuk memulainya silahkan buka vector logo design dalam Adobe Illustrator.

Export vector logo file diatas menjadi sebuah Macromedia SWF file dan select Preserve Editability checkbox.

Buka Macromedia Flash dan ciptakan new document dengan dimensi yang telah anda tentukan sebelumnya, dan pastikan Frame Rate menjadi 24fps untuk sebuah smooth animation.

File > Import > Import to Stage dan pilih logo SWF file anda. Ini akan menempatkan logo dalam format vector dalam Flash artboard

Select semua objects yang membuat bentuk lemon shape dan group ken mereka dengan menekan (Ctrl/CMD + G), lalu "Cut" lemon dan "Paste" pada layer baru. Ingat untuk memberi nama pada layer2 anda untuk referensi kedepannya.

Pilih frame 50 pada kedua layer dan Masukkan sebuah Keyframe (Click Kanan > Insert Keyframe), ini akan memberikan beberapa space pada timeline untuk bekerja.

Dalam frame pertama, Copy gambar lemon lalu drag gambar tsb kedalam stage secara vertical. Masukkan sebuah Keyframe pada frame 5 dan Edit > Paste In Place, lemon nya, hapus lemon yang di atas pada frame ini.

Klik kanan antara kedua Keyframes ini dan select Create Motion Tween. Anda akan melihat warna biru dan symbol panah antara frames tersebut.

Masukkan sebuah Keyframe pada frame 7, lalu kembali pada frame 5 pindahkan lemon kebawah secara pelan-pelan dengan Free Transform Tool, tahan ALT untuk merubah satu sudut.
Ciptakan sebuah Motion Tween antara frames 5 dan 7.

Ciptakan layer baru dibawah layer lemon dan berinama Shadow. dalam layer ini gambar sebuah oval dengan gradient abu-abu ke putih dari tengan. Pakai Gradient Transform Tool untuk me-ngedit bentuk dari gradient untuk memberikan perspective.

Masukkan sebuah Keyframe pada frame 5 pada layer ini dan skala perkecil bayangandan berikan kesan bahwa lemon sangat jauh. Ciptakan sebuah Motion Tween antara frame2 ini.

Untuk memulai getaran pada lemon, Masukkan sebuah Keyframe pada frame 53 dan 56. Rubah ukuran lemon menjadi lebih besar sec. perlahan2 pada frame 53. Ciptakan sebuah Motion Tween antara frames 50-56.

Copy frames ini dan Paste pada frame 65 untuk getaran perulangan.

Untuk menciptakan getaran lebih cepat masukkan sebuah Keyframe pada 75, lalu Copy frame 68 dan Paste pada frame 77.

Copy frames antara 75-77 dan paste pada frames 79, 82, 85 dan 91 untuk mengulangi getaran pelan dan cepat.

Ciptakan sebuah getaran yang lebih cepat dengan meng-Copy frame 77 dan mem-Paste nya pada frame 94, Copy frame 77 dan Paste pada 95, lalu Copy frames 94-95. Paste frame ini pada 96, 98, 100, 102, 104, 106, 108 dan 110.

Untuk mengakhirinya buatlah lemon pop dan menghilang masukkan sebuah Keyframe pada 112 dan perbesar lemon. Pada panel properties rubah warna ke Alpha dan set pada 50%.

Masukkan sebuah Blank Keyframe (Click Kanan > Insert Blank Keyframe) pada frame 114.
Pindahkan layer2 Shadow dan Logo kedalam layer yang sekarang ini pada timeline dengan inserting frames (F5) pada frame 150.

Jika kamu ingin memainkan animation ini tekan (Enter) kamu akan melihat bagaimana semua Motion Tweens memerikan lemon sebuah animasi, bagaimanapun juga hal yang sama harus terjadi pada bayangan untuk mengikuti pergerakan bentuk dari lemon.
Pada layer Shadow masukkan Keyframes untuk menyamakan layer Lemon diatas dan merubah bayangan menjadi lebih besar secara tepat pada frame 53. Ciptakan Motion Tweens antara 50-55.

Copy frames 50-55 dan paste pada frame 65.
Ulangi proses ini sama seperti yang anda lakukan pada lemon, sampai bayangan memiliki getaran pergerakan yang sama dengan lemon.masukkan sebuah Blank Keyframe pada frame 113

Satu langkah terakhir adalah untuk membuat warna putih mendahului bayangan pada logo text. Mudah dengan men-drag layer Text menjadi diatas layer Shadow.

Tekan Ctrl + Enter untuk mem-publish animation menjadi SWF. ilmuwebsite.com

MP3 Audio Player

2008-11-26T18:41:00.000-08:00

This tutorial uses the Audio Player Wordpress plugin from 1pixelout. Please download the .zip file from that site. You will need to unzip the files and use two of them:

* player.swf (this is the audio player)
* audio-player.js (this is the JavaScript)

These instructions concern using that player on non-Wordpress HTML pages.

You must have some Web space that you control (that is, server space) to which you will upload these files as well as your audio files.

If you are using Internet Explorer, you will probably need to click the player twice to make it play. (All other Web browsers will let you click once.) If you do not see the MP3 player, then you don't have the Flash player installed. (More than 90 percent of all Internet users do have it.)
Tutorial

For this tutorial, let's imagine that your server space is at this URL: www.fakedomain.com/myname/

1. Create a new folder on your Web server and name it "audio"
2. Upload the two files for the audio player (player.swf and audio-player.js) to the audio folder.
3. Upload an MP3 file to the audio folder. For this tutorial, let's assume your file is named music.mp3. (NOTE: The MP3 file must be encoded at 44.1 kHz, or 22.05 kHz, or 11.025 kHZ; any other sampling rate will result in the "chipmunk effect," which you really would not like.)

Now that your three files are uploaded, they reside at these URLs:

* http://www.fakedomain.com/myname/audio/player.swf
* http://www.fakedomain.com/myname/audio/audio-player.js
* http://www.fakedomain.com/myname/audio/music.mp3

The next step is to place the HTML for this player on the Web page where you want it to appear. Change the URLs shown below to match your own URLs.

If You Use Blogger

To use this player with a blog hosted at Blogger, take out all the code above the tag and place it in your Blogger template (instead). In the Blogger template, place it above the tag, as shown:

Then each time you use the player in a blog post, you will paste only the code into your blog post.
Using More Than One Audio File

You can simply upload additional audio files to the same "audio" folder on your Web server. Make sure each file has a unique filename.

You do not need to upload the two files for the audio player (player.swf and audio-player.js) more than once.
Placing More Than One Player on the Same Page

For a second player on a page, use this HTML:

For a third player on the same page, change "2" to "3" in the HTML, etc.

Exporting Animation

2008-11-26T18:37:00.000-08:00

Audio player

Since Flash Player 6, Flash movies (.swf files) have had the capability to load MP3 files during runtime. You can also import other audio file formats into a Flash document (.fla file) during author-time. Sounds can be attached to keyframes or buttons, for background tracks or sound effects. A sound file’s bytes can be distributed evenly across a timeline, so that the SWF file can be progressively downloaded into the Flash Player, enabling a movie to start playing before the entire sound file has been downloaded.

Multimedia authoring program

If the heart of Flash is a vector-based drawing program, then the body of Flash is a multimedia- authoring program (or authoring environment). Flash documents (.fla files) can contain multi- ple media assets, including sound, still graphics, animation, and video. Moreover, Flash is a powerful tool for creating truly interactive content because it allows you to add (ActionScript) commands to dynamically control movie (.swf file) playback. Whether you are designing sim- ple menu systems or customized and intuitive experimental interfaces, Flash content can be authored to recognize and respond to user-input.

Animation sequencer

Most multimedia-authoring programs have a component for sequencing content as anima- tion, and Flash is no exception. But in Flash, the animation sequencer is the core of the appli- cation. The Timeline window controls the display of all content — static or animated — within your Flash project. Within the Timeline window, there are two areas that allow you to orga- nize content in visual space and in linear time.

Layers and layer folders allow you to keep track of content that has been placed into your Flash document. The visibility of each layer can be controlled independently to make it easier to isolate specific elements as you are authoring. Layers are viewed from front to back within each frame of the Timeline — items on upper layers overlay other items on lower layers. Any number of items can be placed on a single layer, but you have less control over the stacking

The Many Faces of Flash MX 2004

2008-11-26T18:35:00.000-08:00

Flash is a hybrid application that is like no other application. On the immediate surface, it may seem (to some) to be a simple hybrid between a Web-oriented bitmap handler, and a vector-drawing program, such as Macromedia FreeHand or Adobe Illustrator. But while Flash is indeed such a hybrid, it’s also capable of much, much more. It’s also an interactive multimedia-authoring program and a sophisticated animation program suitable for creating a range of animations — from simple Web ornaments to broadcast-quality cartoons. As if that weren’t enough, it’s also the host of a powerful and adaptable scripting language.

ActionScript has evolved from a limited drag-and-drop method of enabling animation to a full- fledged object-oriented programming language very similar to JavaScript. Flash ActionScript can work in conjunction with XML (eXtensible Markup Language), HTML, and many other applications and parts of the Web. Flash content can be integrated with many server-side technologies including Flash Remoting MX and Flash Communication Server MX, and the Flash Player offers built-in support for dynamically loading images, MP3s, movies, and other data. Flash can work seamlessly with ColdFusion MX 6.1 and XML socket servers to deliver streamlined dynamic interactive experiences.

So, what’s this evolving hybrid we call Flash really capable of? That’s a question that remains to be answered by developers such as you. In fact, we’re hoping that you will master this application and show us a thing or two. That’s why we’ve written this book: to put the tool in your hands and get you started on the road to your own innovations.

Because Flash is a hybrid application capable of just about anything, a good place to start working with this powerhouse is to inquire: What are the components of this hybrid? And if they were separated out, how might their capabilities be described? Those are the questions that we answer in this chapter.

Bitmap handler

In truth, Flash has limited capabilities as an image-editing program. It is more accurate to describe this part of the Flash application as a bitmap handler. Bitmap images are composed of dots on a grid of individual pixels. The location (and color) of each dot must be stored in memory, which makes this a memory-intensive format and leads to larger file sizes. Another characteristic of bitmap images is that they cannot be scaled without compromising quality (clarity and sharpness). The adverse effects of scaling an image up are more pronounced than when scaling down. Because of these two drawbacks — file sizes and scaling limitations — bitmap images are not ideal for Web use. However, for photographic-quality images, bitmap formats are indispensable and often produce better image quality and lower file sizes than vector images of equivalent complexity.

Vector-based drawing program

The heart of the Flash application is a vector-based drawing program, with capabilities simi- lar to either Macromedia FreeHand or Adobe Illustrator. A vector-based drawing program doesn’t rely upon individual pixels to compose an image. Instead, it draws shapes by defining points that are described by coordinates. Lines that connect these points are called paths, and vectors at each point describe the curvature of the path. Because this scheme is mathe- matical, there are two distinct advantages: Vector content is significantly more compact, and it’s thoroughly scalable without image degradation. These advantages are especially signifi- cant for Web use.

Vector-based animator

The vector animation component of the Flash application is unlike any other program that preceded it. Although Flash is capable of handling bitmaps, its native file format is vector- based. So, unlike many other animation and media programs, Flash relies on the slim and trim vector format for transmission of your final work. Instead of storing megabytes of pixel infor- mation for each frame, Flash stores compact vector descriptions of each frame. Whereas a bitmap-based animation program (such as Apple’s QuickTime) struggles to display each bitmap in rapid succession, Flash quickly renders the vector descriptions as needed and with far less strain on either the bandwidth or the recipient’s machine. This is a huge advantage when transmitting animations and other graphic content over the Web.

Video compressor

Flash Player 6 and 7 include a built-in video engine — the Sorenson Spark codec — which means that the Flash Player plug-in can be considered one of the world’s smallest video

It’s a (Flash) MX 2004 World

2008-11-26T18:30:00.000-08:00

Flash has seen significant development over the years in both capability and design. Consistently proven with each new release is that developers continue to push the technol- ogy into new territory. In its current iteration, Flash MX 2004 is advancing the successes of its predecessor, Flash MX. The new version offers more tools to create the latest breed of Web experiences, dubbed Rich Internet Applications (RIAs), and Macromedia has added more authoring features to help the novice user learn the toolset.

We discuss the topic of RIAs in Chapter 2, “Exploring Web

However, Flash is no longer a single authoring product. Macromedia has made two versions of the tool available: Flash MX 2004 and Flash MX Professional 2004. Both editions share many core updates to Flash MX, including our following favorites:

Timeline Effects: A feature added specifically for new users, Timeline Effects enable you to quickly add motion and visual effects to your Flash artwork or text. Flash MX 2004 automatically creates all the tweens and symbols necessary for the chosen effect. You can change or edit effect settings at anytime while authoring your Flash movie. Learn more about Timeline Effects in Chapter 11, “Timeline Animation and Effects.”

Behaviors: Another feature added to help novice users, the Behaviors panel adds inter- activity to Flash buttons, components, and frames very easily. If you’ve used behaviors in Dreamweaver, you’ll find that using behaviors in Flash is very similar. Several exam- ples throughout this book use the new behaviors in Flash MX 2004.

Spell checker: You can now check the spelling of text within your Flash movie, includ- ing text in your ActionScript code.

Document tabs: If you’re using the Windows version of Flash MX 2004, you can quickly switch between multiple Flash documents .fla files) by clicking the document’s tab in the authoring environment.

Improved Actions panel: The Actions panel has an improved Script navigator, enabling you to edit the actions of any keyframe or instance in your Flash document. You can also pin multiple scripts in the Script pane, so you can quickly switch from one script to another. The Actions panel is discussed throughout Parts V and VII of this book.

Find and Replace: A highly requested feature, Find and Replace does exactly what it says: locates and updates elements in your Flash document. Everything from text to font types to colors to imported graphics and sounds can be searched with this tool.

Better graphics support for imported files: Macromedia dubs this “high-fidelity import,” which now enables you to import Adobe PDF and Adobe Illustrator 10 files with better conversion to Flash-equivalent vector graphics.

Video Import wizard: Continuing with Flash MX’s video encoding abilities, you have greater control over compression options and in/out points during the video import process. You can find more information about this feature in Chapter 17, “Embedding Video.”

Flash Player detection: Flash MX 2004 can create fully built HTML and Flash movie detection files for your Flash content. In previous versions, such automation was only available in Dreamweaver. Now, you can setup this detection process directly in the Flash MX 2004 authoring environment.

Summary

2008-11-24T08:31:00.001-08:00

Congratulations on using the video importing and editing features of Flash. In a few minutes, you were able to accomplish the following tasks:

• Embed a video

• Select editing options

• Specify encoding settings

• Change the hue and gamma in a video

• Crop a video

• Import audio with video

• Save a profile

• Change the span of frames in a layer

• View video properties

• Change publish settings

To learn more about using video in Flash, see “Working with Video” in Using Flash Help. For information about publishing movies with embedded video, see “Setting publish options for the Flash SWF file format” in Using Flash Help.

View video properties

2008-11-24T08:30:00.000-08:00

Embedded and linked video files appear in the Library panel, where you can view video properties.

1 In the Library panel (Window > Library), double-click the Trio_Experience video file that you imported.
The Embedded Video Properties window appears. Using this window, you can accomplish the following tasks:
¦ Update an imported video edited in an external application.

¦ Export the embedded video as a Macromedia Flash Video (FLV) file, which retains the compression settings specified when you imported the video.
2 When you’ve finished viewing video properties, click OK and save your file.

Change the span of frames in a layer

2008-11-24T08:29:00.000-08:00

1 In the Timeline, scrub the playhead (drag it back and forth across the Timeline) to view different sections of the video.

2 The background, which is only in Frame 1, disappears when the playhead moves to subsequent frames. To extend the background frames, right-click (Windows) or Control-click (Macintosh) Frame 1 of the Background layer and select Copy Frames from the context menu.

3 In the Timeline, go to the last keyframe of the Video layer. Identify the corresponding frame number in the Background layer. Right-click (Windows) or Control-click (Macintosh) the corresponding frame number in the Background layer, and select Paste Frames. For example, if the Video layer extends to Frame 300, you’d copy the keyframe in Frame 300 of the Background layer.

The Background layer extends the length of the Video layer.

4 After saving the document, select Control > Test Movie to test how the video appears in Flash Player.

Place the video in Flash

2008-11-24T08:28:00.001-08:00

Because you selected Import, rather than Import to Library, the video appears on the Stage. The first frames of the video are white, so you will see the blue bounding box only where the video appears.

• Drag the bounding box to the video guide, to the left of the text.

Save advanced profile settings

2008-11-24T08:20:00.000-08:00

The Video Import wizard allows you to name your advanced settings profile and provide a description.

1 To name this profile of advanced settings, type Trio Advanced Settings.

2 In the Description text box, type Trio Motors Client Settings. Then click Next. Encoding settings appear again.
3 Verify that Trio Compression Settings appears in the Compression Profile pop-up menu, and Trio Advanced Settings appears in the Advanced Settings pop-up menu, (or select those options, if necessary) and click Finish.

The Importing dialog box appears.

4 When another dialog box appears that asks if it’s OK to add frames to the Timeline, click Yes. Flash adds enough frames to the Timeline to accommodate the video.

5 Save your file.

Import audio with the video

2008-11-24T08:19:00.001-08:00

You can separate the audio track from the video and create a separate audio library item. However, in this particular video clip, the sound is integral to the video, so you will not separate the audio.

• In the Audio Track pop-up menu, verify that Integrated is selected. Then click Next.

Import a video clip as a video object

2008-11-24T08:17:00.000-08:00

You have the option of importing a video clip as a video object in the current Timeline, a movie clip, or a graphic symbol. Each choice has advantages and limitations; see “About advanced settings” in the Video Import wizard section of Using Flash Help. You’ll transfer the video clip as a video object in the current Timeline, which is the default setting. This option places the video object in the current Timeline and expands the Timeline to accommodate the frames necessary to play the video.

• In the Import pop-up menu, verify that Current Timeline is selected.

Crop the video

2008-11-24T08:16:00.000-08:00

You can scale the video so that its size on the Stage is a percentage of its original size; the Scale setting adjusts the dimensions of the video proportionally. You can also crop the video to create a nonstandard size and change the aspect ratio. You’ll crop the top and bottom of the video to give it a wide-screen look.

1 Enter 10 in the top Crop text box either by typing directly in it or by using the slider. If you type the value, press Enter or Return to see the change.
In the Preview window, a line appears that marks where the video will be cropped.

2 Enter 10 in the bottom Crop text box either by typing directly in it or by using the slider. If you type the value, press Enter or Return to see the change.

Change the hue and gamma in the video

2008-11-24T08:11:00.000-08:00

You will now change color settings and effects in the video.

1 In the Advanced Settings pop-up menu, select Create New Profile.

The Video Import wizard now displays options to change color settings and the size of the video. You’ll change the hue to add more of a bluish purple tint.
2 In the Preview window, move the playhead to view any frame in the video clip where the video isn’t totally white.
3 Hue measures the color value as it maps to a location on a standard color wheel. To change the hue, do one of the following:

¦ Enter +20 in the Hue text box, then press Enter or Return.

¦ Move the Hue slider until +20 appears in the hue text box.

4 Verify that a 1 appears in the Gamma text box, and that Brightness and Contrast are set to +0.

Gamma measures the overall brightness level. Higher values specify that dark images remain dark while light images become lighter.

Specify encoding settings

2008-11-24T08:08:00.000-08:00

The compression profile settings allow you to select predefined encoding settings, or apply values for bandwidth or quality control. You’ll specify bandwidth values, in kilobits to approximate the download speed. You’ll then save your settings as a compression profile.

1 In the Compression Profile pop-up menu, select Create New Profile.

2 Select Bandwidth, then either move the bandwidth slider to 128 or enter 128 in the bandwidth text box.
By selecting bandwidth over quality, you have finer control over streaming applications. The bandwidth slider defines the bandwidth in kilobits that the imported video is allowed to take per second. It affects the quality of the video at high motion but allows for fixed bandwidth encoding and therefore better streaming behavior.
3 Click Next. In the Name text box, enter Trio Compression Settings. In the Description text box, enter 128 Kbs bandwidth. Then click Next to return to the first Encoding panel.

Embed a video

2008-11-24T08:02:00.000-08:00

When you import video, you can embed the video so that it’s included in your document file. You can also link to the video so that it remains an external file, yet the video file still appears in the Library panel. You’ll embed the video to use many of the Video Import wizard features. Embedded video becomes a library object and part of your document.

1 Select File > Open. Browse to the location where you saved the videoImport download and double-click video_import_start.fla
2 Select File > Save As and save the document with a new name, in the same folder, to preserve the original start file.

3 Select Window > Panel Sets > Training Layout to modify your workspace for taking lessons.

4 In the Timeline, select the Video layer.

5 Select File > Import > Import to Stage. To open the video file, browse to the location where you saved the videoImport download and double-click Trio_Experience.mov.
MOV is the extension for the QuickTime video format. The Video Import wizard opens.

6 In the Video Import wizard, verify that Embed Video in Macromedia Flash Document is selected, and click Next.

Select editing options

After you choose to embed the video, you have the option of editing the video or importing it without editing. For this lesson, you’ll edit the video.

1 In the Video Import wizard, select Edit the Video First, and click Next.

A preview window and editing controls appear in the Video Import wizard. 2 Video editing controls include the following:

■ A seek bar with an In marker, Out marker, and playhead

Out marker

Playhead In marker

¦ Playback control buttons

¦ In and Out marker buttons

¦ Buttons that let you create and update video clips

¦ A clip list

3 Click Preview Clip to watch the video.

Note: The video includes an audio track.

4 The video ends by fading to white. To edit out the white video at the end of the clip, move the Out marker, on the right side of the seek bar, slightly to the left, to the approximate point where the video fades to white (around 00:00:25:067).

5 Click the Create Clip button to add the edited video to the list of clips.

If you were adding many clips to the list, you could select Combine List of Clips into a Single Library Item After Import to create one clip that contains all listed clips. Since you’re working with one clip only, you don’t need to select that option.

6 Click Preview Clip again to view the edited clip, then click Next.

Import and Edit Video

2008-11-24T07:30:00.000-08:00

Macromedia Flash MX 2004 and Macromedia Flash MX Professional 2004 include a Video Import wizard with editing features. The wizard offers control over how your video appears in your published file. In this lesson, you’ll use video importing and editing features to accomplish the following tasks:

• Embed a video

• Select editing options

• Specify encoding settings

• Change the hue and gamma in a video

• Crop a video

• Import audio with video

• Save a profile

• Change the span of frames in a layer

• View video properties

• Change publish settings

To take this lesson, you must have QuickTime 4 or a later version installed.

The file decompression process creates a folder named videoImport on your system. The folder contains three files: video_import_start.fla, video_import_finished.fla, and Trio_Experience.mov