#w11: Buat website sendiri

Minggu ini sangat membingungkan dan memnantkan. Rasa macam cramp satu badan sebab banyaaak sangat kerja. Sekolah pula nak tutup so kerja-kerja yang tak habis lagi tu terpaksalah dilakukan dengan sangat terkejar-kejar.

Atas ruang yang dr zaidatun beri, bagi mereka yang dah ada website, mereka tak perlu buat satu lagi website. Sebab dr hanya mahu tengok macamana kami deal dengan letak gambar, letak plugin, edit text, masukkan movie dan so on. So alhamdulillah, saya menggunakan ruang yang ada inni. terima kasih kerana memahami dr.

So, inilah website saya yang biasa saja. Dah lama juga tak update. Salah satu harta yang paling saya sayang sebab dekat sini penuh dengan catatan sebagai seorang khalifah yang tidak sempurna di bumi Allah ini. (Isk...mode dah banyak sakitkan hati orang)

Hosting website ini adalah mySql.

#w10: ASP and PHP

Today I learn about php and asp which i never get any formal education about this. Yes, I do have a website with my very own hosting and domain but frankly I just randomly editing them without knowing what was actually i did.

As far as it works (like adding plugin and designing the website), so i will be happy. But for today, i just start to get to know Mr. asp and Mr. php. Hi both of you!!

Since my hosting is basically mysql, so i think, i would be very happy to now more about mr. php. Okay, can't wait to learn more about it next week (and i have prepared to gasping for more air)

#w8: Assignment 1- group work

* Due t beberapa masalah teknikal, entry ini pending. Ieja, harap tidak mengaum sebab lambat saaaangat update ni.

Frankly, sepanjang menghasilkan assignment ini, saya menghadapi begitu banyak masalah. Saya kena refresh hampir semua skill yang telah saya belajar. Dalam banyak-banyak skill, saya paling ngeri bab drag and drop sebab coordinate saya selalu tak betul.

Mujurlah part saya yang ini tak ada drag and drop. At least saya tak susahkan team mate yang lain. Sebab mesti sangat lambat nanti nak siapkan. Itu belum tambah lagi dengan nak masukkan action script :'( thaks to semua ahli kumpulan terutama syakira. Oh...big thanks la pada semua. Yang drag and drop tu, lepas tengok they all buat, terus rasa confident tu naiklah sikit berbanding tak ada langsung dulu T___T

Anyway, saya kena buat part awal sekali, iaitu introduction. (Credit to Syakira)

Ok, masalah terbesar saya dalam scene ini ialah selalu terlupa nak tukar mode text.Macam input dan dynamic text. Selebihnya, of corse bahagian action script! Saya tak cukup skillful lagi nak add satu persatu action script. terpaksa merangkak macam kura-kura.

Intro

In this part, we personalise our flash using input and dynamic text boxes, import music, Motion Tween  and Traditional Animation.

Motion Tween (cloud moving horizontally and become smaller):

1. Draw a cloud in its own layer.
2. Convert to symbol by Modify > Convert to Symbol.
3. Insert keyframe (Insert > Timeline > Keyframe)  further along the timeline. Move the cloud to new location and resize it.
4. Click the timeline between the two keyframes and right click > Create Motion Tween.

Traditional Animation (girl's eyes blinking):

1. Insert > New Symbol > Movie clip.
2. Draw the eyes in the frame 1.
3. Insert keyframe in frame 2 and change slightly the eyes (half close)
4. Insert keyframe in frame 3 and change slightly the eyes (close)
5. Copy keyframe 2 and paste in frame 4.
6. Copy keyframe 1 and paste in frame 5.
7. Go back to the "hello" scene stage.

Import Music (.mp3 file):

1. File > Import > Import to Library.
2. Drag the sound from library to stage.

Scene 2 :

 The user will enters their name in the input text box. Var : nama

Actionscripts:

"Enter" button:

                on (release, keyPress "<Enter>"){gotoAndPlay("hello",1);

                }

Scene 3 :

User's name will be displayed in the dynamic text box. Var : nama

Actionscripts:

"Start" button: go to other .swf file in the same folder (home.swf)

                on (release) {loadMovieNum("home.swf",0);

                }

*Every scenes have stop(); actionscript to stop it from jump to next scene automatically.

#w6 & w7: Text entry and Multiple Choice Question (republished)

 It is quite late for me uploaded this flash file. As a reflection, i realize that in making a text entry I should aware of:

1) What input text for -> to write the answer
2) What dynamic text for -> to respon to the answer either it is right or wrong
3) Of course with the scripting part. I am always got problem in this. Sometimes, i'm always use zero instead of O.

And, this is one of the example of Multiple Choice Question. I am able to do 1 scene only and there is no response if pupils answer B and C. I try to add some more response and working with the actionscript by changing the number of keyframe. But it doesnt work. Anybody can help me? I already go to Flash Classroom, but I could not find any tutorial regarding this.



If we wanted to add some more respon, are we going to put them in the same layer? Or other layer? I try both but it doesn't work. Or am I miss any part?

#w5: Farm Activity

Week activity kali ini adalah penggunaan sepenuhnya pada button. Tak sangka button pun ada banyak function, sampai dia boleh menjadikannya interaktif dan mestilah menarik.

Secara simplenya, basic button yang kita selalu pakai tu adalah dalam kategori up (which sebenarnya ada up, over, down dan hit). kali ini, saya berpeluang guna over dan down.

UP: bila cursor lalu dekat objek, dia tak appear apa-apa pun. Tak ada text atau sound yang keluar

OVER: bila lalukan cursor pada objek, dia akan appearkan text.

DOWN: bila kita klik pada objek, dia akan mengeluarkan bunyi.

Nah, ini contoh farm saya yang dapat saya buat. insyaAllah , nanti cuba lagi. So far, farm activity ni la yang paling mudah. Tapi, sayangnya saya lambat nak upload dekat e-learning. Should be more aware lepas ni!

#w4 Actionscript yang....

...sangat mencabar kesabaran. sebagai refleksi dalam pengajaran kali ni;

1.saya bangga dengan diri sendiri sebab dapat undergo masalah button dengan bantuan kawan-kawan dan abang. isk. kesian dia banyak kerja tapi sanggup mengadap adik dia.

2. Saya telah buat satu small step dan berharap more steps yang besar di masa akan datang. Ya memang saya paling lamaat dalam kelas tu. Saya admit, I start from zero, tapi tak apalah, itulah tujuannya belajar kan. Maaflah kawan-kawan kalau saya asyik tanya sampai menganngu kelas. I have to.

So far, masalah terbesar actionscript bagi saya adalah pada bahagian nak set action for the button. Itu sahaja. Lepas gambar dah bertukar jadi button symbol, maslah bermula di situ.

Yang paling penting sekali, lepas siap setiap scene MESTI stop kan dulu, kalau tidak dia akan automatically pergi scene seterusnya. Kalau jadi macam tu, sia-sialah button yang di createkan untuk fungsi next dan menu.

Dan, banyak-banyak terima kasih pada Kak Kin sebab provide notes yang amat membantu. Tapi, yang bahagian the end scene tu kan, saya tak dapat ikut command quit sebab tak berjaya. jadi, saya ikut saja action release and go to. Alhamdulillah jadi. Saya nak tanya kak kin kenapa tak jadi, biar dia dah tak larat layan soalan saya, baru saya berhenti :)

Ok, ini hasilnya. Jemput belajar Matematik.

Oh, sebelum tu saya nak bagitau, KELEMAHAN design saya ialah, anda tak boleh tekan button each topic kecuali setelah lebah SELESAI menari bersama awanan. Anggaplah itu terapi jiwa sementara nak belajar matematik.

#w3: Basic scene Concept

Alhamdulillah, berkat tunjuk ajar semua.
Berkat menekuni nota dan menemani emak dialisis :)



Frankly, saya banyak rujuk blog Norzie Khamis dan Asyikin Jamil dalam membuat setting untuk action script. pengalaman ini sangat mencabar since saya adalah seseorang yang baru terjun dalam bidang scripting ini.

Terima kasih!

#w3: scene concept (tak lepas lagi)

Mintak tolong, semua.
Saya tak lepas lagi any of scence concept design. Can anybody help me to do the basic one? Minggu depan saya tak dapat datang kelas. Whole week ada kursus. Kawan2, i don't want to left out :(

I even can't do the basic one (the one which got motion, shape tween, motion path and frame y frame). I got problem on how to do the 2nd page. Another layer? Another layer with dif keyframe? Ok, sorry if the question sounds sooo silly. I'm just confuse.

#w3 Image Sequence

File > Import > Import to Stage > pilih gambar yang kamu dah save (Kalau gambar dia sequence tapi tak tersusun dari segi nama, rename it sebab nanti computer akan easily detect dan dia akan susunkan semuanya dengan sangat magic) Seperti rabbit 01.jpg , rabbit 02.jpg, rabbit 03.jpg dan seterusnya.

Scene punya part cik Banat tak lepas lagi. InsyaAllah dah expert akan tulis reflection on it. Mintak tolong semua doakan kecukupan masa untuk belajar. Hujung tahun ni la sekolah nak kene observe bagai la, do filing, perkemas bilik khas dan sebagainya. (Tolong jangan merungut daam blog)

Ok. Itu saja.

#w3 Traditional Animation

Salam, seriously yang ini paling mudah. Alhamdulillah. Secara peribadi, kalau sudah sangat faham tentang konsep keyframe, perkara ini tak jadi masalah.

Pernah tak main lukis-lukis kartun dekat beberapa helai kertas dan setiap kartun tu, kedudukannya sama cuma mungkin muka atau bahagian-bahagan badan saja yang berbeza. Lepaastu kita compilekan dan selak laju-laju. Akan nampak pergerakan kartun tersebut bukan?

Lebih kurang beginilah. Bezanya kertas tu diganti dengan keyframe. Mudah bukan? Sounds soooo traditional kan? Tak apa, tanpa tradisional, takdelah yang canggih macam motion tween dan shape tween kan ? T__T

Ok, ini contoh yang saya sempat buat masa kelas dengan tajuk

"Gadis yang ayu jangan disangka tiada garang"  HAHA

#w3 Motion Guide Animation

Semengerti gue (eh, jadi indonesia pulak),kena jadikan semut hitam ni simbol dulu, baru boleh jadi motion guide ni.

Pastikan juga, seperti sebelum-sebelum ni, layer setiap objek berbeza supaya tak mengganggu mana-mana masalah teknikal dalam layer yang lain.

Pilih  keyframe 1st kat guide layer dan lukis jalan yang and hendak gunakan pensel. Pernah cuba pakai brush tak jadi, jadi jangan ikut ye.

Tangkap ant kamu tu dan letak di titik awal dan titik akhir di hujung keyframe, Klik orient to path di layer motion guide untuk kelihatan tidak aneh.

Readers: Kak banat, jalan dia nak lukis macamana?

Banat: Okay readers semua. Yang tu hanya pakai background colour, rectangle shape dan eraser. Boleh bayang?

Readers: Boleh!!

Maaf ye ringkas sangat. Jangan pening.

#w2 Motion Tween dan Shape Tween

MOTION TWEEN

yang ini, insyaAllah simple dan harap readers boleh faham. First kena faham dulu apa maksud motion tween. Ikut pemahaman saya secara simplenya, motion tween ni maksudnya adalah pergerakan yang berlaku antara dua gambar yang berbeza tempat.

Maksudnya, mula-mula anda letak gambar di point A (keyframe 1) Lepastu anda letak gambar yang sama di point B (keyframe10). Jadi dari keyframe 2 hingga 9, anda akan menyaksikan pergerakan secara TING saja, dengan menekan button CREATE MOTION TWEEN.

Jadi, saya telah hasilkan gambar paling mudah. Mula-mula, hasilkan satu layer nama backgroud (supaya mudah untuk diedit tana mengganggu yang lain) Yang kedua pula, hasilkan satu layer untuk objek anda. Saya pilih lady bird.

Lepas saya dah lukis, saya terus highlight kan dan pergi ke modify>convert to symbol.

Tujuan? Supaya anda boleh copy paste dengan mudah dekat mana anda nak ladybird ni berada.

nampak tak a series of keyframe di atas tu? Anda boleh letak berpa banyak point yang anda suka.

Point ABCDE sampai Z pun tak kisah.

Tapi pastikan di setiap point (frame) tu anda:

1) Insert keyframe

2) Drag ladybird tu di tempat berbeza supaya ada pergerakan.

So, ini hasilnya * saya tukar warna background to green

SHAPE TWEEN

shape tween kali ini saya gunakan text pua. kalau readers nak gunakan objek pun boleh, cuma saya nak tunjukkan yang text juga boleh dibunakan untuk shape tween tapi dengan SATU syarat iaitu kena break apart twice :)

Simple saja shape tween ni, konsepnya mengubah dari satu bentuk kepada bentuk lain dengan pergerakan secara TING juga, selepas anda tekan button CREATE SHAPE TWEEN.

Macam biasa buat dua layer supaya anda tak menggangu perjalanan layer yang lain. Basic dia sama saja macam motion tween, jadi saya hanya berikan gambar saja ye. Let's the picture itself do the talking.

Masukkan text pada 3 keyframe yang berbeza

Highlight dan modify>break apart kali pertama.

Highlight dan modify>break apart kali kedua. Anda akan nampak macam titik2 putih dalam text.

 Highlight layer tersebut dan click creat shape tween. kan jadi anak panah dan warna hijau muda.

Beza antara motion tween dan shape tween ialah warna biru dan hjau :)

Jadi, ini contoh yang simple sekali.

* perasan tak tulisan dia agak luar biasa laju? Haaa? Siapa tahu macamana cara nak melambatkannya sikit? Readers memang bijak kan? Cepatla jawab, nanti saya doa moga dipercepatkan jodoh.

HIHI!

** Okay nak tiidur. TQ Balqis temankan kita sampai pukul 3 pagi walaupun secara maya. Thanks technology, i didn't feel alone at all in this deep quite night.

#w2 Onion skin

Pukul 1:26 pagi. Terima kasih Allah sebab beri saya kudrat meneruskan perjuangan untuk berkongsi ilmu hari ini. Memilih untuk belajar semasa bekerja tidak mudah. Tapi, atas semangat, akan tetap saya habiskan program ni sehingga graduate kelak! 

Bak kata HM Longfellow, memulakan sesuatu itu adalah hebat tetapi menyelesaikannya adalah lebih hebat. Ayuh jadi orang hebat yang bernafas dalam jiwa hamba :) Sedikit kata-kata semangat hari ini.

Baiklah Hari ni secara simplenya saya akan kongsi ilmu untuk onion skin. First, kena tahu kenapa pakai onion skin ni? Selalunya onion skin ni digunakan untuk mereka yang tangannya tak begitu lemah gemalai nak melukis atau dalam bahasa pasarnya 'sedikit kongkang' :) 

Dengan adanya onion skin, anda boleh trace gambar yang anda suka. Ala, macam main tekap-tekap masa sekolah tu. Sebab tu nama dia onion skin kan? Onion skin sangat nipis.

Tak apa pun kalau tangan kongkang, sebab at least kita tetap ada tangan kan untuk digunakan. Lama-lama pandailah tu * ceh, cakap macam gadis yang dah hasilkan komik je. Hihi.

Baiklah, mudah saja untuk onion skin ni. Mula-mula File>Import>Import to stage.

Saya pilih gambar gadis tudung hijau ni. Saya  pergi pada frame 1st, insert keyframe dan namakan gadis. Next?

Saya click pada frame 2nd dan insert keyframe, lepastu klik gambar dan delete.

Lepastu pegi pada bulatan tu Itulah onion skin.

Waktu ini, akan nmpak gambar samar-samar saja. Jadi bolehla anda trace puas-puas. Saya tak reti pakai pensel sebab:

1) Selalu senget benget walaupun dah pakai smooth pencil mode.
2) Bila lukis, garis tak keluar until the last point bila saya lepaskan right click. Kenapa ya? Siapa boleh respon?

Jadi, saya pakai line saja. 

Jangan panik mengapa muka gadis berbentuk diamond T__T

Suppose to be cantik kan? no 1 itu ialah line mode. No 2 ialah garisan guna line tadi.

Tak apa jangan risau, sekejap lagi dia jadi bulat boleh tarik-tarik.

So, readers boleh gunakan tools anak panah hitam ataaaaas sekali, suakan pada garisan, nanti dia akan offer lengkungan. Adjust di situ.

Tadaaa. Ini hasilnya. tak baik tau cakap tak cantik walaupun dalam hati.

Macamana nak jadikan colour ni? Boleh pergi pada paint bucket tool dan warna ikut kegermaran masing2.

That's all :)

#w2 Flash in entry

Kak shikin I owe you secara banyak berbukit-bukau sebab share macamana cara nak letak flash dlm blog. So lepas ni flash akan bermaharajalela dalam blog ni smpai readers boleh juling.

Istighfar...istighfar sikit. HAHA.  Baru haritu tu cakap pasal elemen2 yang kadang kala tak perlu diletakkan secara berlebihan pun. Ni semua gara-gara excited okay nak letak flash. Yelah, orang tak pernah buatkan. Dah 25 tahun hidup baru tau buat flash. Mmg best kelas authoring ni.

Baiklah, mari kita cuba letak.

Tada!

Sila tepuk tangan walaupun begitu simple di mata anda.

Hamdulillah.

Ok. Malam ni nak buat lagi so dapat polish skill yang baru belajar.

Sampai sini saja. Kejap lagi ada kelas networking.

#w2 Flash CS 4

T_T Thank you Allah!

Ya Allah, my first attempt was really hard and difficult. Yes, I spent nearly 30 hours just to make this simple flash T___T.

I got problem in placing this .swf file inside my blog because it turn to save it rather than just automatically played. Please click here kalau sudi .

I have no more energy to say more since tomorrow i have to work. Thanks darling lecturer and classmates for sharing your tips. ADOBE is very new to me. And big thanks to my brother because keep supporting me even the tear drops cannot be stop pun. Uwaaaa!

Tomorrow got class right? If you see a woman with panda eyes in your class tomorrow, believe me it is not a panda. Don't run. It is me!

#w1 Web VS website VS Portal

Web page VS website VS Portal

1. Webpage VS Website

Most of the times, the words webpage and website are interchanged but surprisingly, these are different and cannot be interchanged because webpage is a part of much bigger website. A website may have a couple or hundreds of web pages attached to it through browsing links. Simply put, a website can be termed as a collection of numerous web pages. One can consider website as a book and webpage as a chapter in it.

In website, loads and tons of information is linked in form of web pages. A web page is a screenshot and a small part of website. Mainly the difference between a webpage and website is in following terms:

Size

A website can be simple, from a single to multiple pages. For instance, Facebook has number of profiles which can be termed as web pages. SMEs usually go for small websites which have not more than three or four web pages. Though, it is true that a website can have only one webpage too.

Content

It can be glossy or simple. Usually big companies have content like ‘about us’, work, portfolio, register and ‘contact us’ web pages. The content is specific and in the context of web pages.

Creation

The process of creation for a website and webpage is very much same.  A webpage has navigational link attached to the specific website.

2. Website vs Portal

A portal is generally a vehicle by which to gain access to a multitude of 'services'. A web site is a destination in itself.
As such the term website refers to a location on the Internet (see this) that is unique and can be accessed through a URL (see this). By that definition a web portal is in fact also a website.

However there is a distinction between the two terms based on the subject and content of the website.
A website is also a web portal if;

It transmits information from several independent sources that can be, but not necessarily are, connected in subject; thus offering a public service function for the visitor which is not restricted to presenting the view(s) of one author.  

The Portal and website can be differentiated as :

Authentication:
Portal: It provides facility of Logging-In. Provides you with information based on who you are.
e.g. mail.yahoo.com, gmail.com, rediffmail.com
Website: No log-in.
e.g. www.yahoo.com

Personalization:
Portal: Limited, focused content. Eliminates the need to visit many different sites.
e.g. You type in your user name and password and see your yahoo mail only.
Website: Extensive, unfocused content written to accommodate anonymous users needs.

Customization :
Portal: You will select and organize the materials you want to access. Organized with the materials you want to access.
Website: Searchable, but not customizable. All content is there for every visitor.
e.g. you can navigate to yahoo mail, yahoo shopping, geo cities, yahoo group. If you wish to use any of these services you will either have to authenticate yourself and see things personalized to you or you can simply visit sections that are for everyone like yahoo news were if you are not signed in then the default sign in is guest.

****

Thanks uncle google :)

credit to:

VS Pages

Wiki Answer

****

Alright, after we clear of what web page, website and portal are, let we go on the basic things of managing a webpage. There are many elements can be integrated in a website, such as, text, picture, video, flash, audios animation and many more that possible; and to integrated them into a website, we can use software such as dreamweaver and any other html script editor.

If you are good in programming language such as ASP (Active Server Pages), JSP (Java Server Pages), Cold Fusion (CF) and PHP (Hypertext Preprocessor), you will be able to design you own template. Even you can get the open source script editor from the internet. Go, and find one!

Graphics ( .png, .jpg, .gif and etc) , audios ( .mp3 , .wma, .rm and etc) , animation (.swf, .exe and etc) can be uploaded into the website easily by free hosting offers such as wordpress and blogspot. Every elements that you uploaded will give the added value compare to any other plain website that sometimes has only text and graphic. The elements added make your website an interactive one.

However, as an internet user who love to blog-skipping, I realize that I like the website who has not too many multimedia elements in it. Sometimes too many widget can distract your reader, you know. Especially when you are setting automatically audio to be played in your blog. If your blog reader is suffering of heart disease, he might be faint of the loud-sudden-sound. :) I am not joking. It happens. 

Anyway, I had make an example of flash text by using Flash Vortex. Try it yourself, it is easy.