Animasi Interaktif Mewarnai Menggunakan Actionscript 3 (AS3)

Script ini bisa dimanfaatkan untuk membuat aplikasi mewarnai pada android. Tinggal sedikit merubah pada action-nya saja. Selamat mencoba, semoga bermanfaat. Biar mudah belajarnya, langsung Download file FLA!

Game Aritmatika Multiple Operator Sederhana Menggunakan AS2

Download File FLA

Animasi Interaktif Lempar Koin (Aplikasi Pembelajaran Matematika: Peluang)

Download File Fla

Load Video Kedalam Flash Menggunakan Actionscript 3 (AS3)

Untuk kebutuhan presentasi atau aplikasi tertentu, terkadang kita butuh mengambil file video untuk ditampilkan kedalam aplikasi Flash yang kita buat. Berikut langkah untuk mengambil file video bereksistensi .flv kedalam apliaksi Flash:

STEP 1

Buat sedemikian rupa sehingga file loadvideo.fla dan Video.flv berada  pada satu folder.

STEP 2

Pada file loadvideo.fla buatlah sebuah movieclip, kita berikan nama pada instance name dengan ‘mc’. Movieclip tersebut akan kita gunakan sebagai wadah video.

STEP 3

Pada frame 1 tuliskan script berikut:

//membuat variable untuk NetConnection

var nc:NetConnection = new NetConnection();

nc.connect(null);

// membuat variable untuk objek video

var vid:Video = new Video();

mc.addChild(vid);

//membuat variable NetStream

var ns:NetStream = new NetStream(nc);

// menjalankan function loading saat data belum sepenuhnya load..

ns.addEventListener(NetStatusEvent.NET_STATUS,loading);

//menjalankan function gagal jika data tidak sukses di load..

ns.addEventListener(AsyncErrorEvent.ASYNC_ERROR,gagal);

function loading(event:NetStatusEvent):void

{

     // handle netStatus events, described later

     trace("loading...");

}

function gagal(event:AsyncErrorEvent):void

{

     // ignore error

     trace("video gagal di tampilkan...");

}

//memutar video

vid.attachNetStream(ns);

ns.play("Video.flv");

Oke, coba lakukan test movie! 

Make Gesture Effect with Touch Point

In this case I will show you how to create swipe gesture effect using Touch Point input mode. This method will be very useful when the input mode for gesture and touch point can’t be run together. To build the appilacation make the movieclip as container first and named “bilangan_items”. The design of the container look like this:

 The second step is write the code. The code is written below:

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

var currentGalleryItem:Number = 1;

var totalGalleryItems:Number = 5;

var n_sentuhStart:Number=new Number();

// Get x value from stage when touch is begin

function sentuh_mulai(event:TouchEvent):void

{

     n_sentuhStart = event.stageX;

     trace(n_sentuhStart);

}

//get x value when touch is end

var n_sentuhEnd:Number=new Number();

function sentuh_selesai(event:TouchEvent):void

{

     n_sentuhEnd = event.stageX;

     trace(n_sentuhEnd);

}

stage.addEventListener(TouchEvent.TOUCH_BEGIN,sentuh_mulai);

stage.addEventListener(TouchEvent.TOUCH_END,sentuh_selesai);

// determine the offset value based on x value and then animate the

//movieclip

function geser(event:TouchEvent):void

{

     var jarak:Number=new Number();

     jarak=Math.sqrt((n_sentuhStart-n_sentuhEnd)*(n_sentuhStart-n_sentuhEnd));

     var ofsetX:Number=new Number();

     if (((n_sentuhEnd-n_sentuhStart)>0)&&jarak>=30)

     {

           ofsetX = -1;

     }

     else if (((n_sentuhEnd-n_sentuhStart)<0)&&jarak>=30)

     {

           ofsetX = 1;

     }

     trace(ofsetX);

     trace(jarak);

     // oke, geser lagi...

     if (ofsetX==-1)

     {

           if (currentGalleryItem > 1)

           {

                currentGalleryItem--;

                slideRight();

           }

           bg_color.gotoAndPlay((currentGalleryItem*10)+1);

     }

     if (ofsetX==1)

     {

           if (currentGalleryItem < totalGalleryItems)

           {

                currentGalleryItem++;

                slideLeft();

           }

           bg_color.gotoAndPlay((currentGalleryItem*10)+1);

     }

}

stage.addEventListener(TouchEvent.TOUCH_END,geser);

var slideCounter:Number = 0;

function slideLeft()

{

     bilangan_items.addEventListener("enterFrame", moveGalleryLeft);

}

function slideRight()

{

     bilangan_items.addEventListener("enterFrame", moveGalleryRight);

}

function moveGalleryLeft(evt:Event)

{

     bilangan_items.x -=  40;

     slideCounter++;

     if (slideCounter == 20)

     {

           bilangan_items.removeEventListener("enterFrame", moveGalleryLeft);

           slideCounter = 0;

     }

}

function moveGalleryRight(evt:Event)

{

     bilangan_items.x +=  40;

     slideCounter++;

     if (slideCounter == 20)

     {

           bilangan_items.removeEventListener("enterFrame", moveGalleryRight);

           slideCounter = 0;

     }

}

Try to test your movie! May be useful..

Membuat Efek Gelobang Dengan Flash (Actionscript 2)

Membuat Animasi Interaktif Gelombang dengan Actionscript 2

STEP 1
Buat movieclip dengan nama ‘dot’. Buat juga textfield dengan nama variable ‘pg’, ‘a’, ‘v’, dan ‘amp’. Kaish tombol-tombol untuk mengendalikan text variable di atas. Contoh: buat tombol dengan nama btn1. Di dalam btn1 tulis script: on(release){pg+=1}. Artinya setiap kali tbl1 di klik maka nilai pg akan selalu bertambah 1. Oke lanjut!

STEP 2
Langsung intinya,  tulis script berikut pada frame 1:

_root.onLoad=function(){
    pg=17;
    amp=40;
    w=10;
    v=1;
    a=1;
}

_root.onEnterFrame=function(){
    n++;
    m=Math.floor(n/v)*a;
    //o=Math.sin(m);
    for(i=1;i<550;i++){
    dot.duplicateMovieClip("dot"+i,i);
    yval=eval("dot"+i);
    yval._x=i;
    yval._y=(Math.sin((m-i)/pg)*amp)+200;
    }
}

Test movie, oke jadi!

Download File FLA. Jangan lupa ninggalin komentar, bro!

Grid Formation For Movieclip With Array In As2

To make the movieclip in grid formation we need the array() and modulo function. We use the array function to distribute movieclip in x coordinate, whereas modulo function to distribute movieclip in y coordinate. To make that formation,  first make a movielip named “mc”. In frame 1 write the following code:
//actionscript grid positioning
ordo = 6;
totalMC = ordo*ordo;
for (i=0; i<totalMC; i++) {
far = new Array(50, 100, 150, 200, 250, 300);
n = i%ordo;
mc.duplicateMovieClip("mc"+i, i);
pos = eval("mc"+i);
pos._x = far[n];
pos._y = 50*((i-n)/ordo);
trace(n);
}
mc._visible=false;

ordo = 6 is the total of movie clip in horizontal position. TotalMC will make the formation in square. You can costumized the formation with change the value of ordo and Array.

Menduplikasi Movie Clip dan Menyusunnya dalam Formasi Lingkaran

Untuk mendistribusikan duplikat movie clip dalam formasi lingkaran, kita memerlukan pengetahuan tambahan mengenai aturan matematis lingkaran sebagai berikut :

Memposisikan movie clip dalam formasi lingkaran berarti menempatkan movie clip pada koordinat Q (a,b). Oleh karena itu kita memerlukan formula Matematika untuk menemukan koordinat tersebut berdasarkan sudut dan panjang jari-jari lingkaran. Formula matematika yang sangat membantu dalam pekerjaan ini adalah aturan sinus dan cosines. Seperti pada gambar di atas, dalam sebuah lingkaran dapat di buat sebuah segitiga siku-siku dimana sisi miringnya adalah panjang jari-jari lingkaran. Untuk titik Q, nilai koordinat x sama dengan panjang PR (a = PR) sedangkan nilai koordinat y adalah panjang QR (b = QR).

Untuk mencari panjang QR (nilai koordinat b) kita bisa memakai aturan sinus sebagai berikut :

Sedangkan untuk mencari panjang PR (nilai koordinat a) kita bisa memakai aturan cosines berikut :

Penting!Pertama, buatlah sebuah movie clip lingkaran kecil dan berilah nama “dots”. Di dalam movie clip dots buatlah movie clip lagi dan berikan nama movie clip tersebut dengan nama “dot”. Movie clip “dots” berfungsi sebagai bidang cartesius dengan pusat di titik (dots._x,dots._y) sedangkan movie clip “dot” adalah movie clip yang akan di gandakan. 

Sekarang kita akan menerapkan kosep tersebut dalam Actionscript. Perhatikan langkah berikut :

Pada salah satu frame di lembar kerja utama isikan script berikut :

total_dot=20;

radius=100;

for (i=1; i<=total_dot; i++) {

        dots.dot.duplicateMovieClip("mc"+i, i);

        sudut = 360/total_dot*i;

        pos = eval(dots["mc"+i]);

        pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

        pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

        dots.dot._visible = false;

}

Karena movie clip yang akan diduplikat ada di dalam movie clip dots maka perintah yang digunakan adalah dots.dot.duplicateMovieClip("mc"+i, i). Nilai sudut bergantung pada berapa banyak movie clip akan digandakan (nilai i), oleh karena itu perintah yang digunakan untuk mendefinisikan nilai sudut adalah sudut = 360/total_dot*i sehingga nilai sudut untuk setiap movie clip akan berbeda dan posisinya pun menjadi berbeda secara teratur dengan movie clip lainnya.

 Penting!Dalam menggunakan fungsi Matematika yang berkaitan dengan sudut misalnya Math.sin, Math.Cos, atau Math.atan2 maka nilai yang akan dihitung harus di konversi dalam bentuk radian. Cara mengkonversi seperti pada perintah untuk mendefinisikan nilai koordinat x untuk masing-masing duplikat yaitu pos._x = Math.cos(sudut*(Math.PI/180))*radius/2.

 Mengatur Besar Diameter secara Otomatis

Sekarang kita akan membuat nilai radius diatur secara otomatis berdasarkan banyaknya duplikat. Semakin banyak duplikat maka semakin besar pula radiusnya. Caranya hanya dengan mendefinisikan nilai radius dalam aturan sinus. Perhatikan tambahan script dibawah ini :

total_dot=20;

for (i=1; i<=total_dot; i++) {

        dots.dot.duplicateMovieClip("mc"+i, i);

radius = Math.floor((dots.dot._width/4)/Math.sin((360/n)/Math.PI/180));

        sudut = 360/total_dot*i;

        pos = eval(dots["mc"+i]);

        pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

        pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

        dots.dot._visible = false;

}

Coba lakukan test movie dan atur nilai total_dot untuk melihat perbedaannya.

Memberikan Efek Animasi Putaran

Karena duplikat movie clip berada di dalam movie clip dots maka untuk menganimasikan seluruh movie clip duplikat, cukup dengan menganimasikan movie clip dots yang kita gunakan sebagai ‘semacam wadah’ untuk semua duplikat. Sehingga kita hanya perlu menambahkan script dots._rotation+=5; seperti berikut ini :

total_dot=20;

_root.onEnterFrame=function(){

        for (i=1; i<=total_dot; i++) {

                dots.dot.duplicateMovieClip("mc"+i, i);

radius = Math.floor((dots.dot._width/4)/Math.sin((360/n)/Math.PI/180));

                sudut = 360/total_dot*i;

                pos = eval(dots["mc"+i]);

                pos._x = Math.cos(sudut*(Math.PI/180))*radius/2;

                pos._y = Math.sin(sudut*(Math.PI/180))*radius/2;

                dots.dot._visible = false;

                dots._rotation+=5;

        }

}