Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

Sunday, 21 July 2013

Tutorial Flash - Membuat Jam Digital,Hari Dan Tarikh

Kali ini saya ingin berkongsi tutorial untul membuat jam digital , hari dan tarikh. Untuk tutorial ini saya mengguna aplikasi Micromedia Flash Pro 8. 

Download:
Micromedia Flash Pro 8
Password (jika diperlukan) : faiz-tutorial.blogspot.com

1. Klik pada File (1) >> New (2) >> Pilih Document Flash



2. Setting dokumen , pada bahagian Properties klik pada butang size (3) . Setkan Dimension kepada 200px untuk lebar (4) dan 100px untuk tinggi (5). Seterusnya klik OK (6)



3. Seterusnya kita akan membuat backgroud pada stage. Sebelum itu, rename Layer 1 kepada nama background (7) . Klik pada Rectangle Tool (8). Buatkan satu shape sebagai background pada stage (9).



4. Buatkan layer baru. Klik butang Insert Layer (10) , rename Layer 2 kepada jam (11) .



5. Klik pada Text Tool (12) . Pada bahaagian properties pilih Dynamic Text (13) . Setting pada Font , Size Font, Color font dan Align Text (14). Pada stage, buatkan 1 Dynamic Text (15).



6. Klik pada Selection Tool (16) . Klik pada dynamic text yang telah dibuat  pada stage(17) . Pada bahagian properties, pada ruang <Instance Name> isikan dengan  jam_txt (18) .



7. Buat lagi layer baru seperti langkah 4 dan namakan dengan nama saat . Ulangi langkah 5 dan langkah 6. Isikan  pada ruang <Instance Name> isikan dengan  saat_txt .

8.  Buat lagi layer baru seperti langkah 4 dan namakan dengan nama ampm . Ulangi langkah 5 dan langkah 6. Isikan  pada ruang <Instance Name> isikan dengan  ampm_txt .




9. Selanjutnya kita akan hari dan tarikh pula. Buat lagi layer baru seperti langkah 4 dan namakan dengan nama hari dan tarikh . Ulangi langkah 5 dan langkah 6. Isikan  pada ruang <Instance Name> isikan dengan  hari_tarikh (19) dan pada  var  isikan dengan hari_tarikh (20) .



10.  Seterusnya kita akan buat action bagi dynamic text yang telah dibuat tadi. Buat layer baru seperti langkah 4 dan namakan dengan nama Action masa (21) . Klik pada Frame 1 dan klik kanan , pilih Actions atau F9 (22)



11. Copy (Ctrl+C) Actionscript dibawah dan Paste (Ctrl+V) pada ruang Actions Frame (23). Close Actions - Frame .

time=new Date(); // time object
var seconds = time.getSeconds()
var minutes = time.getMinutes()
var hours = time.getHours()
if (hours<12) {
ampm = "AM";
}
else{
ampm = "PM";
}
while(hours >12){
hours = hours - 12;
}
if(hours<10)
{
hours = "0" + hours;
}
if(minutes<10)
{
minutes = "0" + minutes;
}

if(seconds<10)
{
seconds = "0" + seconds;
}
jam_txt.text = hours + ":" + minutes;
saat_txt.text = seconds;
ampm_txt.text = ampm;


12. Buat lagi layer baru seperti langkah 4 dan namakan Action hari dan tarikh . Klik pada Frame 1 dan klik kanan , pilih Actions atau F9.

13. Copy (Ctrl+C) Actionscript dibawah dan Paste (Ctrl+V) pada ruang Actions Frame. Close Actions - Frame .
myDate = new Date();
weekday = new Array("Ahad", "Isnin", "Selasa", "Rabu", "Khamis", "Jumaat", "Sabtu");
month = new Array("Januari", "Februari", "Mac", "April", "Mei", "Jun", "Julai", "Ogos", "September", "Oktober", "November", "Disember");
hari_tarikh = (weekday[myDate.getDay()]+" , "+myDate.getDate()+" "+month[myDate.getMonth()]+" "+myDate.getFullYear());
14. Buat lagi layer baru seperti langkah 4 dan namakan  All Action . Klik pada Frame 2 dan klik kanan pilih Insert Keyframe atau klik F6.  Pada Frame 2 , klik kanan , pilih Actions atau F9 (24).

15. Copy (Ctrl+C) Actionscript dibawah dan Paste (Ctrl+V) pada ruang Actions Frame. Close Actions - Frame .
gotoAndPlay(1);

16. Highlight semua layer kecuali layer All action dan klik F5 untuk tambah Frame. Pastikan Timeline anda seperti gambar dibawah.



17. Untuk Preview tekan " Right CTRL + Enter " .

18. Untuk save ke file flash movie swf, klik File >> Export >> Export Movie (Ctrl+Alt+Shift+S) >> Pilih lokasi penyimpanan file >> isi File Name >> klik Save >> Setting JPEG Quality (100) >> klik OK.

Selesai......Jika ada masalah sila komen k..

Tuesday, 15 November 2011

Widget Calendar

1. Pergi ke DASHBOARD > DESIGN > PAGE ELEMENT > ADD GADGET > HTML/Javascript.
2. Copy(Ctrl+C) dan Paste(Ctrl+V) code dibawah pada ruang HTML/Javascript 
<div id="blogCalendar"></div>
<script type="text/javascript" src="http://lvchen-recentcomments.googlecode.com/svn/trunk/Calendar/1.0/calendar_pack.js"></script>
<script type="text/javascript">
Calendar.base="faiz-tutorial.blogspot.com";
Calendar.timeZone="+08:00";
Calendar.drawTable();
</script>
<style>
#blogCalendar {text-align:center;border:0px;background: url() no-repeat top;margin:0;font-family:arial;height:180px;line-height:14px;}
#CalendarCaption a{color:#777;text-decoration:none;margin:auto;font-size:80%;}
#CalendarCaption{width:80%;margin:auto;}
#CalendarTable{height:123px;margin-top:2x;}
#CalendarTable a{font-weight:bold;color: purple;}
#CalendarTable table {width:auto;margin:auto;border: 0px;text-align:center;font-size:80%;padding-top:5px;}
#CalendarTable table th{font-size:85%;}
#CalendarTable table td{border:0px;}
#CalendarTable a:link, #Calendar a:visited, #Calendar a:active{font-weight:bold;Text-decoration:underline;}
#CalendarTable a:hover {text-decoration:none;}
#CalendarMonth{font-size:90%;}
.Today{text-decoration:none;color: darkred;}
.Today a:visited, .Today a:link, .Today a:active, .Today a:hover {text-decoration:none;color: #ddd;}
#CalendarFooter{color:Green;font-size:80%;padding-top:10px;}
#monthTable{background:#eee;}
.yearInput{background:#eee;}
</style>


3. Gantikan tulisan faiz-tutorial.blogspot.com dengan URL blog korang. Pastikan anda tidak memasukkan sekali http:// .....
4. Preview dan Save k..