Popular Posts

Blogger templates

Blogger news

Blogger templates

Blogger news

Comments

bingung
Diberdayakan oleh Blogger.

uts flash

Daftar Isi
Daftar Isi ..................................................................................... i
Pendahuluan ................................................................................ 1
Bab 1 Interfacce Macromedia FFlash 8 Professioonal .................... 2
a. Flash Sttage ........................................................................ 2
b. Toolboxx ............................................................................. 5

Bab 2 Teknik Dasar Flash .......................................................... 10


a. Animasii
b.Animasii
c. Animasii
d.Animasii
e. Animasii
Frame by Framme .................................................. 10
Shape .................................................................. 11
Motion ................................................................ 13
Motion Guide ...................................................... 16
Masking .............................................................. 18


f. Symbol dalam Flash .......................................................... 20
g.Frame LLabel Sederhana ..................................................... 26
Bab 3 Bekerjaa dengan Flash LLite ................................................ 33
a. Openingg ......................
.
b.Label Frrame ...............
.
c. Softkey Opening .........
.
d.Menu UUtama ...............
.
e. Softkey Menu Utama ..
f. Isi Menuu .....................
.
1. Sinngle Page .......
.
2. Mutiple Pages ....
...................................................... 36
...................................................... 44
...................................................... 47
...................................................... 51
...................................................... 55
...................................................... 58
...................................................... 58
...................................................... 66


g.Soal Evaaluasi ..................................................................... 74
h.Halamann Bantuan .............................................................. 83
i. Exit .................................................................................... 88
Bab 4 Transfeer ke Handphonee .................................................... 92


Flash Lite for MMobile Learning i

Pendahuluan

Macrromedia Flash 8 Professionaal merupakan salah satu
software yangg bisa digunakann untuk membuatt animasi 2 dimeensi, bahan
pembelajaran berbentuk multtimedia interaktiif, bahkan untukk membuat
Mobile Learnning. Software ini juga dilenggkapi dengan ffitur untuk
memasukkan gambar, video, aataupun suara.


Kompuuter SSoftware Flash Handphonne

Gambar Bagan pembuatan Mobbile Learning

Sebellum kita memuulai belajar memmbuat M-Learniing dengan
Flash Lite, adda baiknya kita mengetahui hal--hal dasar menggenai Flash
agar lebih mmudah dalam mmenggunakan Flash Lite nantinnya karena
dasar-dasar Fllash sangat mutl ak diperlukan unntuk Flash Lite.

Berikkut ini meruppakan pembahaasan mengenai cara-cara
pembuatan M obile Learning. Selamat Mencobba!
Flash Lite for MMobile Learning 1


Bab 1

Interface Macromedia Flash 8 Professional

a. Flash Stage
Pada intinya, Stage adalah lembar kerja yang akan
kita gunakan dalam Flash. Di area kerja inilah kita dapat
memasukkan gambar, membuat objek, dan mengatur tampilan
objek yang kita buat.


Flash Lite for Mobile Learning 2 Flash Lite for Mobile Learning

Gambar mengubah ukuran Stage lewat panel Properties


Ukuran Stage pun bisa kita ubah sesuai keinginan. Ukuran
default yang diberikan Flash sendiri adalah lebar (width) 550
dan tinggi (height) 400 pixel. Untuk mengubah ukuran Stage,
perhatikan pada panel Properties > klik Size atau bisa juga
dengan klik Modify > Document


Gambar mengubah ukuran Stage melalui menu Modify



Lalu akan muncul kotak dialog Document Properties


Gantilah nilai pada bagian Dimension sesuai keinginan. Untuk
mengubah warna background, lakukan dengan klik
Background color. Akhiri semuanya dengan OK.


Flash Lite for Mobile Learning 4

b. Toolbox
Toolbox berisi alat-alat kerja yang masing-masing memiliki
fungsi yang berbeda. Berikut adalah beberapa komponen dalam
Toolbox Macromedia Flash 8 Professional :

.
Selection Tool


Berguna untuk melakukan seleksi pada objek, serta
sebagai tool yang paling sering digunakan.

.
Subselection Tool


Berguna untuk membentuk gambar atau membentuk
ulang objek yang diseleksi.

.
Free transform tool


Berguna untuk mengubah ukuran objek yang sudah
diseleksi dan memindahkan objek .

.
Gradient transform tool


Berguna untuk menggeser letak cahaya pada warna
objek bertipe gradient dalam sebuah objek.

Flash Lite for Mobile Learning


.
Line tool


Tool ini berguna untuk membuat garis.

.
Lasso tool


Berguna untuk melakukan seleksi pada objek secara
otomatis sesuai dengan jenis warnanya.

.
Pen tool


Digunakan untuk membuat objek dengan membentuk
sudutsudut.
Hubungkan sudut akhir dengan sudut awal untuk
membuat objek menjadi satu kesatuan.


.
Text tool


Tool ini digunakan untuk membuat teks baru.

.
Oval tool


Tool ini berguna untuk membuat objek berbentuk
lingkaran.

Flash Lite for Mobile Learning
6

.
Rectangle tool atau Polystar tool


Tool ini dibagi dua, yaitu Rectangle tool dan Polystar
tool
.
Rectangle tool

Berguna untuk membuat objek berbentuk persegi

.
Polystar tool
Digunakan untuk membuat objek berbentuk bintang
atau persegi 5, atau disesuaikan dengan kebutuhan.

.
Pencil tool


Digunakan untuk membuat objek sesuai dengan
keinginan kita, seperti menggunakan pensil di atas
kertas.

.
Brush tool


Berguna untuk membuat objek dengan tipe garis seperti
menggunakan kuas di atas kertas.

Flash Lite for Mobile Learning


.
Ink tool


Digunakan untuk menuangkan tinta warna, ke dalam
ruangan kosong dalam objek.

.
Paint bucket tool


Digunakan untuk menuangkan warna, berguna seperti
ember yang menuangkan cat ke dalam ruang kosong
dalam objek.

.
Eyedropper tool


Digunakan untuk memberitahu jenis warna, atau
mencocokan warna pada fiil color atau stroke color
sesuai dengan warna yang sudah ada pada stage.

.
Eraser tool


Digunakan untuk menghapus bagian objek.

Flash Lite for Mobile Learning 8

.
Hand tool


Digunakan untuk menggeser stage, sehingga sesuai
dengan pandangan mata kita.

.
Zoom tool


Digunakan untuk memperbesar pandangan pada stage.

.
Stroke color


Digunakan untuk memberi warna pada garis atau outline
pada suatu objek baru yang kita buat.

.
Fill color


Digunakan untuk memberi warna pada bagian dalam
objek baru yang kita buat.

Flash Lite for Mobile Learning


Bab 2
Teknik Dasar Flash

a.
Animasi Frame by Frame
1.
Di layer 1, di frame pertama buat lah sebuah lingkaran
dengan oval tool
2.
Lalu di frame kedua tekan F6 (Insert Keyframe) dan ganti
warna tengah lingkaran menjadi biru
3.
Lakukan hal yang sama sampai frame ke 5, dengan berbagai
warna yang berbeda
4.
Tekan Ctrl+Enter untuk melihat hasilnya.
b. Animasi Shape
Digunakan untuk membuat animasi perubahan bentuk.

1.
Buat objek kotak dengan menggunakan Rectangle tool
2.
Posisikan objek di pojok kiri
Flash Lite for Mobile Learning
10

Flash Lite for Mobile Learning


4. Pada frame lima, objek kotak dihapus dan diganti objek oval
3.
Insert keyframe di frame 5 lalu geser ke kanan objek
lingkaran tersebut
5. Klik diantara frame 1 dan 5
6. Lihat Properties di bawah lalu ganti Tween > Shape
Flash Lite for Mobile Learning
12

c. Animasi Motion
1.
Di layer pertama ganti dengan nama bola1, buat sebuah
lingkaran dengan warna hijau, dengan gradasi cahaya di
pojok kiri,
2.
Dengan gradient transfrom tool tarik gradasi hijau ke
sebelah kiri.
Flash Lite for Mobile Learning

3.Lalu buat layer baru, beri nama bola 2.
4.Buat lingkaran warna merah di pojok kanan stage , tarik
cahaya gradasi ke pojok kanan merah.
5.Seleksi dengan Selection tool
6.Lalu tekan Ctrl+G

7.
Lakukan ke kedua bola tersebut
8.
Di layer bola1 pada frame 10 tekan F6 (Insert Keyframe),
pindah posisi bola ke tengah stage
9. Lakukan ke kedua bola, hingga bertabrakan
10. Pada kedua layer, buat animasi seperti pantulan, di frame 15
tarik kedua bola ke dekat posisi semula. Dengan cara tekan
F6 di frame 15 pada kedua layer, tarik bola dengan Selection
tool
11. Lalu pada kedua layer tersebut pada frame 25 buat kedua
bola kembali bertabrakan.
12. Di antara keyframe, klik kanan > Create Motion Tween.
13. Lakukan di semua layer dan semua frame.
Flash Lite for Mobile Learning
14

Flash Lite for Mobile Learning


14. Di tengah frame ketika sudah di motion tween, pada panel
Properties rotate pada layer bola 1 di ganti dengan CW
semua.
15. Pada layer bola2 ganti dengan CCW
16. Untuk melihat hasilnya tekan Ctrl+ENTER
d. Animasi Motion Guide
1.
Pada stage kosong buat objek yang akan dibuat untuk
mengikuti alur.
2.
Import gambar dengan File > Import to Library.
3.
Lalu tarik objek dari Library ke stage.
4.
Seleksi objek lalu tekan Ctrl+G
Flash Lite for Mobile Learning
16

5. Lalu buat layer motion guide
6.Pada layer guide buat lintasan menggunakan Pencil tool
7.Lalu dengan Free Transform tool letakkan titik tengah objek
di layer satu pada ujung lintasan, dan di keyframe akhir
letakan pada pangkal lintasan
Posisi objek di keyframe awal terletak di depan lintasan


Flash Lite for Mobile Learning


Posisi objek di keyframe akhir terletak di akhir lintasan

8.
Tekan Ctrl+Enter untuk melihat hasil movie.
e.
Animasi Masking
Pada animasi ini, hanya bagian yang tertutup oleh topeng (mask)
yang akan terlihat ketika animasi dijalankan.

1.
Buat teks dengan menggunakan Teks tool
2.
Insert layer lalu buat objek kotak yang nantinya sebagai
tutup (mask). Objek kotak di group karena nanti akan
dilakukan tween motion terhadap kotak tersebut.
3.
Insert keyframe di frame 25 pada layer 2 (kotak). Pindahkan
objek kotak ke sebelah kanan
4.
Klik kanan diantara frame 1 dan 25. Pilih Create Motion
Tween
Flash Lite for Mobile Learning
18

5. Klik kanan pada layer 2 lalu pilih Mask
6. Tes Movie (Ctrl + Enter)
Flash Lite for Mobile Learning


f.
Symbol dalam Flash
Penggunaan symbol pada Flash, penting dilakukan apabila suatu
ketika objek yang telah kita buat terhapus atau hilang maka kita dapat
menggunakannya kembali karena obyek yang telah berubah menjadi
symbol otomatis tersimpan di library Flash. Dalam bentuk symbol, kita
dapat membuat animasi di dalamnya (animasi didalam animasi). Selain
itu juga ada yang dapat kita fungsikan menjadi sebuah tombol. Symbol
pada flash terdiri dari 3, yaitu:

1) Symbol Grafik

Symbol Grafik lebih banyak difungsikan untuk menjadi sebuah

objek gambar.

Contoh Animasi :

a.
Import gambar motor ke stage
b.
Seleksi gambar lalu klik Modify . Convert to Symbol
. Graphic. Beri nama dan tempatkan Registration Point
pada posisi tengah lalu klik OK.
c.
Klik double pada objek gambar motor. Muncul symbol
grapik moge didalam Scene 1.
d. Insert keyframe pada frame 25 lalu geser objek motor
kesebelah kiri
e. Klik kanan diantara frame 1 dan 25 lalu pilih Create
Motion Tween


f.Kembalikan ke Scene 1
g.Insert frame di frame 20 (symbol grafik membutuhkan
framelebeih dari satu untuk menjalankan animasi).
h.
Test Movie (Ctrl + enter)
Flash Lite for Mobile Learning
20

Flash Lite for Mobile Learning


2) Symbol Movie Clip

Symbol Movie Clip mempunyai kemampuan untuk membuat
animasi didalamnya(animasi didalam animasi) dan juga
digunakan untuk animasi menggunakan script.
Contoh Animasi
:


a.
Import gambar kupu-kupu ke dalam stage
b.
Seleksi gambar lalu klik Modify . Convert to Symbol
. Movie Clip. Beri nama dan tempatkan registration
pada posisi tengah lalu klik OK.
c.
Klik double pada objek gambar kupu-kupu. Muncul
symbol grapik kupu didalam Scene 1.
d.Buat animasi pergerakan kupu-kupu mengepakkan
sayap. Dari frame 5, 10, 15 diberi keyframe buat menjadi
pendek
Flash Lite for Mobile Learning
22

e.
Kemudian diantara keyframe tersebut diberi tween
motion (berada pada propertis dibawah).
3) Symbol Button

Symbol ini difungsikan untuk dijadikan sebuah tombol.
Mempunyai tampilan frame yang berbeda didalamnya.
Tampilan tersebut yakni Up, Over, Down, dan Hit yang
memiliki fungsi berbeda.

Flash Lite for Mobile Learning

f.Kembalikan ke Scene 1
g.Tes Movie (Ctrl + enter). Animasi dapat berjalan karena
Symbol Movie Clip bisa berfungsi walaupun hanya
mempunyai 1 frame

Contoh Animasi :

a.
Buat objek lingkaran dengan warna colour radial
Flash Lite for Mobile Learning
24

b.Seleksi gambar lalu klik Modify . Convert to Symbol
. Button. Beri nama dan tempatkan registration pada
posisi tengah lalu klik OK
c.Klik double pada objek lingkaran. Muncul symbol
grapik tombol didalam scene 1
d.Beri keyframe di frame over, down, dan hit. Pada frame
over ganti warna lingkaran menjadi merah radial. Di
frame down warna biru radial dan di frame hit silver
radial.
Catatan:

Up : tampilan awal
Over : tampilan waktu disentuh
Down : tampilan waktu ditekan atau di klik
Hit : Area sentuh tombol


e.
Kembalikan ke scene 1
f.
Tes Movie (Ctrl + enter)
Flash Lite for Mobile Learning


g. Frame Label Sederhana
Frame label adalah cara sederhana membuat hyperlink pada
program aplikasi macromedia flash. Berikut langkah-langkah membuat
frame label :

1.
Pada layer satu ganti nama layer menjadi action. Di layer ini
digunakan untuk meletakan berbagai macam actionscript.
2.
Buat layer baru dan ganti nama layer menjadi label.
Layer ini berfungsi sebagai tempat dimana kita berhenti.
3.
Lalu buat layer lagi, ganti nama dengan obyek. Layer ini
digunakan untuk meletakkan objek benda yang akan di
hyperlink-kan.
Flash Lite for Mobile Learning
26

4. Pada layer action, di frame pertama (keyframe1) klik kanan
frame, pilih actionscript, lalu ketikkan stop();
5.
Lalu pada layer objek buat 3 bentuk link menu, yaitu hijau,
biru, dan merah. Dengan menggunakan Teks tool.
6.
Lalu buat persegi hitam di belakang tulisan masingmasing
lalu seleksi persegi beserta tulisannya satu persatu,
klik kanan Convert to Symbol > pilih type button > beri
nama sesuai tulisan menu > OK
7. Pada layer objek, frame 2 klik kanan klik Insert Blank
Keyframe, buatlah sebuah lingkaran bewarna hijau.
Flash Lite for Mobile Learning


8.
Lalu di layer label, klik kanan Insert Blank Keyframe
pada frame 2, dan ganti nama frame label pada panel
Properties dengan hijau.
Flash Lite for Mobile Learning
28

9.
Lakukan yang sama, sampai memenuhi ketiga link tersebut,
warna lingkaran di sesuaikan dengan menu, begitu pula
nama frame label di sesuaikan dengan warna lingkaran pada
stage.
10. Begitu pula pada layer action, di setiap frame lakukan Insert
Keyframe lalu, ketikkan stop();
11. Setelah itu kembali ke layer objek pada frame 1
12. Klik kanan button hijau pada stage > Action
Flash Lite for Mobile Learning


13. Ketikkan
on (release) {
gotoAndStop("hijau"); }


14. Pada button biru > klik kanan > Action
15. Ketikkan
on (release)
{
gotoAndStop("biru")
;
}


16. Pada button merah > klik kanan > Action
17. Ketikkan
on (release)
{
gotoAndStop("merah")
;
}


18. Lalu pada layer label frame 1 ganti nama frame label
dengan home
Flash Lite for Mobile Learning 30

19. Buat layer baru, beri nama tombol home
20. Pada frame2, klik kanan Insert Blank Keyframe
Flash Lite for Mobile Learning

21. Pada layer tombol home, di frame 2 buat sebuah tombol
home di pojok bawah stage.
22. Buatlah tulisan “HOME” dengan background persegi abu-
abu, seleksi keduanya lalu klik kanan Convert to Symbol,
23. Pilih button ganti nama dengan “HOME”

24. Klik kanan tombol home
25. Ketikkan
on (release)
{
gotoAndStop("home")
;
}


26. Untuk melihat hasilnya tekan Ctrl+Enter
Flash Lite for Mobile Learning 32

Bab
Bekerja dengan Flash Lite


Selain untuk membuat animasi dan multimedia pembelajaran
berbasis desktop, Flash juga mampu membuat multimedia pembelajaran
berbasis mobile atau yang sering disebut mobile learning (M-
Learning). Flashlite adalah fasilitas yang khusus disediakan oleh
program Flash untuk membuat M-Learning tersebut. Kita juga bisa
membuat animasi, memasukkan gambar, suara, ataupun video. Untuk
menjalankannya di HP ada yang bisa langsung plug and play, tetapi ada
juga beberapa jenis HP yang membutuhkan software pendukung untuk
memainkan flashlite, yakni Flashlite Player. Dengan menggunakan M-
Learning, belajar bisa dilakukan di manapun dan kapanpun.

Berikut adalah gambar beberapa tipe HP yang tersedia di
dalam Macromedia Flash 8 untuk menjalankan preview project dari
Flashlite :


Flash Lite for Mobile Learning


Project yang akan kita buat kali ini ditujukan untuk
pembelajaran. Buka program Macromedia Flash 8 Professional terlebih
dahulu. Dari tampilan awal yang ada plih bagian Create From
Template > klik Global Phones.

klik Global
Phones


Flash Lite for Mobile Learning 34

Akan muncul kotak dialog New from Template > pilih Flash Lite 1-1-
Symbian Series 60 > OK

Layer default
Flash Lite
Flash Lite for Mobile Learning

Secara otomatis akan tersedia area kerja (Stage) yang berukuran 176 x
208 pixel dengan dua layer yang sudah tersedia. Tampilan tersebut
adalah tampilan default Flash Lite yang digunakan.



Stage
176 x 208
pixel



a. Opening
1. Setelah membuat dokumen baru, ganti nama layer Content
menjadi isi
2. Masukkan gambar dengan cara pilih File > Import
>
Import to Stage
Flash Lite for Mobile Learning 36

Flash Lite for Mobile Learning

3. Cari dan tentukan gambar lalu klik Open
4. Atur posisi dan ukuran gambar sesuai keinginan dengan
Free Transform Tools. Gunakan kombinasi klik drag
mouse dan tombol Shift secara bersamaan agar lebar dan
panjang gambar terskala bersamaan.

5. Kllik kanan pada ggambar lalu pilihh Convert to Symmbol
6. Gaanti nama sesuaai keinginan, piliih Movie clip. TTempatkan
Reegistration Poinnt di tengah akhiiri dengan OK.
Registration Point
Flash Lite for MMobile Learning 38

7. Kllik dua kali gammbar yang sudahh menjadi Moviie clip atau
bisa juga melalui EEdit > Edit in PPlace
8. Kiita akan mengganimasikan gaambar secara Zoom In.
Teerlebih dahulu, kklik kanan gammbar > Convert to Symbol
> pilih Type Graaphic dan Registration di tengahh. Klik dua
kaali di gambar sehingga akaan masuk padda bagian
peengeditan Graphic.
Tanda
masuk
G
bahwa kita
pengeditan
Graphic
9. Taambahkan layeer di atas Layer 1 yang nantinyaa akan kita
isii teks.
Tambahkaan layer


Tambbahkan teks


Flash Lite for MMobile Learning


10. KKembali ke Movvie clip Logo kemudian klik kannan frame
kke-10 lalu pilih IInsert Keyframme.
11.
KKlik frame 1, lalu perkecil ukuran gambarr sehingga
sskalanya menjadi 0% dengan Free Transfoorm Tool.
KKemudian, perrhatikan bagiann Tween padda jendela
PProperties. Ubahh pilihan None mmenjadi Motionn. Lakukan
tes animasi semeentara dengan CCtrl + Enter ataau melalui
mmenu Control > Test Movie.
Innsert Keyframe ddi
fraame di frame ke--10

Flash Lite for MMobile Learning
40


Ubah pillihan None menjjadi Motion


Tampilan fraame setelah dibeeri motion

12.
AAgar animasi ggambar tidak bberjalan terus, tambahkan
aaction stop(); di keyframe 10 dengan kllik kanan
kkeyframe 10 > AAction. Perhatikkan pada panel ssebelah kiri
jendela Action.. Pilih Globall Function > Timeline
CControl > kliik dua kali stop sehinggaa otomatis
aactionscript stopp(); akan muncull di bagian kanann.
Flash Lite for MMobile Learning


13.
KKembali ke Scenne > tambahkann teks di Layer isi sebagai
ppertanda tombol apa yang haruss diklik user untuk menuju
kke menu utama. Di sini dicontoohkan kita haruss menekan
tombol Enter/Seelect (tombol tenngah) untuk meenuju menu
uutama.
Klik untukk kembali ke Sceene


Flash Lite for MMobile Learning
42


Tambahkan teks di Layer isii


Tombol

EEnter/Select

tengah

14.
KKita akan memmbuat 3 buah mmenu utama yaakni Flash
DDasar, Flash Liite, dan Evaluaasi. Untuk mengge-link-kan
mmenu-menu ters ebut, kita akan mmenggunakan laabel frame.
SSebelumnya, blook frame ke-25 dari seluruh laayer > klik
kkanan pilih Inseert Frame.
Flash Lite for MMobile Learning


Blok fram
lalu klik k
Insert
me ke-25
kanan pilih
Frame
Blok fram
lalu klik k
Insert
me ke-25
kanan pilih
Frame
b.
Label FFrame
1.
BBuatlah layer baru di atas
““label”
Tamp ilan frame setelaah Insert Frame

Flash Lite for MMobile Learning

layer isi denggan nama

hingga frame kee-25

44



TTampilan frame dengan tambahaan layer label

2.
MMasukkan lima kkeyframe di layeer label, yakni di frame ke11,
frame ke-5, frrame ke-10, framme ke-15, dan frrame ke-20
yyang nantinya akkan kita jadikan keyframe tersebbut sebagai
llabel frame.
Insert Keyframe


Flash Lite for MMobile Learning


Keyframe memiliki bendera di

3.
Perhatikan kotak Frame Label pada panel Properties.
atasnya setelah diberi label

Tuliskan nama label seperti berikut :

a.
opening untuk keyframe ke-1
b.
menu untuk keyframe ke-5
c.
flashdasar untuk keyframe ke-10
d.
flashlite untuk keyframe ke-15
e.
evaluasi untuk keyframe ke-20
Yang perlu diperhatikan adalah dalam penulisan frame
label, sebaiknya menggunakan huruf kecil semua dengan
kata yang tidak terlalu panjang dan haram untuk
mengetikkan spasi.


Flash Lite for Mobile Learning 46 Flash Lite for Mobile Learning

c.Softkey Opening
1.Buat layer baru di atas layer isi > ganti nama menjadi
Softkey.
Jika semua keyframe tersebut sudah diiberi label, maka
tampilan Timeline akan terlihat dengan bendera merah di
atasnya seperti gambar berikut :


Pemberian actionscript pada Softkey juga akan berbeda
tiap keyframe karena perbedaan penggunaan tombol yang
nantinya akan digunakan. hal tersebut akan kita atur



setelah semua isi pada masing-masing label frame
lengkap.

2.
Buatlah objek (bisa berupa teks/objek lain) di luar Stage
yang akan kita jadikan Softkey > Convert to Symbol >
pilih type button
Convert to Symbol > Pilih type button
dan ganti nama menjadi softkey

Objek di
luar
Stage
sebagai
softkey

3.Berikan actionscript pada softkey dengan klik kanan
tombol softkey > Action
4.Pada panel Action, pastikan bertuliskan Actions-Button
dengan gambar tombol softkey di bawah area pengetikan
actionscript.
Flash Lite for Mobile Learning
48


5.
Klik Script Assist yang ada di sebelah kanan panel
Action.
Script Assist akan memudahkan kita untuk membuat
actionscript tanpa mengetikkan satu per satu
actionscriptnya.
Klik dua kali goto dari panel Action sebelah kanan
sehingga pada area pengetikan actionscript sehingga
otomatis akan muncul beberapa actionscript.

ganti on (release)
on (keyPress "<Enter>")

karena tombol yang akan kita tekan adalah tombol
Enter untuk meuju ke menu utama.

Flash Lite for Mobile Learning


kanan. Pastikan juga panel Action bertuliskan Actions-
Frame karena script akan kita letakkan di frame.


Flash Lite for Mobile Learning 50 Flash Lite for Mobile Learning

.ganti gotoAndPlay(1); gotoAndStop("menu");
karena setelah tombol Enter ditekan menuju ke frame
label “menu”


6.Tambahkan pula action stop(); di layer ActionScript
dengan klik kanan frame ke-1 layer ActionScript >
Actions. Klik dua kali stop pada panel Action sebelah
d.Menu Utama
1.Lalu pada layer isi, klik kanan frame ke-5 > Insert
Blank Keyframe. Di frame inilah kita akan membuat
tombol menu.

2. SSetelah itu, buat lah 3 tombol di Stage untuk meenu utama,
yyakni Flash Dassar, Flash Lite, ddan Evaluasi.
3.
UUntuk memperccepat pembuatann tombol bisa juuga dengan
DDuplicate Symbbol di panel Libbrary > ganti dengan nama
yyang berbeda > OK. Drag ketigga tombol dari Library ke
SStage dan atur poosisinya serapi mmungkin.
Flash Lite for MMobile Learning
52

Flash Lite for MMobile Learning


4.
GGanti teks di dallam tombol keddua dan ketiga ddengan klik
ddua kali masing--masing tombol.
TTampilan Stage ssetelah

semmua menu digantti teksnya
Klik duua kali tombol
untuk mmengganti teks


5.
TTambahkan tekss di atas tomboll menu sebagai judul dan
teks di bawah tombol menu sebaagai petunjuk usser (tombol
aapa yang harus dipilih, sesuaikaan dengan actioonscriptnya
ddi softkey).
Flash Lite for MMobile Learning
54

e.
Softkeyy Menu Utama
Untuk softkey di mennu utama, kita hhanya perlu mennambahkan
keyframme baru dan mmengganti actionnscript dari sofftkey yang
sudah kita buat padaa Opening, tidaak diperlukan pembuatan
softkeyy baru.

1.
PPada frame ke--5 layer softkeyy > klik kanann > Insert
KKeyframe
2.
UUntuk menggannti actionscriptnnya, klik kanaan button
ssoftkey > Actiion. Karena mmemiliki 3 tombbol menu,
aactionscript yanng harus disediakan juga 3 paket. Buat
aactionscript sepeerti berikut ini jika akan mennggunakan
ttombol angka ddalam memilih mmenu.
Flash Lite for MMobile Learning


on (keyPress "1") {

Jika ditekan tombol

angka 1, maka akan

gotoAndStop("flashdasar");


menuju ke frame yang
berlabel flashdasar

}

on (keyPress "2") {
gotoAndStop("flashlite");
}
on (keyPress "3") {
gotoAndStop("evaluasi");
}
Jika ditekan tombol
angka 2, maka akan
menuju ke frame yang
berlabel flashlite



Jika ditekan tombol
angka 3, maka akan
menuju ke frame yang
berlabel evaluasi


Jika akan menggunakan tombol Enter/Select untuk
memilih menu, peletakan script harus pada button
langsung. Berikut aturan jika menggunakan cara ini : klik
kanan pada masing-masing button menu > Action.

Flash Lite for Mobile Learning 56

Berikan script seperti berikut :
untuk tombol menu pertama :

on (press) { Jika tombol Enter
ditekan, maka akan
gotoAndStop("flashdasar"); menuju ke frame yang
berlabel flashdasar
}

untuk tombol menu kedua :

on (press) { Jika tombol Enter
ditekan, maka akan
gotoAndStop("flashlite");

menuju ke frame yang
berlabel flashlite
}

untuk tombol menu ketiga :

on (press) { Jika tombol Enter
ditekan, maka akan
gotoAndStop("evaluasi"); menuju ke frame yang
berlabel evaluasi
}

Bisa juga menggunakan kombinasi 2 bentuk actionscript di atas

sehingga baik di softkey maupun di button menu terdapat script yang

memiliki fungsi sama sehingga ketika dilakukan testing di device, baik

Flash Lite for Mobile Learning


tombol angka ataupun tombol Enter akan menuju ke link yang sama
sesuai fungsinya.

Keterangan : teks yang berwarna merah tersebut bisa diganti dengan
yang lain.


Teks warna merah berupa angka merupakan tombol yang akan
ditekan, ganti sesuai keinginan.

Teks warna merah berupa teks merupakan label frame.
Sesuaikan dengan label frame kalian.
f.
Isi Menu
1. SINGLE PAGE
Anda bisa memilih menggunakan salah satu cara ini dalam
pembuatan single page. Sesuaikan dengan kebutuhan.


Isi dengan single page (hanya satu halaman) tanpa
scrolling
1.
Klik kanan frame ke-10 layer isi > Insert Blank
Keyframe
2.
Buatlah teks sebagai judul dan objek kotak sebagai
pembatas teks isi halaman.
Flash Lite for Mobile Learning
58

Teks judul


Objek kotak
sebagai pembatas.
Buat dengan
Rectangle Tool


3.
Ketikkan teks yang ingin dijadikan isi halaman.
Jangan sampai teks melebihi kotak yang telah
dibuat.
4.
Lakukan Test Movie dengan Ctrl + Enter
5.
Untuk halaman seperti ini softkey hanya akan
memiliki fungsi setelah ada tombol home, exit, dan
halaman bantuan (akan dipelajari pada materi
selanjutnya)
Flash Lite for Mobile Learning



Kombinasi single page dengan scrolling text
Perbedaan dengan single page tanpa scrolling adalah pada isi
ini menggunakan srolling karena teks isi yang terlalu
panjang. Kita membutuhkan teknik masking dalam hal ini.

1.
Klik kanan frame ke-10 layer isi > Insert Blank
Keyframe
2.
Buatlah teks sebagai judul dan objek kotak sebagai
pembatas teks isi halaman.
Teks judul


Objek kotak
sebagai pembatas.
Buat dengan
Rectangle Tool


3. Ketikkan teks yang ingin dijadikan isi halaman. Kali
ini teks harus melebihi batas bawah kotak.
Panjang teks
melebihi batas
kotak

4.
Klik kanan teks > Convert to Symbol > pilih type
Movieclip > ganti nama > OK. Kali ini letakkan
Registration di bawah (kiri/tengah/kanan).
Flash Lite for Mobile Learning
60

Flash Lite for Mobile Learning


Registr
kiri b
ration di
bawah
Registr
kiri b
ration di
bawah
5. Beri nama innstance name uuntuk movieclip tersebut
6. Lalu klik du
Symbol lag
ua kali moviecllip > lakukan CConvert to

gi untuk teks yang ada > bberi nama
instance name lagi, tetaapi dengan naama yang
berbeda denngan sebelumnyya.

Flash Lite for MMobile Learning
62


7. Tambahkan layer mask di aatas Layer 1
8.
Buat kotak yang seukuran dengan kotak batas, tetapi
memiliki wwarna dalam. Kllik kanan layeer mask >
Mask
Flash Lite for MMobile Learning


9. Tambahkan satu layer di atas layer mask > beri nama
action
10. Klik kanan frame pertama layer action > Action.
Ketikkan script berikut : halaman1._y = pos_y;
Penjelsan script :

halaman1._y adalah koordinat y dari instance
name movieclip halaman

pos_y adalah nama ganti dari halaman1._y agar
dalam penulisan actionscript lebih mudah.
Script inilah yang nantinya akan dijadikan acuan
dalam pembuatan scrolling sehingga teksnya bisa
menggulung.

11. Kembali ke Scene > masukkan keyframe di frame ke10
layer softkey dengan klik kanan softkey > Insert
Keyframe.
Lalu klik kanan tombol softkey > Action.
Flash Lite for Mobile Learning
64

Masukkan script berikut :

on (keyPress "<Enter>")
{
gotoAndStop("
menu")
}



on (keyPress "<Up>") {

 tellTarget ("scroll1") {
halaman1._y += 50;
if (halaman1._y>=pos_y) {

halaman1._y = pos_y;
}
} }

on (keyPress "<Down>") {

 tellTarget ("scroll1") {
halaman1._y -= 50;
if (halaman1._y<=-150) {

halaman1._y = -150;
}
} }

Flash Lite for Mobile Learning


Teks berwarna merah
sesuaikan dengan
label yang diberikan
pada keyframe

Teks berwarna merah
sesuaikan dengan
nama instance name
yang diberikan pada
movieclip


2. MULLTIPLE PAGES
Andaa bisa memilih mmenggunakan sallah satu cara ini dalam
pembbuatan multiple ppages. Sesuaikann dengan kebutuuhan.


Isi ddengan multipl e pages tanpa sscrolling
Berisi beberapa halaaman dengan tanpa adanya tekss panjang
yang membutuhkann scrolling.
1.
Klik kanan frame ke-10 layer isi > Inssert Blank
Keyframe
2.
Buatlah tekss sebagai judul dan objek kotaak sebagai
pembatas tekks isi halaman.
Teks judul


Objekk kotak
sebagai
pembattas. Buat
denngan
Rectanggle Tool


3.
Ketikkan teeks yang inginn dijadikan isi halaman.
Jangan sammpai teks mellebihi kotak yyang telah
dibuat.
4.
Klik kanann isi teks > Coonvert to Symbbol > type
Movieclip. Masuklah ke dalam movieeclip teks
tersebut deengan klik dua kali pada movieclip.
Masukkan keyframe baruu di sebelah keyframe
pertama deengan klik kkanan frame > Insert
Flash Lite for MMobile Learning
66

Keyframe. Inilah yang mennandakan sebaggai multiple
page.


5.
Ganti teks yang ada ddi stage untukk tiap-tiap
keyframeny a.
Ubah teks di
stage untuk
tiap-tiap
keyframenya



6.
Tambahkan layer baru. Buatlah penaanda yang
menunjukkaan bahwa halamman yang tampiil memiliki
beberapa hhalaman. Misalnnya dengan tannda panah
seperti berikkut:
Flash Lite for MMobile Learning


Tampilan FRAME AWAL dan tampilan isi Stage untuk penanda


Tampilan FRAME TENGAH dan tampilan isi Stage untuk penanda

Flash Lite for Mobile Learning
68

Tampilan FRAME AKHIR dan tampilan isi Stage untuk penanda

7.
Buat layer baru dan samakan jumlah keyframe seperti
layer 1. Isikan script stop(); untuk setiap keyframe
sehingga tampilan Timeline akan seperti gambar
berikut :
Flash Lite for Mobile Learning


8.Kembali ke Scene dan beri instance name pada
movieclip teks.
9. Gantilah script pada softkey menjadi berikut:
Teks berwarna
on (keyPress "<Enter>") { merah sesuaikan
dengan label

gotoAndStop("
menu");


yang diberikan

}

pada keyframe

Flash Lite for Mobile Learning
70

on (keyPress "<Right>") {
tellTarget ("scroll1") {
nextFrame();


Teks berwarna merah

}

sesuaikan dengan
} nama instance name
yang diberikan pada

on (keyPress "<Left>") {

movieclip

 tellTarget ("scroll1") {
prevFrame();
} }


Kombinasi multiple pages dengan scrolling text
Untuk membuat halaman seperti ini, ikuti langkah berikut :

1.
Lakukan langkah seperti yang ada pada pembuatan
single page dengan scrolling
2.
Tambahkan layer untuk tempat multiple page. Buat
beberapa keyframe untuk multiple pages seperti yang
ada pada langkah pembuatan multiple pages tanpa
scrolling
Flash Lite for Mobile Learning


Tampilan Timeline untuk
HALAMAN TENGAH tanpa
scrolling


3. Tampilan Timeline seperti ini :
Tampilan Timeline untuk
HALAMAN PERTAMA yang
ber-scrolling

Tampilan Stage
dengan isi scrolling

Tampilan Stage
dengan untuk
halaman di tengah

72


Tampilan Timeline untuk

Tampilan Stage

HALAMAN TERAKHIR tanpa

dengan untuk

scrolling

halaman di akhir

4. Ganti script softkey menjadi berikut:
on (keyPress "<Enter>") {
gotoAndStop("
menu");
}


on (keyPress "<Up>") {

 tellTarget ("scroll1") {
hal1._y += 50;
if (hal1._y>=pos_y) {

hal1._y = pos_y;
}
} }

Flash Lite for Mobile Learning

Teks berwarna
merah sesuaikan
dengan label
yang diberikan
pada keyframe

Teks berwarna
merah sesuaikan
dengan nama
instance name
yang diberikan
pada movieclip

Flash Lite for Mobile Learning


on (keyPress "<Down>") {

 tellTarget ("scroll1") {
hal1._y -= 50;
if (hal1._y<=-150) {

hal1._y = -150;
}

} }
on (keyPress "<Right>") {

 tellTarget ("scroll1") {
nextFrame();

} }
on (keyPress "<Left>") {

 tellTarget ("scroll1") {
prevFrame();
} }

g.
Soal Evaluasi
Teks berwarna
merah sesuaikan
dengan nama
instance name
yang diberikan
pada movieclip

1.
Masukkan keyframe baru di frame ke-20 layer isi atau di
bawah label evaluasi dengan klik kanan frame > Insert
Keyframe.
2.
Buat tampilan di Stage seperti ini:
Flash Lite for Mobile Learning
74


3.
Klik kanan teks tersebut > Convert to Symbol > type
Movie clip.
4.
Akan kita buat 5 buah soal dengan setiap jawaban benar
akan bernilai 20. Di bagian terakhir akan muncul nilai
sebagai hasil dari jumlah jawaban benar.
5.
Buatlah tampilan Timeline seperti berikut:
Flash Lite for Mobile Learning


Keterangan:


Layer action berisi actionscript yang akan digunakan

Layer soal berisi soal-soal yang ada dalam Stage, buat 5 soal saja.

Layer bantuan & nilai berisi tampilan awal, penambahan skor
ketika benar, dan tampilan akhir untuk total nilai.
6.
Buat tampilan soal dan hasil penilaian di Stage. Berikut
contohnya:
7.
Untuk membuat teks skor dan jawaban, gunakan
Dynamic Text dan berikan variable.
Variable teks skor = skor
Variable teks jawaban = pilihan
Berikan variable untuk
memudahkan penulisan script

Flash Lite for Mobile Learning
76

Ubah menjadi
Dynamic Text


8.
Buat tampilan akhir untuk hasil nilai seperti tampilan
berikut:
Total nilai = skor
Dynamic
Text yang

Predikat/keterang


diberi

an lulus tidaknya

variable

sesuai total skor
yang ada

9.
Berikan variable pada Dynamic Text tersebut:
Variable teks total nilai = skor
Variable teks predikat = predikat
10. Buat sebuah button sebagai softkey baru untuk soal
evaluasi ini.
Flash Lite for Mobile Learning


Tampilan Timeline.
Perhatikan keyframe
softkey baru

Softkey
baru
11. Berikan script untuk softkey baru yang di awal
keyframe:
on(keyPress "1") {
pilihan = "A"
}
Jika ditekan tombol
1, maka akan muncul
pilihan jawaban A

Flash Lite for Mobile Learning 78

on(keyPress "2") {
pilihan = "B"
}

on(keyPress "3") {
pilihan = "C"
}

on(keyPress "4") {
pilihan = "D"
}

on(keyPress "0") {
if(pilihan = = kunci) {

skor +=20
}
nextFrame()
pilihan = ""

}

Jika ditekan tombol 2,
maka akan muncul
pilihan jawaban B

Jika ditekan tombol 3,
maka akan muncul
pilihan jawaban C

Jika ditekan tombol 4,
maka akan muncul
pilihan jawaban D

Jika ditekan tombol 0, akan
berakibat:


Jika jawaban di pilihan
sama dengan script
kunci di keyframe,
maka skor akan

bertambah 20


Akan menuju ke frame
selanjutnya dengan
mereset jawaban
menjadi kosong
kembali.
Keterangan: Teks berwarna merah sesuaikan dengan variable yang
diberikan ke Dynamic Text.

Flash Lite for Mobile Learning


12. Script
untuk softkey baru yang di akhir keyframe
ketika hasil nilai total keluar:
Jika ditekan tombol

on (keyPress "0") {


0, maka akan

gotoAndStop(1);

berhenti ke frame
} pertama (mengulang
soal latihan)

13. Kembali ke Scene dan berikan
script untuk softkey
yang lama(pertama) seperti berikut :
Jika ditekan tombol

on (keyPress "<Enter>") {

Enter/Select, maka

gotoAndStop("
menu");


akan berhenti ke
} frame label menu

on (keyPress "0") {

Jika ditekan tombol 0,

 tellTarget ("soal") {

maka akan menuju ke
gotoAndStop(2);


frame ke-2 movieclip
yang berinstance

}

name soal

}

14. Berikan script berikut di keyframe ke-1
stop();
kunci="";
pilihan="";
skor = 0;
Flash Lite for Mobile Learning
80

15. Berikan script berikut untuk masing-masing halaman
yang berisi soal. Sesuaikan dengan jawaban yang
dikehendaki.
kunci="A"
Flash Lite for Mobile Learning


16. Berikan script berikut untuk keyframe terakhir (halaman
total nilai)
if (skor>=80) {
predikat = "bagus";
}
if (skor>=40 and skor<80) {
predikat = "lumayan";
}
if (skor<40) {
predikat = "kurang";
}
Flash Lite for Mobile Learning
82

h. Halaman Bantuan
Halaman ini diperlukan untuk memberi informasi kepada
pengguna tentang bagaimana menggunakan aplikasi/program M-
Learning termasuk tombol apa saja yang digunakan untuk
menjalankan program.

1. Buat layer baru di atas layer isi > beri nama bantuan
Flash Lite for Mobile Learning

2.Halaman bantuan hanya akan ada di halaman isi dari
masing-masing menu. Masukkan keyframe baru sesuai
urutan keyframe isi. Di sini dimulai di frame ke-10 layer
bantuan.

3.
Untuk memuddahkan menyelekksi objek, kunccilah layer-
layer yang tiddak akan diseleeksi. Kunci semmua layer
kecuali layer bbantuan.

Klik unntuk mengunci la
ayer
4. Buatlah kotakk di Stage unttuk backgroundd halaman
bantuan. Lalu kklik kanan kotaak > Convert too Symbol
5.
Masuklah ke mmovie clip banttuan lalu tambahhkan layer
baru untuk tteksnya. Sesuaiikan tulisan/tekks dengan
tombol-tomboll yang digunakann dalam softkey..
Flash Lite for MMobile Learning
84


Tambahkann layer di dalam mmovie
clip banntuan untuk tekss.


6. Kembali ke SScene terlebih ddahulu > berikaan instance
name untuk moovie clip bantuann.
Hasil tampilan di Stage


7. Blok semua keyframe lalu geeser ke frame ssebelahnya
sehingga akan seperti tampilann berikut:
Flash Lite for MMobile Learning



8. Berikan script stop(); pada keyframe awal > kembali ke
Scene

9. Tambahkan script berikut pada softkey:
on(keyPress "9") {
tellTarget("bantuan") {
gotoAndStop(2);

}
}

on(keyPress "0") {
tellTarget("bantuan") {
gotoAndStop(1);

}
}

Flash Lite for Mobile Learning

10. Tambahkan juga petunjuk di bawah halaman isi tentang
bagaimana memunculkan halaman bantuan.
Teks sebagai
petunjuk
untuk user

11. Di bagian latihan evaluasi, halaman bantuan tidak akan
dimunculkan. Jadi, klik kanan > Insert Blank
Keyframe. Sesuaikan dengan urutan keyframe latihan
evaluasi.
Jika ditekan tombol 9,
maka akan menuju ke
frame ke-2 movieclip
yang berinstance name

bantuan

Jika ditekan tombol 0,
maka akan menuju ke
frame ke-1 movieclip
yang berinstance name

bantuan

86


Flash Lite for Mobile Learning


12. Lakukan Test Movie untuk melihat hasilnya.
Sampai sini program sudah jadi secara keseluruhan.
Bagian terakhir hanya tinggal menambahkan tombol
untuk keluar dari program.
i.
Exit
Berfungsi untuk memberikan kemudahan bagi user bagaimana
agar keluar dari program M-Learning.

1. Buat layer baru di atas layer bantuan > beri nama exit.
Flash Lite for Mobile Learning
88

2.Tombol exit akan muncul mulai dari munculnya menu.
Klik kanan keyframe yang seurutan dengan menu >
Insert Blank Keyframe.
3. Buat sebuah objek seperti berikut:
4. Seleksi seluruh objek > klik kanan . Convert to Symbol
> beri nama exit > type button.
Flash Lite for Mobile Learning


5.
Klik kanan button exit > Action
on (press)
{
Jika tombol
ditekan, maka

 fscommand2("quit");


akan keluar

}

program

NB:

Tombol exit ini hanya akan berfungsi jika program dijalankan di
handphone. Jika masih di Flash, tidak akan berfungsi.

Sekian, semoga bermanfaat. Terima kasih.

Flash Lite for Mobile Learning
90

Flash Lite for Mobile Learning


Bab 4

Transfer ke Handphone

a. Komputer - Handphone
1.
Lewat Bluetooth
-Pastikan koneksi Bluetooth komputer/laptop dan
handphone Anda aktif
-Klik kanan file Flash (format SWF), pilih send to
Bluetooth
-Pada handphone Anda, akan ada konfirmasi ya atau
tidak. Silahkan pilih ya
-Tunggu proses pengiriman
-File Flash sudah pindah ke dalam handphone Anda
-Jalankan animasi dengan klik ok pada handphone*

Anda.

2.
Lewat Kabel USB
-Pastikan kabel usb pada computer atau laptop sudah
terkoneksi oleh handphone Anda
-Klik kanan file Flash (format SWF), pilih copy
-Paste pada handphone Anda. Silahkan masukkan file

tersebut ke file memory handphone atau memory

external. Tempatkan di folder other.
-Tunggu proses pengiriman
-File Flash sudah pindah ke dalam handphone Anda

Flash Lite for Mobile Learning
92

-Jalankan animasi dengan klik ok pada handphone*
Anda.

b. Handphone - Handphone
1.
Lewat Bluetooth
-Pastikan koneksi Bluetooth kedua handphone aktif
-Klik file Flash pada handphone, pilih send Bluetooth
-Pada handphone yang akan diberi file flash ini, akan ada
konfirmasi ya atau tidak. Silahkan pilih ya
-Tunggu proses pengiriman
-File Flash sudah pindah ke dalam handphone tersebut
-Jalankan animasi dengan klik ok pada handphone*.

Keterangan * : Untuk jenis Handphone tipe Symbian harus
menggunakan aplikasi flashlite, sedangkan untuk
tipe java dapat langsung dijalankan program
flashnya.

Flash Lite for Mobile Learning




< >

mbarangan sek

Modul Upload Web ke
Domain dan Hosting Gratisan
For Community College By ri32
Kata Pengantar
Setelah ketiga modul anda pelajari dan web buatan anda sudah jadi. kini saatnya hasil
kreasi anda di publish ke internet. Tujuannya agar semua orang di dunia maya dapat melihat
hasil karya anda ☺. Adapun yang akan kita pelajari dalam modul ini adalah :
1. Tahap persiapan di komputer local
2. Membuat domain gratis di situs co.cc
3. Membuat hosting gratis di situs byethost.com
4. Membuat database di hosting byethost.com
5. Mengimport database ke hosting byethost.com
6. Mengupload file-file web ke hosting byethost.com
7. Mengubah file koneksi database di hosting byethost.com
8. Menggabungkan domain co.cc dengan hosting byethost.com
Jika berhasil dengan 7 tahapan diatas, maka anda dapat mengakses situs yang telah anda
upload tersebut dengan mengetik nama domain pada web browser seperti mozila firefox atau
yang lainnya.
Selesai sudah ke 4 modul kursus PHP online yang diselenggarakan oleh blog
http://ri32.wordpress.com Semoga semuanya dapat dipahami dan dapat bermanfaat untuk
teman-teman semuanya...aamin
Depok, 06-02-2011
Agus Sumarna
Penjelasan
1. Tahap persiapan di komputer local
Tahap persiapan sangat penting dalam memulai segala sesuatu. Oleh karena itu harus
diperhatikan pada tahap persiapan di komputer kita atau komputer local. Adapun yang harus
dipersiapkan sebelum database dan file-file web kita di upload ke hosting adalah sebegai
berikut :
· Persiapan Email yahoo atau gmail untuk mendaftarkan akun.
Gunakan email pribadi anda untuk mendaftarkan akun. jangan gunakan email untuk
facebook. Jika perlu, anda membuat email yang baru ☺
· Kompresi file-file web yang ada di htdocs dengan format zip.
Setelah email dipersiapkan, saatnya mempersiapkan untuk mengkompresi file-file web
yang akan kita upload ke hosting. Caranya :
o Buka windows explorer
o Kemudian ke alamat folder C:\xampp\htdocs\admin
o Setelah itu seleksi semua file (tekan ctrl+A)
o Klik kanan disalah satu file yang terseleksi tadi, pilih Send to, pilih Compressed
(zipped) folder. Untuk lebih jelasnya silahkan lihat gambar dibawah ini.
o Jika sudah selesai mengkompresi dengan format zip atau zipped, maka akan
terbentuk sebuah file (*.zip). Perlu diperhatikan untuk masalah nama file zip yang
mungkin berbeda dengan tampilan di komputer saya. Itu tidak apa2, misalnya
saya waktu klik kanan untuk mengkompresi tadi memilih file delete.php, maka
nanti hasil kompresinya akan terbentuk file delete.zip. teman-teman bisa
mengubah nama file zip terebut menjadi nama file yang lain.
o Setelah file-file web berhasil di kompresi, Saran saya hasil kompresi yaitu file zip
tadi dapat anda copy ke drive yang lain misalnya drive D: atau mungkin ke
flashdisk anda. Alasannya untuk memudah pada saat anda mengupload file zip
tersebut ke hosting.
· Export database dari phpmyadmin dalam bentuk zip.
Setelah file-file web berhasil anda kompresi, selanjutnya anda ekport database
yang ada didalam langkah-langkahnya adalah sebagai berikut :
· Buka browser mozila firefox dan ketikan alamat url http://localhost/phpmyadmin/
· Setelah halaman phpmyadmin terbuka, pilih database yang anda buat, kemudian
pilih menu export
· Setelah itu lihat gambar dibawah ini :
· Setelah di klik tombol go, maka simpan database tersebut dalam format zip dengan
nama file db_cc.sql.zip atau lihat gambar dibawah ini :
· Setelah berhasil di download, file akan tersimpan di komputer kita. Dan mozila
firefox biasanya akan menampilkan window kecil yang bernama download. Jika tidak
muncul, maka tekan ctrl+j. Setelah itu klik kanan nama filenya, dan pilih menu open
containing folder.
· Maka akan terbuka folder tempat dimana file database tadi di download. Setelah itu
copy file tersebut, dan satukan dengan file hasil kompresi zip sebelumnya.
· Jika sudah selesai, maka didalam drive D: atau penyimpanan anda, sudah terdapat 2
file yang kita butuhkan yaitu file delete.zip yang berisi file-file web kita, dan file
db_cc.sql.zip yang berisi file database hasil export dari phpmyadmin.
Tahap persiapan sudah selesai. Setelah itu kita akan melanjutkan kelangkah berikutnya.
2. Membuat domain gratis di situs co.cc
Setelah email dan file-file yang kita perlukan sudah dipersiapkan, maka saatnya kita
membuat memilih domain untuk nama web kita. Adapun langkahnya adalah sebagai berikut :
· Buka situs http://www.co.cc
· Daftar akun ke situs tersebut dengan klik menu “Create an account now”
· Setelah itu login melalui menu “ Returning user, sign in here”
· Setelah itu login melalui menu “Getting A New Domain ”. untuk nama domain, setiap
orang tidak mungkin saya. Termasuk domain yang saya buat tidak akan sama dengan
domain yang teman-teman buat.
· Setelah itu klik tombol Check availability. Jika nama domain yang anda masukan belum
pernah ada yang memakai dan biaya registrasinya adalah $0 (nol dolar), anda bisa
melanjutkan dengan klik tombol Continue to registration
· Setelah klik tombol Continue to registration, klik tombol Setup, dan klik sekali lagi
tombol Setup
· Setelah klik tombol Setup, dan klik atau pilih 1.Name Server
· Nama domain sudah berhasil dibuat. Nama domain saya adalah tobely-tobely.co.cc.
Namun, untuk nama servernya belum bisa kita masukan karena kita belum mendaftar ke
sebuah hosting.
3. Membuat hosting gratis di situs byethost.com
· Buka situs http://byethost.com dan pilih menu Free Hosting
· Klik menu “Click here to sign up for free hosting ” untuk passwordnya masukan 8 digit
karakter.
· Jika proses registrasi berhasil, akan muncul notification
· Untuk mengaktifkan akun hosting yang sudah kita buat, kita perlu masuk ke akun email
yang anda gunakan saat mendaftar. Saya menggunakan akun gmail dengan nama email
ri32.wordpress@gmail.com . jika emailnya sudah masuk, klik link yang diberikan.
· Setelah klik link tersebut, maka masukan code catchpa yang diberikan
· Setelah klik tombol click!, akan muncul notification dan anda akan mendapat email
berupa data konfigurasi hosting. Jangan dihapus!! email ini. Karena akan kita gunakan
untuk login ke cpanel, untuk login ke Filemanager, dan untuk konfigurasi koneksi PHP
ke database.
4. Membuat database di hosting byethost.com
Sebelum kita membuat database di hosting, kita terlebih dahulu masuk melalui cpanel
situs byethost.com. adapun langkah-langkahnya adalah sebagai berikut :
· Masuk ke Cpanel http://panel.byethost.com/ dan gunakan username dan password Cpanel
yang sudah diberikan di email anda tadi.
· Jika sudah masuk dalam halaman utama cpanel, pilih menu MySQL Databases.
Kemudian masukan nama database dan klik tombol Create Database.
.
· Jika database berhasil dibuat, maka klik menu admin atau anda juga bisa melalui menu
phpMyAdmin (ada dihalaman utama cpanel)
5. Mengimport database ke hosting byethost.com
Database sudah berhasil kita buat, dan kita sudah berada di halaman phpmyadmin.
Sekarang yang harus kita lakukan adalah mengimport database dari komputer local ke
database server yang ada di hosting. Caranya adalah :
· Masuk ke phpmyadmin, pilih databasenya, kemudian pilih menu import, setelah itu klik
tombol Browse
· Setelah itu cari file database hasil Export dikomputer local hasil dari phpmyadmin
sebelumnya. Setelah itu klik tombol Open
· Setelah file database di komputer local kita pilih, klik tombol Go di phpmyadmin hosting
untuk mengimport database tersebut.
· Perlu diperhatikan! Setelah database berhasil diimport, kita siapkan Informasi untuk
konfigurasi koneksi PHP ke database di hosting. Caranya dengan melihat halaman utama
cpanel dipojok kiri bagian Account Information
Disana terdapat informasi yang kita butuhkan untuk melakukan koneksi PHP dan
MySQL yaitu :
· Hostname : lihat informasi pada akun anda seperti diatas
· Username : lihat informasi pada akun anda seperti diatas
· Password : lihat informasi pada email anda atau passwordnya sama seperti waktu
anda login masuk ke Cpanel sebelumnya
· Database : lihat informasi pada menu phpmyadmin atau menu mysql databases
6. Mengupload file-file web ke hosting byethost.com
Setelah database berhasil diimport, dan informasi untuk koneksi database sudah
disiapkan. Maka selanjutnya kita akan mengupload file web yang sebelumnya sudah kita
kompresi dalam file zip. Adapun langkahnya adalah sebagai berkut :
· Pada halaman utama cpanel pilih menu Online File Manager. Jika sudah masuk, klik
“folder” htdocs
· Setelah itu klik menu upload
· Perlu diperhatikan! Karena file-file web kita sudah terkompresi dalam format zip, maka
untuk menguploadnya, kita menggunakan fasilitas untuk mengupload file ZIP yang ada
di sebelah kanan. Klik browse dan cari file delete.zip (Sesuaikan dengan file teman2),
kemudian klik tanda centang warna hijau untuk mengupload filenya. Setelah berhasil
klik tanda panah wana biru untuk kembali ke filemanager.
7. Mengubah file koneksi database di hosting byethost.com
Setelah semua file web berhasil diupload ke hosting, langkah selanjutnya adalah
mengubah file koneksi.php yang digunakan untuk koneksi PHP ke datdabase mySQL.
Adapun langkah-langkah untuk mengubah konfigurasi adalah sebagai berikut :
· Setelah kembali ke filemanager, pilih dan edit file koneksi.php
· Setelah skripnya ditampilkan, maka ubah nilai masing-masing variabel $host, $user,
$password, dan $database sesuaikan dengan informasi yang sudah kita persiapkan
sebelumnya pada tahap “import database”. Setelah diubah, kemudian di save dengan klik
icon disket, dan kembali ke filemanager dengan klik icon tanda panah warna biru.
8. Menggabungkan domain co.cc dengan hosting byethost.com
Tahap terakhir yang kita lakukan adalah menggabungkan antara domain yang kita buat di
co.cc dengan file-file web yang sudah kita upload di hosting byethost.com. Perlu
diperhatikan!! Sebenarnya pada email yang kita dapat saat mendaftar di byethost.com. kita
sudah mendapatkan satu buah domain yang bisa langsung digunakan.
Pada isi email diatas dapat kita ketahui bahwa nama domain yang bisa langsung dipakai
adalah http://ri32.byethost17.com. Teman-teman bisa menggunakan nama domain yang
dikirim ke email tersebut sehingga tidak perlu membuat domain yang lain lagi di co.cc.
Namun jika teman-teman ingin membuat domain yang lain misalnya http://tobelytobely.
co.cc maka ketika kita mengakses domain tobely tersebut, maka browser akan
membuka halaman web yang sebenarnya tersimpan di hosting byethost.
Kembali lagi ke sub judul yang akan kita bahas, Adapun langkah-langkahnya adalah
sebagai berikut :
· Pada halaman utama cpanel, pada bagian domains pilih menu Addon Domains
· Setelah itu masukan nama domain dan klik tombol Add Domain. Setelah itu ada
notification bahwa domain masih dalam masa propagasi sehingga belum bisa diakses
dalam jangka waktu 78 jam. Masa propagasi adalah masa penyebaran domain agas bisa
diakses oleh jaringan internet secara global.
· Setelah selesai, kembali lagi ke halaman utama cpanel, pada bagian domains pilih menu
Addon Domains maka akan terlihat nama-nama server yang akan kita gunakan untuk
domain co.cc
· Setelah selesai, kita kembali ke halaman co.cc untuk memasukan nama-nama server.
Setelah itu klik tombol setup
· Selesai sudah semua tahapan yang kita lakukan. Selanjutnya kita tinggal menunggu agar
domain yang kita buat di co.cc dapat di akses, namun jika ingin mengunakan domain
yang telah diberikan oleh byethost juga bisa ☺
Thanks for :
1. Allah SWT
2. Rasulullah SAW
3. Ortu & Keluarga
4. Teman-teman
5. Siera, Naila
6. And all..
Alhamdulilah Selesai
http://labhouse.co.cc http://ri32.wordpress.com
< >