Algoritma, Struktur Data, dan Pemrograman: Bab 11. Pemrograman Internet

Sunday, December 25, 2016

Bab 11. Pemrograman Internet

DHTML: Filter dan Transisi

11.1 Pengantar

Pada bab ini, akan didiskusikan mengenai filter dan transisi. Penerapan filter terhadap teks dan citra menyebabkan perubahan yang persisten. Transisi bersifat temporer; penerapan sebuah transisi memampukan Anda untuk mengalihkan dari satu halaman ke halaman lain dengan efek visual seperti random dissolve. Filter dan transisi tidak menambahkan konten pada halaman Anda, tetapi keduanya dapat dipakai untuk menangkap atensi pengguna.

Setiap efek visual yang diterapkan dengan filter dan transisi dapat diprogram (programabel), sehingga efek tersebut dapat diubah secara dinamis oleh program untuk merespon event yang dilakukan pengguna, seperti klik mouse dan penekanan-kunci. Filter dan transisi sangat mudah digunakan sehingga para perancang halaman web dapat menggunakannya dengan usaha yang minimal.

Bagian dari keindahan filter dan transisi DHTML (dynamic HTML) adalah bahwa keduanya merupakan paket yang terintegrasi di dalam Internet Explorer. Anda tidak lagi memerlukan program paket grafis untuk memanfaatkannya.

Filter dan transisi ditetapkan dengan properti filter dari CSS. Kapabilitas ini serupa dengan kapabilitas grafis dari perangkat lunak semacam PowerPoint dari Microsoft. Anda dapat memiliki halaman baru atau potong halaman web yang memudar. Anda dapat memiliki sebuah halaman yang secara acak menjelma (randomly dissolve) menjadi halaman berikutnya. Anda dapat membuat potongan halaman menjadi transparan atau semitransparan sehingga Anda dapat melihat apa yang ada di baliknya. Anda dapat mengaburkan teks atau citra untuk memberikannya ilusi gerakan. Anda dapat menciptakan bayangan pada elemen untuk memberikannya efek tiga-dimensi. Anda bahkan dapat menggabungkan beberapa efek untuk menghasilkan pelbagai efek yang lebih besar.

11.2 Filter: flipv dan fliph

Filter flipv dan flipv mencerminkan teks atau citra secara vertikal dan horisontal. Gambar 11.1 mendemonstrasikan kedua efek.

Baris 32 menerapkan sebuah filter menggunakan atribut style. Nilai dari properti filter adalah nama filter. Pada kasus ini, filter adalah fliph, yang mencerminkan objek secara horisontal.

Baris 38 menerapkan lebih dari satu filter sekaligus dengan menetapkan beberapa filter yang dipisahkan dengan spasi sebagai nilai-nilai dari atribut filter. Pada kasus ini, filter flipv juga diterapkan, yang mencerminkan objek secara vertikal.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Pencermin</title>

<style type = "text/css">

body { background-color: #CCFFCC }

table { font-size: 3em;

font-family: Arial, sans-serif;

background-color: #FFCCCC;

border-style: ridge ;

border-collapse: collapse }

td { border-style: groove;

padding: 1ex }

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Gambar 11.1 Menggunakan filter flip

11.3 Transparansi dengan Filter chroma

Filter chroma menerapkan efek transparansi secara dinamis, tanpa perlu menggunakan editor grafis. Gambar 15.2 mengubah transparasi sebuah citra, menggunakan skrip model objek berbasis pilihan pengguna dari sebuah elemen select.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Chroma</title>

<script type = "text/javascript">

<!--

function ubahWarna( sWarna )

{

if ( sWarna ) {

// jika pengguna memilih sebuah warna, ubah nilai tersebut

// menjadi hex dan tetapkan filter warna.

citraChroma.filters( "chroma" ).color = sWarna;

citraChroma.filters( "chroma" ).enabled = true;

}

else // jika pengguna memilih "None",

// nonaktifkan filter.

citraChroma.filters( "chroma" ).enabled = false;

}

// -->

</script>

</head>

<body>

<h1>Filter Chroma:</h1>

<img id = "citraChroma" src = "trans.gif" style =

"position: absolute; filter: chroma" alt =

"Transparent Image" />

<form action = "">

<option value = "">None</option>

<option value = "#00FFFF">Cyan</option>

<option value = "#FFFF00">Yellow</option>

<option value = "#FF00FF">Magenta</option>

<option value = "#000000" selected = "selected">

Black</option>

</select>

</form>

</body>

</html>

Gambar 11.2 Mengubah nilai dari filter chroma

Baris 19 menetapkan properti-properti filter secara dinamis menggunakan JavaScript. Pada kasus ini, nilai dari select (baris 41-48) merupakan sebuah string yang memuat nilai warna. Nilai ini dilewatkan sebagai argumen kepada fungsi ubahWarna.

Baris 20 menyalakan filter. Setiap filter memiliki sebuah properti dengan nama enabled. Jika properti ini ditetapkan true, maka filter diterapkan. Jika ia ditetapkan false, maka filter tidak diterapkan. Baris 24 mengindikasikan bahwa, jika pengguna menyeleksi None (baris 43), maka filter dinonaktifkan.

Baris 41 mengintroduksi event onchange. Event ini terjadi ketika value dari sebuah bidang formulir berubah. Ekspresi this.value merepresentasikan nilai teseleksi pada komponen GUI select.

11.4 Filter mask

Penerapan filter mask pada sebuah citra memampukan Anda untuk menciptakan image mask, dimana di dalamnya latar-belakang sebuah elemen merupakan warna solid dan latar-depan sebuah elemen adalah transparan. Gambar 11.3 menambahkan filter mask pada sebuah elemen h1 yang menindih sebuah citra. Latar-depan dari elemen h1 tersebut (teks di dalamnya) adalah transparan, sehingga Anda dapat melihat citra latar-belakang melalui huruf-huruf pada latar-depan.

Baris 21 menetapkan parameter warna untuk filter mask. Parameter tersebut selalu dalam format param = nilai.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Mask</title>

</head>

<body>

<h1>Filter Mask</h1>

<div style = "position: absolute; top: 125; left: 20;

filter: mask( color = #CCCFFF )">

AaBbCcDdEeFfGgHhIiJj<br />

KkLlMmNnOoPpQqRrSsTt

</h1>

</div>

<img src = "gradient.gif" width = "380" height = "200"

alt = "Citra dengan efek gradien" />

</body>

</html>

11.5 Filter-Filter Lain: invert, gray, dan xray

Tiga filter citra yang didiskusikan pada bagian ini dapat diterapkan pada citra maupun pada teks. Filter invert menghasilkan efek citra negatif, dimana area gelap akan menjadi terang dan area terang akan menjadi gelap. Filter gray menghasilkan efek citra keabuan, dimana semua warna akan dikonversi menjadi data keabuan. Filter xray menghasilkan efek sinar-x, dimana filter ini merupakan kebalikan dari efek keabuan. Gambar 11.4 mendemonstrasikan penerapan ketiga filter ini, baik sendiri maupun kombinasi, terhadap sebuah citra. Tiap filter pada baris 26-41 diterapkan secara terpisah pada citra.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Tiga Filter Citra</title>

<style type = "text/css">

.cap { font-weight: bold;

background-color: #DDDDAA;

text-align: center }

</style>

</head>

<body>

<table class = "cap">

<tr>

<td>Normal</td>

<td>Keabuan</td>

</tr>

<tr>

<td><img src = "buku1.jpg" alt =

"sampul buku normal" /></td>

<td><img src = "buku1.jpg" style = "filter: gray"

alt = "sampul buku keabuan"/>

</td>

</tr>

<tr>

<td>Invert</td>

</tr>

<tr>

<td><img src = "buku1.jpg" style = "filter: xray"

alt = "sampul buku sinar-x"/>

</td>

<td><img src = "buku1.jpg" style = "filter: invert"

alt = "sampul buku negatif"/>

</td>

</tr>

</table>

</body>

</html>

11.6 Menambahkan shadow pada Teks

Sebuah filter sederhana yang menambahkan kedalaman pada teks Anda adalah filter shadow. Filter ini menciptakan efek pembayangan yang memberikan tampilan tiga-dimensi pada teks Anda.

Gambar 11.4 Filter invert, gray, dan xray

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Shadow</title>

<script type = "text/javascript">

<!--

var arahBayangan = 90;

function mulai()

{

window.setInterval( "jalankanDemo()", 500 );

}

function jalankanDemo()

{

teksBayangan.innerText =

"Arah Bayangan: " + arahBayangan % 360;

teksBayangan.filters( "shadow" ).direction =

( arahBayangan % 360 );

arahBayangan += 45;

}

// -->

</script>

</head>

<body onload = "mulai()">

<h1 id = "teksBayangan" style = "position: absolute; top: 25;

left: 25; padding: 10; filter: shadow( direction = 0,

color = red )">Arah Bayangan: 0</h1>

</body>

</html>

Gambar 11.5 Menerapkan filter shadow pada teks

Baris 35-37 menerapkan filter shadow terhadap teks. Properti direction dari filter shadow menentukan arah efek bayangan. Ini dapat ditetapkan menjadi salah satu dari delapan arah yang diekspresikan dalam notasi sudut: 0, 45, 90, 135, 180, 225, 270, dan 315. Properti color menetapkan warna bayangan yang diterapkan terhadap teks. Baris 23-27 pada fungsi jalankanDemo menginkremen nilai properti direction dari 0 sampai 135, dan memperbarui properti innerText dari elemen h1 (teksBayangan) untuk menyesuaikan dengan arah bayangan.

Perhatikan bahwa Anda menerapkan gaya CSS padding terhadap elemen h1. Jika Anda tidak menerapkannya, efek bayangan akan terpotong oleh batas elemen. Penambahan padding akan memberikan jarak yang lebih besar antara teks dan batas elemen, sehingga memberikan efek penuh ketika ditampilkan.

11.7 Menciptan Gradien dengan alpha

Internet Explorer 8 memampukan Anda untuk menciptakan efek dinamis menggunakan filter alpha (Gambar 11.6). Filter alpha juga digunakan untuk efek transparansi yang tidak dapat dilakukan dengan filter chroma.

Baris 26-29 menerapkan filter alpha pada sebuah elemen div yang memuat sebuah citra. Properti style dari filter tersebut menentukan gaya apa ketika opasitas diterapkan; nilai 0 menerapkan opasitas seraga, nilai 1 menerapkan gradien linier, nilai 2 menerapkan gradien sirkular, dan nilai 3 menerapkan gradien persegi.

Properti opacity dan finishopacity berupa persentase yang menentukan persentase opasitas dari gradien awal dan gradien akhir. Atribut-atribut lain adalah startX, startY, finishX, dan finishY. Semua atribut ini koordinat x-y dari gradien awal dan gradien akhir pada elemen tertentu.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Alpha</title>

<script type = "text/javascript">

<!--

function jalankan()

{

gbr.filters( "alpha" ).opacity = tombolOpasitas.value;

gbr.filters( "alpha" ).finishopacity =

tombolOpasitas2.value;

gbr.filters( "alpha" ).style = styleSelect.value;

}

// -->

</script>

</head>

<body>

<div id = "gbr"

style = "position: absolute; left:0; top: 0;

filter: alpha( style = 2, opacity = 100,

finishopacity = 0 )">

<img src = "film.jpg" alt = "Sampul" />

</div>

<table style = "position: absolute; top: 250; left: 0;

background-color: #CCFFCC" border = "1">

<tr>

<td>Opasitas (0-100):</td>

<td><input type = "text" id = "tombolOpasitas"

size = "3" maxlength = "3" value = "100" /></td>

</tr>

<tr>

<td>Opasitas Akhir (0-100):</td>

<td><input type = "text" id = "tombolOpasitas2"

size = "3" maxlength = "3" value = "0" /></td>

</tr>

<tr>

<option value = "1">Linear</option>

Circular</option>

<option value = "3">Rectangular</option>

</select></td>

</tr>

<tr>

<input type = "button" value = "Apply"

onclick = "jalankan()" />

</td>

</tr>

</table>

</body>

</html>

Gambar 11.6 Penerapan filter alpha

11.8 Membuat Teks Bersinar (glow)

Filter glow menambahkan aura warna dari teks. Warna dan kekuatan teks didemonstrasikan pada Gambar 11.7.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Glow</title>

<script type = "text/javascript">

<!--

var indeksKekuatan = 1;

var kounter = 1;

var atasBawah = true;

var arrayWarna = [ "FF0000", "FFFF00", "00FF00",

"00FFFF", "0000FF", "FF00FF" ];

function terapkan()

{

cakupanGlow.filters( "glow" ).color =

parseInt( warnaGlow.value, 16 );

cakupanGlow.filters( "glow" ).strength =

kekuatanGlow.value;

}

function mulaiDemo()

{

window.setInterval( "jalankanDemo()", 150 );

}

function jalankanDemo()

{

if ( atasBawah ) {

cakupanGlow.filters( "glow" ).strength =

indeksKekuatan++;

}

else {

cakupanGlow.filters( "glow" ).strength =

indeksKekuatan--;

}

if ( indeksKekuatan == 1 ) {

atasBawah = !atasBawah;

kounter++;

cakupanGlow.filters( "glow" ).color =

parseInt( arrayWarna[ kounter % 6 ], 16 );

}

if ( indeksKekuatan == 10 ) {

atasBawah = !atasBawah;

}

// -->

</script>

</head>

<body style = "background-color: #00AAAA">

<h1>Filter Glow:</h1>

<span id = "cakupanGlow" style = "position: absolute;

left: 200; top: 100; padding: 5; filter: glow(

color = red, strength = 5 ); font-size: 2em">

Teks Bersinar

</span>

<table border = "1" style = "background-color: #CCFFCC">

<tr>

<td>Warna (Hex)</td>

<td><input id = "warnaGlow" type = "text" size = "6"

maxlength = "6" value = "FF0000" /></td>

</tr>

<tr>

<td>Kekuatan (1-255)</td>

<td><input id = "kekuatanGlow" type = "text"

size = "3" maxlength = "3" value = "5" />

</td>

</tr>

<tr>

<input type = "button" value = "Terapkan"

onclick = "terapkan()" />

<input type = "button" value = "Jalankan Demo"

onclick = "mulaiDemo()" /></td>

</tr>

</table>

</body>

</html>

Gambar 11.7 Penerapan filter glow

Baris 16-17 menetapkan sebuah array yang memuat nilai-nilai warna. Baris 45-46 mengubah atribut color dari filter glow berdasarkan nilai kounter, yang diinkremen (baris 44) setiap kali nilai dari indeksKekuatan menjadi 1. Seperti pada filter chroma, Anda menggunakan fungsi parseInt untuk menugaskan nilai heksadesimal (diambil dari arrayWarna yang dideklarasikan pada baris 16-17) kepada properti color.

Baris 33-40 menginkremen atau mendekremen properti strength dari filter glow berdasarkan nilai dari atasBawah, yang ditoggle di dalam struktur if pada baris 42 dan 49 ketika indeksKekuatan meraih nilai 1 atau 0.

11.9 Menggunakan Filter blur

Filter blur menciptakan sebuah ilusi pergerakan dengan mengaburkan teks atau citra pada arah tertentu. Seperti yang Anda lihat pada Gambar 11.8, filter blur dapat diterapkan pada salah satu dari delapan arah, dan kekuatannya dapat diubah sesuka Anda.

100

101

102

103

104

105

106

107

108

109

110

111

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Blur</title>

<script type = "text/javascript">

<!--

var indeksKekuatan = 1;

var arahPengaburan = 0;

var atasBawah = 0;

var pewaktu;

function pengaburan()

{

citraKabur.filters( "blur" ).direction =

document.forms( "formKu" ).Arah.value;

citraKabur.filters( "blur" ).strength =

document.forms( "formKu" ).Kekuatan.value;

citraKabur.filters( "blur" ).add =

document.forms( "formKu" ).AddBox.checked;

}

function mulaiDemo()

{

pewaktu = window.setInterval( jalankanDemo()", 5 );

}

function jalankanDemo( )

{

document.forms( "formKu" ).Kekuatan.value =

indeksKekuatan;

document.forms( "formKu" ).Arah.value =

( arahPengaburan % 360 );

if ( indeksKekuatan == 35 || indeksKekuatan == 0 )

atasBawah = !atasBawah;

citraKabur.filters( "blur" ).strength =

( atasBawah ? indeksKekuatan++ : indeksKekuatan-- );

if ( indeksKekuatan == 0 )

citraKabur.filters( "blur" ).direction =

( ( arahPengaburan += 45 ) % 360 );

}

// -->

</script>

</head>

<body>

<form name = "formKu" action = "">

<table border = "1" style = "background-color: #CCFFCC">

<caption>Kendali Filter blur</caption>

<tr>

<option value = "45">atas-kanan</option>

<option value = "90">kanan</option>

<option value = "135">bawah-kanan</option>

<option value = "180">bawah</option>

<option value = "225">bawah-kiri</option>

</select></td>

</tr>

<tr>

<td>Kekuatan:</td>

<td><input name = "Kekuatan" size = "3" type = "text"

maxlength = "3" value = "0" /></td>

</tr>

<tr>

<td>Tambahkan Asli?</td>

</tr>

<tr>

<input type = "button" value = "Terapkan"

onclick = "pengaburan();" /></td>

</tr>

<tr>

<input type = "button" value = "Mulai demo"

onclick = "mulaiDemo();" />

<input type = "button" value = "Hentikan demo"

onclick = "window.clearInterval( pewaktu);" /></td>

</tr>

</table>

</form>

<div id = "citraKabur" style = "position: absolute;

top: 0; left: 300; padding: 0; filter: blur(

add = 0, direction = 0, strength = 0 );

background-color: white;">

<img align = "middle" src = "buku5.jpg"

alt = "Sampul" />

</div>

</body>

</html>

11.10 Menggunakan Filter wave

Filter wave memampukan Anda untuk menerapkan distorsi gelombang sinus terhadap teks atau citra pada halaman web Anda (Gambar 11.9). Filter wave, seperti dapat dilihat pada baris 35-36, memiliki banyak properti. Properti add, seperti filter blur, menerapkan efek terhadap salinan teks atau citra.

Properti freq menentukan frekuensi gelombang yang diterapkan, yaitu berapa kali gelombang sinus diterapkan pada teks atau citra. Peningkatan properti ini akan menciptakan efek gelombang yang lebih cepat, tetapi membuat teks susah dibaca.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter Wave</title>

<script type = "text/javascript">

<!--

var faseWave = 0;

function mulai()

{

window.setInterval( "wave()", 5 );

}

function wave()

{

faseWave++;

flag.filters( "wave" ).phase = faseWave;

}

// -->

</script>

</head>

<body onload = "mulai();">

<span id = "flag"

style = "align: center; position: absolute;

left: 30; padding: 15;

filter: wave(add = 0, freq = 1, phase = 0,

strength = 10); font-size: 2em">

Ini adalah teks bergelombang

</span>

</body>

</html>

Gambar 11.9 Menambahkan efek bergelombang pada teks

Properti phase mengindikasikan pergeseran fase dari gelombang. Properti strength merupakan amplitudo dari gelombang sinus.

11.11 Filter dropShadow dan light

Filter dropShadow menerapkan bayangan gelap seperti yang dilakukan oleh Photoshop. Ia menciptakan bayangan gelap sejumlah beberapa piksel di sekeliling citra. Filter light memampukan Anda untuk mensimulasikan efek cahaya pada halaman Anda. Gambar 11.10 mengkombinasikan kedua filter ini untuk menciptakan efek yang lebih menarik.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Filter dropShadow dan light DHTML</title>

<script type = "text/javascript">

<!--

function setlight( )

{

dsImg.filters( "light" ).addPoint( 150, 150,

125, 255, 255, 255, 100 );

}

function jalankan()

{

eX = event.offsetX;

eY = event.offsetY;

xCoordinate = Math.round(

eX-event.srcElement.width / 2, 0 );

yCoordinate = Math.round(

eY-event.srcElement.height / 2, 0 );

dsImg.filters( "dropShadow" ).offx =

xCoordinate / -3;

dsImg.filters( "dropShadow" ).offy =

yCoordinate / -3;

dsImg.filters( "light" ).moveLight(

0, eX, eY, 125, 1 );

}

// -->

</script>

</head>

<body onload = "setlight()" style = "background-color: green">

<img id = "dsImg" src = "lingkaran.gif"

style = "top: 100; left: 100; filter: dropShadow(

offx = 0, offy = 0, color = black ) light()"

onmousemove = "jalankan()" alt = "CitraLingkaran" />

</body>

</html>

Gambar 11.10 Penerapan filter light dan dropShadow

11.12 Transisi: Filter blendTrans

Transisi merupakan himpunan nilai properti filter dari CSS. Gambar 11.11 merupakan sebuah contoh sederhana dari transisi blendTrans, yang menciptakan efek pengaburan.

<?xml version = "1.0"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Menggunakan blendTrans</title>

<script type = "text/javascript">

<!--

function blendOut()

{

masukanTeks.filters( "blendTrans" ).apply();

masukanTeks.style.visibility = "hidden";

masukanTeks.filters( "blendTrans" ).play();

}

// -->

</script>

</head>

<body>

<div id = "masukanTeks" onclick = "blendOut()" style =

"width: 300; filter: blendTrans( duration = 3 )">

<h1>Teks Mengabur</h1>

</div>

</body>

</html>

Gambar 11.11 Penerapan filter blendTrans

Baris 26-27 menetapkan filter menjadi blendTrans dan parameter duration ditetapkan menjadi 3. Ini menentukan berapa lama transisi akan terjadi. Pada baris 16-18, Anda memanggil dua metode dari blendTrans. Metode apply (baris 16) menginisialisasi transisi. Setelah ini dilakukan, Anda menetapkan visibility dari elemen menjadi hidden. Hal ini akan berpengaruh ketika Anda memanggil metode play pada baris 18.

Algoritma, Struktur Data, dan Pemrograman

Menu

Sunday, December 25, 2016

Bab 11. Pemrograman Internet

No comments:

Post a Comment