Anda di halaman 1dari 11

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 File New.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 Untukmemunculkansuatupanel,andabisamemilihmenuWindow Panelyangandainginkan.Panelpanel yangadadapatandabukaataututupataupindahpindahsesuaidengankeinginananda.Apabilaandaingin kembalikemodeljendelayangawallagi,andabisamemilihmenuWindow Workspace Default. Berikutinidiberikanpenjelasansingkatmengenaipanelpanelyangseringdipakai. PanelStagemerupakantempatandamembuataplikasidanjugamenunjukkanisiaplikasiandayang akanmunculsetelahandaselesaimembuatdanmenjalankanaplikasi.Andadapatmenambahkan objekobjek(bisaberupagraphic,text,komponeninteraktif,buttondansebagainya)kedalamStage. Andadapatjugamemodifikasiobjekobjektersebutataumembuatobjekbaruataupunmembuat animasiobjekandamenggunakanprogramActionScript. PanelTimelinemenyediakanframeframeyangdapatdigunakanuntukmembuatanimasiobjektanpa menggunakanprogramScript.PadapanelTimelinejugaterdapatlayerlayeryangbisaandabuat. PanelPropertiesmembantuandamengaturbeberapapropertidariobjekterpilihyangadadiStage. Apabilatidakadaobjekyangdipilih,makapanelpropertiakanberkaitlangsungdenganproperti Stage. PanelToolsmemuatalatbantuuntukmembuatobjekgraphicyangdapatditambahkandalamStage. PanelLibrarymemuatobjekobjekyangandagunakandalamfileFlashanda. Panel T l

dengan tampilan Workspace Default

PANELTIMELINE

STAGE PANEL LIBRARY

PANELPROPERTIES

Nugroho Agus H., M.Si.

PEMBUATANPROGRAMTEKSSEDERHANA
UntukmengawalipembuatanprogrammenggunakanActionScriptakandibuatprogramuntuk menampilkantulisansederhanaHelloWorlddanpenggunaantomboldaricommonlibrary.Flash mempunyaibeberapakomponenuserinterfacebawaandanjugaelemenelemenlibrarybawaanuntuk membantumembuatdesaindengancepatdanmudah. LangkahpertamaadalahsimpanfileflashandadenganmemilihmenuFile SaveAs(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. PadaPanelPropertiberinamainstance(namayanghanyaberlakudalamfileflashaktifanda)andadengan namatmbMulai(ataunamalainyangmudahandaingatdanmenunjukkantomboluntukmemulaianimasi). NamainstancetmbMulaiakandigunakandalamprogramscriptkitauntukmenunjukpadaobjekdalamStage. Bilaandasudahselesai,andabisamelanjutkandenganmenuliskankodescriptuntukmembuatsesuatudalam flashanda. Nama instance

PembuatanKodeActionScript
PembuatankodedilakukanpadapanelAction.UntukmasukkedalampanelActions,PilihLayer1, kemudianpilihmenuWindow Action(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 5 trace("Hello World"); }

Gambar 1.4. Panel Actions untuk menuliskan

program ActionScript

Nugroho Agus H., M.Si.

JalankanhasilprogramandadenganmemilihmenuControl TestMovie(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.PilihmenuTools Program Setting(atautekanF10),yangakanmemunculkankotakdialogSettingsepertipadaGambar1.6

Gambar1.6. kotakdialog Setting program

Nugroho Agus H., M.Si.

Dalamkotakdialogini,pilihPlugins AS3ContextkemudianaturbagianFlexSDKLocationmenuju pathdirectorytempatandamenaruhAdobeFlexSDKyangsudahandaekstrak.Lanjutkandenganmemilih Plugins FlashViewerkemudianaturpathuntukFlashPlayeranda,sepertiterlihatpadaGambar1.7.

Gambar1.7. kotakdialog Setting program untuk memilih FlashViewer

Nugroho Agus H., M.Si.

Untukmemulaimembuatproyeksederhanadanmengkompilasinya,pilihmenuProject New 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.

Beri Nilai