mengenal adobe air for android mengenal area kerja adobe ... · •mengenal adobe air ... untuk...

18
Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe Flash CS Membuat Animasi menggunakan shape tween Membuat Animasi menggunakan motion tween

Upload: vodiep

Post on 05-Mar-2019

279 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

• Mengenal Adobe AIR for ANDROID

• Mengenal Area KerjaAdobe Flash CS

• Membuat Animasimenggunakan shape tween

• Membuat Animasimenggunakan motion tween

Page 2: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Tim pengembang Adobe baru-baru ini mengumumkan kompatibilitas Adobe AIR dengan platform Android.

Dengan adanya kompatibilitas tersebut, para pengembang aplikasi sudah bisa menggunakan Flash Builder

atau Flash Professional CS5 untuk membuat sebuah aplikasi yang menarik. Adobe Air dapat digunakan

untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, HTML, atau Ajax.

Saat ini, sudah banyak aplikasi desktop yang telah juga menggunakan Adobe AIR.

Apa yang membedakan Adobe AIR dengan Flash Player? Flash Player lebih banyak digunakan untuk

menghadirkan feature Flash di dalam web browser, sedangkan Adobe AIR dapat digunakan sebagai

aplikasi sendiri yang berjalan di luar browser. Namun, kedua feature tersebut memiliki kode, aset,

framework, tool, dan layanan yang sama.

Page 3: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Mengatur setting AIR for android

Pada properties, klik Edit application settings

Page 4: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Mengatur setting AIR for android

Pada tab general, isikan nama file output dan nama aplikasi nya.Terlebih dahulu buat folder untuk file-file tersebutPada tab development, buat certificate sendiri, klik create

Page 5: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Mengatur setting AIR for android

Isikan semua data dan juga password, klik okdan browse untuk menyimpan file di dalam folderyang telah disediakan sebelumnyaDan isikan password yang telah di save

Page 6: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Mengatur setting AIR for android

Pada tab icons browse pictures dengan format png, jika sudah klik ok

Page 7: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Mengatur setting AIR for android

Klik publish untuk mempublish, jika proses sudah selesai akanmuncul tampilan bahwa APK success

Page 8: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

1. Stage2. Layer

3. Frame4. Tools

5. Panel Properties

Page 9: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Keyframe adalah frame kunci. Keyframe

bertugas untuk menentukan kapan sebuah objek

akan tampil pada sebuah animasi. Keyframe

dapat beris sebuah objek atau lebih. Keyframe

ditandai dengan bulatan berwarna hitam.

Keyframe yang tidak berisi objek apapun disebut

Blank keyframe.

Page 10: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

• Motion Tween adalah pergerakan suatu objek

dari keadaan awal sampai keadaan akhir.

sebagai contoh anda ingin menggerakan

suatu bola dari kiri ke kanan, dengan

adanya motion tween kita bisa menggunakan

sedikit objek tanpa harus membuat banyak

objek.

• Shape Tween adalah perubahan bentuk dari

suatu objek ke objek lain. untuk Shape Tween

objek yang dianimasikan harus berjenis

Shape.

Page 11: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Membuat Loading menggunakan Shape Tween

Buatlah shape berupa persegi

menggunakan rectangle tool, warna

boleh diatur sesuai keinginan, dan

outline dihilangkan, sehingga tampil

seperti dibawah ini :

Page 12: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Seleksi shape tersebut dengan cara

klik Selection tool, kemudian

arahkan pada shape tersebut untuk

memblok nya, seperti dibawah ini :

Page 13: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Untuk membuat animasi, kita harus membuat keyframe

pada frame berapa saat kita ingin menjalankan animasi,

buatlah keyframe pada frame ke 40 dengan cara :

Klik kanan pada frame 40, pilih insert keyframe

Akan nampak bulatan hitam menandakan ada keyframe

pada frame tersebut

Page 14: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Tetap berada pada frame 40, klik free transform tool

untuk mengatur panjang shape tersebut

Page 15: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Pada frame 40, bentuk shape seperti gambar

diatas. Kemudian klik frame antara 1-40,

misalnya frame 20, klik kanan, create shape

tween, maka klik pada tiap frame dari frmae 1-

40, bentuk shape akan berubah di tiap frame.

Page 16: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Menambahkan teks yang akan ditampilkan

bersamaan dengan bentuk shape

Buat layer baru dan buat sejajar dengan shape,

jika shape di awali pada frame 1, maka teks

tersebut juga di awali pada frame 1.

Page 17: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Insert keyframe pada layer 2, tepat pada frame 40

Page 18: Mengenal Adobe AIR for ANDROID Mengenal Area Kerja Adobe ... · •Mengenal Adobe AIR ... untuk membangun aplikasi Internet yang menggunakan feature Adobe Flash, Adobe Flex, ... isikan

Hasilnya seperti tampilan diatas. Untuk menjalankan animasi,

klik control, test movie (CTRL+Enter)