Posts filed under 'JavaScript'
1. What techniques can a web designer use to optimize and debug Flash created web sites? Feel free to share any other tips that you found during your research that may be of value to creating animated web sites in Flash.
“Trace” statements are likely the most known debugging tool used for actionScript code. You can place a trace statement anywhere you want and have it output just about anything you want also.
trace(”I’m a trace action!”);
myTrace = “I’m the content of a variable”;
trace(myTrace);
You can similarly use a text object you’ve placed directly on the stage to monitor during run time. You’ll only need to set something similar to: debug.text = myStringVariable;
Flash has an integrated debugger that is very powerful. To activate the
debugger, you need to go into Control > Debug Movie. You will see
the usual Test Movie setup but with an additional window aptly titled
‘Debugger’.
If you’re anything like me, you might use adobe’s liveDocs on line. I suppose it’s a debugging tool also. I plug in search criteria based on the error I’ve been delivered or the process I’m trying to complete. I also use forums and threads to help solve problems. I haven’t yet posted anything yet however.
http://www.actionscript.org/resources/articles/63/1/Common-Errors-and-Debugging/Page1.html
2. What is accessibility and why is it important? What should a web designer keep in mind when designing a web site to maintain accessibility? How does accessibility effect a web site’s animation?
Accessibility is an approach to web design that aims to ensure the widest access to the content and features of a website. The term is often used to refer to accessibility for people with disabilities, particularly blindness. … www.monash.edu.au/staff/web/glossary.html
Tim Berners-Lee, W3C director and inventor of the World Wide Web, defines it as access by everyone, regardless of disability. Even though the World Wide Web is continuously growing, many users:
• use speech browsers or “eyes busy”/”hands busy”, as businessmen in cars;
• don’t have the latest graphical browsers and plug-ins;
• surf with slow modems, or reside in rural or remote areas with limited access to the Internet;
• browse without graphics, using text-only browsers or subscribe to non-graphic services;
• access in noisy, high- or low-light environments;
There are also many users with disabilities as;
• Visual – blind, low vision, color blind;
• Auditory – deaf, hard of hearing;
• Motor/physical – paraplegic;
• Cognitive/learning – dyslexic, learning disabled.
• They may not be able to see, hear, move, or may not be able to process some types of information easily or at all.
• They may have difficulty reading or comprehending text.
• They may not have or be able to use a keyboard or mouse.
• They may have a text-only screen, a small screen, or a slow Internet connection.
• They may not speak or understand fluently the language in which the document is written.
• They may be in a situation where their eyes, ears, or hands are busy or interfered with (e.g., driving to work, working in a loud environment, etc.).
• They may have an early version of a browser, a different browser entirely, a voice browser, or a different operating system.
Accessibility increases benefits for both parties: the User and the Web site Provider. It may also persuade developers to take in some alternate considerations. They may be more likely to use stronger contrasting colors or, web safe colors, abstain from flashing screens or quick moving objects and use simpler navigation.
http://www.w3.org/TR/WCAG10/
http://www.rnib.org.uk/xpedio/groups/public/documents/publicwebsite/public_animatedimages.hcsp
http://www.webnauts.net/accessibility.html
September 20th, 2008
According to the msdn website, “Transitions are time-varying filters that affect how a change of content is displayed.” Basically this means that a transition is the same as other events, but instead of an instantaneous change of state, it happens over a specified period of time. Mostly, we see transitions used during slide shows containing different images. These are usually a wipe, or fades; a screen slide from right to left or left to right or a fade in and out. An interpage transition is a transition that affects the entire window as the window loads and/or unloads. This can be the same type of fade as the slide show.
In my opinion a lot of the web site trends are revolutionary and based on the latest technology. With a new software product and capability, something old becomes new again. The concept of most web sites is “attraction”. The owner of the site wants you to view their site. Transitions may or may not keep our ADD intellects amused long enough to hang out longer than 10 seconds. I think I read the average web page can expect a visitor to make up his mind about leaving the site at about 4 seconds.
What do I think about the growing trend of using transitions? Well, depending on their use, I think there is great potential for transitions. I like to think that transitions can be used for wonderfully interesting visual explanations for complicated or convoluted processes; for example this one showing how our bodies use energy and the resultant free radicals are bounced down the electron transfer chain to O2 in the process of oxidative phosphorylation: http://www.brookscole.com/chemistry_d/templates/student_resources/shared_resources/animations/oxidative/oxidativephosphorylation.html
Transition trends are pretty cool; some are so cool they’ll stick around for over a week. If you only want to show off your new skills and your transition does not enhance or contribute to the value or message of your site (determined by the visitor) then you’re likely to come to your senses or latch on to the next super coolness.
http://www.webpagesthatsuck.com/does-my-web-site-suck/does-my-web-site-suck-checklist-part-one.html
http://www.webpagesthatsuck.com/topic60.htm
http://msdn.microsoft.com/en-us/library/ms532847.aspx
http://www.webdevelopersjournal.com/wacky/transitions/transitions.html
http://www.xeogen.com/
http://www.adobe.com/devnet/flash/articles/animation_guide_13.html
http://tutorials.learnflash.com/tutorials/flash/bettertransitionss.html
http://www.adobe.com/devnet/flash/articles/creating_animation_as3_02.html
The page located here: http://www.jumpeyecomponents.com/Flash-Components/Transition-Effects/MovieClip-Transition-Effects-V3-45/
has a graphic that transitions from one image to the next.
AS 2.0 thread on transitions: http://forums.creativecow.net/thread/190/862393
http://www.robertpenner.com/presentations/rpenner_Animation_Workflows_in_Flash_CS3_FITC_2007.pdf
sliding door transition: http://www.swishzone.com/index.php?area=resources&tab=movies&do=page&action=detailed&link_id=598
September 15th, 2008
To determine what information is important for interactive forms you must understand the goal of the form. What is the information needed? Also, what information do you want the user to know? Depending on the types of information you will have the user submit will determine the fields you will use in the form.
The basic essentials are these: For text and numeric data you will use text and combo boxes. If you provide the information for the user to select, you may choose from radio buttons, lists, or combo boxes. Of course, you may want the user to select multiple options. The use of check boxes or list boxes will work nicely for multiple options. The use of buttons is a no-brainer. Whether it is text or looks like a button, you will use buttons to interact with the user to open files, play sound, movies, or submitting or clearing form data.
Have you thought about security and/or validation? You might consider using digital signature to verify the user’s identity and form validation is the process of checking a form’s values against a standard of expected values. It is a way to proofread or spell check what your user has entered as input. An example would be an expected 9 number combination and the user entered an email address. This would return as invalid content. Typically checked are empty fields, valid and well formed email addresses, dates, and the aforementioned a number entered in a text expected field (or vice-verse). If the tested field contains the expected input then the result is returned true and the form data is expected to be good data. It is important to use validation for online forms to add an extra bit of reliability and save time by ensuring a certain level of quality.
References:
http://validator.w3.org/about.html
http://www.w3schools.com/js/js_form_validation.asp
2007 CivicPlus website management conference, “Next Generation Government Websites”
August 29th, 2008
http://www.scottrade.com/switch/?id=1#
This opens a Scottrade “Switch” page. Their content=”If you’re tired of brokerage account and transfer fees, make the switch to Scottrade online brokerage. We’ll not only help you consolidate your stock trading, IRA and mutual fund accounts, we’ll give you up to $100 back!”
The only popup I could spot is the “open a new account” text link or button. It opens up a new smaller window: https://apply.scottrade.com/applyonline/apply.aspx
If you choose to you may click on the link under, “Contact Us 1-800-619-SAVE” which is an email address: support@scottrade.com If you select the email address, you will have another popup window open: https://apply.scottrade.com/applyonline/SendEmail.aspx
I think that the pop-up windows are very low in number and controlled by the user and therefore not very annoying. For the company, it allows for the main page to remain open and on the user’s desktop.
https://www.mcafeesecure.com/us/merchants-moreinfo.jsp
This is a McAfee site whose content=”PCI Compliance and Secure Website Certification from McAfee Secure. Automated network security audits provide an affordable means of ensuring your customers’ transactions remain secure.”
Where to find the pop-up is the “Questions?” banner on the left side: Click here to chat with a customer service representative. It opens up a chat window allowing the customer to chat and ask for help while staying on the page. This is valuable tool for both the website owner and the user.
This is great: http://www.popuptest.com/ If you want to find popup windows, there you have it. My popup blocker is working fine. On the first link, there is supposed to be 10 popup windows and it caught all of them (but only notified me of 6).
Firefox 3.0 stopped all except: http://www.popuptest.com/popuptest8.html and this one: http://www.popuptest.com/popuptest6.html
So, of course, while each of these might be annoying, the point is to test your browser’s pop-up defense and thus useful.
Obviously, not all pop-ups are unwanted. The browser and/or pop-up killers should be smart enough to recognize or allow you the choice to view the pop-ups you actually want to view.
July 14th, 2008
I thought you might get a kick out of this. Through the class
and some on line studies, I was able to create essentially the
very same affect using 4 different coding methods. The first
three are in Flash 2.0 and the last one is using javaScript.
———————————————-
ARRAY:
var clipArray:Array = new Array(one_mc, two_mc, three_mc);
a_mc.onRollOver = function() {
showClip(one_mc);
}
b_mc.onRollOver = function() {
showClip(two_mc);
}
c_mc.onRollOver = function() {
showClip(three_mc);
}
function showClip(l_Clip:Object):Void {
for (i=0; i
{
hideClip(clipArray[i]);
}
l_Clip._visible = true;
}
function hideClip(l_clip):Void {
l_clip._visible = false;
}
———————————————-
FUNCTION:
a_mc.onRollOver = function() {
onShow(one_mc);
}
b_mc.onRollOver = function() {
onShow(two_mc);
}
c_mc.onRollOver = function() {
onShow(three_mc);
}
function onShow(movClip:Object):Void {
onHide();
movClip._visible = true;
}
function onHide():Void {
one_mc._visible = false;
two_mc._visible = false;
three_mc._visible = false;
}
———————————————-
SWAPDEPTHS:
a_mc.onRollOver = function() {
onTop(one_mc);
}
b_mc.onRollOver = function() {
onTop(two_mc);
}
c_mc.onRollOver = function() {
onTop(three_mc);
}
function onTop (movClip:Object):Void {
movClip.swapDepths(0);
}
July 8th, 2008
What is validation? Why is it important to use validation for your online forms?
Validation is the process of checking a forms values against a standard of expected values. It is a way to proofread or spell check what your user has entered as input. An example would be an expected 9 number combination and the user entered an email address. This would return as invalid content. Typically checked are empty fields, valid and well formed email addresses, dates, and the aforementioned a number entered in a text expected field (or vice-verse). If the tested field contains the expected input then the result is returned true and the form data is expected to be good data. It is important to use validation for online forms to add an extra bit of reliability and save time by ensuring a certain level of quality.
http://validator.w3.org/about.html
http://www.w3schools.com/js/js_form_validation.asp
What are the advantages and disadvantages of using client-side form validation over server-side validation?
JavaScript can be used to validate input data in HTML forms before sending off the content to a server. Client-side validation is completed on the user’s machine and therefore does not need to be sent anywhere to be processed. This means it can be handled with JavaScript and any erroneous or suspect input will be caught before an attempt to transmit the data. This will save time and add a bit of reliability to the collected information and its likeliness to successfully run on the server. Without this JavaScript client-side server checking, the information would be sent out and return, after a bit of a wait, with a not so welcoming message indicating there was a problem with the submitted content. Of course, there is a concern of possible spoofing of the information after the client-side form validation has completed.
Spoofing: A generic term covering a range of computer network attacks whereby the attacker attempts to forge or intercede in a chain of communication. This can take a number of forms: email spoofing, IP spoofing and webpage spoofing. http://www.parliament.vic.gov.au/SARC/E-Democracy/Final_Report/Glossary.htm
June 19th, 2008
