Stage

From Fitnect
Jump to: navigation, search

Background

The quickest way to customize Fitnect is to change the background image.

Background image is a 1920x1080 or (1080x1920 in portrait mode) PNG overlay.

Use it for:

  • display a banner on the sides or on the bottom
  • define frames (like in the online demo)


Backgrounds have the lowest Z-order, so all the widgets will float above it.


Bg.jpg

[NOTE: Do not include you logo or any widget graphics]

Indicator

When the user moves and holds his / her hand over a button, the movement is detected and, an indicator animation starts to play. At the end of this animation the button is being pressed.
The indicator animation is a simple timeline animated .swf file.

Indicator animations are global and used for the entire user interface, so only one animation can be uploaded.

There can be two types of indicators:

  • fixed
  • movable

Fixed indicator appears over the button and scales to the size of the button. (default)
Indicator fixed.jpg


Movable indicators are moving with the user's hand and preserves it's original size while playing.
Indicator movable.jpg

To make and indicator movable just check the "movable indicator" option


Download samples from this link: http://get.fitnect.hu/download.php?f=Fitnect/indicator_sample.zip

Fonts

To use a different fonts on you user interface, an embedded font .swf file needs to be created.


  • Download our default fonts.fla file from this link. http://get.fitnect.hu/download.php?f=Fitnect/fonts.zip
  • Make sure you have ArialUnicodeMS installed, if not, install the font!
  • Open the file in Flash CS 5.5. or higher
  • Locate the library panel on the right
  • Press right mouse button, and click on "new font"
  • The font embedding window will open
  • You will see ArialUnicodeMS in the fonts list (top left), (never delete it)
  • Add a new font
  • In the right menu name your font (don't use space or any special characters)
  • Select a font to embed
  • Select the character range to embed
  • Click Ok when ready
  • On the timeline, first frame right click and select actions, and find the following lines
import flash.text.Font;
Font.registerFont(ArialUnicodeMS);
  • add your font name to the list, so the list will look like that
import flash.text.Font;
Font.registerFont(ArialUnicodeMS);
Font.registerFont(YOUR_FONT_NAME);
  • Click on file->publish
  • A new fonts.swf will be created
  • Locate the file and upload using the fontset uploader located on the stage toolbar


The new font will appear in every font selection dropdown menu!

Viewport

Adjust the size of the viewport using the viewport controls.


VP Split R - Right end of the viewport
VP Split L - Left end of the viewport
VP Split T - Top of the viewport
VP Split B - Bottom of the viewport


  • You will see red masked areas while adjusting.
  • The remaining grey part will the area for the viewport.
  • Adjust to align with the selected background.

Vp area.jpg

Zoom

Use the zoom controls to adjust the user interface size in the editor.

Zoom.jpg

  • It is very important in portrait mode.
  • Use the scrollbars to scroll the user interface when the scale is higher than the fit to screen value

Items

Select the project name from the drop down menu to test your interface with the items assigned to the selected project.

  • need to assign the skin to the project first
  • default value is the demo project

Screens

Select the screen to edit using this drop down menu!

General

Orientation

  • Orientation: Select from Portrait and Landscape modes

Save changes

  • Use the "Save" button to save changes, and (re)generate skin files on the server!

Currency

  • Currency Pre - Global currency string ath the beginning - like $10 ($)
  • Currency Post - Global currency string at the end - like 10HUF (HUF)
  • Currency values will be used by the shopping cart and item selector menus

Gender

  • Default gender at startup can be set here.

Cursor

It is possible to replace the default yellow hand cursor to a custom one.

Sample cursor: http://get.fitnect.hu/download.php?f=Fitnect/cursor_sample.zip

  • Open the file in adobe flash, and update the cursor image.
  • Publish and upload the flash file here.
  • If you are using a custom cursor image, it is recommended to disable the default system cursors.

Cursor clipping:

The yellow hand cursors is always visible by default. To change this behavior, it is possible to define a rectangle and show the cursor only outside of it.

Cursor TL X (Top left X coordinate of the clipping rectangle)
Cursor TL Y (Top left Y coordinate of the clipping rectangle)
Cursor BR X (Bottom right X coordinate of the clipping rectangle)
Cursor BR Y (Bottom right Y coordinate of the clipping rectangle)
  • Cursor clipping will work on selected screens only!