The Mashi toolkit enables you to swiftly create interactive and time-controlled web applications that are easily integrated in your websites.

But how does Mashi work?

Mashi utilizes nothing but standard web technology - HTML, JavaScript, CSS and the DOM. Additional 32 bit PNG-Images are used to create transparency effects.

You see, it's only technology every web developer is proficient in and uses every day.

Unlike other projects Mashi doesn't completely rely on HTML5, the Canvas-Element and CSS3.

Mashi apps also work with XHTML and HTML4, which enables them to function properly even in out-dated browsers like IE6.

We're pretty sure there's still some people using it.

You don't want to leave them out in the rain, right?

Scene-based timeline versus movie timeline.

Mashi's base element is the timeline. In contrast to other animation tools mashi uses a scene-based timeline. So you are not limited to your every-day "movie"-timeline divided in dozens of equal frames per second but you can split your timeline into self-contained and independent scenes at will.

This allows you to approach your scenes in a much more direct and tangible way.

The timeline consists of several scenes (frames), that may be combined to one or more framesets or even outsourced to different files. The toolkit loads the framesets into an array.

Duration and Function.

The frames themselves consist of two elements only - their duration in milliseconds and a JavaScript function that is called as soon as the scene starts. Inside that function you can use: native JavaScript code, your favorite JS-framework or the methods provided by Mashi.

Local Toolkit or loading from CDN?

All Mashi toolkit files are found in a dedicated folder called 'system'. The development version and the minimized production version can be included locally or you can conveniently use Google's Appspot CDN (Content Delivery Network).

http://mashi-tv.appspot.com/system

Modules for Images

Mashi offers an automated preloader. It preloads every single graphic used in your app to display it without any delay at the right time. In addition it also loads the appropriate hacks to help our good-ol' IE6 cope with PNG-transparency.

.. and Controls.

Switching between different scenes is really easy: Mashi is shipped with the "Controls" module that provides buttons like "play" and "pause" etc. including their associated logics.

And modules for Objects and Text Effects.

In addition Mashi is already equipped with modules for object and text animation as well as CSS3-effects (e.g. text shadows). Stubborn, out-dated IEs are hacked by Mashi along the way.

Not enough for you?

No problem: It's a cakewalk to use Mashis plug-in mechanism to integrate additional features. Write your own plugin!

Multiple Layers.

Mashi apps are loaded into an arbitrary element on your website. They use multiple layers: two layers for backgrounds or fading, one pure text layer and a stage layer for any objects.

And you can also easily add and use a canvas layer - if needed.

This concludes our little technical overview.
For more information on Mashi please visit our blog and the API documentation.