Chameleon Designer


Chameleon Designer is a tool to create your Chameleon project with ticker and branding scenes. From Chameleon Designer, you can create your scenes, publish to your server and export your project to the player.

Launch Chameleon Designer

To launch Chameleon Designer, double click the Chameleon Designer Icon.


To create a new project, select File > New. This will create an XML project file along with a JSON file and a resources folder. 

Settings

The Settings menu allows you to define a variety of settings:

Click Editor Settings to define general settings that apply across all projects:

Click Project Settings to define settings for this project only:

The Flow Settings dialog is discussed here, and the Local Fonts dialog is discussed in the Object Properties section below. 

Scene List

This list illustrates all the scenes defined in the project. You can use drag-and-drop to reorder scenes in the list.




Creates a new scene

Deletes a scene

Duplicates a scene

Opens the animation timeline editor for the selected scene

Opens the script editor for the selected scene

The scene name

The name of the zone that the scene is assigned to. You may have many scenes inside a single zone.

Toggles visibility of this scene

Toggles lock of this scene

Scene settings

Design Window

This is where you will visually arrange your objects.




Adds a group object inside your scene

Adds a text object inside your scene

Adds a quad object inside your scene, for images and videos

Adds an embed object to your scene.  This is especially useful for Youtube or Vimeo streams. For Youtube, use URLs intended for embedding, which have the format https://www.youtube.com/embed/... 

Object Tree

The object tree shows all objects in the selected scene. You have the ability to modify any of the attributes including name, alpha, position, rotation and scale. The object list supports drag-and-drop as well as cut, copy and paste. A number of operations can be accessed through a context menu, by right-clicking on an object in the list.




Allows you to select the type of scene this will support.


The list of supported scenes is found in Content Control.

Attributes for your objects

Specific tag names based on the type of scene you've chosen.

Any object may contain a tag.   A quad can contain a tag associated with a logo, such as  ^score.home.media or ^story.media. A group may also contain a tag to hide the objects, such as ^score.pregame.

Additional tags can be found in Scene Tags.

Object Properties

The properties window allows you to set properties associated with the object type.

Text Objects and Fonts

See this page for a description of text objects and fonts.

Quad Objects and Materials




Width and HeightDimensions of the quad object in pixels
MaterialSelected material associated with this image (see below)
Scale TypeAvailable choices are AlignImage (keep image aspect ratio, do not exceed quad size, and align horizontally and vertically within the quad if image is smaller), SizeToFit (fill the quad, keeping image aspect ratio), Stretch (fill the quad, ignoring image aspect ratio) and ResizeQuad (resize the quad to fit the image).  
Horizontal AlignmentHorizontal alignment option, if Scale Type = AlignImage
Vertical AlignmentVertical alignment option, if Scale Type = AlignImage
Loop TextureIf a webm file is assigned to this material, select this to loop the video
Mute TextureIf a webm file is assigned to this material, select this to mute the audio

Materials List

The Materials list, like the fonts list, is organized by folders. The default and top-level folder is called Resources. If you click Show Folders, folders will show as a tree on the left:

You can use drag-and-drop to rearrange folders or to move materials to a different folder.

To add a new folder, right-click and select Add Folder:

To create a new material, click Add Material. If you right click on an existing material, you can select Edit, Delete or Duplicate:

When editing a material, you work with the Edit Material dialog:

The File field lets you select an image file (png, jpg, gif or webp) or a webm video file. The Animation Dir field lets you select a directory containing multiple images, which will be displayed in a loop to create an animation.

Finally, you can see which materials are defined but not used by selecting Tools > Unused Materials Report:

 

You can delete unused materials by selecting Tools > Delete Unused Materials.

Publish and Export

Once you finish designing your template, it is time to publish and export your project. 

Animation

Click here for information on animating your scenes.

User Scripting

Click here for information on writing your own scripts to customize scene logic.


In this section: