Animasi - Cara Membuat Contoh Penerapan Motion Tween ( pemula -dasar )

Asalamualaikum
Sudah sangat lama penulis tidak menuliskan informasi di sini terhitung selama tahun 2016. Alhamdulillah ada kesempatan dan mood menulis lagi. Kali ini topik informasinya animasi gambar. Semoga bermanfaat bagi sahabat pembaca online. 


Judul Infromasi:
Contoh Penggunaan Motion Tween        (1)

Dengan Macromedia Flash CS 8 kita dapat membuat 2 jenis Tween  Animasi  yaitu - Motion Tween dan  - Shape Tween.

Pada postingan kali  ini penulis mencoba untuk memaparkan contoh penggunaan Motion Tween untuk membuat suatu animasi yang sederhana. Dengan berbekal pengalaman  awal kita Kita dapat membuat pengembangan dalam penerapan Motion Tween. 

Contoh penerapan Motion Tween dalam bentuk animasi berthema penulis tampilkan di bagian paling bawah postingan ini.

Motion Tween adalah cara yang sangat umum untuk membuat gerakan dengan Flash .  Flash melakukan sebagian besar pekerjaan membuat hal-hal yang mudah bagi Kita. Motion Tween juga dapat membantu meminimalkan ukuran file, khususnya selama frame-by-frame animasi, karena Kita memiliki lebih sedikit aset dalam dokumen Kita.

Dengan menggunakan Motion Tween  Kita kemudian  dapat mengatur sifat(properti)  seperti posisi, ukuran, dan rotasi suatu objek bentuk atau suatu blok teks pada satu titik waktu, dan kemudian Kita mengubah properti-properti pada titik waktu lain dalam interval waktu yang telah kita tentukan. Ketika Kita melakukan pengaturan tersebut , Flash secara otomatis membuat perubahan bertahap antara titik waktu pertama dan titik kedua dalam interval waktu yang telah ditentukan.   Pada contoh ini kita akan membuat Motion Tween pada objek lingkaran dengan menggunakan 1  layer.

***

Pada postingan kali ini ,penulis membuat informasi :
1)membuat animasi menggunakan  Motion Tween gerak satu arah     dasar).

2)membuat animasi menggunakan Motion Tween gerak beberapa 
  arah.

3)membuat animasi menggunakan Motion Tween gerak modifikasi 
  dalam contoh 1 interval waktu(Time Line). 

                             ***

Penjelasan:

1)membuat animasi menggunakan  Motion Tween gerak satu arah    (dasar).
Langkah awal Menerapkan  Motion Tween:

-Aktifkan Macromedia Flash 8, pilih  Flash Document  di group Creat New dikarenakan Kita akan membuat file document baru.

Membuka File Baru 

-Kemudian buat objek mislanya lingkaran menggunakan Oval Tool yang ada di Toolbox selanjutnya drag di Stage (halaman kerja) shingga ukurannya tidak begitu besar sebab kita bukan meninjau ukuran namun membahas penerapan Motion Tween yang akan diberlakukan pada objek lingkaran tersebut.

Membuat Contoh Objek Lingkaran

-klik kanan di Time Line 35  (interval waktunya 35), pilih Insert Keyframe

drag Lingkaran berpindah posisi misalnya ke arah sudut kanan Stage.

Membuat Keyframe Pada Objek

Memindahkan Posisi Objek Dari Semula (sudut kiri atas Stage ke sudut kanan atas Stage)

-klik kanan di Time Line 1, pilih Motion Tween

Menambahkan Motion Tween 

-Untuk melihat hasilnya tekan CTRL bersamaan dengan tombol Enter di keyboard. Hasilnya akan sebagai berikut.

Contoh Penerapan Motion Tween satu arah

Untuk perbandingan terhadap penerpan Motion Tween selanjutnya maka simpan File misalnya dengan nama Contoh Motion Tween 1 arah (dasar)

Demikianlah contoh  yang sangat sederhana cara membuat Motion Tween dengan satu arah. 

***

2)membuat animasi menggunakan Motion Tween gerak beberapa 
  arah membentuk siklus.

Pada pengembangan selanjutnya arah ataupun gerak  dapat dimodifikasi dan ditambahkan arah dan interval waktunya.
Sebagai contoh pada penerapan Motion Tween  pada contoh objek di atas misalnya akan dikembangkan  arahnya dan interval waktunya sehingga menghasilakan semacam "gerak siklus" /berkesinambungan yang pada contoh ini dibuat dengan interval waktu (Time Line) yang sama untuk menambahkan arah ke bawah, ke kiri bawah dan ke atas kiri caranya:

1.Klik kanan di Time Line 70,pilih Insert Keyframe

Menambahkan Keyframe Untuk Animasi Objek(ke arah bawah)

-drag objek ke arah bawah sudut kanan bawah

-klik kanan di titik Time LIne 35 pilih Motion Tween.

Merubah Posisi Ke Arah Bawah Dan Menerapkan Motion Tween 

Untuk melihat hasil sementara tekan CTRL + Enter  , setelah melihat hasil klik tombol Close layar preview animasinya.

-selanjutnya klik kanan  di Time Line 105 pilih Insert Keyframe.

-selanjutnya  drag objek ke arah kiri usahakan posisinya bersamaan dengan posisi semula objek agar nanti hasilnya berupa siklus yang sempurna .

-klik kanan di Time Line 79 pilih Motion Tween

-klik kanan di Time Line 140 pilih Insert Keyframe

-drag objek ke arah atas usahakan ke posisi semula dengan maksud nantinya hasilnya agar seperti siklus.

-klik kanan di Time Line 105 pilih Motion Tween. 

Untuk melihat hasilnya tekan CTRL + Enter di keyboard.

Contoh Animasi "Gerakan Siklus " hasil menggunakan Motion Tween 

Simpan file animasi yang telah dibuat untuk kenang-kenangan belajar menerapkan Motion Tween.☺

*******

3)membuat animasi menggunakan modifikasi Motion Tween  yang ada dalam contoh 1 interval waktu(Time Line). 

Kita masih dapat membuat perubahan pada animasi diantaranya :  

*mengatur variasi gerak objek di sepanjang interval 

 waktu yang telah dibuat.

*mengatur properties objeknya. 

Pada contoh inipenulis akan mencoba menjelaskan informasi hal mengatur variasi gerak objek di sepanjang interval waktu yang telah dibuat.Modifikasi gerak yang penulis buat misalnya penerapan gerak objek Lingkaran memantul ke arah bawah berulang kali pada Time Line sisi atas Stage.

Untuk dapat melihat perubahan gerak objek dari gerak dasar kita dapat membuat copy file pertama sebelumnya tadi yaitu File Contoh Motion Tween 1 arah (dasar). 

-Aktifkan File Contoh Motion Tween 1 arah (dasar).

-KLik Save As 

-Ketik nama file baru sebagai: 

 Modifikasi Motion Tween Objek 

-Klik Save.

Kita buat rencana misalnya kita akan membuat objek Lingkaran seperti memantul ke bawah dan ke atas seperti arah zigzag dengan jarak yang teratur. 

Misalnya lagi kita ingin :

*memulai dari Time Line 1 ke Time line 5 bola ke arah bawah,maka caranya klik kanan di Time Line 5 Insert Keyframe,drag Lingkaran lurus ke arah bawah sejauh ukuran sekitar setengah dari tinggi Stage misalnya ukuran 250. Untuk ketepatan ukuran gerak kita dapat menggunakan bantuan mistar pengukur. Mistar diaktifkan dengan cara klik Tab menu View ,klik Ruler.Kita juga harus memperhatikan ukuran posisi atas puncak Lingkaran jika nantinya diharapkan semua jarak pantul ke atas dan ke bawah adalah sama.

*kemudian klik di Time Line 10, drag  Lingkaran lurus bergerak ke arah atas pada ukuran ketinggian yang sama dengan ukuran posisi saat Lingkaran di Time Line 1 misalnya di ukuran 35. Biasanya kita tidak perlu lagi berulang melakukan Insert Keyfram untuk setiap segmen yang kita buat karena Insert Keyframe sudah terjadi secara otomatis ketika kita melakukan drag objeknya. 

*kemudian di Time Line 15, drag Lingkaran bergerak lurus ke arah bawah sejauh ukuran 250. 

*kemudian di Time Line 20, drag Lingkaran bergerak lurus ke arah atas pada ukuran 35.

*kemudian di Time Line 25, drag Lingkaran bergerak lurus ke arah bawah sejauh 250.

*kemudian di Time Line 30, drag Lingkaran bergerak lurus ke arah atas pada ukuran 35.

*kemudian di Time Line 35, drag Lingkaran bergerak lurus ke arah bawah.

Hasilnya dapat diihat sebagai tampilan di bawah ini:

Contoh Penerapan Motion Tween: Gerak Objek memantul 

Alahmduillah, Demikianlah 3 Contoh Mendasar Penerapan Motion Tween.

Contoh animasi lucu thema Panorama Pantai menggunakan penerapan Motion Tween dibuat dengan 13 layer ,karya penulis berikut ini untuk sahabat pembaca online di sini:

Contoh animasi penerapan Motion Tween

Kalau dilihat-lihat , versi Flashnya lebih asyik..^_^. 
Semoga informasi ini dapat menginspirasi sahabat pembaca untu membuat karya animasi yang keren. ^_^
Wassalam..

IMK (Interaksi Komputer & Manusia) -intro

HCI (Human Computre Interaction)

Di  Indonesia HCI diistilahkan sebagai IMK (Interaksi Manusia Komputer) berkaitan dengan  aspek interaksi manusia & komputer sehingga dapat mencapai kondisi senyaman mungkin ketika manusia bekerja di depan komputer untuk selang waktu yang lama.

Pengertian IMK (Interaksi Manusia Komputer)

1)IMK adalah hal-hal yang berkaitan dengan design,penilaian,implementasi  Sistem Komputer Interkatif untuk kegunaan manusia, serta kajian tentang fenomena yang terlibat di dalamnya.

2)IMK adalah kajian tentang manusia dan komputer serta interaksi diantara keduanya.

Kajian tentang manusia yaitu bagaimana manusia menerima memproses informasi apakah keterbatasan dan kelebihan manusia.

Kajian tentang komputer yaitu teknologi komputer yang dapat digunakan untuk menerima memproses dan menyajikan informasi, keterbatasan dan kelebihan komputer.

Tujuan IMK adalah :

1.Untuk membuat  produk yang reliable, yaitu mudah dipelajari, berkesan, jika digunakan dan memberikan kepuasan dan pengalaman yang menyenangkan bagi pengguna.

2.Untuk melibatkan pengguna dalam proses mendesain produk.

Indikator  IMK adalah:

1.Ramah dengan pengguna (user friendly) yaitu kemampuan perangkat yang mudah dioperasikan dan sejumlah kemampuan  lain sehingga pengguna betah mengoperasikan perangkat tersebut.

2.WYSIWYG (What you see is what you get) sebagai motto andalan penjual perangkat dan sebagai syarat yang ditetapkan pengguna pengikat.

4 Sudut Pandang Pentingnya IMK adalah:

1.ditinjau dari sudut penjualan , yaitu manusia mengguankan komputer tiap hari dan tidak ada waktu untuk belajar

 sehingga oleh karena itu , komputer harus mudah digunakan , sisitem harus memiliki desain yang terbaik, memerlukan waktu latihan  yang minimum dalam awal mempelajari penggunaannya, dapat digunakan oleh pengguna secara umum.

2.ditinjau dari kesukaran  menggunakan produk  mengakibatkan  pengguna akan beralih ke produk lain.

3.ditinjau dari sudut kemanusiaan, yaitu manusia memiliki kelemahan sehingga kesilapan atau ralat dapat mengakibatkan kehilangan waktu, uang, semangat bahkan nyawa.

4.ditinjau dari sudut sosial yaitu bahwa komputer memberi sumbanagan yang besar dalam kehidupan manusia , diataranya:

~sebagai pembelajaran anak-anak

~memberi nasehat ahli berdasarkan informasi atau sejarah

~mengkontrol lalu lintas dan lintasan udara

~mengkontrol kilang bahan kimia/nuklir

~Mengkontrol misi luar angkasa

Ada 4 Bidang Kerja dalam IMK yaitu:

1.Designer Interaksi, orang-orang yang terlibat mendesain semua aspek interktif sebuah produk

2.Designer Web , orang yang membangun dan menciptakan desain laman web

3.Arsitek Informasi, orang yang mencetuskan ide tentang bagaiman merancang produk interaktif

4.User Experiences Designer, orang-orang yang membuat pekerjaan desain aspek interaktif produk, desain laman, merancang produk interaktif termasuk menjalankan kajian tentang desain produk.

Bidang-bidang  yang  berkaitan  dengan IMK:

1.Ilmu Komputer, berkaitan dengan komponen utama komputer

2.Teknik Elektro, berkiatan dengan hardware

3.Psikologi, berkaitan dengan sifat, kebiasaan pengguna

4.Perancangan Grafis, tampilan grafis

5.Ergonomis, berkaitan dengan lingkungan

6.Antropologi, berkaitan dengan ilmu tentang manusia

7.Sosiologi, kaitan dengan struktur sosial

Komponen Utama Program Aplikasi

Terdapat 2 Komponen Utama Program Aplikasi

1)Bagian antar muka, yaitu sebagai sarana dialog antara manusia dan komputer

    Penelitian (Meyers 1989) pada berbagai aplikasi kecerdasan buatan menunjukkan bahwa 40-

    50% dari seluruh statemen program aplikasi dan memori yang ada diperuntukkan bagi

    pengembangan antar muka.

2)Bagian Aplikasi, untuk menghasilkan informasi berdasarkan olahan data yang sudah dimasukkan

     oleh pengguna lewat algoritma yang disyaratkan oleh aplikasi tersbut. 

Dari 2 Komponen Utama Program Aplikasi bagian yang sangat  penting adalah Antar Muka, dan yang dalam pengembangan memerlukan 4 strategi yaitu:

1.pengetahuan mekanisme fungsi manusia sebagai pengguna komputer

2.berbagai informasi tentang karakteristik dialog

3.strategi penggunaan prototipe yang didasarkan pada spesifikasi dialog formal yang disusun  

    secara bersama-sama antar calon pengguna dan perancang sistem.

4.teknik Evaluasi yang digunakan untuk mengevaluasi hasil proses prototipe yang telah dilakukan.

Tujuan /pentingnya perancangan antar muka pengguna  yang baik adalah:

1)mengurangi biaya penulisan program, dimana dalam pemrograman  rata-rata 70 % grafis berkaitan dengan antarmuka

2)mempermudah penjualan produk, dimana suatu produk pertama kali dilihat dari tampilannya

3)meningkatkan kegunaan komputer pada organisasi , dimana dengan antar muka yang menarik, membuat  pengguna tertarik menggunakan aplikasi komputer.

Dampak Antar Muka pengguna yang baik

Ada 5 dampak antar muka pengguna yang baik adalah :

1.Peningkatan produktifitas

2.Kualitas produksi yang lebih baik

3.Menimbulkan Kepuasan Pengguna

4.Mencegah pengalihan pegawai, dimana semakin banyak pegawai yang mampu mudah  

    mengoperasikan komputer dalam menyelesaikan pekerjaan.

Penyebab Antar Muka yang Kurang Baik

Ada 4 penyebab adanya Antar Muka yang kurang baik yaitu:

a.kurangnya pendidikan/pelatihan yang berkaitan dengan perancangan antar muka

b.kurangnya penyebaran pengetahuan yang diperlukan untuk merancang antar muka

c.perkembangan teknologi sangat cepat

d.koordinasi yang kurang baik dalam pengembangan aplikasi

Evolusi Antar Muka

Era Tahun	Level  perkembangan /Evolusi
50 an	Teknik switch panel
60-70 an	Pemrograman :  Cobol, Fortran
70-90 an	Instruksi
80 an	Dialogh interaksi, GUI, multimedia
90 an	Lingkungan kerja, sistem network, groupware
000	Berkembang luas, mobile devices, consumer electronic, interactive screens, dll.

Seiring perkembangan zaman terjadi perubahan dari pembahasan IMM atau HMI ke HCI atau IMK.

IMM (Interaksi Manusia dan mesin) atau HMI (Human Machine Interaction) merupakan kajian antar muka mesin-mesin yang digunakan di rumah atau tempat kerja.

Contoh Cara Buat Logo (logo usaha minuman)

Logo merupakan objek grafis, biasa digunakan sebagai lambang suatu organisasi formal ataupun non formal  ataupun berfungsi sebagai tanda khas/simbol/ lambang/ikon  sesuatu atau hal tertentu..

Biasanya logo terdiri dari gambar disertai sedikit  teks. 

Corel Draw  adalah satu dari sekian banyak aplikasi yang dapat digunakan untuk membuat logo.

Corel Draw yang beredar digunakan telah banyak versi  diantaranya 11,12,X3,X4,X5,X6,X7.

Dibandingkan dengan versi-versi  sebelumnya perubahan  yang menyolok pada Corel Draw X4 adanya penambahan 1 menu primer yakni menu Table,  selain itu terdapat penambahan beberapa tool di area toolbox pada Corel Draw  X4.

Kita dapat membuat gambar secara manual dengan kreasi sendiri layaknya menggambar dengan pensil  atau kita bisa membuat gambar mengunakan  tool/ikon perintah  pencetak  gambar yang telah tersedia tanpa merubahnya atau dengan memodifikasi hasilnya dengan  berbagai cara.  Selain menggunakan gambar dasar kita juga dapat menerapkan  efek tersedia yang diperlukan, kita juga dapat menghasilkan objek  grafis  dengan teknik-teknik tertentu sesuai yang dibutuhkan.

Ingin membuat usaha kecil-kecilan atau besar  diperlukan logo usaha sebagai tanda /merek usaha, kita dapat mendesign sendiri logo yang dibutuhkan. Dengan mendesain sendiri kita dapat mengekspresikan ide yang kita miliki dengan nyata.

Kali ini penulis mencoba untuk memberikan informasi contoh cara membuat  logo sederhana seperti pada gambar di atas sebagai contoh logo usaha  di bidang  penjualan minuman  semoga dapat menginspirasi para pembaca online untuk membuat logo yang lebih keren..

Untuk mudahnya penulis membagi pembuatannya dalam tahapan:

1.membuat gambar tatakan

2.membuat body  cup

3.membuat isi cup dan asap panas

4.membuat  teks logo

Langklah-langkah contoh pembuatan logo:

1.membuat gambar tatakan

1.Aktifkan halaman kerja Corel  Draw

2.klik Ellipse tool, drag (klik tahan geser mouse/touchpad)  dengan ukuran tinggi = 50mm,  lebar=100 mm

3.copy objek ellipse yang terbentuk dengan cara klik kanan di objeknya  pilih Copy,  klik kanan di tempat

kosong pilih Paste.

4.kecilkan ukuran objek hasil copy menjadi lebih kecil sehingga nantinya objek asli berkesan sebagai list, dengan klik objek copynya  drag ke arah titk pusat panah di sudut kanan atasnya. Atur ukuran objek tersebut hingga objek aslinya berkesan sebagai list.

5.Beri warna objek aslinya dengan cara klik objek asli ;klik Majestic Purple di  Color Pallette (CMYK)

Beri warna objek copyan dengan warna Violet

6.membuat ikatan dua objek tersebut agar mudah bebas dipindahkan tidak tercerai berai .

Dapat dilakukandengan cara klik drag mouse dari arah kiri luar semua objeknya hingga ke arah kanan luar objeknya – drag ke arah bawah kanan luar semua objeknya, lepaskan mouse.

Klik tab menu Arrange ; Group     lihat hasilnya , klik geser sisihkan ke arah kanan layar .

2.membuat body  cup

1.buat lagi satu objek ellips berukuran tinggi 40 mm , lebar 75 mm, geser objek ke arah atas agar leluasa tersedia tempat untuk membuat body cup.

2.klik ellips; klik Extrude tool ; klik titik Quadrant di sebelah atas ellipse drag  mouse lurus ke arah bawah hingga didapatkan tinggi body cup yang dimaksud. beri warna body cup dengan warna Pink

3.membuat cuping: klik Basic Shapes ; klik tombol panah Perfect Shapes di area property bar ; pilih bentuk dasar cuping cup (lihat gambar petunjuk), drag pointer di dekat body cup ; klik pointer di Pick tool pada bagian teratas area toolbox. Atur ukuran dan bentuk cuping agar sesuai kebutuhan dengan drag titik aktif atas atau bawah hingga ukuran dan bentuknya pantas atau sesuai kebutuhan .

Dobel klik objek cuping hingga tampil titik aktif rotasi, klik putar ke  arah jarum jam hingga cuping sejajar body cup, drag  cuping hingga menempel ke body cup;  klik cuping  pilih warna Deep Rose .

Mengatur warna Outline body cup:

Merubah outline (garis bingkai) body cup dari waran asalnya hitam menjadi  warna merah:

-klik  body cup; klik tool Outline di area toolbox ; klik Outline Pen ; klik tombol panah bawah di kotak Color:  ; pilih Red klik OK .Lakukan cara  yang sama untuk mewarnai outline cuping dengan Red juga.   [Mewarnai seluruh outline body juga dapat dilakukan dengan cara sekaligus.]

Membuat Corak print Flower pada body cup:

Klik  Artistic Media Tool ; klik Sprayer; klik tobol spraylist; klik corak yang dimaksud ; klik drag membentuk diagonal dari kiri atas ke kanan bawah,  atur ukuran corak agar sesuai pantas.

[corak print masih dapat ditukar dengan corak yang dimaksud meskipun pada jenis sprayer yang sama atau jenis sprayer lain.  Sebelum menggantinya klik corak yang ada ; tekan Delete di keyboard untuk menghapusnya, kemudian pilih dan terapkan corak lain yang dimaksud].

3.Membuat isi cup dan asap panas isi cup

Membuat isi cup

- Buat objek ellips baru ukurannya sedikit lebih kecil dari ukuran elllips tepi  bibir cup ; tempatkan di sisi dalam bibir cup

- Copy ellips tersebut ; atur ukuran ellips hasil copynya sedikit lebih kecil dari ukuran ellips asli.,  beri warna  ellips hasil copy dengan warna Dark Brown.

-Klik Freehand tool lukis garis kesan riak isi cup , warnai melalui Outline pen dengan warna  White

Membuat asap panas dari isi cup:

Klik Artistic Media Tool ; klik Preset ; klik tombol dropdown Preset Stroke  List, drag pointer di atas isi cup mulai dari arah bawah ke arah atas ,  warnai dengan warna Pale Yellow,  atur warna outline 70 % Black.

Copy atau buat yang baru lagi hingga seluruhnya 5 objek asap kemudian atur sedemikian rupa.

Geser objek tatakan ke bawah body cup hingga terlihat pantas.

Ikat semua objek; dimulai dengan drag kiri atas terluar objek –ke kanan terluar atas objek –ke bawah terluar kanan objek;  pilih Arrange – Group.

Catatan : jika diperlukan  memodifikasi objek  satu persatu maka untuk membuka ikatan klik Arrange; klik Ungroup All.

4.membuat  teks logo

a.membuat teks

 1.klik Text tool

 2.klik  pointer di halaman atur ukuran jenis hurufnya  Cooper Black  dan ukuran huruf 48 pt

 3.ketik teks logo yang dimaksud misal contohnya  Difa Coffee

4.Agar teksnya tidak terlalu rapat maka perlu dijarangkan jarak antar hurufnya  dengan pilihan perintah:

Klik Pick tool; klik Text tool; klik di akhir teksnya ; tekan tahan  tombol sift di keyboard –tekan tombol panah kiri di keyboard sehingga teks semuanya terblok .Klik menu Text ; klik Character Formatting; perhatikan di sebelah kanan layar muncul tampilan Docker window  , di kotak Range Kerning buat 50 dengan mengetikkan langsung atau mengklik tombol atas sinbox nya.

b.membuat bentuk  susunan teks

 -blok sekaligus  objek ellipse dan  objek teksnya ; klik menu Teks ; pilih Fit Text To Path  sehingga

   hasilnya seperti gambar di atas.

 -kemudian klik  drag ke arah bawah vertikal titik aktif tengah  atas objek teks

 -klik  a (a yang asli) di Miror Horizontaly  pada area property bar

 -klik a (a yang asli) di Miror Vertically pada area property bar

 -klik menu Arrange ; klik Break  Text Apart

 -klik drag teks keluar dari dalam ellips ke arah  bawah

 -posisikan objek gambar logo ke atas teks, atur supaya pantas

 -selesai..