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.
[NOTE: Do not include you logo or any widget graphics]
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:
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
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!
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.
Use the zoom controls to adjust the user interface size in the editor.
- 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
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
Select the screen to edit using this drop down menu!
- Orientation: Select from Portrait and Landscape modes
- Use the "Save" button to save changes, and (re)generate skin files on the server!
- 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
- Default gender at startup can be set here.
It is possible to replace the default yellow hand cursor to a custom one.
- 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.
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!