Wednesday, February 25, 2015

Aplikasi Mobile Learning

Aplikasi mobile Learning
Sumber : intranet.royalhospitalschool.org
Aplikasi mobile learning merupakan bagian dari pembelajaran berbasis digital atau e-learning. Meskipun dengan perkembangan lebih jauh, sekarang sudah bergeser ke arah blended learning. Yaitu pembelajaran yang berusaha menggabungkan keunggulan e-learning dan keunggulan pembelajaran secara konvensional.

Terkait dengan perkembangan ini, kami mencoba untuk merancang silabus kegiatan pelatihan khususnya bagi siswa-siswa SMP yang saya ajar. Entah dalam bentuk kegiatan intensif maupun dimasukkan dalam kegiatan ekstrakurikuler "Aplikasi Mobile", khususnya aplikasi yang berkaitan dengan pembelajaran. Aplikasi mobile yang akan dibuat nanti berbasis android yang dibuat menggunakan program Adobe Air.

Berikut silabus yang kami susun, berdasarkan hasil diskusi maupun riset dari berbagai buku referensi. Silabus ini sifatnya masih usulan/perancangan yang masih sangat mungkin untuk diubah.
1. Pengenalan Adobe AIR

  • Pengenalan Tool Adobe Air
  • Membuat Movie Clips
  • Membuat Tombol
  • Membuat Aplikasi Sederhana

2. Dasar Pembuatan Aplikasi

  • Mengontrol Gesture Swipe
  • Mengontrol Gesture Rotate
  • Mengontrol Gesture Zoom
  • Mengontrol Accelerometer
  • Membuat Navigasi dan Interaksi

 3. Pembuatan Aplikasi Mobile

  • Membuat Desain 
  • Membuat Menu Utama
  • Menambahkan ActionScript 3.0
Diprediksikan untuk membuat aplikasi mobile sederhana, tidak akan melebihi 3 bulan  (pertemuan 1 kali seminngu @ 120 menit) dalam pembuatan program aplikasi mobile menggunakan Adobe Air ini. Dengan asumsi para siswa baru pertama menggunakan aplikasi ini. Dan bagi yang sudah familiar, tentunya bisa membuat aplikasi mobile 1 - 2 bulan. 

Untuk membuat aplikasi mobile yang makin kompleks bisa membutuhkan waktu 6 bulan bahkan lebih tergantung dari tingkat kompleksitas aplikasi yang dibuat serta ketekunan para siswa. Semoga silabus ini bisa diterima dan diterapkan di sekolah, baik untuk pelatihan intensif maupun untuk kegiatan ekstrakurikuler pembuatan aplikasi mobile.


Posted by Ais Production
Ais Production Updated at: 8:39 AM

Tuesday, February 24, 2015

Membuat Animasi Transisi Menggunakan Flash

Membuat animasi transisi di flash bisa menggunakan efek animasi masking. Yang dimaksud dengan animasi transisi adalah animasi antar slide satu dengan yang lain maupun antar gambar satu dengan yang lainnya. Dengan adanya transisi ini maka perpindahan antar slide maupun antar gambar terjadi secara halus, katakan saja tidak seperti tidak dipaksakan.

Untuk membuat animasi transisi di Flash dilakukan secara manual. Berbeda dengan di PowerPoint untuk membuatnya tinggal menggunakan efek transisi yang tersedia. Tetapi tidak usah khawatir, dengan menggunakan animasi masking efek transisi bisa dibuat dengan indahnya. Apalagi dengan menggabungkan berbagai efek yang kita buat, maka transisi antar slide, antar gambar, antar frame, antar scene bisa kita buat dengan ciamik.

Ada beberapa animasi transisi yang dapat dibuat menggunakan Flash, yaitu :
1. Animasi Box In - Box Out
2. Animasi Uncover
3. Animasi Split
4. Animasi Shape

Animasi transisi  box in - out merupakan animasi transisi yang menampilkan gambar/slide dalam sebuah kotak yang membesar maupun mengecil. Animasi uncover adalah animasi transisi yang menampilkan slide/gambar sebagian demi bagian sampai akhirnya mendapatkan gambar yang utuh. Animasi split merupakan jenis animasi transisi yang akan membuat tampilan gambar/slide membuka/tampil dari dalam ke luar, baik secara vertikal maupun horizontal. Sedangkan animasi shape sebenarnya hampir sama dengan animasi box yang menggunakan kotak. Bedanya pada jenis animasi shape digunakan bentuk-bentuk lain, seperti bentuk elips/lingkaran, diamond, bintang dan sebagainya.


Berikut adalah contoh animasi shape. Untuk tutorialnya menyusul, menunggu waktu luang ya?




Posted by Ais Production
Ais Production Updated at: 7:56 AM

Monday, February 2, 2015

Membuat Animasi dengan ActionScript 3.0, Animasi Rotasi Flash CS6

Membuat Animasi dengan ActionScript 3.0, Animasi Rotasi Flash CS6

Membuat animasi dengan ActionScript 3.0 dapat dilakukan secara mudah dan cepat menggunakan Code Snippet. Dengan menggunakan Code Snippet,  yang ada pada flash versi Adobe Flash CS5 ke atas, kita dapat membuat animasi tanpa perlu memahami scriptnya. 

Pada tutorial pembuatan animasi dengan AS3 ini, saya menggunakan program Flash CS6. Langsung saja, kita mulai :
1. Buka lembar kerja baru (gunakan Ctrl + N) dan pilih ActionScript 3,0 kemudian klik OK.
ActionScript 3.0



















2. Buatlah baling-baling, as, maupun tiangnya. Perhatikan gambar berikut.
Obyek As berbentuk lingkaran diletakkan pada layer paling atas.
Obyek baling-baling diletakkan pada layer di bawahnya
Obyek tiang diletakkan pada layer paling bawah
(Untuk cepatnya, bikin obyek baling-balingnya saja)
ActionScript 3.0

3. Pilih obyek baling-baling, kemudian tampilkan panel Code Snippets melalui Windows - Code Snippets. Seperti gambar berikut.
Code Snippets ActionScript 3.0



















4. Klik simbol panah di sebelah folder Animation dan pilih perintah yang akan dipasang pada obyek baling-baling. Untuk kebutuhan animasi kali ini, akan dipilih Rotate Continuosly. 

Code Snippets ActionScript 3.0
















5. Dobel klik Rotate Continuosly. Kemudian akan muncul tampilan sebagai berikut.
Code Snippets ActionScript 3.0
Maksud dari komentar tersebut adalah obyek yang dipilih harus dirubah dalam bentuk movie klip agar dapat diberikan kode snippet. Program flash secara otomatis akan mengubah obyek yang dipilih (baling-baling) menjadi movie klip dan diberikan instance name-nya. Baru nanti diberikan code snippet-nya. Klik OK ata Cancel untuk membatalkan. Tentunya klik OK untuk melanjutkan.
Kemudian akan tampil perintah dalam panel Actions.
Code Snippets ActionScript 3.0




















6. Demikian juga, jika diperhatikan ada tambahan layer Action seperti gambar.
Code Snippets ActionScript 3.0







Hasilnya adalah sebagai berikut.


Klik  di sini untuk mendownload .fla dan .swf-nya

Bagi yang tidak mau menggunakan code snippets, bisa saja mengkopi code script-nya dengan menghilangkan yang tidak diperlukan.
Intinya : bikin obyek, kemudian ubah obyek dalam movie clip. Jangan lupa kasih instance name. Bikin layer, misalnya kasih nama Action. Dan masukkan kode berikut :

baling_mc.addEventListener(Event.ENTER_FRAME, rotasi);

function rotasi(event:Event)
{
baling_mc.rotation += 10;
}

Kode ini saya dapatkan dari code snippets tutorial di atas. Komentarnya dihapus, serta ada beberapa bagian yang diganti (warna merah).
Perhatikan juga angka 10, yang menunjukkan kecepatan rotasinya. Ubahlah angka 10 tersebut untuk mendapatkan kecepatan putar yang diiinginkan.

Demikian tutorial membuat animasi menggunakan ActionScript 3.0 menggunakan Flash, khususnya untuk membuat animasi rotasi. Terima kasih semoga postingan ini bermanfaat bagi kita semua.
Posted by Ais Production
Ais Production Updated at: 7:27 PM