Chithravishesham
Sankethikam
Kaliyarangu Grahanam Nishchalam
സാങ്കേതികം - ഗ്രാഫിക് ഡിസൈന്‍ ട്യൂട്ടോറിയലുകള്‍, ബ്ലോഗര്‍ വിഡ്ജറ്റുകള്‍...

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

Malayalam Blogger Profile. Powered by newnmedia.

Wednesday, August 27, 2008

ഫ്ളാഷിലൊരു ഫീഡ്‌ബാക്ക് ഫോം - ഭാഗം ഒന്ന്

How to make a Feedback Form in Adobe Flash? Using Flash Movie(SWF) file as front-end and ASP, PHP, CGI scripts as back-end to create an interactive feedback form in Adobe Flash.
ഫീഡ്‌ബാക്ക് ഫോമുകള്‍ ഏവര്‍ക്കും പരിചിതമായിരിക്കും. മിക്കവാറും എല്ലാ സൈറ്റുകളിലും ഈ സൌകര്യം, ഉപയോക്താക്കള്‍ക്ക് ലഭ്യമാണ്. വെബ് സൈറ്റ് പ്രേക്ഷകര്‍ക്ക്, അഭിപ്രായങ്ങളും നിര്‍ദ്ദേശങ്ങളും വെബ് സൈറ്റില്‍ നിന്നു തന്നെ, അതിന്റെ നിര്‍മ്മാതാക്കള്‍ക്ക് അയയ്ക്കുവാനുള്ള സൌകര്യമാണ് ഫീഡ്‌ബാക്ക് ഫോമുകള്‍ എന്നതുകൊണ്ട് ഉദ്ദേശിക്കുന്നത്. ഫ്രണ്ട് എന്റ്, ബാക്ക് എന്റ് എന്നിങ്ങനെ രണ്ട് പടികളിലായാണ് ഫീഡ്‌ബാക്ക് ഫോമുകള്‍ പ്രവര്‍ത്തിക്കുന്നത്. ഫ്രണ്ട് എന്റായി മുന്‍‌കാലങ്ങളില്‍ HTML ഫോമുകളാണ് ഉപയോഗിച്ചിരുന്നത്. ഇവിടെ ഫ്രണ്ട് എന്റായി ഒരു SWF മൂവി എങ്ങിനെ ഉപയോഗിക്കാമെന്നാണ് വിശദീകരിക്കുന്നത്. ബാക്ക്‍എന്റായി PHP, ASP, CGI എന്നിങ്ങനെയുള്ള സ്ക്രിപ്റ്റുകള്‍ ഉപയോഗിക്കാവുന്നതാണ്.

ആദ്യമായി ഫീഡ്‌ബാക്ക് ഫോമിന് ആവശ്യമായ ഇന്റര്‍ഫേസ് ഫ്‌ളാഷില്‍ ഡിസൈന്‍ ചെയ്യുകയാണ് ചെയ്യേണ്ടത്. ഇന്റര്‍ഫേസ് ഡിസൈനിംഗ് ആരംഭിക്കുന്നതിനു മുന്‍പായി എന്തൊക്കെ വിവരങ്ങളാണ് ഉപയോക്താവില്‍ നിന്നും സ്വീകരിക്കുവാന്‍ ലക്ഷ്യമിടുന്നതെന്ന് തീരുമാനിക്കുക. ഇവിടെ വിവരിച്ചിരിക്കുന്ന ഉദാഹരണത്തില്‍, ചില പ്രാഥമിക വിവരങ്ങള്‍ മാത്രമാണ് സ്വീകരിക്കുന്നത്. ആവശ്യാനുസരണം കൂടുതല്‍ വിവരങ്ങള്‍ ചേര്‍ക്കുവാന്‍ കഴിയും, അതിനനുസരിച്ച് ഫ്‌ളാഷിലെ ആക്ഷനുകളിലും, PHP സ്ക്രിപ്റ്റിലും മാറ്റങ്ങള്‍ വരുത്തണമെന്നു മാത്രം.

  • Name (Variable: user_name) - Name എന്ന ഫീല്‍ഡിലെ ഡാറ്റ user_name എന്ന വേരിയബിളിലാണ് സൂക്ഷിക്കപ്പെടുക എന്നര്‍ത്ഥമാക്കിയിരിക്കുന്നു.
  • E-mail (user_email)
  • Subject (user_subject)
  • Message (user_message)
ഇത്രയും തീരുമാനിച്ചതിനു ശേഷം നമുക്ക് ഇന്റര്‍ഫേസ് ഡിസൈനിംഗിലേക്ക് കടക്കാം. ഒരു പുതിയ ഫ്‌ളാഷ് ഫയല്‍ തുറക്കുക. ചേര്‍ക്കേണ്ടുന്ന വെബ് പേജിന്റെ വലുപ്പത്തിന് അനുസൃതമായാണ് ഈ ഫയലിന്റെ വീതിയും, പൊക്കവും തീരുമാനിക്കേണ്ടത്. ഇവിടെ 250 x 300 വലുപ്പത്തിലൊരു ഫയലാണ് ഉപയോഗിച്ചിരിക്കുന്നത്. പ്രധാനമെനുവില്‍ File > Publish Settings സെലക്ട് ചെയ്യുക. Formats എന്ന ടാബില്‍ Flash (.swf), HTML (.html), ഈ രണ്ട് ചെക്ക് ബോക്‍സുകളും സെലക്ട് ചെയ്യുക. തുടര്‍ന്ന് Flash എന്ന ടാബ് സെലക്ട് ചെയ്ത് Version: എന്ന കോംബോ ബോക്സില്‍ നിന്നും Flash Player 6, ActionScript version: എന്നയിടത്ത് ActionScript 2.0 എന്നതും സെലക്ട് ചെയ്യുക.

Flash Library containing Button, TextArea and TextInput components.ഫോം ഇന്റഫേസ് ഡിസൈനിംഗാണ് അടുത്ത പടി. ടൈം‌ലൈനില്‍; bg, components, texts എന്നീ പേരുകളില്‍ മൂന്ന്‍ ലെയറുകള്‍ കൂട്ടിച്ചേര്‍ക്കുക. പ്രധാനമെനുവില്‍ Window > Components എന്ന പാനല്‍ തുറന്ന്; Button, TextArea, TextInput എന്നീ കമ്പൊണെന്റുകള്‍ ലൈബ്രറിയിലേക്ക് ചേര്‍ക്കുക. ഫീഡ്‌ബാക്ക് ഫോമിന് യോജ്യമായ ഒരു ബാക്ക്‍ഗ്രൌണ്ട് ആദ്യമായി ഡിസൈന്‍ ചെയ്യുക. bg എന്ന ലെയ‌റില്‍ ഒരു ഗ്രാഫിക് സിംബലായി ഇത് നിര്‍മ്മിക്കാവുന്നതാണ്.

പ്രധാന സ്റ്റേജിലേക്ക് തിരിച്ചു വന്ന്, ലൈബ്രറിയില്‍ ലഭ്യമായ കമ്പൊണെന്റുകളുടെ വിവിധ ഇന്‍സ്റ്റന്‍സുകള്‍ സ്റ്റേജിലേക്ക് ചേര്‍ക്കുക. Name, E-Mail, Subject എന്നിവയ്ക്ക് TextInput എന്ന കമ്പൊണെന്റും; Message ചേര്‍ക്കുവാനുള്ള സ്ഥലത്തിന് TextArea എന്ന കമ്പൊണെന്റും; മെസേജ് അയയ്ക്കുവാനുള്ള ബട്ടണായി Button എന്ന കമ്പൊണെന്റും ഉപയോഗിക്കുക. കമ്പൊണെന്റുകള്‍ components എന്ന പേരില്‍ ടൈം‌ലൈനില്‍ ലഭ്യമായ ലെയറിലേക്കാണ് ചേര്‍ക്കേണ്ടത്. തൊട്ടു മുകളില്‍ കാണുന്ന texts എന്ന ലെയറില്‍, ഓരോ ബോക്സിന്റേയും പേരും മറ്റ് വിവരങ്ങളും ആവശ്യാനുസരണം നല്‍കാവുന്നതാണ്. ഓരോ കമ്പൊണെന്റിനും ഇന്‍സ്റ്റന്‍സ് നെയിം നല്‍കേണ്ടതുമുണ്ട്.
Variable Name / Variable     / Component / Instance Name
Name          / user_name    / TextInput / box_user_name
E-Mail        / user_email   / TextInput / box_user_email
Subject       / user_subject / TextInput / box_user_subject
Message       / user_message / TextArea  / box_user_message


Feedback Form Interface. ടൈംലൈനില്‍ ലഭ്യമായിരിക്കുന്ന text എന്ന ലെയറിലേക്ക് ഒരു Dynamic Text ഫീല്‍ഡ് കൂടി കൂട്ടിച്ചേര്‍ക്കുക. ഈ ടെക്സ്റ്റ് ഫീല്‍ഡിന്റെ ഇന്‍സ്റ്റന്‍സ് നാമമായി box_status എന്നും നല്‍കുക. ഫീഡ്‌ബാക്ക് ഫോമിന്റെ ഇന്റര്‍ഫേസ് ഡിസൈനിംഗ് ഇവിടെ പൂർത്തിയായി. ചിത്രത്തിൽ കാണുന്നതിനു സമാനമായ രീതിയിലാവണം സ്റ്റേജ് നമുക്ക് ഇപ്പോള്‍ ലഭ്യമായിരിക്കുക. ഭാവനയ്ക്ക് അനുസൃതമായി ഫോമിനെ മോടിപിടിപ്പിക്കുകയും, ആനിമേഷനുകൾ ചേർക്കുകയും മറ്റുമൊക്കെ ചെയ്യാവുന്നതാണ്. ഫീഡ്ബാക്ക് ഫോം ഉപയോഗിക്കുന്ന വെബ് സൈറ്റിന്റെ ഡിസൈനുമായി ചേർന്നു പോവുന്ന രീതിയിൽ ഫോം ഡിസൈൻ ചെയ്യുകയാണ് വേണ്ടത്. ഫീഡ്‌ബാക്ക് ഫോം പ്രവര്‍ത്തിക്കുവാന്‍ ആവശ്യമുള്ള ആക്ഷന്‍സ്ക്രിപ്റ്റിംഗ്, PHP സ്ക്രിപ്റ്റിംഗ് എന്നിവയെക്കുറിച്ച് അടുത്ത പോസ്റ്റിൽ.

(2008 ജൂലൈ ലക്കം ഇന്‍ഫോകൈരളി കമ്പ്യൂട്ടര്‍ മാഗസീനില്‍ പ്രസിദ്ധീകരിച്ചത്.)

Description: How to make a Feedback Form in Adobe Flash? Using Flash Movie(SWF) file as front-end and ASP, PHP, CGI scripts as back-end to create an interactive feedback form in Adobe Flash. Published in InfoKairali Computer Magazine, July Issue, 2008. Article by Hareesh N. Nampoothiri aka Haree | ഹരീ.
--

3 comments:

Haree said...

ഫ്ളാഷിൽ ഒരു ഫീഡ്ബാക്ക് ഫോം എങ്ങിനെ നിർമ്മിക്കാമെന്ന് ഈ പോസ്റ്റിൽ വിശദീകരിച്ചിരിക്കുന്നു.
--

Nabeel kallayil said...

ഹരി ചേട്ടാ...
നന്നായിട്ടുണ്ട്.അടുത്ത പോസ്റ്റ് ആകാംഷയോടെ കാത്തിരിക്കുന്നു.

നരിക്കുന്നൻ said...

നല്ല പ്രയോജനപ്രധമായ പോസ്റ്റ്. രണ്ടാം ഭാ‍ഗത്തിനായി കാത്തിരിക്കുന്നു..

Post a Comment

40- ദിവസത്തിനു മേല്‍ പ്രായമുള്ള പോസ്റ്റുകളുടെ കമന്റുകള്‍ പരിശോധിച്ചതിനു ശേഷം മാത്രമേ പ്രസിദ്ധീകരിക്കുകയുള്ളൂ. സഹകരിക്കുക.
--

 
Sankethikam - Technology Blog. Tutorials on Adobe Photoshop, Adobe Flash, Digital Photography and other general technical articles.
Original theme by Douglas Bowman | Theme customized by newnmedia | Lightbox v2.0 by Lokesh Dhakar | Recent Comments Widget by Blogger Templates
Recommended Browsers: Mozilla Firefox / Google Chrome