BABI

PENGENALANFLASHDANACTIONSCRIPT3.0

Bab ini akan dibahas:

Komponen-komponen Flash beserta dengan fitur-fiturnya

Contoh-contoh penggunaan beberapa komponen Flash untuk membuat disain animasi.
Dasar-dasar pemrograman menggunakan ActionScript 3.0 seperti pengenalan variabel, tipe data, fungsi,
dan statemen kontrol

dobeActionScriptmerupakanbahasapemrogramanyangbekerjadidalamplatformAdobeFlash.
AdobeActionScriptmemangdibangunsebagaicarauntukmengembangkanpemrogramaninteraktif
secaraefisienmenggunakanplatformaplikasiadobeFlashActionScriptmulaidarianimasiyang
sederhanasampaidenganyangkomplekssekalipun,penggunaandata,danaplikasiinterfaceyang
interaktif.PertamakalidiperkenalkandalamFlashPlayer9,ActionScriptmerupakanbahasa
pemrogramanberorientasiobjekdidasarkanpadaECMAScriptstandaryangsamayangmenjadidasar
JavaScriptdanmemberikanhasilyangluarbiasadalamkinerjadanproduktifitaspengembang.ActionScript2,
versiActionScriptyangtelahdigunakandalamFlashPlayer8dansebelumnya,tetapdidukungdalamFlash
Player9danFlashPlayer10.(http://www.adobe.com/devnet/actionscript/)

BabiniakandimulaidenganpengenalanelemenelemendasardariFlashCS3danPembuatanprogram
HelloWorldsederhanamenggunakanActionScript.Sebelummasukdalampembuatanprogramaplikasi,
terlebihdahuluakandiperkenalkansecarasingkattentangFlashdanpembuatanFileFlash.
UntukmembangunaplikasidenganmenggunakankodeActionScript3.0,andamembutuhkansalahsatu
dariberikutini.

AdobeFlex2(atauyanglebihbaru)SoftwareDevelopmentKit(SDK)besertadengantekseditornya.

AdobeFlashCS3(ataureleaseyanglebihbaru)

AdobeFlexBuilder2(ataureleaseyanglebihbaru)

AdobeFlexBuilderdanAdobeFlashCS3merupakanintegrateddevelopmentenvironment(IDE)yangdidesain
untukmembantuandamembangunaplikasiFlexsecaracepatdanmudah.FlexBuilderdanFlashCS3tidak
gratis,artinyaandaharusmembayarlisensidariAdobe.Saatpenulisanbukuini,Andabisamencoba
mendownloadversimencoba30hari.FlexbuilderdanFlashCS3jugamenyediakanvisualinterfaceyang
mempermudahdalammembuataplikasiFlexatauFlash.
Flex2SDK(ataureleaseyanglebihbaru)bersifatgratisuntukkomersilmaupunnonkomersildanbisa
didownloaddariwebsiteAdobe.SetelahandamenginstallFlexSDK,andamasihmemerlukansebuahteks
editoruntukmemasukkanprogramActionScriptanda.SelainFlexBuilderyangberlisensiterdapateditoryang
bersifatopensourceyangsangatbaik,yaitu:FlashDevelopyangbekerjadalamsistemoperasiWindows.
FlashDevelopdidesainsecarakhususuntukbekerjadenganFlashmaupunFlex.FlashDevelopmenjadipilihan
penulisuntukmembuataplikasiFlashanimasidalambukuinikarenagratis,relatifmudah,dansangat
menolongdalammenuntunpemrograman,sehinggacocokuntukorangyangsedangbelajarpemrograman
ataupunyangsudahmahirsekalipun.DalamawalbukuiniakandijelaskansecarasingkatpenggunaanAdobe
FlashCS3danpenggunaanFlashDevelop.

FLASHCS3DANELEMENELEMENNYA
PadasaatpertamakaliandamembukaFlash,andadapatmembuatfileFlashdenganmemilihmenu
FileNew.AndaakanditunjukkanjendelaNewDocumentsepertiterlihatdalamGambar1.1.

Gambar 1.1. Pilih Flash

File (ActionScript 3.0)

untuk membuat file

Flash baru

SetelahandamenekantombolOK,andaakanmendapatsebuahfileFlashbarudengannamaUntitled1dalam
jendeladokumenFlashsepertidiperlihatkandalamGambar1.2.

Gambar 1.2. Flash CS3

dengan tampilan
Workspace Default

PANELTIMELINE

STAGE

Panel
T l

PANEL
LIBRARY

PANELPROPERTIES

Untukmemunculkansuatupanel,andabisamemilihmenuWindowPanelyangandainginkan.Panelpanel
yangadadapatandabukaataututupataupindahpindahsesuaidengankeinginananda.Apabilaandaingin
kembalikemodeljendelayangawallagi,andabisamemilihmenuWindowWorkspaceDefault.
Berikutinidiberikanpenjelasansingkatmengenaipanelpanelyangseringdipakai.

PanelStagemerupakantempatandamembuataplikasidanjugamenunjukkanisiaplikasiandayang
akanmunculsetelahandaselesaimembuatdanmenjalankanaplikasi.Andadapatmenambahkan
objekobjek(bisaberupagraphic,text,komponeninteraktif,buttondansebagainya)kedalamStage.
Andadapatjugamemodifikasiobjekobjektersebutataumembuatobjekbaruataupunmembuat
animasiobjekandamenggunakanprogramActionScript.

PanelTimelinemenyediakanframeframeyangdapatdigunakanuntukmembuatanimasiobjektanpa
menggunakanprogramScript.PadapanelTimelinejugaterdapatlayerlayeryangbisaandabuat.

PanelPropertiesmembantuandamengaturbeberapapropertidariobjekterpilihyangadadiStage.
Apabilatidakadaobjekyangdipilih,makapanelpropertiakanberkaitlangsungdenganproperti
Stage.

PanelToolsmemuatalatbantuuntukmembuatobjekgraphicyangdapatditambahkandalamStage.

PanelLibrarymemuatobjekobjekyangandagunakandalamfileFlashanda.

Nugroho Agus H., M.Si.

PEMBUATANPROGRAMTEKSSEDERHANA
UntukmengawalipembuatanprogrammenggunakanActionScriptakandibuatprogramuntuk
menampilkantulisansederhanaHelloWorlddanpenggunaantomboldaricommonlibrary.Flash
mempunyaibeberapakomponenuserinterfacebawaandanjugaelemenelemenlibrarybawaanuntuk
membantumembuatdesaindengancepatdanmudah.
LangkahpertamaadalahsimpanfileflashandadenganmemilihmenuFileSaveAs(atautekanCtrl+S
bersamaan)danberinamaHelloWorld.fladalamfolderkerjaanda.Selanjutnya,buatlahsebuahtombolmulai
denganmengambildarimenuWindow>CommonLibraries>Buttons,danandaakandiperlihatkankotakdialog
sepertidalamGambar1.3.

Gambar
1.3. Double-Click

folder Classic buttons>Arcade

buttons,
pilih arcade buttongreen.
Gunakan mouse anda

untuk objek button tersebut

ke dalam Stage.

Nama
instance

PadaPanelPropertiberinamainstance(namayanghanyaberlakudalamfileflashaktifanda)andadengan
namatmbMulai(ataunamalainyangmudahandaingatdanmenunjukkantomboluntukmemulaianimasi).
NamainstancetmbMulaiakandigunakandalamprogramscriptkitauntukmenunjukpadaobjekdalamStage.
Bilaandasudahselesai,andabisamelanjutkandenganmenuliskankodescriptuntukmembuatsesuatudalam
flashanda.

PembuatanKodeActionScript
PembuatankodedilakukanpadapanelAction.UntukmasukkedalampanelActions,PilihLayer1,
kemudianpilihmenuWindowAction(atautekantombolF9),danketikkankodeScriptberikutdalampanel
ActionssepertidalamGambar1.4.
1 trace (Selamat Datang, Silahkan Tekan Tombol Hijau);
2 tombolMulai.addEventListener(MouseEvent.CLICK,tekanTombol);
3 function tekanTombol(mevt:MouseEvent):void{
4

trace("Hello World");

Gambar 1.4. Panel Actions

untuk menuliskan

program ActionScript

Nugroho Agus H., M.Si.

JalankanhasilprogramandadenganmemilihmenuControlTestMovie(atautekanCtrl+Enter).PadaStage
andaakanmunculobjektombolhijau.Padasaattombolandaclickdenganmouse,andaakanmelihattulisan
HelloWorldpadapanelOutputsepertipadaGambar1.5.

Gambar 1.5.

Flash hasil Test Movie dan

panel Output

FLASHDEVELOPUNTUKPEMROGRAMANACTIONSCRIPT3.0
FlashDevelopmerupakansebuaheditoryanggratisyangbisabekerjadalamsistemoperasiWindows,
maupunMacOSX,ataupunLinux.AkantetapisejakmembutuhkanMicrosoft.NET2.0runtime,FlashDevelop
hanyaberjalandiWindows.FlashDevelopmendukungkodingyangdilakukanolehActionScript3.0.
PenggunaanFlashDevelopsebagaisebagaikompilerdaneditorActionScriptmembutuhkanbeberapa
persyaratansebagaiberikut.

Microsoft.NETframework

FlashPlayer10.1ActiveXruntime(dibutuhkanuntukmenampilkan,bertindaksebagaibrowser)

Java1.6runtime(JRE)(dibutuhkanjikaandamenggunakanFlexSDK)

INSTALASI FLASHDEVELOP
UntukmemulaimenginstallFlashDevelop,pertamakalidownloaddaninstall.NETruntime(dengan
namafiledotnetfx.exe)dariwebsiteMicrosoft(http://www.microsoft.com)dengankatakuncipencarian
Microsoft.NETFramework.Setelahandamenginstall.NETruntime,lanjutkandenganmenginstall
FlashDevelop.DownloadfileFlashDevelopreleaseyangterbarudarihalamanRelease
(http://www.flashdevelop.org/community/viewforum.php?f=11).LanjutkandenganmenginstallFlashDevelop
padakomputerAndasesuaidenganinstruksistandarselamaprosesinstalasi.Lakukanbeberapakonfigurasi
sesuaiinstruksiyangadadalamhalamankonfigurasi
(http://www.flashdevelop.org/wikidocs/index.php?title=Configuration)

Nugroho Agus H., M.Si.

Nugroho Agus H., M.Si.

Nugroho Agus H., M.Si.

Nugroho Agus H., M.Si.


LanjutkandenganmendownloadFlexSDKdarihalamanFlexSDKyangFree
(http://opensource.adobe.com/wiki/display/flexsdk/Downloads).Setelahandaselesaimendownload,anda
bisamengekstraksfileFlexSDKandadalamdirectoryandayangnantinyaakandiacudalamkonfigurasi
settinganprogramdariFlashDevelop.
SetelahandaselesaimenginstallFlexSDKdanFlashDevelop,padasaatpertamaandamenggunakan,
andaperlumengkonfigurasibeberapasettinganprogram.JalankanFlashDevelop.PilihmenuToolsProgram
Setting(atautekanF10),yangakanmemunculkankotakdialogSettingsepertipadaGambar1.6

Gambar1.6.
kotakdialog
Setting
program

Nugroho Agus H., M.Si.

Dalamkotakdialogini,pilihPluginsAS3ContextkemudianaturbagianFlexSDKLocationmenuju
pathdirectorytempatandamenaruhAdobeFlexSDKyangsudahandaekstrak.Lanjutkandenganmemilih
PluginsFlashViewerkemudianaturpathuntukFlashPlayeranda,sepertiterlihatpadaGambar1.7.

Gambar1.7.
kotakdialog

Setting
program

untuk
memilih

FlashViewer

Nugroho Agus H., M.Si.

Untukmemulaimembuatproyeksederhanadanmengkompilasinya,pilihmenuProjectNew
ProjectyangakanmemunculkankotakdialogNewProjectsepertiterlihatpadaGambar1.8.PilihAS3Project
dibawahjudulActionScript3.BerinamaPengenalanFlash,pilihlokasifileandadenganmemilihBrowsefile.
AndabisajugacentangCreatedirectoryforproject,supayadibuatkandirektorikhususuntukproyekanda.
ProyekAndaakansecaraotomatistersimpandalamfolderPengenalanFlashdengannamafileproyeknya
adalahPengenalanFlash.as3proj.

Gambar1.8.
kotakdialog
NewProject

FlashDevelopakanmemunculkantampilansepertipadaGambar1.9.Andaakanlangsungmempunyai
fileMain.asdidalamdirectorysrcanda.IsidarifileMain.asberupastandarkodedalamsebuahfile
ActionScript3(.as)tanpaandaperlumengetikkannya.

Gambar1.9.
TampilanAwal

FileMain.as
pada

FlashDevelop

Nugroho Agus H., M.Si.

DalamfileMain.asandatinggalmenambahkankodeActionScript3.0anda.Contohpembuatan
tulisanHelloWorlddapatdilakukandenganmenambahkansebuahvariabelteksdengantipeTextField,mengisi
parametertextdengansebuahstringHelloWorld,danmenampilkannyakedalamstage.Halinisamapersis
denganmenuliskannyapadapanelActionFlashProfesional.Sederhananyaadalahbayangkanbahwapanel
ActiondariAdobeFlashituadalahfungsiMaindalamFlashDevelop.Haliniakanmempermudahandadalam
bermigrasiantaraAdobeFlashProfesionaldenganFlashDevelop.

publicclassMainextendsSprite
{

publicfunctionMain():void

if(stage)init();

elseaddEventListener(Event.ADDED_TO_STAGE,init);

varteks:TextField=newTextField
teks.text="HelloWorld"

stage.addChild(teks)

}
}

UntukmelihathasildariprogramdiatasandabisamenjalankannyadenganmemilihmenuProject
TestMovie(atautekanF5,atautekanCtrl+Enter).Bilaandabenarmengetikkankodenyaakanmunculhasil
sepertipadaGambar1.10.FileflashSWFhasilpengujianandaakandisimpandalamdirektoribindengannama
PengenalanFlash.swf.

Gambar
1.10Hasil
program
HelloWorld

Nugroho Agus H., M.Si.