<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Navigasi HTML5 Canvas &#8211; Citra Air Nusantara (CAN)</title>
	<atom:link href="https://citanusantara.id/tag/navigasi-html5-canvas/feed/" rel="self" type="application/rss+xml" />
	<link>https://citanusantara.id</link>
	<description>Inovasi tanpa batas, solusi cerdas</description>
	<lastBuildDate>Mon, 22 Aug 2022 09:44:27 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.0.2</generator>

<image>
	<url>https://citanusantara.id/wp-content/uploads/2024/08/cropped-Icon-CAN-32x32.png</url>
	<title>Navigasi HTML5 Canvas &#8211; Citra Air Nusantara (CAN)</title>
	<link>https://citanusantara.id</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">236061052</site>	<item>
		<title>Memberikan Instruksi Pada Tombol Di HTML Canvas Adobe Animate #4</title>
		<link>https://citanusantara.id/2022/08/22/memberikan-instruksi-pada-tombol-di-html-canvas-adobe-animate-4/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Mon, 22 Aug 2022 09:44:27 +0000</pubDate>
				<category><![CDATA[Adobe Animate]]></category>
		<category><![CDATA[HTML 5]]></category>
		<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Adobe Animate 22.0]]></category>
		<category><![CDATA[Navigasi HTML5 Canvas]]></category>
		<guid isPermaLink="false">https://abdulrahmann.com/?p=1059</guid>

					<description><![CDATA[Setelah tombol selesai kita buat pada , maka langkah selanjutnya adalah memberikan code pada tombol agar bisa menuju objek yang kita inginkan. Langkah awalnya adalah sebagai berikut: Tambahkan Instance Name pada tombol a, seperti tampilan berikut: Lalu tekan F9 pada layer action frame 1, isi dengan code berikut : Selanjutnya pada frame 1 tambahkan label [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Setelah tombol selesai kita buat pada , maka langkah selanjutnya adalah memberikan code pada tombol agar bisa menuju objek yang kita inginkan. Langkah awalnya adalah sebagai berikut:</p>



<ul class="wp-block-list"><li>Tambahkan Instance Name pada tombol a, seperti tampilan berikut:</li></ul>



<figure class="wp-block-image aligncenter size-large"><img fetchpriority="high" decoding="async" width="1024" height="558" src="https://citanusantara.id/wp-content/uploads/2022/08/image-33-1024x558.png" alt="" class="wp-image-1060" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-33-1024x558.png 1024w, https://citanusantara.id/wp-content/uploads/2022/08/image-33-300x164.png 300w, https://citanusantara.id/wp-content/uploads/2022/08/image-33-768x419.png 768w, https://citanusantara.id/wp-content/uploads/2022/08/image-33.png 1361w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Menambah Instance Name di tombol a</figcaption></figure>



<ul class="wp-block-list"><li>Lalu tekan F9 pada layer action frame 1, isi dengan code berikut :</li></ul>



<pre class="wp-block-code"><code>// untuk membuat scene berhenti di frame ini (1)
this.stop();

// untuk mnegarahkan tombol ke label "tombol"
this.btn_tombola.addEventListener("click", fl_ClickToGoToAndStopAtFrame_2.bind(this));

function fl_ClickToGoToAndStopAtFrame_2()
{
	this.gotoAndStop("tombolb");
}</code></pre>



<ul class="wp-block-list"><li>Selanjutnya pada frame 1 tambahkan label </li></ul>



<pre class="wp-block-code"><code>tombola</code></pre>



<ul class="wp-block-list"><li>Pada frame 15 tambahkan label</li></ul>



<pre class="wp-block-code"><code>tombolb</code></pre>



<ul class="wp-block-list"><li>Klik pada frame 15, lalu pilih objek tombol B, lalu berikan klik F9 dan isikan code berikut :</li></ul>



<pre class="wp-block-code"><code>this.btn_tombolb.addEventListener("click", fl_ClickToGoToAndStopAtFrame_3.bind(this));

function fl_ClickToGoToAndStopAtFrame_3()
{
	this.gotoAndStop("tombola");
}</code></pre>



<p class="wp-block-paragraph">Untuk hasilnya bisa di cek pada link berikut : <a href="https://citanusantara.id/matakuliah/multimedia/tombol/" target="_blank" rel="noreferrer noopener">https://citanusantara.id/matakuliah/multimedia/tombol/</a></p>



<p class="wp-block-paragraph">Tugas 1 : Silahkan buat 4 buah tombol, yaitu tombol A, B, C dan D. Jika tombol di klik maka akan pergi ke tombol yang di inginkan.</p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1059</post-id>	</item>
		<item>
		<title>Konsep Dasar Navigasi HTML5 Canvas Pada Adobe Animate 2022 #3</title>
		<link>https://citanusantara.id/2022/08/21/konsep-dasar-navigasi-html5-canvas-pada-adobe-animate-2022-3/</link>
		
		<dc:creator><![CDATA[admin]]></dc:creator>
		<pubDate>Sun, 21 Aug 2022 05:06:52 +0000</pubDate>
				<category><![CDATA[Adobe Animate]]></category>
		<category><![CDATA[HTML 5]]></category>
		<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Adobe Animate 22.0]]></category>
		<category><![CDATA[HTML 5 Canvas]]></category>
		<category><![CDATA[Navigasi HTML5 Canvas]]></category>
		<guid isPermaLink="false">https://abdulrahmann.com/?p=1040</guid>

					<description><![CDATA[Navigasi digunakan untuk mempermudah user dalam menggunakan media yang sudah kita buat, untuk membuat navigasi yang baik harus mempelajari tentang UI/UX agar mendapatkan hasil yang maksimal. Mulai dari desain yang bagus dan tata telat yang di inginkan oleh User. Langkah awal untuk membuat sebuah tombol kita harus membuat halaman baru terlebih dahulu, dengan cara : [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p class="wp-block-paragraph">Navigasi digunakan untuk mempermudah user dalam menggunakan media yang sudah kita buat, untuk membuat navigasi yang baik harus mempelajari tentang UI/UX agar mendapatkan hasil yang maksimal. Mulai dari desain yang bagus dan tata telat yang di inginkan oleh User.</p>



<p class="wp-block-paragraph">Langkah awal untuk membuat sebuah tombol kita harus membuat halaman baru terlebih dahulu, dengan cara : </p>



<ul class="wp-block-list"><li>Klik file &#8211; New Document &#8211; Advanced, sesuaikan ukuran dengan kebutuhan kita</li></ul>



<figure class="wp-block-image aligncenter size-full"><img decoding="async" width="766" height="504" src="https://citanusantara.id/wp-content/uploads/2022/08/image-23.png" alt="" class="wp-image-1042" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-23.png 766w, https://citanusantara.id/wp-content/uploads/2022/08/image-23-300x197.png 300w" sizes="(max-width: 766px) 100vw, 766px" /><figcaption>New Document</figcaption></figure>



<ul class="wp-block-list"><li>Buat 2 buah layer beri nama seperti gambar berikut </li></ul>



<figure class="wp-block-image aligncenter size-full"><img decoding="async" width="381" height="208" src="https://citanusantara.id/wp-content/uploads/2022/08/image-24.png" alt="" class="wp-image-1043" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-24.png 381w, https://citanusantara.id/wp-content/uploads/2022/08/image-24-300x164.png 300w" sizes="(max-width: 381px) 100vw, 381px" /><figcaption>Layer Pada Timeline</figcaption></figure>



<ul class="wp-block-list"><li>Buat sebuah objek dengan Ractangle Tool (R) pada frame 1 di layer tombol</li></ul>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="488" height="287" src="https://citanusantara.id/wp-content/uploads/2022/08/image-25.png" alt="" class="wp-image-1044" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-25.png 488w, https://citanusantara.id/wp-content/uploads/2022/08/image-25-300x176.png 300w" sizes="(max-width: 488px) 100vw, 488px" /><figcaption>Tombol A</figcaption></figure>



<ul class="wp-block-list"><li>Convert menjadi tombol dengan cara, klik kanan pada objek lalu pilih Convert to symbol, isi Name dengan btn_tombol1, lalu pada Type pilih button.</li></ul>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="562" height="444" src="https://citanusantara.id/wp-content/uploads/2022/08/image-26.png" alt="" class="wp-image-1047" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-26.png 562w, https://citanusantara.id/wp-content/uploads/2022/08/image-26-300x237.png 300w" sizes="(max-width: 562px) 100vw, 562px" /><figcaption>Tombol btn_tombol1</figcaption></figure>



<ul class="wp-block-list"><li>Klik dua kali pada objek, lalu kreasikan sesuai kebutuhan anda</li></ul>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1010" height="697" src="https://citanusantara.id/wp-content/uploads/2022/08/image-27.png" alt="" class="wp-image-1048" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-27.png 1010w, https://citanusantara.id/wp-content/uploads/2022/08/image-27-300x207.png 300w, https://citanusantara.id/wp-content/uploads/2022/08/image-27-768x530.png 768w" sizes="(max-width: 1010px) 100vw, 1010px" /><figcaption>Tampilan saat pertama kali tombol dijalankan</figcaption></figure>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1002" height="672" src="https://citanusantara.id/wp-content/uploads/2022/08/image-28.png" alt="" class="wp-image-1049" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-28.png 1002w, https://citanusantara.id/wp-content/uploads/2022/08/image-28-300x201.png 300w, https://citanusantara.id/wp-content/uploads/2022/08/image-28-768x515.png 768w" sizes="(max-width: 1002px) 100vw, 1002px" /><figcaption>Tampilan tombol saat kursor diarahkan ke tombol</figcaption></figure>



<ul class="wp-block-list"><li>Selanjutnya Duplicate tombol dengan cara klik pada menu Library sebelah kanan atas, lalu klik kanan pilih duplicate pada objek tombola seperti contoh dibawah</li></ul>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="564" height="583" src="https://citanusantara.id/wp-content/uploads/2022/08/image-29.png" alt="" class="wp-image-1052" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-29.png 564w, https://citanusantara.id/wp-content/uploads/2022/08/image-29-290x300.png 290w" sizes="(max-width: 564px) 100vw, 564px" /><figcaption>Settinga saat duplicate objek</figcaption></figure>



<ul class="wp-block-list"><li>Selanjutnya pada Scene 1, layer tombol Insert keyframe pada frame ke 5</li></ul>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="732" height="658" src="https://citanusantara.id/wp-content/uploads/2022/08/image-30.png" alt="" class="wp-image-1053" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-30.png 732w, https://citanusantara.id/wp-content/uploads/2022/08/image-30-300x270.png 300w" sizes="(max-width: 732px) 100vw, 732px" /><figcaption>Insert Keyframe</figcaption></figure>



<ul class="wp-block-list"><li>Drag and Drop tombolb pada Library ke dalam Stage</li></ul>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="517" src="https://citanusantara.id/wp-content/uploads/2022/08/image-31-1024x517.png" alt="" class="wp-image-1054" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-31-1024x517.png 1024w, https://citanusantara.id/wp-content/uploads/2022/08/image-31-300x151.png 300w, https://citanusantara.id/wp-content/uploads/2022/08/image-31-768x388.png 768w, https://citanusantara.id/wp-content/uploads/2022/08/image-31.png 1306w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Drag and Drop tombol b kedalam stage</figcaption></figure>



<ul class="wp-block-list"><li>Lalu posisikan sejajar dengan tombol sebelumnya, lalu hapus tombol yang lama.</li><li>Setelah itu klik dua kali pada objek lalu ubah tulisannya menjadi tomb B</li></ul>



<figure class="wp-block-image aligncenter size-large"><img loading="lazy" decoding="async" width="1024" height="540" src="https://citanusantara.id/wp-content/uploads/2022/08/image-32-1024x540.png" alt="" class="wp-image-1055" srcset="https://citanusantara.id/wp-content/uploads/2022/08/image-32-1024x540.png 1024w, https://citanusantara.id/wp-content/uploads/2022/08/image-32-300x158.png 300w, https://citanusantara.id/wp-content/uploads/2022/08/image-32-768x405.png 768w, https://citanusantara.id/wp-content/uploads/2022/08/image-32.png 1037w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>Tombol B pada frame 5</figcaption></figure>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">1040</post-id>	</item>
	</channel>
</rss>
