NiceDemo | A demo supporting application (JavaScript vs. Flex) | Flex Application

During the last few weeks I've written two applications - have fun!

NiceDemo - Introduction

This application provides an easy way to include media (e.g. videos, images, text and interactive components) in your project demonstration or your talk. In addition it subjoins some kind of eye candy which is mostly not the main focus of attention - but can be the cherry on the top.

NiceDemo was implemented for several reasons - foremost because of the CeBIT 2009 where the "Curious Robot Scenario" was presented to the public.

NiceDemo - TechSpecs

NiceDemo has been implemented in Flex and JavaScript (with Flashvideo).

"Adobe Flex is a collection of technologies released by Adobe Systems for the development and deployment of cross-platform rich Internet applications based on the Adobe Flash platform. The initial release in March 2004 by Macromedia included a software development kit, an development environment IDE (Eclipse), and a J2EE integration application known as Flex Data Services." [1]

Flex MXML is an XML-based markup language which can be interpreted with a free SDK (Linux (Beta), MacOSX and Windows). Just because you need the SDK to deploy an application NiceDemo also has been implemented in HTML plus JavaScript and CSS which are common techniques and which are well known.  

NiceDemo - Appearance

Flex Version

JavaScript Version

NiceDemo - Capabilities

Flex Version:

• Plays flashvideo(s) which can be exchanged during runtime through xml config files.
• Navigable flashvideo (navigate to specified timestamps / CuePoints)
• Define CuePoints in a xml config file
• Imageviewer - also configurable through xml
• Runs locally and online in nearly every common browser
• PaintCanvas
• Scalable from 1024 up to 1920 px (autoscale)

Pros: Runs fast and robust on Linux, MacOSX and Windows.
The content of the application is highly configurable through xml config files.
Cons: Major changes of the app. itself require "reinterpretation" of the source code.
Local "mode" needs adjustment of the Adobe flashplugin.

JavaScript Version:

• Plays flashvideo(s) which can be exchanged during runtime
• Navigable flashvideo (navigate to specified timestamps / CuePoints)
• Define the CuePoints in HTML and control the videoplayer with JavaScript functions
• Imageviewer - configurable through HTML
• PaintCanvas
• Runs locally and online in nearly every common browser.
• Scalable from 1024 up to 1920 px (autoscale)

Pros: Highly configurable content, common and well known techniques (e.g. HTML, CSS)

Cons: Local "mode" needs adjustment of the Adobe flashplugin.

NiceDemo - HowTo's

Flex Version (on Vimeo HD Quality)

JavaScript:

At first you need to adjust your flashplugins' propertys (see Flex Version Video). As soon as you've done that you can alter some content.

1) Adding a new video and add/change some CuePoints

To add another CuePoint just add another HTML hyperlink which calls the "jump"
function with a given integer value (in seconds)

That's it for now. If you need more information or help drop me a line : fl0@icram.de