Pengenalan Adobe FLASH

 Pada bahasan awal ini, akan saya bahas mengenai dasar-dasar pengenalan tools dari Adobe Flash. Kalau anda dulu sempat mengenal Flash yang masih vendor Macromedia, toolstools yang dipakai sebenarnya hampir sama seperti yang masih bervendor Macromedia. Dan kini, adobe flash juga masih menerapkan standarisasi dari macromedia. Hanya beberapa opsi saja yang berbeda. Saat ini adobe sudah memunculkan versi terbarunya. Yakni versi CS6, walau pun versinya tinggi tetapi kalau saya lihat, tools-tools dan default workspace-nya masih tetap hampir sama seperti versi sebelumnya. Hanya ada beberapa saja yang berbeda, di versi terbaru.

Pada versi terbaru tersebut terdapat tools yang memungkinkan kita membuat efek ruang (3D). Disini saya memakai Adobe Flash CS3, sebagai media interaktif pembelajaran.

1.1 HALAMAN AWAL

 Halaman awal adalah tampilan yang pertama kali muncul ketika kita mengakses Adobe Flash CS3 Professional. Cara mengakses Adobe Flash CS3 Professional pertama kali yaitu double klik pada icon yang ada di desktop atau lihat dari daftar program. Tampilan start page pertama kali membuka Adobe Flash CS3 Professional yaitu:

 

Gambar 1.1 Tampilan start page Adobe Flash CS3

1.2 LINGKUNGAN KERJA ADOBE FLASH CS3

 Secara garis besar, lingkungan kerja (Workspace) adobe flash cs3 terdiri dari beberapa komponen utama yang bisa anda lihat seperti pada gambar 1.2:

Menu Bar adalah kumpulan yang terdiri atas dasar menu-menu yang digolongkan dalam satu kategori. Misalnya menu file terdiri atas perintah New, Open, Save, Import, Export, dan lain-lain.

Timeline adalah sebuah jendela panel yang digunakan untuk mengelompokkan dan mengatur isi sebuah movie, pengaturan tersebut meliputi penentuan masa tayang objek, pengaturan layer, dan lain-lain.

Stage adalah area untuk berkreasi dalam membuat animasi yang digunakan untuk mengkomposisi frame-frame secara individual dalam sebuah movie.

Toolbox adalah kumpulan tools yang sering digunakan untuk melakukan seleksi, menggambar, mewarnai objek, memodifikasi objek, dan mengatur gambar atau objek.

Properties adalah informasi objek-objek yang ada di stage. Tampilan panel properties secara otomatis dapat berganti-ganti dalam menampilkan informasi atribut-atribut properties dari objek yang terpilih. 

Panels adalah sebagai pengontrol yang berfungsi untuk mengganti dan memodifikasi berbagai atribut dari objek dari animasi secara cepat dan mudah. 

Gambar 1.2 Komponen Utama

1.3 TOOLBOX

 Fasilitas Toolbox seperti telah dijelaskan sekilas diawal adalah sekumpulan tool atau alat yang mempunyai fungsi-fungsi tersendiri untuk keperluan desain (lihat Gambar 1.3). Berikut penjelasan setiap tool yang terdapat pada Toolbox .

Arrow Tool, Arrow Tool atau sering disebut selection tool berfungsi untuk memilih atau menyeleksi suatu objek.

Subselection Tool, berfungsi menyeleksi bagian objek lebih detail dari pada selection tool.

Free Transform Tool, berfungsi untuk mentransformasi objek yang terseleksi.

Lasso Tool, berfungsi untuk memotong gambar secara manual.

Pen Tool digunakan untuk menggambar garis dengan bantuan titik-titik bantu seperti dalam pembuatan garis, kurva atau gambar.

Text Tool digunakan untuk membuat objek teks

Line Tool digunakan untuk membuat atau menggambar garis.

Oval Tool digunakan untuk menggambar bentuk lingkaran atau elips.

Pencil Tool digunakan untuk membuat garis.

Brush Tool digunakan untuk menggambar bentuk garis-garis dan bentuk-bentuk bebas.

Ink Bottle tool digunakan untuk mengisi/mengganti Stroke(garis luar) suatu objek.

Paintbucket Tool digunakan untuk mengisi area-area kosong atau digunakan untuk mengubah warna area sebuah objek yang telah diwarnai.

Eye Dropper Tool digunakan untuk mengambil sampel warna. 

Eraser Tool digunakan untuk menghapus objek. 

Hand Tool digunakan untuk menggeser tampilan stage tanpa mengubah pembesaran.

Zoom Tool digunakan untuk memperbesar atau memperkecil tampilan stage.

Stroke Color digunakan untuk memilih atau memberi warna pada suatu garis.

Fill Color digunakan untuk memilih atau memberi warna pada suatu objek.

Swap Color digunakan untuk menukar warna fill dan stroke atau sebaliknya dari suatu gambar atau objek.

Gambar 1.3 Tools Box

1.4 LIBRARY

 Fungsi dari library adalah sebagai wadah untuk menyimpan program-program terpisah yang sudah jadi, seperti tombol, objek grafis, audio, video, dan lain-lain. Berikut tampilan panel library.

Gambar 1.4 Library Panel

1.5 ACTION SCRIPT

 Salah satu kelebihan FLASH dibanding dengan perangkat lunak animasi lain yaitu adanya action script. ActionScript adalah bahasa pemrograman Adobe Flash yang digunakan untuk membuat animasi atau interaksi, ActionScript mengizinkan untuk membuat intruksi berorientasi action (lakukan perintah) dan instruksi berorientasi logic (analisis masalah sebelum melakukan perintah). Kita bisa memunculkan panel actionScript dengan cara menekan tombol

F9 pada keyboard. Atau melalui menubar dengan cara klik Window > Actions 

 Sama dengan bahasa pemrograman yang lain, ActionScript berisi banyak elemen yang berbeda serta strukturnya sendiri. Kita harus merangkainya dengan benar agar ActionScript dapat menjalankan dokumen sesuai dengan keinginan. Jika tidak merangkai semuanya dengan benar, maka hasil yang didapat kan akan berbeda atau file flash tidak akan bekerja sama sekali. ActionScript juga dapat diterapkan untuk action pada frame, tombol, movie clip, dan lain-lain. Action frame adalah action yang diterapkan pada frame untuk mengontrol navigasi movie, frame, atau objek lain-lain.

 Salah satu fungsi ActionScript adalah memberikan sebuah konektivitas terhadap sebuah objek, yaitu dengan menuliskan perintah-perintah didalamnya. Tiga hal yang harus diperhatikan dalam ActionScript yaitu:

Navigasi Sederhana dengan AS 3

Tutorial

Navigasi Sederhana

Tutorial

Navigasi Sederhana dengan Actionsript 3.0

Membuat transisi navigasi bertujuan untuk mempercantik tampilan project Flash kita bisa untuk membuat Game Flash, Aplikasi Flash, maupun Aplikasi Interaktif. navigasi merupakan tombol penting yang bertujuan untuk membantu kita untuk berpindah scene, layer maupun untuk navigasi musik dan video player.

Langsung saja Cekidot.

file - new document (membuat dokumen baru)
type : ActionScript 3.0 (width: 350 px, Height 80 px, frame rate 12,00 fps, Background color putih) klik OK

Membuat symbol baru
klik insert - New Symbol (Ctrl + F8) membuat movie clip dengan nama txtButton

buat 2 layer
layer paling atas kamu buat teks (isi teks nya HOME) dan layer bawah kamu buat shape kotak (shape kotak warna biru, warnanya terserah kalian)

membuat symbol baru lagi
klik insert - New Symbol (Ctrl + F8) membuat movie clip dengan nama mainButton

buat 4 layer
layer 1 rename (mask)
layer 2 rename (text1)
layer 3 rename (shadow)
layer 4 rename (txtButton)

oke tahap selanjutnya minum kopi dulu, kalau gak suka kopi minum Aq*a biar fokuss

tetap di mainButton klik layer 1 yang bernama 'mask' tadi posisi paling atas kamu buat shape kotak lagi ukurannya harus sesuai kayak shape kotak di step 2 tadi.

layer Text tulis kata 'HOME' ukurannya sama dengan yang di symbol 'txtbutton' tadi

selanjutnya klik layer shadow , kamu buatkan shape kotak, posisi dibawah shape di layer mask tadi, beri jarak sedikit, (ukurannya, lebarnya sama, tapi tingginya lebih kecil, kira kira 10% dari shape dari layer mask

klik layer txtbutton, drop/serett/tarikk symbol txtButton dari library tempat kan tepat di bawah shape shadow. otomatis dibawah shape mask

klik scane 1 di bawah judul flash mu,

okee sekarang waktunya memasukkan actionscript 3.0

buat 1 layer terus klik F9 atau klik kanan terus klik 'actions'

import fl.transitions.easing.*;
import fl.transitions.*;

var home = new mainButton();
this.addChild(home);

home.x= 80;
home.y=40;

var portfolio = new mainButton();
this.addChild(portfolio);

portfolio.txt1.text = "PORTFOLIO";
portfolio.txtButtom.txt2.text = "PORTFOLIO";
portfolio.x= home.x + home.width;
portfolio.y=home.y;

var contact = new mainButton();
this.addChild(contact);

contact.txt1.text = "CONTACT";
contact.txtButtom.txt2.text = "CONTACT";
contact.x= portfolio.x + portfolio.width;
contact.y=home.y;


home.buttonMode = true;
home.useHandCursor = true;
home.mouseChildren = false;

portfolio.buttonMode = true;
portfolio.useHandCursor = true;
portfolio.mouseChildren = false;

contact.buttonMode = true;
contact.useHandCursor = true;
contact.mouseChildren = false;

home.addEventListener("mouseOver", mouseRollOver);
portfolio.addEventListener("mouseOver", mouseRollOver);
contact.addEventListener("mouseOver", mouseRollOver);

home.addEventListener("mouseOut", mouseRollOut);
portfolio.addEventListener("mouseOut", mouseRollOut);
contact.addEventListener("mouseOut", mouseRollOut);

function mouseRollOver(e:MouseEvent) {

var easingFunc = Back.easeOut;
var ysa = 30;
var yfa =-5;
var duration =0.5;
var myTween:Tween = new Tween(e.target.txtButtom, "y", easingFunc, ysa, yfa, duration, true);

var easingFunc2 = Regular.easeOut;
var ysa2 = -16.3;
var yfa2 = -46;
var duration2 =0.5;
var myTween2:Tween = new Tween(e.target.txt1, "y", easingFunc2, ysa2, yfa2, duration2, true);

}

function mouseRollOut(e:MouseEvent) {

var easingFunc3 = Regular.easeOut;
var ysa3 = -5;
var yfa3 =30;
var duration3 = 0.5;
new Tween(e.target.txtButtom, "y", easingFunc3, ysa3, yfa3, duration3, true);

var easingFunc4 = Regular.easeOut;
var ysa4 = -46;
var yfa4 = -16.3;
var duration4 = 0.5;
new Tween(e.target.txt1, "y", easingFunc4, ysa4, yfa4, duration4, true);
}

Beta preview

Aplikasi Pembelajaran

Beta preview

Aplikasi Pembelajaran

software pembelajaran flash untuk pemula, dalam pemakaian Actionscript 2.0 dan 3.0 hingga Android apps, dengan hanya memakai Adobe Flash CS6 atau yang lebih tinggi.

dengan adanya Beta preview, saran dan komentar sangat saya butuhkan demi kenyamanan anda dan pembelajaran bagi saya.

Membuat Aplikasi Android mudah dengan FLASH

Kita tahu Adobe Flash CS5.5 keatas sekarang bisa digunakan untuk membuat aplikasi android, tentunya lebih mudah dan lebih simpel. Dari dulu Adobe CS selalu mempermudah dan menambahkan fitur menarik di setiap produknya. Yang terbaru dari Adobe yang dulunya bertahun menggunakan Adobe CS (Creative Suite) sekarang berubah nama menjadi Adobe CC (Creative Cloud). Tentunya untuk spesifikasi hardwere juga harus terbaru juga.,

nah sekarang saya akan memberikan tutorial bagaimana cara membuat Aplikasi android di Adobe Flash CC, apakah lebih mudah atau lebih susah dari pada softwere lainnya, tentunya lebih mudah tetapi pengguna Android yang mau instal aplikasi Android yang dibuat oleh adobe flash harus sudah meng instal Adobe Air terlebih dahulu., sama dengan PC apabila Ingin menjalankan file flash atau streaming video flash dan game flash, PC harus sudah ter pasang Adobe Flash Player., ditutorial kali ini kalian bisa mengkembangkan sendiri mulai dari Aplikasi Interaktif dan juga Game Andoid bahkan majalah digital, atau musik player sekalipun.