Multimedia – Citra Air Nusantara (CAN) https://citanusantara.id Inovasi tanpa batas, solusi cerdas Mon, 13 Mar 2023 08:59:22 +0000 en-US hourly 1 https://wordpress.org/?v=7.0 https://citanusantara.id/wp-content/uploads/2024/08/cropped-Icon-CAN-32x32.png Multimedia – Citra Air Nusantara (CAN) https://citanusantara.id 32 32 236061052 Bahan Untuk Membuat Aplikasi Biography #multimedialanjutan https://citanusantara.id/2023/03/13/bahan-untuk-membuat-aplikasi-biography-multimedialanjutan/ Mon, 13 Mar 2023 08:59:22 +0000 https://abdulrahmann.com/?p=1922 Silahkan download bahan untuk belajar membuat aplikasi Biography

DOWNLOAD
]]> 1922 Membuat Animasi Pada Portfolio Berbasis HTML5 Canvas Dengan Adobe Animate 2022 #8 https://citanusantara.id/2022/09/30/membuat-animasi-pada-portfolio-berbasis-html5-canvas-dengan-adobe-animate-2022-8/ Fri, 30 Sep 2022 11:38:28 +0000 https://abdulrahmann.com/?p=1334 Sekarang kita akan memberikan animasi didalam project portfolio yang sudah kita desain sebelumnya. Proses pembuatan animasinya kita lakukan per layer agar supaya tidak susah dalam pembuatan animasinya. Langkah awal adalah :

Klik kanan pada text welcome lalu convert to symbol (f8)

Convert to Symbol text WELCOME

Lalu jadikan text WELCOME menjadi movie clip, cara setting-nya seperti pada gambar berikut :

Proses membuat text WELCOME menjadi Movie Clip

Double klik tulisan WELCOME lalu lakukan proses Distribute to layers

Proses Distribute To Layers text welcome

Untuk prosesnya bisa di cek pada tutorial yang ada pada youtube Abdul Rahman Blog di link berikut :

]]> 1334 Membuat Desain CV Berbasis HTML5 Canvas Dengan Adobe Animate 2022 #7 https://citanusantara.id/2022/09/30/membuat-desain-cv-berbasis-html5-canvas-dengan-adobe-animate-2022-7/ Fri, 30 Sep 2022 06:34:01 +0000 https://abdulrahmann.com/?p=1312 Pada tutorial kali ini kita akan membuat sebuah portfolio untuk mempromosikan kemampuan yang dimiliki oleh mahasiswa.

Langkah awal silahkan setting stage sesuai dengan gambar berikut :

Mengatur halaman stage

Selanjutnya buatlah layer dalam timeline line, cloud, text, logo, tombol dan background seperti gambar berikut :

Pembuatan layer pada timeline

Didalam layer background, silahkan tambah object dengan rectangle tools seperti gambar berikut :

Membah object dengan rectangle tools

Selanjutnya silahkan tambahkan awan di dalam layer cloud dengan menggunakan oval tools seperti gambar berikut :

Membuat awan dengan oval tools

Selanjutnya pada layer text silahkan tambahkan tulisan WELCOME seperti gambar berikut :

Membuat text welcome dengan text tools

Pada layer logo silahkan tambahkan Text singkatan dari nama masing-masing sehingga bisa terbentuk sebuah logo

Membuat logo dengan text tools

Selanjutnya kita akan menambahkan tulisan di bagian layer text PORTFOIO dan ABDUL RAHMAN, M.KOM. seperti berikut :

Menambah tulisan di layer text

Selanjutnya kita membuat tombol PORTFOLIO didalam layer tombol seperti berikut :

Menambahkan tombol portfolio di layer tombol

Sehingga hasil akhirnya nanti akan terbuat sebuah halaman utama portfolio sebagai berikut :

Hasil akhir menu utama portfolio

Untuk lebih jelasnya silahkan cek youtube berikut :

]]> 1312 Menampilkan Halaman Sesuai Dengan Mouse Events Pada HTML5 Canvas #5 https://citanusantara.id/2022/08/27/menampilkan-halaman-sesuai-dengan-mouse-events-pada-html5-canvas-5/ Sat, 27 Aug 2022 12:57:50 +0000 https://abdulrahmann.com/?p=1145 Mouse Events adalah proses yang terjadi setelah ada action yang diberikan oleh mouse. Pada html 5 canvas yang ada di adobe animate bisa kita manfaatkan untuk membuat sebuah aplikasi sederhana seperti berikut :

Stage Membuat Canvas Pindah Halaman

Hasilnya bisa di cek pada link berikut : https://citanusantara.id/matakuliah/multimedia/pindahhalaman/

Untuk sourcecode nya bisa di cek di : https://github.com/abdulr123/multimedia/tree/main/pindahhalaman

]]> 1145 HTML 5 Canvas dan Adobe Animate 22.0 #2 https://citanusantara.id/2022/08/21/html-5-canvas-dan-adobe-animate-22-0-2/ Sun, 21 Aug 2022 03:12:47 +0000 https://abdulrahmann.com/?p=1029 Dalam dunia nyata, canvas sering digunakan untuk menggambar dan melukis. Biasanya menggunakan pensil dan cat.Dalam pemrograman, canvas adalah elemen yang bisa digambar dengan kumpulan kode.

Canvas adalah elemen baru di HTML5 untuk menggambar (render) grafik, image, dan teks

w3schools – 21 Agustus 2022

Canvas dapat dibuat dengan tag <canvas>, jangan lupa juga untuk memberikan ukuran tinggi dan lebarnya.

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>

Selanjutnya kita harus menggunakan DOM API untuk memanipulasi canvas, biasanya dilakukan seperti ini:

var canvas = document.getElementById("CanvasKu");
var ctx = canvas.getContext("2d");

DOM merupakan singkatan dari Document Object Model.Artinya, dokumen (HTML) yang dimodelkan dalam sebuah objek.Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API (Application Programming Interface). DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG. DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.

Fungsi document.getElementById(“CanvasKu”) untuk memilih elemen HTML dengan id “CanvasKU”. Selanjutnya variabel “ctx” (konteks) adalah objek dari canvas yang bisa kita manfaatkan untuk menggambar. Contoh kode lengkapnya:

<!DOCTYPE html>
<html>
    <head>
        <meta charsetgoyang dombret="utf-8">
        <title>Tutorial HTML 5 Canvas</title>
    </head>
    <body>

		<!-- canvas -->
        <canvas id="myCanvas" width="640" height="480" style="border:1px solid #000000;">
        </canvas>

		<!-- javascript -->
        <script type="text/javascript">
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
        </script>

    </body>
</html>
Hasil Canvas Kosong Yang Siap Digambar

Sekilas tentang Adobe Animate

Adobe Animate merupakan software besutan Adobe yang baru saja dirilis secara resmi pada bulan Desember 2020 dan sekarang sudah rilis Animate pada Oktober 2021 (versi 22.0).

Software ini merupakan upgrade dari Adobe Flash CC yang kini layanannya telah dihentikan. Dilansir dari laman resminya, software ini dapat digunakan untuk membuat web interaktif dan konten mobile untuk menggunakan alat ilustrasi dan animasi yang canggih. Kamu bisa membangun lingkungan game, desain interface, hingga mengintegrasikan audio. Kamu juga bisa membuat animasi untuk augmented reality.

Untuk lebih jelas bisa membaca petunjuk tentang adobe animate lebih lengkap di https://helpx.adobe.com/animate/user-guide.html

]]> 1029 Pengenalan Multimedia #0 https://citanusantara.id/2022/07/19/pengenalan-multimedia-0/ Tue, 19 Jul 2022 02:51:33 +0000 https://abdulrahmann.com/?p=818
Ilustrasi Multimedia

Multimedia adalah sebagai penyedia informasi pada media elektronik seperti komputer, laptop, serta smartphone. Informasi dalam multimedia adalah berupa suara, grafik, animasi, dan teks. Dalam Kamus Besar Bahasa Indonesia (KBBI) apa itu multimedia diartikan pula sebagai berbagai jenis sarana.

“Multimedia adalah penyediaan informasi pada komputer yang menggunakan suara, grafika, animasi, dan teks,” dijelaskan lebih lanjut dalam KBBI. Memahami makna lain dari multimedia adalah sebagai alat komunikasi.

“Multimedia adalah kombinasi dari tiga elemen: suara, gambar, dan teks,” ditegaskan oleh Mc. Comick (1996).

Itulah mengapa definisi apa itu multimedia dapat diartikan sebagai penggunaan media berbeda untuk menggabungkan dan menyampaikan informasi dalam bentuk tiga elemen tersebut.

Aplikasi Multimedia

Misalkan ada seorang petugas pemasaran produk perumahan berusaha untuk meyakinkan seorang pelanggan akan keasrian lingkungan perumahan yang ditawarkan. Petugas pemasaran tersebut ingin menjelaskan bahwa perumahan yang ditawarkan lengkap dengan berbagai fasilitas yang terpadu, bentuk rumah dan tatanan rumah yang dirancang dengan indahnya. Namun ada  kendala, dimana lokasi perumahan terletak 25 kilometer dari kantor pemasaran dan pelanggan tidak mempunyai waktu untuk ke lokasi. Media apa yang bisa gunakan untuk meyakinkan pelanggan akan kelebihan dari perumahan tersebut? Biasanya adalah sebuah map berisi berlembar-lembar lembar brosur, foto-foto, denah rumah, harga, peta dan sebagainya. Hal ini tentunya membutuhkan dana promosi yang tidak sedikit, selain tentunya menimbulkan ketidaknyamanan bagi pelanggan.

Bagaimana kalau anda meyakinkan pelanggan tersebut dengan video yang meliputi suasana perumahan, fasilitas yang tersedia, taman yang asri dengan suara kicau burung yang merdu. Apabila pelanggan ingin melihat gambaran bagian dalam rumah, pelanggan dapat melihat visualisasi dengan seolah-olah berjalan memasuki rumah tersebut sendiri. Apabila pelanggan ingin melihat detil sebuah rumah tipe tertentu, detil dapat ditunjukkan dengan cepat. Hal ini dimungkinkan oleh teknologi multimedia.

Multimedia Interaktif

Interaktifitas merupakan nilai tambah yang paling penting, yang dapat dijadikan sebuah alasan yang paling utama penggunaan komputer sebagai peralatan untuk menghadirkan multimedia. Ada sebuah ilustrasi yang bisa digunakan sebagai contoh pentingnya interaktifitas. Misalkan saja ada seorang anak yang berminat untuk mengetahui informasi tentang kehidupan gajah. Anak yang bersangkutan bisa saja mendapatkan informasi tentang binatang tersebut dengan menonton televisi, misalkan saja dengan memasang saluran yang membahas dunia flora dan fauna yang paling terkenal di dunia “National Geographic Channel™”. Dengan menonton saluran ini anak tersebut akan memperoleh informasi tentang berbagai binatang yang ingin diketahui. Meskipun demikian, ada kelemahan pada contoh ini, yaitu apabila anak tersebut hanya tertarik pada binatang jenis tertentu seperti binatang laut. Terpaksa anak ini harus menonton televisi pada jam tertentu apabila sebelumnya mengetahui jam tayang acara, dimana besar kemungkinannya adalah jam dimana dia harus pergi ke sekolah. Mungkin juga anak yang bersangkutan harus menunggu berjam-jam karena tidak tahu kapan acara tentang dunia binatang laut diputar. Sedangkan apabila anak tersebut menggunakan sebuah aplikasi multimedia tentang ensiklopedia binatang yang tersedia di komputer, anak tersebut dapat memilih menu binatang laut, bahkan dapat langsung memilih binatang laut tertentu yang ingin diketahuinya. Dengan menggunakan komputer yang menyediakan interaktifitas, anak tersebut tidak harus membuang waktu berjam-jam untuk menunggu, dan bisa mencari informasi yang diinginkan kapanpun dia mau, serta tidak perlu menerima berbagai informasi yang dibutuhkan yang pada akhirnya hanya akan membuat anak tersebut jenuh dan kehilangan semangat.

Multimedia memang merupakan teknologi komputer yang sedang berkembang pesat, selain internet, seiring dengan perkembangan komputer pribadi (PC/personal computer). Ribuan perusahaan di seluruh dunia telah memanfaatkan teknologi multimedia untuk memasarkan produk perusahaan mereka, jutaan programmer (pembuat program) membuat perangkat lunak multimedia berupa permainan. Juga untuk CAL/CAI (Computer Aided Learning/Computer Aided Instruction)  program untuk belajar dengan bantuan komputer baik matematika, fisika, memasak, merakit komputer, mempelajari jalan sebuah kota, atau sekedar sebagai media penyampai informasi atau profil perusahaan, seperti perusahaan perumahan yang telah dijadikan contoh permasalah diatas, atau mungkin hotel, pertokoan dan sebagainya.

Pada sejarahnya tercatat Macromedia Flash dan Macromedia Director yang menjadi 2 software yang sangat populer sebelum akhirnya dibeli oleh Adobe Flash dan kemudian tidak dilanjutkan pengembangannya pada tahun 2012. Saat ini yang menjadi trend adalah penggabungan elemen media tersebut menjadi video yang kemudian dapat dipublikasikan pada platform Youtube maupun berbagai media sosial yang ada.

]]> 818