Flash

This is a simple Flash based paint program that shows how fully functional applications can be put together quickly and deployed to the web for easy access – this example is coded using ActionScript 2.0. This is the great thing about Flash, the immediate availability of content. Once it has been created, all you have to do is embed the Flash file into a web page – and that’s it! No installation needed to be done by the user, they can use the application straight away.

Here below, we have a paint application that can be used to create a drawing by using the mouse. Different colours are available, and the line thickness and opacity can be controlled. The user can also clear the picture and start again!

Try it now! Click on the canvas and drag the mouse around. Select different colours and line properties. Enjoy!

The core code needed to render the canvas area is shown below: continue

Here is an implementation of a trigonometric function, plotted as a 2D graph. Interactive controls are available to alter the graph dynamically. The sine wave plotted incorporates parameters commonly used in physics. You can directly control the amplitude (A), phase (phi), and the angular frequency (k).

Try it now! Click on the slider bars in the Flash example above to change the sine waves properties.

There are also some basic graph options that can be set via check boxes, these can be toggled on/off. Finally, there is a useful function that is a good thing to have in any application, and that is a reset button. This simply resets the graph back to the state when first loaded. This example is coded using ActionScript 2.0.

Extending this example to graph any function is fairly straight forward and could handle some quite complex equations with multiple parameters. The range of each axis would have to be carefully rendered though to make sure the graph ‘zoom’ was correctly set, otherwise the graph may not display correctly.

This is a dynamic bar chart written in Flash. Ok, so this may not have an everyday instant usage but you have to admit it is eye catching!

Unlike a standard bar chart which displays a series of bars with static values, our example has each bar dynamically cycling its value its maximum value down to a fixed lower value. Each bar chart still has an individual maximum value like its static counterpart.

This example is coded using ActionScript 2.0 and we can achieve the desired effect by modifying the value for each bar with the sinusoidal function as follows:

bar1_mc._height = Math.abs(Math.sin(offset*0.4+0.5))*100+bar1_val;


Animation of the numerical text is done in a similar way. Each bars text y co-ordinate is tied to the bars top y co-ordinate. The idea used in this example can be extended to create some interesting effects. Also, advanced charting in 2D and even 3D can be accomplished by using a bit of polish and creativity!

If you are interested in creating your own custom charts, or have any specific requirements then please contact us for some assistance. We can create charts in other languages of course. This one was done in Flash so it can easily be embedded in a web page blog post.