ഫ്ളാഷിലൊരു ഫീഡ്ബാക്ക് ഫോം - ഭാഗം ഒന്ന്
ഫീഡ്ബാക്ക് ഫോമുകള്‍ ഏവര്‍ക്കും പരിചിതമായിരിക്കും. മിക്കവാറും എല്ലാ സൈറ്റുകളിലും ഈ സൌകര്യം, ഉപയോക്താക്കള്‍ക്ക് ലഭ്യമാണ്. വെബ് സൈറ്റ് പ്രേക്ഷകര്‍ക്ക്, അഭിപ്രായങ്ങളും നിര്‍ദ്ദേശങ്ങളും വെബ് സൈറ്റില്‍ നിന്നു തന്നെ, അതിന്റെ നിര്‍മ്മാതാക്കള്‍ക്ക് അയയ്ക്കുവാനുള്ള സൌകര്യമാണ് ഫീഡ്ബാക്ക് ഫോമുകള്‍ എന്നതുകൊണ്ട് ഉദ്ദേശിക്കുന്നത്. ഫ്രണ്ട് എന്റ്, ബാക്ക് എന്റ് എന്നിങ്ങനെ രണ്ട് പടികളിലായാണ് ഫീഡ്ബാക്ക് ഫോമുകള്‍ പ്രവര്‍ത്തിക്കുന്നത്. ഫ്രണ്ട് എന്റായി മുന്‍‌കാലങ്ങളില്‍ HTML ഫോമുകളാണ് ഉപയോഗിച്ചിരുന്നത്. ഇവിടെ ഫ്രണ്ട് എന്റായി ഒരു SWF മൂവി എങ്ങിനെ ഉപയോഗിക്കാമെന്നാണ് വിശദീകരിക്കുന്നത്. ബാക്ക്‍എന്റായി PHP, ASP, CGI എന്നിങ്ങനെയുള്ള സ്ക്രിപ്റ്റുകള്‍ ഉപയോഗിക്കാവുന്നതാണ്.
ആദ്യമായി ഫീഡ്ബാക്ക് ഫോമിന് ആവശ്യമായ ഇന്റര്‍ഫേസ് ഫ്‌ളാഷില്‍ ഡിസൈന്‍ ചെയ്യുകയാണ് ചെയ്യേണ്ടത്. ഇന്റര്‍ഫേസ് ഡിസൈനിംഗ് ആരംഭിക്കുന്നതിനു മുന്‍പായി എന്തൊക്കെ വിവരങ്ങളാണ് ഉപയോക്താവില്‍ നിന്നും സ്വീകരിക്കുവാന്‍ ലക്ഷ്യമിടുന്നതെന്ന് തീരുമാനിക്കുക. ഇവിടെ വിവരിച്ചിരിക്കുന്ന ഉദാഹരണത്തില്‍, ചില പ്രാഥമിക വിവരങ്ങള്‍ മാത്രമാണ് സ്വീകരിക്കുന്നത്. ആവശ്യാനുസരണം കൂടുതല്‍ വിവരങ്ങള്‍ ചേര്‍ക്കുവാന്‍ കഴിയും, അതിനനുസരിച്ച് ഫ്‌ളാഷിലെ ആക്ഷനുകളിലും, PHP സ്ക്രിപ്റ്റിലും മാറ്റങ്ങള്‍ വരുത്തണമെന്നു മാത്രം.
- Name (Variable: user_name) - Name എന്ന ഫീല്‍ഡിലെ ഡാറ്റ user_name എന്ന വേരിയബിളിലാണ് സൂക്ഷിക്കപ്പെടുക എന്നര്‍ത്ഥമാക്കിയിരിക്കുന്നു.
- E-mail (user_email)
- Subject (user_subject)
- Message (user_message)
ഫോം ഇന്റഫേസ് ഡിസൈനിംഗാണ് അടുത്ത പടി. ടൈംലൈനില്; 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
ടൈംലൈനില് ലഭ്യമായിരിക്കുന്ന 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 | ഹരീ.
--
ആദ്യമായി ഒരു ചിത്രമോ പുതിയ ഒരു ഫോട്ടോഷോപ്പ് ഡോക്യുമെന്റോ തുറക്കുക. തുടര്‍ന്ന് അക്ഷരങ്ങള്‍ ക്രമീകരിക്കേണ്ട ആകൃതിയില്‍ ഒരു പാത്ത് വരച്ചുണ്ടാക്കുക. അതിനായി ടൂള്‍സ് ബാറില്‍ ലഭ്യമായിരിക്കുന്ന പെന്‍ ടൂള്‍ (P) സെലക്ട് ചെയ്യുക. പെന്‍ ടൂളിനു ലഭ്യമായ ഓപ്‌ഷന്‍സ് ബാറില്‍; Fill layers, Paths, Fill pixels എന്നിവയില്‍ Paths എന്നതായിരിക്കണം തിരഞ്ഞെടുത്തിരിക്കേണ്ടതെന്നതും ഓര്‍മ്മിക്കുക. ക്ലിക്ക് ചെയ്ത് ഡ്രാഗ് ചെയ്താല്‍ വളഞ്ഞ ആകൃതിയില്‍ പാത്ത് നിര്‍മ്മിക്കുക സാധ്യമാവും. വരയ്ക്കുമ്പോള്‍ Work Path എന്ന പേരില്‍ ഒരു പാത്ത് ലെയര്‍ പാത്ത്സ് പാലെറ്റിലേക്ക് ചേര്‍ത്തിരിക്കുന്നത് കാണുവാന്‍ സാധിക്കും. ആ പാത്ത് ലെയര്‍ സെലക്ട് ചെയ്തിരിക്കുന്ന അവസരത്തില്‍ മാത്രമായിരിക്കും പ്രസ്തുത പാത്ത് നമുക്ക് ചിത്രത്തില്‍ കാണുവാന്‍ സാധിക്കുക. പാത്ത്സ് പാലെറ്റില്‍, ഒഴിവായിരിക്കുന്ന ഭാഗത്ത് ക്ലിക്ക് ചെയ്താല്‍, എല്ലാ പാത്ത് ലെയറുകളും സെലക്ഷനില്‍ നിന്നും ഒഴിവാകുകയും, ചിത്രത്തില്‍ പാത്തുകളൊന്നും കാണാതിരിക്കുകയും ചെയ്യും.
അടുത്തതായി ടെക്സ്റ്റ് ടൂള്‍ തിരഞ്ഞെടുക്കുക. ടൂള്‍ പാത്തിനു സമീപം കൊണ്ടുവരുമ്പോള്‍ ചിത്രത്തില്‍ കാണുന്ന രീതിയില്‍ പ്രത്യേകതയുള്ള ഒരു ടൂള്‍ ഐക്കണ്‍ ലഭ്യമാ‍വും. ഇപ്പോള്‍ ക്ലിക്ക് ചെയ്ത് ടൈപ്പ് ചെയ്തു തുടങ്ങുക. അക്ഷരങ്ങള്‍ വരച്ച പാത്തിന് അനുസൃതമായാവും ചേര്‍ക്കപ്പെടുക.
അതിനായി പുതിയൊരു ഡോക്യുമെന്റ് തുറന്ന്; സ്റ്റേജില്‍, ഒരു വൃത്തം ആദ്യമായി എലിപ്റ്റിക്കല്‍ മാര്‍ക്യൂ ടൂള്‍ (M) ഉപയോഗിച്ച് വരച്ചുണ്ടാക്കുക. Shift കീ അമര്‍ത്തിയിരുന്നാല്‍ ഒരു സമവൃത്തം നമുക്ക് ലഭിക്കുന്നതാണ്. അതിനു ശേഷം പാത്ത്സ് പാലെറ്റില്‍ ചിത്രത്തില്‍ കാണുന്ന ബട്ടണില്‍ മൌസമര്‍ത്തി (Make work path from selection) ഇപ്പോള്‍ സ്റ്റേജില്‍ ലഭ്യമായ സെലക്ഷനെ ഒരു പാത്താക്കി മാറ്റാവുന്നതാണ്. തുടര്‍ന്ന് മുന്‍പു ചെയ്തതുപോലെ ടെക്സ്റ്റ് ടൂള്‍ സെലക്ട് ചെയ്ത്, പാത്തിനു സമീപം ടെക്സ്റ്റ് ടൂള്‍ കൊണ്ടുവന്ന്, ഐക്കണ്‍ വ്യത്യാസപ്പെടുമ്പോള്‍ ക്ലിക്ക് ചെയ്ത്, ടൈപ്പ് ചെയ്തു തുടങ്ങുക. ചിത്രം വൃത്താകൃതിയില്‍ ചേര്‍ക്കപ്പെടും.
ടെക്സ്റ്റ് ലെയറിന്റെ അതേ പേരില്‍ ഒരു Type Path ആയി പാത്ത്സ് പാലെറ്റില്‍ പ്രസ്തുത പാത്ത് സേവ് ചെയ്യപ്പെടും. ഈ പാത്ത് നേരിട്ട് ഡിലീറ്റ് ചെയ്യുവാന്‍ സാധിക്കുകയില്ല. അനുബന്ധ ടെക്സ്റ്റ് ലെയര്‍ ഒഴിവാക്കപ്പെടുമ്പോള്‍, അതിനോടൊപ്പം ഈ പാത്തും ഡിലീറ്റ് ചെയ്യപ്പെടും.
തുടര്‍ന്ന് ബ്രഷ് ടൂള്‍ (B) സെലക്ട് ചെയ്തതിനു ശേഷം സ്റ്റേജില്‍ വലതുമൌസ് ബട്ടണ്‍ അമര്‍ത്തി ഒരു ബ്രഷ് സെലക്ട് ചെയ്യുക. ആകര്‍ഷകമായ ഒരു ഫോര്‍ഗ്രൌണ്ട് നിറവും തിരഞ്ഞെടുക്കുക. ചിത്രത്തില്‍ കാണുന്ന രീതിയില്‍ Stroke path with brush എന്ന ഓപ്‌ഷനില്‍ മൌസമര്‍ത്തുക. സെലക്ട് ചെയ്ത ബ്രഷ് സ്റ്റൈല്‍/നിറം എന്നിവയ്ക്ക് അനുസൃതമായി പാത്തിന്റെ ഭാഗത്ത് ഒരു ബ്രഷ് സ്ട്രോക്ക് ചേര്‍ക്കപ്പെടും.
ഫംഗ്‌ഷനുകള്‍ ഉപയോഗിച്ച് എന്തെങ്കിലും ചെയ്യുവാന്‍ തുടങ്ങുന്നതിനു മുന്‍പായി, എന്താണ് നമുക്ക് ഈ ഫംഗ്‌ഷന്‍ ഉപയോഗിച്ച് സാധ്യമാക്കേണ്ടതെന്ന്, വ്യക്തമായ ഒരു ധാരണ ഉണ്ടാക്കേണ്ടത് അനിവാര്യമാണ്. അതിനു ശേഷം അതിന് ഏറ്റവും യോജ്യമായ ഒരു ലോജിക്കും കണ്ടെത്തേണ്ടതുണ്ട്. വളരെ ലളിതമായ ഒരു ഉദാഹരണമാണ് ഇവിടെ പ്രതിപാദിച്ചിരിക്കുന്നത്. ചിത്രത്തില്‍ കാണുന്നതുപോലെ എട്ട് ഇതളുകളുള്ള ഒരു പങ്ക. നടുവിലായി ഒരു ബട്ടണ്‍. ബട്ടണില്‍ മൌസമര്‍ത്തുമ്പോള്‍ പങ്ക കറങ്ങിത്തുടങ്ങണം, മൌസ് റിലീസില്‍ പങ്ക നില്‍ക്കുകയും വേണം. എന്നാല്‍ വെറുതെ തുടങ്ങിയാലും വെറുതെ കറക്കം നിന്നാലും പോര; തുടങ്ങുമ്പോള്‍ പതിയെ തുടങ്ങി, ക്രമാനുഗതമായി കറക്കത്തിന്റെ വേഗത കൂടി ഉച്ചസ്ഥായിയിലെത്തുകയും; തിരികെ കറക്കം നില്‍ക്കുമ്പോള്‍ കറക്കത്തിന്റെ വേഗത ക്രമമായി കുറഞ്ഞ് നിശ്ചലമാവുകയും വേണം.
ഫംഗ്‌ഷനുപയോഗിച്ച് എന്തെങ്കിലും ചെയ്യുവാന്‍ തുടങ്ങുന്നതിനു മുന്‍പായി, ആ ഫംഗ്‌ഷനില്‍ ആവശ്യമായി വന്നേക്കാവുന്ന സിംബലുകള്‍ ലൈബ്രറിയില്‍ ചേര്‍ക്കുക; ആവശ്യമുള്ളവ സ്റ്റേജിലേക്ക് ചേര്‍ത്ത് ഇന്‍സ്റ്റന്‍സ് നെയിം നല്‍കുക; ആക്ഷന്‍സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ലൈബ്രറിയില്‍ നിന്നും റണ്‍ ടൈമില്‍ സ്റ്റേജിലേക്ക് ചേര്‍ക്കേണ്ടവയ്ക്ക്, ഐഡന്റിഫയര്‍ പേര് നല്‍കുക; ഇവയൊക്കെ ആദ്യം തന്നെ ചെയ്തുവെയ്ക്കുക. ഇവിടെ പ്രതിപാദിച്ചിരിക്കുന്ന ഉദാഹരണത്തില്‍ തുടക്കത്തില്‍ ചെയ്യേണ്ടവ ഇപ്പോള്‍ തയ്യാറാക്കാം. ആദ്യമായി മുകളിലെ ചിത്രത്തില്‍ കാണുന്ന രീതിയില്‍ ഒരു പങ്ക വരച്ചുണ്ടാക്കുക. എട്ടിതളുകള്‍ മാത്രം ഒരു മൂവിക്ലിപ്പില്‍, നടുവിലെ ഭാഗം ഒരു ബട്ടണായി; ഇവരണ്ടും രണ്ട് ലെയറുകളിലായി (fan, mid എന്ന് ലെയറുകള്‍ക്ക് പേരു നല്‍കാം) ചേര്‍ക്കുക. ഇവയെക്കൂടാതെ actions എന്ന പേരില്‍ മറ്റൊരു ലെയറുകൂടി ചേര്‍ക്കുക. ഈ ലെയറിലെ ആദ്യ ഫ്രയിമിലാണ് ആക്ഷനുകള്‍ എന്റര്‍ ചെയ്യേണ്ടത്. ചിത്രം ശ്രദ്ധിക്കുക. സ്റ്റേജില്‍ ചേര്‍ത്ത മൂവി ക്ലിപ്പുകള്‍ക്ക്, fan എന്നും mid എന്നും ഇന്‍സ്റ്റന്‍സ് നെയിമുകള്‍, പ്രോപ്പര്‍ട്ടി പാനലില്‍ നല്‍കുവാനും മറക്കരുത്.
