Here you will be introduced with the 3 core aspects of a rich media UI:

• Presentation, i.e. the capabilities in terms of layout and displayed graphic elements (texts, shapes, bitmaps and videos)
• Interactivity, i.e. the capabilities in terms of user interactions (and their side-effects) with the keypad, touch screen…
• Animation, i.e. the capabilities to animate graphic elements to improve the user experience

Presentation

We will deal here about how designing a rich media scene, i.e. a page containing arranged graphic elements.

Scene canvas

You will start with an empty canvas, so first of all we have to define this blank page:

• You will play around with a canvas on which you will be able to arrange graphic elements.
• This canvas has a size, i.e. a rectangular area with a defined width and height.
• This canvas has its origin (i.e. coordinates (0,0) placed at its center.
• This canvas has a background color (white by default / if unspecified).

Scene graph

The scene graph is the structure defining how items - especially graphic ones - are supposed to arranged, so rendered on screen.
Streamezzo Rich Media Client goes through it in order to perform the on screen rendering, manage user interactivity and so on.

A scene graph is structured as a tree with:

• nodes that are called Transform in Streamezzo terminology
• leaves that correspond to a graphic item, an interative item...

Scene description

The scene description is the an XML based expression language specifying how items - especially graphic ones - are ingested in sequence (units) in the scene graph in order to update it so as to obtain the expected result.
Refer to the Language and API Reference Guide for more information.

Available graphic elements

The following graphic elements can be used to compose your rich media scene:

• Text
  • Relies on system fonts (device dependent)
  • Has a color and a used font configuration
  • Used fonts can be configured
• Shape
  • Sequence of linked points
  • Has a fill color and a border color
  • Can be filled or not
• Bitmap
  • Supports PNG and JPEG formats
• Video
  • Encapsulated as a .3gp file
  • Supports H.263 baseline, H.264 baseline, MP4-Video Simple Profile

Available graphic transformations

The following transformations can be applied to graphic elements:

• Positioning: placing a graphic element at a specified position (x,y)
• Scaling: stretching a graphic element width and/or height with a specified ratio
• Rotation: turning a graphic element applying a specified angle (restricted to a 90° multiple)

Note the availability of each transformation depends on the type of the manipulated graphic element, as detailed in the table below.

Example: placing a bitmap on screen

" />

Interactivity

Now you know how to design the visual of a rich media scene, let's make it interactive.
When dealing about user interactions on mobile devices we have to consider 2 main categories of inputs: keys (i.e. using a dedicated peripheral such as keypad, joystick, etc.) and touchscreen (direct on screen interaction).
We will see below which facilities are available in Streamezzo solution in order to enable such interactivity.
Important note:dealing with either only keys or only touchscreen or even both at the same time is critical for defining how end-users will interact with the rich media application, so it is key to identify what will be supported and properly design interactivy at the soonest.

Keys

Dealing with keys consists in defining the expected side-effects when a defined key is pressed or released.
The following categories of keys can be handled:

• standard keys: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | * | # | LEFT | RIGHT | UP | DOWN | FIRE | CANCEL
• specifically mapped keys: SOFT_KEY_1 (usually mapped to left softkey if any) | SOFT_KEY_2 (usually mapped to right softkey if any) | SOFT_KEY_3 | SOFT_KEY_4 | SOFT_KEY_5 | SOFT_KEY_6 | SOFT_KEY_7 (mapped to Android menu key on Android devices, Blackberry key on Blackberry devices) | SOFT_KEY_8 | SOFT_KEY_9
• all-in-one key: ANY_KEY

Touchscreen

Dealing with touchscreen consists in dealing with pressing or releasing specific areas on the screen but also on screen movements.
The following touchscreen interactions can be handled:

• screen touch: POINTER_DOWN
• screen leave: POINTER_UP
• on screen movement: POINTER_MOVE
• double click: POINTER_DOUBLECLICK

The interactive areas on the screen can be specified as rectangular areas.

Example: making the bitmap clickable on screen

" />

Animation

Design appealing rich media applications usually goes through defining fancy animations to enrich the user experience.
Designing a rich media animation with Streamezzo solution basically consists in defining a sequence of changes that are progressively applied to graphic elements.
Such animations are divided into 3 categories:

• visibility, i.e. making alternatively some graphic elements displayed or not
• transformation, i.e. making graphic elements change in terms of position and/or scaling and/or rotation
• color, i.e. making graphic elements color evolve

Each of those categories has a dedicacted Animate[Activate|Transform|Color] tags associated.

Example: animation the bitmap and the assciated interaction altogether on screen

" />

More...

For this initiation to UI implementation with Streamezzo solution, we have seen here how to compose a scene UI mixing basic and unitary graphic elements, interactions and animations.

Layout & skinning (adaptation framework)

Developing a rich media application that will be properly adapted to any device is a key added-value feature of Streamezzo Rich Media Solution.
Thanks to Streamezzo Adaptation Framework you will be able to set up a rich media application that will have its UI adapted to all adressed devices, especially concerning adjustements related to the support of various screen sizes and the management of available input peripherals (keys and/or touchscreen).
Streamezzo Adaptation Framework is included in Workbench Developer and you will see any newly created project initialized will all necessary libraries and resources.
In order to get familiar with this framework, we invite you to go accross this tutorial and then to take a look in the adaptation sample available in Workbench Developer samples (can be accessed from the Welcome Page).

Components

For composing easily and much faster an appealing and complete UI, you can rely on Streamezzo enabled components which provide an efficient and straighforward way to benefit from predefined - but of course configurable - high level pieces of UI, such as menus, carousels, animations and more.

You can find the libary of available components here and you will also find some articles and tutorials on their principle and usage in the Documentation section.