2.26.2009

Membuat Logo Animasi

 
Tingkatkan kreasimu dengan membuat logo animasi dari flash.
Tutorial ini menampilkan sebuah lemon jatuh ke dalam suatu karakter dan menjalankan animasi nya

Untuk memulainya silahkan buka vector logo design dalam Adobe Illustrator.


Export vector logo file diatas menjadi sebuah Macromedia SWF file dan select Preserve Editability checkbox.


Buka Macromedia Flash dan ciptakan new document dengan dimensi yang telah anda tentukan sebelumnya, dan pastikan Frame Rate menjadi 24fps untuk sebuah smooth animation.

File > Import > Import to Stage dan pilih logo SWF file anda. Ini akan menempatkan logo dalam format vector dalam Flash artboard


Select semua objects yang membuat bentuk lemon shape dan group ken mereka dengan menekan (Ctrl/CMD + G), lalu "Cut" lemon dan "Paste" pada layer baru. Ingat untuk memberi nama pada layer2 anda untuk referensi kedepannya.


Pilih frame 50 pada kedua layer dan Masukkan sebuah Keyframe (Click Kanan > Insert Keyframe), ini akan memberikan beberapa space pada timeline untuk bekerja.


Dalam frame pertama, Copy gambar lemon lalu drag gambar tsb kedalam stage secara vertical. Masukkan sebuah Keyframe pada frame 5 dan Edit > Paste In Place, lemon nya, hapus lemon yang di atas pada frame ini.


Klik kanan antara kedua Keyframes ini dan select Create Motion Tween. Anda akan melihat warna biru dan symbol panah antara frames tersebut.


Masukkan sebuah Keyframe pada frame 7, lalu kembali pada frame 5 pindahkan lemon kebawah secara pelan-pelan dengan Free Transform Tool, tahan ALT untuk merubah satu sudut.
Ciptakan sebuah Motion Tween antara frames 5 dan 7.


Ciptakan layer baru dibawah layer lemon dan berinama Shadow. dalam layer ini gambar sebuah oval dengan gradient abu-abu ke putih dari tengan. Pakai Gradient Transform Tool untuk me-ngedit bentuk dari gradient untuk memberikan perspective.


Masukkan sebuah Keyframe pada frame 5 pada layer ini dan skala perkecil bayangandan berikan kesan bahwa lemon sangat jauh. Ciptakan sebuah Motion Tween antara frame2 ini.


Untuk memulai getaran pada lemon, Masukkan sebuah Keyframe pada frame 53 dan 56. Rubah ukuran lemon menjadi lebih besar sec. perlahan2 pada frame 53. Ciptakan sebuah Motion Tween antara frames 50-56.


Copy frames ini dan Paste pada frame 65 untuk getaran perulangan.




Untuk menciptakan getaran lebih cepat masukkan sebuah Keyframe pada 75, lalu Copy frame 68 dan Paste pada frame 77.


Copy frames antara 75-77 dan paste pada frames 79, 82, 85 dan 91 untuk mengulangi getaran pelan dan cepat.




Ciptakan sebuah getaran yang lebih cepat dengan meng-Copy frame 77 dan mem-Paste nya pada frame 94, Copy frame 77 dan Paste pada 95, lalu Copy frames 94-95. Paste frame ini pada 96, 98, 100, 102, 104, 106, 108 dan 110.


Untuk mengakhirinya buatlah lemon pop dan menghilang masukkan sebuah Keyframe pada 112 dan perbesar lemon. Pada panel properties rubah warna ke Alpha dan set pada 50%.


Masukkan sebuah Blank Keyframe (Click Kanan > Insert Blank Keyframe) pada frame 114.
Pindahkan layer2 Shadow dan Logo kedalam layer yang sekarang ini pada timeline dengan inserting frames (F5) pada frame 150.


Jika kamu ingin memainkan animation ini tekan (Enter) kamu akan melihat bagaimana semua Motion Tweens memerikan lemon sebuah animasi, bagaimanapun juga hal yang sama harus terjadi pada bayangan untuk mengikuti pergerakan bentuk dari lemon.
Pada layer Shadow masukkan Keyframes untuk menyamakan layer Lemon diatas dan merubah bayangan menjadi lebih besar secara tepat pada frame 53. Ciptakan Motion Tweens antara 50-55.


Copy frames 50-55 dan paste pada frame 65.
Ulangi proses ini sama seperti yang anda lakukan pada lemon, sampai bayangan memiliki getaran pergerakan yang sama dengan lemon.masukkan sebuah Blank Keyframe pada frame 113




Satu langkah terakhir adalah untuk membuat warna putih mendahului bayangan pada logo text. Mudah dengan men-drag layer Text menjadi diatas layer Shadow.




Tekan Ctrl + Enter untuk mem-publish animation menjadi SWF.


Sumber dari situs Ilmu Website dalam kategori flash dengan judul Membuat Logo Animasi

thanx for see my blog

Continue reading →

jQuery Ajax Display for Loading Content

 What is jQuery ?
Apa sih jQuery itu
?

Image


jQuery
merupakan sebuahlibrary javascript yg
saat pertama kali muncul langsung berimbas padaberalihnya para
developper untuk segera memanfaatkan nya sebagailibrary yang powerfull
untuk menyaingi ajax. Awal muncul nya sempatmembuat ajax hanya mendapat
hitungan jari kelingking dari paradevelopper. Karena seperti motto
jQuery sendiri adalah "Write Less, Do More". Wah pantes aja posisi ajax
langsung ketendang.

Berikutadalah tutorial sederhana
cara mengimplementasikan jQuery sebagailibrary yang powerfull, dapat
menciptakan interaktif user pada halamanwebsite lu :))


Sebelumnya download dlu library
nya:

Download
Page


jQuery 1.2.6 {The
Latest
Release}


jQuery Ajax Display for
Loading
Content


Siapkan
HTML
kosong
bwat halaman utama, pada header panggil dlu library jQuery
na:

Code:
<script
language="javascript"
src="jquery-1.2.6.min.js"></script>



untuk
interaktif
user na, gunakan Ajax jQuery Animation, atau dalam code na dinamakan
sebagai AJAX DISPLAY

Code:
<script
language="javascript">
//show
animation
$(function(){

$("#ajax_display").ajaxStart(function(){

$(this).html(<div
style="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebe
patien,
do
not close the window. <br>Gathering data
beingprogress ...</div>);

});

$("#ajax_display").ajaxSuccess(function(){



$(this).html();


});

$("#ajax_display").ajaxError(function(url){



alert(jqSajax is
error );

});
});
</script>




Sedangkanuntuk
simulasi
load
external file na, gw pake script random padalibrary jQuery, script ini
gw temukan di salah satu forum luar, gw lupanama forum na, mudah2an
berguna bwat kalian:

Code:
<script
type="text/javascript">
function getRandom()
{
$("#random").hide("slow");
$("#random").load("sleep.php",
,
callback);
}
function
callback()
{
$("#random").show("slow");
setTimeout("getRandom();",
10000);
}
$(document).ready(getRandom);
</script>
<div
id="random"></div>



"sleep.php"adalah
file
external yang diload oleh javascript random, dengan timeout10000
(10 detik). Timeout berarti, setelah 10 detik halaman akan diload ulang
dari awal kembali (setelah 10 detik).

sleep.php
berisi script yg akan di load, lu bisa isi apa aja seperti contoh code
dibawah ini untuk simulasi gw kasiin
sleep(10)

Code:
<?
sleep(10);
echo
"<span style=font-weight:bold;font-color:green;> All Data
loaded successfully
!!</span>";
?>




Jadi
untuk
lengkapna, berikut code HTML na:

Code:
<!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>
<meta
http-equiv="Content-Type"
content="text/html;
charset=iso-8859-1"
/>
<title>jQuery Ajax
Display</title>
<script
language="javascript"
src="jquery-1.2.6.min.js"></script>
<script
language="javascript">

//show
animation
$(function(){

$("#ajax_display").ajaxStart(function(){
$(this).html(<div
style="position:absolute;"><imgsrc="ajax-loader-refresh.gif"/> <br><strong>Loading....</strong><br><br>Pleasebe
patien,
do
not close the window. <br>Gathering data
beingprogress ...</div>);

});

$("#ajax_display").ajaxSuccess(function(){



$(this).html();


});

$("#ajax_display").ajaxError(function(url){



alert(jqSajax is
error );

});
});
</script>

<style
type="text/css">
<!--
body,td,th
{

font-family:
Arial, Helvetica,
sans-serif;
font-size:
11px;
color:
#000000;
}
body {

background-color: #FFFFFF;

margin-left: 10px;
margin-top:
10px;
margin-right:
10px;
margin-bottom:
10px;
}
a:link {
color:
#0066FF;
}
a:visited {

color: #0066FF;
}
a:hover
{
color:
#009900;
}
a:active {

color:
#0066FF;
}
-->
</style></head>

<body>
<div
id="ajax_display"></div>
<div
style="position:absolute;
top:100px;">
<script
type="text/javascript">
function
getRandom()
{
$("#random").hide("slow");
$("#random").load("sleep.php",
,
callback);
}
function
callback()
{
$("#random").show("slow");
setTimeout("getRandom();",
10000);
}
$(document).ready(getRandom);
</script>
<div
id="random"></div>
This
is
an
Implementation for jQuery Ajax Display, while loading a progress from
an external source.<br />
developped by
<a href="http://dremi.info"
target="_blank">dr.emi</a></div>
</body>
</html>




woke,
siap
dicoba, klik disini bwat preview hasil
na:

Image

ni
bwat
download code na:


Image


Sumber dari situs Ilmu Website dalam kategori ajax dengan judul jQuery Ajax Display for Loading Content

thanx for see my blog

Continue reading →

 


Ya, telah di rilis ilmuwebsite versi offline, yakni majalah ilmuwebsite perdana edisi No. 1.
Sebagai perkenalan, Majalah Ilmuwebsite adalah majalah pertama yang
membahas tuntas tutorial seputar web development dari tingkat pemula
hingga tingkat mahir. Kami coba bawakan beberapa rubrik yang tentunya
erat hubungannya dengan pengembangan website maupun pengembangan
aplikasi berbasis website termasuk di dalamnya pembuatan sistem
informasi berbasis website. Rubrik-rubrik yang akan di bahas tuntas
adalah :


  • News Website
  • Web for Zero
  • Server Scripting
  • Internet Marketing dan SEO
  • Web Project
  • Content Management System
  • Web Security
  • Desain Grafis
  • Make Over Website
  • Flash Animation
  • Teknik Fotografi
  • Bookmark


Sedangkan rubrik di luar dari seputar masalah web development yang akan dibahas adalah sebagai berikut :


Software, Tips Trik Web dan Aplikasi, Linux, Networking, dan Info Harga. Majalah Ilmuwebsite perdana dirilis pada 24 Januari 2009, bertepatan dengan genapnya usia ilmuwebsite yang menginjak 2
tahun. Untuk penjelasan detil mengenai rubrik-rubrik majalah tersebut
akan kami publish berbarengan dengan launchingnya majalah ilmuwebsite
perdana edisi Januari 2009 pada tanggal 24 Januari 2009. Edisi kali ini membahas tuntas mengenai software portable, dan
tentunya beberapa pengetahuan menarik seputar web development.





Dikemas dalam 1 DVD




Untuk
informasi pembelian, dan informasi lengkap berkenaan dengan majalah
ilmuwebsite dapat anda lihat di sini:
Majalah Ilmuwebsite No.01







Majalah Ilmuwebsite, distributed by: Lapak Online
Sumber dari situs Ilmu Website dalam kategori news dengan judul Rilis Majalah Ilmuwebsite Perdana 2009

thanx for see my blog

Continue reading →

free domain coz in
Hallo semuanya,

ni aku ada domain gratis baru,
iseng-iseng browsing barusan.... hehehe.....

ni mirip kayak domain gratis co.nr...
tapi kayaknya lebih bagus dikiiit.

langsung browse ke:
http://www.c-o.in

atau klo males cari link signup-nya daftar langsung aja ke
http://www.c-o.in/myred/register.php

ya... udah, untuk selanjutnya coba ndiri ajah.. okey?!
have fun and hasta la vista!!!
Sumber dari situs Ilmu Website dalam kategori domain registration dengan judul Domain Gratis - coz.in

thanx for see my blog

Continue reading →

Followers

More