How to Create Websites With JavaScript & Flash

JavaScript and Flash enhance visitor interaction with websites.

Websites using Flash and JavaScript present attractive levels of interactivity and visual style to visitors. Both JavaScript and Flash can enhance the way that visitors to your site experience the content. The technologies are not difficult to use for simple Web components, and many online resources are available to use freely. JavaScript and Flash elements on websites should ideally be carefully chosen, and should highlight the site content, rather than distracting users from it.

Difficulty:

Moderate

Instructions

1. Start by building a basic website in HTML. Use CSS to style your site. Begin to introduce elements of JavaScript, for example to tailor the appearance of sections as visitors interact with them. A common use of JavaScript is to give menu items a different appearance when the user rolls over them with the mouse. Consider making sections of your page appear and disappear using JavaScript, for example drop down menus or tabbed areas. This allows you to make better use of your available space and to condense its content effectively. Decide on the content first and then on how you want visitors to interact with it.

2. Look for available JavaScript resources that you can use. Many JavaScript libraries are freely available online and can be used to establish sophisticated effects, while requiring very little code to be written. As well as allowing you to implement impressive effects without much experience, using external libraries is a good way to get into the habit of using JavaScript code yourself. In a typical scenario, you will link to an external JavaScript resource in your web page head section as follows:

   <script type='text/javascript' src='swfobject.js'></script>

   This code links to a JavaScript class called SWFObject, used for creating Flash elements on a web page. Code linked to can be referred to within the page, either in the head or body sections. When you download external resources, follow any instructions included.

3. Learn basic Flash development using Internet tutorials or by choosing Help from the menu within the Flash authoring environment. Flash should only be used where necessary, as many people browsing your site may be doing so on a device that does not have Flash Player installed. For this reason it's best only to use Flash selectively, for example if you want to create components that are animated or that require media such as video. A good first Flash project is to create a header for your website with animated effects, for example with images and text fading in and out.

4. Learn basic ActionScript to use within your Flash content. ActionScript is a fairly easy language to learn, even for people with no programming experience, and using it allows you to achieve complex and compelling effects in your site. Experiment with the different types of object you can use within Flash, including Graphic, Movie Clip and Button symbols. Creating symbols and giving them Instance Names allows you to refer to them within your code, and therefore to implement a level of interactivity. For example, a button with the Instance Name "my_btn" may be assigned behavior when someone clicks on it by using this syntax:

   my_btn.onPress=function()
   { trace('pressed'); };

   This code merely outputs a small text string when the button is pressed.

5. Consider the best way to present each of the elements on your website. Bear in mind the purpose of your site, and only use Flash or JavaScript if this will indeed be the best way to achieve that with your visitors. Remember to include alternative content for visitors who do not have Flash Player or who have JavaScript disabled. People access the Internet on many different types of device, and so you cannot be sure that they will be able to access Flash and JavaScript elements on your site.

Tips & Warnings

• Make use of free Internet resources. Many of the things you want to achieve in your site will likely have been done many times before, so you can save yourself a huge amount of work by re-using existing code.

• Don't overuse Flash and JavaScript. As well as not being accessible to some visitors to your site, these components can detract from the overall purpose and message you are using the site to communicate.

References

• W3Schools: Style Object Visibility Property
• Google Code: SWFObject
• W3Schools: JavaScript Where To
• Adobe: Learn Flash
• ActionScript.org: Beginner

Resources

• jQuery: Write Less, Do More
• W3Schools: Flash Introduction
• W3Schools: JavaScript Introduction
• Adobe: Flash Help and Support