Tokarama

click-n-jump game

.

Gross Domestic Product

The gross domestic product (composition by sector) of all countries can be viewed as pie chart. Pick a country from the listbox - use the character buttons or the scroll buttons for navigation.

There are three displaying modes: single country and either comparing two or up to four countries. For multiple panels: A little dot indicates which panel has the focus. Click on panel to change it.

This sample also introduces a feature for left-handed persons: click on the left half of the title bar to mirror certain components of the application; like the listbox, the scroll buttons and the chart display area. Clicking on the right half of the title bar switches those components back.

The download file is an offline version of this sample using a static JavaScript-file as data source whereas the online version calls a php-script which generates the data from a database.

source

.

Dynamic Graph

graph that is updated dynamically; how it basically works: request via getUrl(), a php-script generates random data and returns it as object in literal notation (JSON), which then is processed client-side with the eval()-function

features: request-rate can be set from 1 up to 30 secs, graph scrolls up automatically when bottom is reached, three graph-types: polylines,dots or both, tooltip showing the value when moving over a dot (can be turned off)

source

.

Moving Objects

simulates how the position of several objects is retrieved and displayed - move over object to show tooltip

source

.

Railroad - Animation

train/track animation using custom font and textPath

.

Weather Fronts

weather fronts with textPath and custom font

source

.

Curly Curves

creating curly curves (paths) with custom font

.

Markers on Textpath

placing markers on path using textPath and custom font

.

Radar Chart

spider plot

.

Klotski

shows one solution for the game 'Klotski'; animation with navigation buttons: play/pause, reset, step back/forward

.

Making Sounds

sound and svg - specific to Adobe SVG Viewer at the moment

source

.

Rotating an Ellipse

algorithm for rotating an ellipse built from a path so it is congruent to the original ellipse

.

Swap Symbols

first defining three symbols and then three use element that instanciate these symbols as intermediates;
.

Background Pattern

using native shapes and png-image as background pattern

.

Bound Rectangle

two handles and a rectangle: you can move the rectangle in between the handles, when you move the handles, the rectangle keeps the position relative to the handles

.

Complex Path with Icons

path with icons

.

Complex Paths: Shapes + Script

paths patterns made of shapes created with script

.

Dynamic Values

displays several values, indicating maximum/minimum, using a gradient in the background to show different states

.

Animation: Using the End Attribute

animating a shape, changing action by using the end attribute

.

Hatchings

hatchings created by using patterns

.

Keyevents

moving a circle within bounds using the arrow keys; controlling speed, size and direction; pressing two keys to move diagionally

.

Moving Realtime: Cockpit

an object (circle) is created at a random starting position; it gets an unique ID and random color; it then can be moved with the arrow keys; the position is sent to the server every second and stored in a database; also open the realtime monitor to watch your circle move; then try opening several tabs/windows of the cockpit and see how the monitor fills up

.

Realtime: Monitor

here you can watch the objects moving that are created when a realtime cockpit window is opened; the monitor calls the server every second to request the IDs and current positions of all objects; the object will disappear a few seconds after the cockpit window has been closed

.

Restaurant: JSON + Eval

retrieving json data using eval to process it; then displaying data

.

Restaurant: Parse XML

retrieving xml data parsing it client-side; then displaying data

.

Dynamic SVG Maps

displaying sulphur concentrations on a map; data stored as JSON; tooltip; legend

source

.

Toggle Buttons: SMIL / Script

meet the Simpsons and the Flanders hitting the toogle buttons; one uses declarative animation (SMIL), the other works with script

.

Boring Squares?

yes, boring squares - but you will find many interesting techniques inside, so make sure to read the comments in the source code!

.

Testing Linear Gradient

switching the coordinates and the gradient units of a linear gradient on the fly

.

Pie Chart - Basics (1)

make-some-pie-on-the-fly (1): getting familiar with the elliptical arc command

.

Pie Chart - Basics (2)

make-some-pie-on-the-fly (2): playing with different starting positions and sizes

.

Pie Chart - Basics (3)

make-some-pie-on-the-fly (3): pieChart presentation

.