Wwwffiw*m#mffi ffi$:BasicInteractiue {. PENDAIIULUAT{ Tuiuan & Deskripsi Membuatmultimediainteraktifdenganperintahnavigasisederhana untukprofilpribadi.Multimediainteraktiftsb terdiridari garnbar/image dariphotoshop(-.jpg),imageanimasi(-.gif)dan objer oiri flash(-.runt-). Strukur/ Diagraminteraktifdigambarkan sbb:
Materi
. lmportgambarformat*.JpG*.GlFdan*.SWF . Membuat Tombol/ ButtonStandarDirector o Menyusun /mengkomposisi objek/ spritedi score/ timeline o Memberi perintah / Scriptpadatombot& frame o Membuat projectorI tileExecutable (..EXE)yangdapat dijalankan ' langsung tanpamenggunakan Macromedia Direcior.
ii:f1ill,iii,iil I
2. PERSIAPAN
mpiIankerjaseperti li"T:ffi: l'fl?:?rf'ffiirT"ffi torarurtadan Bilamasih efisien.
di bawahiniagarlebihsederhana tampilan klikmenuWindow) PanelSets) Director8 belummerubahnya 8). panelsetDirector tutorialmenggunakan (Untukselanjutnya
j._:_.:.:li s s,p--aj-F*B,q
t**ls
r*l;,xf6--
x l0
.F-
':
-j
latarbelakanghitam 2. Bidangkerja/ Stageyangmasihbennrarna akantita aturagai ukuransesuaisepertiyang kitakehendaki. r KlikStagetersebut. . Perhatikan PanelPropertyInspector,parameteruntuk mengaturluas(pixel)moviedan warnalatar,dapatdiatqfdi sini. sebagaiberikut: Atur parameternya
ilffi:fffi,.fl
. . .
StageSize Location Color
: 640 X 480 pixel :(0,0) : Hitam
Selanjutnya tutorialmenggunakan parameterdengannilaisepertiini.
Mengimport Gambar setelah bidang kerja / stage siap, langkah berikutnya adalah memasukkan / importdata,sepertigambar/ imagedariphotoshopuntuk background, tomboldari Flash dan animasigif dari lmageReady.Untuk sementaradata sudahpenulissiapkanuntukmemudahkan pengolahan di Macromedia Director. Catatan: - Untukmembuatbackgroundimagepenulislebihmudahdenganmenggunakan Adobe Photoshop, - UntukpembuatananimasiGifmenggunakan tmage Ready, - UntukPembuatanAnimasiVideodenganAdobe After Eff-ectsdan - UntukPembuatanAnimasitomboldengan MacromediaFlash
.
klikmenuFile ) lmport , makaakantampilkotakdialogimport sebagaiberikut:
,'f;J sources backt,gif bacl€.gif
X.swf 0l,dil Interactive,wbk of 01-Basic Interactive,doc I -8asicInteractive,doc
Pilihbeberapafile sekaligus(gunakantombolCtrl ) arrow backl.gif, back aboutme.ipg,back biodata.ipg,back cv.jpg, back potto.iPg,X.svvf Klik Add untukmemasukkanke dalamdaftarfile / file list yang siapdi-import.Kliklmport bilasemuasiap. Maka ada pertanyaandi kotak dialog untuk file fomat ".gif. Karenafile ..gif tersebuttampilsbg animasipilihsaja Animated Gif
.
pertanyaan di kotakdialogberikutnyauntukfile fomat ..jpg. untuk lebihmenghemat memorypilih color Depth 16 Bits. (color Depth 32 Bits untuk file yang mempunyaitransprancy/ AlphaChannelyangakandipraktekkan padatuturialberikutnya). pertanyaan Untukmenghindari kotakdialogini berulang-ulang karenaada4 (empat)file image*.jpg,makaaktifkanchecklist: Same Settings for Remaining lmages. Latu Klik OK
F.:tt rr I
Gast member Data yang sudah kita lmpoft otomatisakan masuk ke dalam Cast Member. Cast memberberfungsiuntuk menyimpandata yang akan dipakai/ ditampilkanpada movie/ proyekkita. Sementaratampilahdi cast membertampaksepertidaftar/ list sebagaiberikut:
Agar lebih mudah dikenali,ubah tampilancast member dengan tampifanthumbnaLT. Klik icon Cast Member Style untuk menswitchI bertukarantaratampilanUsf dan Thumbnail
wl8ffil
gffH&€$W I ll$ffiiffifr$ffi lllffi fli!:8ffi$x$ffig*g$*ffi8iil$ *frffig;*ffEf-:i:t {|i$FfE t F.xH't$EE
*.qffi
O_-t-
81,'l.e,ft-$+-i:ti.',"q.1ffi
Sekarangbersiaplah untukpekerjaanyangsebenarnya...
3 MEh]YUSUN DATA Meqrusun Background Halaman Menu Utama HalamanMenuUtamaterdiridari Babkgroundback aboutme.jpgdan tombolstandarMacromedia Directorsebagaiberikut:
o
Langkah berikut adalah memasukkanbackgroundback aboutme.jpgsehinggadapat tampil di stage secara tepat. Caranya:Drag (tekan dan tahan tombol mouse kiri) back aboutmedaricast memberke Score. (Bisajuga men-dragfile tidak dari castmemberke Stage,namungambarkemungkinan persisditengahlayar,sehinggaperlupengaturan manual)
tul.i.#,
yang telah masukke dalam Cast memberback aboutme:jitg scoredisebutSprite.posisibackaboutme.jpg saatini menempati 1, dengandurasi30 frame.Sampaidisini spriteChannelnomor perbedaan andamengetahui antara-Gast & Spritebukan? Bifa posisi sprite back aboutme.jpgdi Score belum seperti gambardi atas dapatdigeserposisinya denganmenggunakan toolArrow padaTools
Setelah backgrounddi Stage sudah tampil rapi, berikutnya tinggalmenambahkan tombolsederhana
ry:{5 Membuat Tombol Sederfrana 1. KliktoolPush Buttondi Tools
2. Pada Stage,Drag di tempatterserahanda sampaiukurantombol sesuaicontohdi bawahini,ketikdengannama"biodata"
3. Untuk merubahteks pada tombol, klik tombol tersebut sampai terlihataktifsepertigambardi atas.TekantombolEnterdi keyboard, makaakantampilkotakpaneltexteditorsebagaiberikut:
l#{*i{,.1:.wlffi,
i}ffi:i}-it_TiT,.Kffili
4. Untukmerubahteks (ukuran,font,size & warna)terlebihdahulu harusmenyorot/ blok teks yangakandirubah.Untukmerubah warna Teks dan Background rombol dapatmenggunakan palet warnapadatools
A/
€ tr €C
€o Eg n Ll
ColorFicker... EdhFavoriteColors...
5. Jikatombolsudahpuasandautakatik,silakanulangisampaitampil 3 tomboldi stagesebagaiberikut:
wE$FSffiS$€
i$fii$i iffli
jiiil,-gii,.;"itii
"s"ilfT:Iriql'iir.:
dantampilandi scoresekarangsebagaiberikut:
b:cte6ourre+
MenyrusunHalaman{ralaman Sub Menu Ketigatomboldi Menu Utamaakan mempunyaiperintahsendiriperintahpada sendiriuntukrnenujuhalamanlain,Sebelummemberikan tombol,kita susunterlebihdahuluhalamansub menu,dengancara (dragdaricastmemberke score). yangsamasepefiisebelumhya ke score,sprite1, mulaiframe 1. Di castmember,dragbackbiodq.Qt r?. '/
31
2. Di cast member,dragbackcvke score,sprite1 , mulaiframe61 3. Di cast member,dragbackporto ke scoredi, sprite1, mulaiframe 91 Sehinggatampilandi scoresepertiberikut:
m*ii rl ifrf*llll last
ii';: i".+&
anda/ preview.Klik hasilpekerjaan 4. Untukmencobamenjalankan perubahandi Play (tandapanahsegitiga)di toolbar,perhatikan stagedanjalannyapenunjukwaktuI PlaybackHead(garismerah) di score.
5. Di Stageakanterlihathalamanmenuutamatampilke halaman Untukmembuat lainnyasecaraterusmenerustanpaakhir(looping). tandaberhentiperluditambahperintah/ scriptpadaframeatau disebutFrameScript. Memberi Perintah pada Frame ( Frame Script ) bergantike halaman 1. Saatdi-Play,di menuutamatidakseharusnya tain secaraotomatis.Untukmemberikanperintahagar berhentidi akhirmenuutama,dobel klik di padaScriptChannel,frameke 30
ra
!r'
"i
;"r{
-:.i.--*.--i. 5 .;i '-l-i*i-:-i:-
-# 2. Akan munculWlndowScript, setelahon exit frame isi dengan perintahgo the frame, yang artinyasetelahmelewatiframe ini makaPlayback Headdiamdi tempataliasstop
on enitFrane ne a the Irane
*'E
"
3. KlikPlay untukmenjalankan movieanda.OK! Kinimoviedapat perintah/ berhentipadaakhirmenuutama,Kinitinggalmemberikan script pada ketigatombolBiodata,CuriculumVitaedan Portofolio.
Memberi Perintah pada Tombol (Button) 1. Kini kita akan memberikanscriptpadatombolBiodata.Klik kanan tombolbiodata,akanmunculmenu,pilihScript
,* i :rt,
: ,, -" ' ,
m
Propettiet..'.
"t
fAt Cattf'rornt-*
Akan munculWindow Script, setelahon mouse up isi dengan perintahgo 31, yang artinya: Jika mouseditekanmakaplayback head menujuframe 31 alias ke halamanback biodata,sebagai berikut:
.:.4 :-fj
3. Catatan:Selainperintah/ scriptgo 31 dapatpuladiisigo to frame 31, ataugo to 31. Tapilebihmudahdengango 31 sajabukan?
tr
*flif 4. Klik Rewind lalu klik Play untuk menjalankan movieanda. Saat anda klik tombolBiodafa,moviemasukke halamanback biodata, tapi terus 'bablas'ke halaman back cy dan back porto. Seperti masalah sebelumnya,tentu anda sudah tahu caranya agar PlaybackHeadberhentidi halaman back biodata,yaitu dobel klik pada script Channeldi frameke 60 lalu memberiperintahgo the frame.Begitubukan? 5. Bukan!! Meskipunmovie tetap bisa berjalanlancar,tapi proyek andatidakefisien.Bilaandamelakukan caradi atasrnakaakanada 2 perintahgo the framedi castmember.Ini adalahpemborosan. 6. LebihbaikCopy sajaframescriptdi frame30, caranya:Pilihframe scriptdi 30 tekan Ctrl + C di keyboard 7. Lalu Pastedi frame60. caranya:Pilihframescriptdi 60 tekan Ctrl + V di keyboard,ulangike frame90 dan 120,sehinggatampilandi scoresebagaiberikut: ,:j.i - --
x -.tl -{1---.-l-r.=il,-_.i-C @:
ii---_.".-r: .il- -:- --: ; i. ' i t
.ii.-- --__1
.:-r-ri't'
8. Makaperintahgo the framedi cast membertetapcumaada 1, tapi
dapatdipakaidi beberapaframe. 9. Tes kembalimovieanda,Klik Rewindlalu klik Play. saat anda klik tombol Biodata,movie masuk ke halamanback biodata,tapi anda tidak bisa berbuatapa-apakarenatidakada tombolback/ kembali ke menuutama
Background Transparant untuk Image GIF 1. Tombolarrowbackl dibuatdi AdobelmageReady 2, Drag arrowbackl di cast memberke score spriteChannelz, di frame31,sebagai berikut:
g t$f+l]18x*.1,.q"$,ffi +$$f
3. Di Stage,Aturposisiarrowbackl, sepertigambarberikut,perhatikan gambartersebut.Bidang bahwaadabidangputihdi sekeliling tersebutadalahbackgroundsaatmemhuatdi AdobelmageReady
caranya: tersebutdapatdi hilangkan, 4. Background . Di Stage,Aktifkanarrowbackl tersebut . Lihatdi PanelProperyInspector,gantiInk modeCopy menjadiBackgroundTranParent.
$iLFliiii:,8t1$ili
Beverse Ghosl Not Copg Not Transpalent Not Fleverse Not Ghost Mash Blend Darkest
g ar.{owbackl tersebuttampak{ebihrapi,tanpaada 5. Sekaran putihyangmembatasigambar. background
:$ 'tig,ffiff
E-ffiffi$g-ti€i:E$]EF *gffi
Memberi Perintah pada Tombol (Button) Back
1. Tentu anda sudah dapat memberi perintah seperti tombol' Ktik kanan tombolarrowbackl, akan munculmenu, sebelumnya, pilihScript 2. Akan munculWindow Script, padabarissetelahon mouse up me isi denganperintahgo 1, yang artinya:Jika mouseditekanmaka pergike frame1 aliaske awalmovie,sebagaiberikut:
rffi
i ,e* s i ;..;q_E t _Qilt _lli;=€;, na**.**....'
W:k--T
3. Tombol arrowbackl akansamapadasemuahalaman(kecuali halamanmenuutamakarenatidakada),olehkarenaitu daripada meng-copymenjaditombolke setiaphalaman,lebihbaikmenambah durasi/ panjangspritearrowbackl dariframe31 ke frame120. Caranya:Drag ujungkananspritesampaike frarne120,sehingga tampilandi scoremenjadisebagaiberikut:
Jika kita klik/ aktifkantomboilarrowbackl, akantampilandi PropertyInspectorsebagaiberikut:
I
Tombol (Bufton) Exit 1. TombolX yangtelahkitaimport,dibuatdi Macromedia Flash. 2. Dengancarayangsamasepertisebelumnya, Drag TombolX di cast memberke score spritechannel4, di frame 1, sebagai berikut: ry:=j r,'r
:;J - i,
{:
I
;jj---II.J lw:J'r .-:l------: _!:
s
.i:-----:F -ir---,tr1lil.g 1
AturposisitombolX'tersebut,misaldi kiriatasmovie
3. Dengancarayangsamasepertitombolarrowbackl, hilangkan padatombolX. Di PanelPropery bidangputih/ background lnspector,gantiInk mode-nyamenjadiBackgroundTranparent.
'! ffiffirreTffig ffilffi! ]!ffiilffiEr!:gi niffiffiffimfi8lt tffiffiilr&ffil!ffi! !i3i? ilt||fint | tiI tiltl t!iltNffiilf;
F.l":fftr
Pada tombol 'X'berikan perintahI Script sebagaipada tampilan berikut.setelahon MouseUp me isi denganperintahhalt, yang artinya:Jikamouseditekanmakamovieselesai, sebagaiberikut: + {}i; nl
f i, f f iiF* ' F i r
iftli
i_ ,,
ar
, i
'''''.,'r.T : ::'
on nouseUp rne halt end
Silahkantes kembalimovieanda,KlikRewindlaluklikPlay.OK Bukan?
4 MEMBUATFII.E EXECUTABIE/ PR(UEGTOR Setelahpekerjaankita sudahtidak ada kesalahan,langkahterakhir yaitu mempresentasikan pekerjaankita kepadaoranglain. Masalahnya di komputerlaintidakdiinstallMacromedia Directornya. Jika hanyaingin (tapitidakdapatmemperbaikiledit) pekerjaankita,tidak menampilkan perlu menginstall MacromediaDirectorke komputerlain tersebut,yang kita lakukanadalahmembuat/ meng-compilefile menjadiExecutable. Di Macromedia Directoristilahfile Executable adalahProjector. 1. save proyek/ pekerjaananda, klik menu File ) save sebagai berikutberinamamisalkanaboutme.dir Saycin li3 0l€asicIntaactive
Flename:
laboutm{
9ave as tlpe:
lDirectorMovie
I + a e lE l. l
|
*si'"
I
cancd I
2. Setelahyakinfile tersebutaman/ sav6, saatnyauntukmembuat (".exe).KlikMenuFile) CreateProjector,pilihfile fileExecutable aboutme.dir , akantampilkotakdialogsebagaiberikut: Intetactive 1*t .ir l';!l t)1'Basic
ffiF
j*aeftrl-
,
iiffig!'E$$E T- Hs iffiffi.€ffisffiE"]ffi ii$ffiiffi€ffxH"g:HFrt i$ffi$E iIffi!$B fwfH*ff :ffi$HEiH$
3. Untukmengaturtampilanfile Executablenanti,klik Optiof,'., maka akantampilkotakdialogsebagaiberikutdan aturparameternya o Option: In a Window (agar movie tidak menutupidesktop windows) o StageSize: Center(agarmovietampilpersisdi tengahlayar)
4. Klik OK, maka kita kembalike tampilankotakdialogsebelumnya, Semuanyakinisudahsiap,klikGreate
5. Simpan tile Executable(..exe)/ Projecforanda di lokasi / folder terserahanda,beri nama misalkanProjector(ataunamalain),Klik Savejika sudah
6. Akan -ada tampilan progress bar selama beberapa delik, yang
menandakan karenakomputersedangbekerja,sebagaiberikut
projectortersebutada file 7. Beres!,Di foldertempatkitamenyimpan baruyaituprojector.exe denganukuranfile3,5MBsebagaiberikut:
l;ir:li$.{$F;ffitffi;i B. Untukmelihathasilpekeriaanyang telah kita buat dengansusah payah, dobel klik file projector.exetersebut,maka akan terlihat tampilanpekerjaankitadan latarbelakangdesktopwindowskurang lebihsebagaiberikut:
Pelajarandi tutorialini adalahdasar untuk melanjutkanke tutorial penjelasantidak akan panjanglebar berikutnya.Untukselanjutnya, sepertiini. Gef Ready! ---end ---
$'E*ffi $$ : 5ft: E l l$$ wiEr$f;wsffiffi#$
$ glH*F$s.Tffi$:
