Last modified: August 16, 2011 15:35:33.

Common Actions in cManager

Either you are working on UI tweening or customizing display attributes, there is a number of common settings you will face with when dealing with UI elements or indicators.

Here is an overview of these common actions and settings in cManager:

Undo, Redo & History

Undo, Redo & History

Video tutorial: 1min 46sec
What you will learn:
  • Using Undo, Redo and HistoryReversing changes made to your project in cManager by using History feature.

These are common actions for almost any application today. History dropdown displays yours last 20 steps in cManager - you are able to go back to any one of these and continue working from there.

Canvas Zoom & Move

Sometimes when working on smaller resolutions, your CU3ER project might not be visible in whole. Zoom option comes in handy here as you can zoom out to 20% of the current project size and the maximum zoom is 100% (actual size).

To zoom in or out:

  • Drag zoom slider.
  • Click on "+" for zoom in or "-" for zoom out.

CU3ER project is always centered on stage by default. You can move your project across the canvas by:

  • Press move button.
  • While keeping it pressed, move the mouse in desired directions you would like to move CU3ER.
  • Release to mouse button when you are satisfied with a new position.

To reset CU3ER position to default, double click on move button

Save

Saving Project

Video tutorial: 1min 50sec
What you will learn:
  • SavingSaving project using 'Save'.
  • DuplicatingVersioning or duplicating project.
  • RenamingModifying project name.

Saving project is recommended after each major setting (customization) you have completed by clicking on 'Save' button in File dropdown menu.

You can even Save your current buildout as new project using 'Save As..." which comes in handy for project versioning.

NOTE: LITE users will not be able to use Save As because LITE license is limited to 1 project only

Deploying

Deploying

Video tutorial: 1min 41sec
What you will learn:
  • Deploying objectsAdding objects to the stage and slideshow.
  • Removing objectsRemoving objects from the stage and slideshow.

Deploying various visual elements (like add-ons) in cManager is done by clicking corresponding button on Visual Add-ons menu. Example: for 'Next Button':

Upon clicking on desired object, it's properties tab opens at the bottom of cManager like on example shown below for 'Next Button':

Turn on (to green) the checkbox if you want to add selected object to CU3ER. To remove object from CU3ER, just turn off ( to red) the checkbox to the right of the properties tab title.

Deploying procedure is the same for all Visual Add-ons and their inner elements .

Positioning

Postioning

Video tutorial: 2min 40sec
What you will learn:
  • Quick positioningDragging UI elements to the new position with a mouse.
  • Precise positioningSelecting relative alignment and entering offset value in the 'Align & Offset' properties panel.
  • Easy tuningPressing the arrow key for the direction in which you want the add-on to move (1px or 10px step).
  • Align to stage vs. Align to slidesDifferences and advantages.

You can move/position selected object either by:

  • dragging it to the new position
  • selecting relative alignment and entering offset value in the 'Align & Offset' properties panel

  • pressing the arrow key for the direction in which you want the add-on to move (1px step)

NOTE: If you want to align object relative to the CU3ER swf, make sure 'Align to Stage' checkbox is checked, otherwise alignment will be calculated relative to the slides panel

Size & Transform

Size & Transform

Video tutorial: 3min 03sec
What you will learn:
  • Resizing elementsQuick and best practice for resizing objects.
  • Transforming elementsQuick and best practice for scaling objects.
  • Radius alterationQuick and best practice for editing radius.

There are number of ways to alter object size and how it will be done depends on which object is selected and what tween view mode you are working on.

To alter size of the selected object:

  • drag the transform handles (corner or side handle) of the selected object
  • enter corresponding values to 'Transform' properties panel

    NOTE: Transforming is disabled if you are working in TweenShow view as all objects are scaled to 100 by default in this view. More info about tween views →

  • enter corresponding values to 'Size' properties panel

  • enter corresponding values to 'Radius' property if you are working with Autoplay or Preloader indicators with radial type.

Changing color & alpha

Changing Color & Alpha

Video tutorial: 1min 15sec
What you will learn:
  • ColoringQuick and precise color alteration of selected objects.
  • TransparencyEditing transparency levels of selected object.

To change color of the selected object:

  • Pick desired color from the available color picker or;
  • Enter hex decimal value (e.g. FF0000 for red)

To change alpha (transparency) of selected object:

  • Enter transparency value within range from 0 -100 where '0' means full transparency.

Using Round corners

To make selected object corners round:

  • Enter a corner radius value. A value of zero (0) creates square corners.
  • Select 'lock radius' to apply the top-left corner value to all corners.

Navigation symbol type

To change current navigation symbol type pick an available symbol number in type dropdown:

Numbers represent graphics as shown on the image below:

Visibility

You can define visibility mode (how object will be displayed) for each add-on during CU3ER playback:

  • Hide on Transition - Check this option if you want object to hide (tweenHide) once transition starts. After the transition ends object will appear (tweenShow) again on stage.
  • Auto hide - Check this option if you want to CU3ER detects user activity/inactivity (mouse move). If a user is inactive for a specified period of time (in seconds) CU3ER will apply tweenHide for the selected object. Upon user activity (mouse move) CU3ER will apply defined tweenShow to the selected object.
  • Bake on Transition - to bake description box into slide image during transition, which will result in moving description box, as it is a part of the image.

NOTE: 'Bake on Transition' option is available under description box properties only .

UI Animation

One of the core features of CU3ER is ability to independently tween (animate) almost all visual add-ons property values we have discussed above. Animation panel is place where you can define main tween values:

  • duration - duration of the tween in seconds
  • delay - delay from the start of the tween in seconds
  • easy - An ease is a mathematical curve that is applied to the property values of a tween. The final effect of the tween is the result of the combination of the range of property values in the tween and the ease curve.

    Available ease functions are:

    • Sine.easeIn
    • Sine.easeOut
    • Sine.easeInOut
    • Expo.easeIn
    • Expo.easeOut
    • Expo.easeInOut
    • Bounce.easeIn
    • Bounce.easeOut
    • Bounce.easeInOut
    • Elastic.easeIn
    • Elastic.easeOut
    • Elastic.easeInOut

Text properties

You can set the text attributes of description box or thumbnails title.

  • Font - pick among:

    • common device fonts in web design
    • embedded font - prior using embedded font you need to embed font in swf and upload it for use in cManager. How to embed font?

      To upload a font:

      • Click on upload button.
      • Browse for your embedded font.
      • Click OK.
  • Font size
  • Font color
  • Font style - bold or italic

    NOTE: In order to use 'bold' or 'italic' style with your embedded font you need to embed corresponded styles too .

  • Text alignment - left, center, right
  • Character spacing
  • Line spacing

NOTE: Only font color attribute is available for altering through tween views.

Margin

To set the margin (if available) for the selected object:

  • Enter margin values in pixels for each corresponding margin - top, right, bottom and left.

Offset, Padding & Spacing

Those are common options available for thumbnails. Enter the desired horizontal or vertical values for respective panel.