WEB DESIGN - Tugas II

Deskripsi Diri

               Nama saya Yuliana,lahir di Bengkulu pada tanggal 15 Juli 1991. Saya anak pertama dari 3 bersaudara. Saya mempunyai 2 orang adik laki-laki yang bernama Junaidi dan Robert,sekarang duduk di kelas VII dan IX SMP. Sejak lahir saya tinggal di Bengkulu bersama keluarga saya. Dari TK,SD,SMP sampai SMA saya sekolah di Sint Carolus,Bengkulu. Dan sekarang saya merantau ke Bandung untuk kuliah dan menuntut ilmu. Sengaja saya  kuliah ke luar kota karena saya ingin maju dan berusaha hidup mandiri. Di bandung saya mempunyai saudara,tapi karena rumah keluarga saya lumayan jauh dari kampus,jadi saya memutuskan untuk ngekos di dekat kampus.

               
                Sekarang saya kuliah di Universitas Widyatama,Fakultas Tenik Jurusan Informatika. Ketika saya mengambil Jurusan tersebut,dalam bayangan saya Tehnik Informatika cuma mempelajari tentang komputer,setelah saya masuk kuliah,materi perkuliahan jauh dari perkiraan saya. Banyak hal-hal baru yang saya temui dalam Jurusan ini,mugkin cukup sulit tapi saya akan jalani dengan sebaik mungkin karena saya tidak mau mengecewakan keluarga saya. Memang masa perkuliahan ini sangat berbeda dengan masa-masa sekolah dulu tetapi sekarang saya mulai terbiasa.

               Saya mempunyai hobi yaitu menulis cerpen atau novel. Tetapi sayangnya,belum ada 1 pun karya tulis saya yang diterbitkan,karena saya malu dan takut kalau karya tulis saya sangat jelek dan memalukan. Saya juga mempunyai hobi di bidang olahraga yaitu basketball. Dari SMP saya selalu mengambil ekstrakulikuler basket. Tetapi sejak kuliah hobi tersebut hilang begitu saja karena kurangnya waktu dan keadaan yang berbeda sehingga saya memutuskan untuk fokus ke kuliah. 

Ketertarikan saya di Bidang Multimedia 

        Saya cukup tertarik dengan bidang Multimedia karena bisa mengekspresikan kreatifitas kita. Sebelum mengambil mata kuliah Pengantar Multimedia dan Web Design saya hanya tahu Multimedia itu sebatas HTML dan mengedit-edit foto menggunakan aplikasi-aplikasi seperti adobe photoshop,picasa,photoscape,dll. Tapi,sekarang saya sudah mengerti bahwa banyak yang dapat kita ekspresikan di bidang Multimedia,salah satunya animasi. Saya mulai menyukai membuat animasi-animasi sederhana dan animasi yang menggunakan script.

Tutorial Animasi menggunakanScript yang telah saya buat

 1. Animasi yang saya buat adalah menampilkan gambar-gambar yang menggunakan script. Animasi ini dibuat menggunakan Adobe Flash dan Adobe Dreamweaver untuk menu. Animasi ini terdiri atas beberapa format yaitu, .xml , .css , .html , .fla , .swf .

2. Langkah awal saya membuat rancangan animasinya. Animasi ini memiliki beberapa menu,biar keliatan simple bentuknya saya buat kotak. Ada 7 menu,seperti yang terlihat di bawah ini  :

3. Masukkan isi menu yang berupa gambar dan tulisan yang akan kita tampilkan di Animasi ini per menu. Ex : di menu " Animals Collection" maskkan gambar-gambar Animals. Masukkan dengan menggunakan Adobe Dreamweaver,save dengan format .xml.

4. Sediakan sebuah template untuk Animasi ini. Dalam animasi ini,saya menggunakan template yang diberi nama "caurina" yang dapat mengatur letak dan rancangan animasi agar kelihatan indah,bisa dilihat gambar dibawah ini :

5. Bila anda tertarik dengan Animasi Script ini,silahkan anda download link di bawah ini : 
http://www.4shared.com/file/nuQ_Zhk0/tugas_flash.html


Untuk melihat Scriptnya bisa dilihat dari Adobe Flash,lalu tekan F9. Atau bisa melihat script di bawah ini yang disertakan dengan penjelasan dari script tersebut :

stop();

fm_button.visible = false;

// Tweener

// http://code.google.com/p/tweener/

import caurina.transitions.*;

// To make a link to an external page, write label as "Label|URL" in array value

var menu_label:Array = new Array("Animals Collection", 

                                                      "Flowers Collection",

                                                      "Leaves Collection",

                                                      "Mixed Collection",

                                                      "Extra Collection",

                                                      "Di buat oleh",

                                                      "end"

                             

                                                    );

var total:Number = menu_label.length;

var i:Number = 0;

var page:Number;

var main_menu:MovieClip = new MovieClip();

stage.addChild(main_menu);

for (i = 0; i < total; i++)

{

    var btn = new flashmo_button();

    btn.name = "btn" + i;

    btn.x = fm_button.x;

    btn.y = fm_button.y + i * fm_button.height;

    btn.buttonMode = true;

    btn.item_no = i;

    btn.flashmo_click_area.addEventListener( Event.ENTER_FRAME, btn_enter );

    var each_substring:Array = menu_label[i].split("|");

    btn.flashmo_button_label.fm_label.text = each_substring[0];

    btn.item_url = each_substring[1];

    main_menu.addChild(btn);

}

function btn_over(e:MouseEvent):void

{

    e.target.parent.over = true;

}

function btn_out(e:MouseEvent):void

{

    e.target.parent.over = false;

}

function btn_click(e:MouseEvent):void

{

    var mc = e.target.parent;

    if ( mc.item_url != undefined )

        navigateToURL( new URLRequest( mc.item_url ), "_parent" );

    else

        change_page(mc.item_no);

}

function btn_enter(e:Event):void

{

    var mc = e.target.parent;

    if ( mc.over == true )

        mc.nextFrame();

    else

        mc.prevFrame();

}

function change_page(no:Number):void

{

    for (var i:Number = 0; i < main_menu.numChildren; i++)

    {

        var mc = MovieClip( main_menu.getChildAt(i) );

        mc.over = false;

        mc.flashmo_click_area.visible = true;

        mc.flashmo_click_area.addEventListener( MouseEvent.ROLL_OVER, btn_over );

        mc.flashmo_click_area.addEventListener( MouseEvent.ROLL_OUT, btn_out );

        mc.flashmo_click_area.addEventListener( MouseEvent.CLICK, btn_click );

    }

    var mc_selected = MovieClip( main_menu.getChildAt(no) );

    mc_selected.over = true;

    mc_selected.flashmo_click_area.visible = false;

    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.ROLL_OVER, btn_over );

    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.ROLL_OUT, btn_out );

    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.CLICK, btn_click );

   

    page = no + 1;

    play();

}

change_page(0);// default page on load

KETERANGAN :

Membuat menu yang berupa kotak dibuat dari script :

for (i = 0; i < total; i++)
{
    var btn = new flashmo_button();
    btn.name = "btn" + i;
    btn.x = fm_button.x;
    btn.y = fm_button.y + i * fm_button.height;
    btn.buttonMode = true;
    btn.item_no = i;
    btn.flashmo_click_area.addEventListener( Event.ENTER_FRAME, btn_enter );

    var each_substring:Array = menu_label[i].split("|");
    btn.flashmo_button_label.fm_label.text = each_substring[0];
    btn.item_url = each_substring[1];
    main_menu.addChild(btn);
} 

Dengan scipt ini maka kotak akan melakukan looping untuk pembuatan kotan menu menggunakan array yang diberi nama "menu_label". Dan untuk memasukkan nama-nama menu ke dalam kotak,scriptnya :

var menu_label:Array = new Array("Animals Collection", 
                                                      "Flowers Collection",
                                                      "Leaves Collection",
                                                      "Mixed Collection",
                                                      "Extra Collection",
                                                      "Di buat oleh",
                                                      "end"
                             
                                                    );

Script untuk membuat warna tulisan menu,bila kursor diarahkan ke menu maka tulisan di menu akan berwarna:  function btn_over(e:MouseEvent):void

                {

                 e.target.parent.over = true;

                }

 Bila kursor di luar menu maka warna tulisan di menu akan normal :

function btn_out(e:MouseEvent):void
{
    e.target.parent.over = false;
}

Jika di klik akan menampilkan gambar :

function btn_click(e:MouseEvent):void
{
    var mc = e.target.parent;
    if ( mc.item_url != undefined )
        navigateToURL( new URLRequest( mc.item_url ), "_parent" );
    else
        change_page(mc.item_no);
}

Jika di enter maka akan menampilkan menu selanjutnya (next) dan bila di preview akan menampilkan menu sebelumnya :

function btn_enter(e:Event):void
{
    var mc = e.target.parent;
    if ( mc.over == true )
        mc.nextFrame();
    else
        mc.prevFrame();
}

Jika gambarnya diklik maka kondisi gambar akan berubah ke tengah :

function change_page(no:Number):void
{
    for (var i:Number = 0; i < main_menu.numChildren; i++)
    {
        var mc = MovieClip( main_menu.getChildAt(i) );
        mc.over = false;
        mc.flashmo_click_area.visible = true;
        mc.flashmo_click_area.addEventListener( MouseEvent.ROLL_OVER, btn_over );
        mc.flashmo_click_area.addEventListener( MouseEvent.ROLL_OUT, btn_out );
        mc.flashmo_click_area.addEventListener( MouseEvent.CLICK, btn_click );
    }
    var mc_selected = MovieClip( main_menu.getChildAt(no) );
    mc_selected.over = true;
    mc_selected.flashmo_click_area.visible = false;
    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.ROLL_OVER, btn_over );
    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.ROLL_OUT, btn_out );
    mc_selected.flashmo_click_area.removeEventListener( MouseEvent.CLICK, btn_click );
   
    page = no + 1;
    play();
}

change_page(0);// default page on load