The Frame Editor – Library Toolbar
The library toolbar is very handy to create games : it displays the content of the Clickteam Fusion 2.5 libraries of objects. It is very flexible and allows you to add new libraries in just a few clicks. Upon installing your version of Clickteam Fusion 2.5, the install program has automatically pre-defined the default libraries. To open a library, simply click on its folder name in the left panel. Then click on the name of the library in the right panel and your objects will appear in the window. To have a glance at the object in real size, simply double click on its icon. Just click somewhere on the screen to close this little window. To add a library. Have the library ready on your disc in a specific folder. Then right click on the library folder panel to open the popup menu and choose the New option. A directory selector will appear for you to enter the directory where your libraries are stored. Then you will have to enter a name for the new library… and your library will be ready for use. Libraries are simply Clickteam Fusion 2.5 applications saved in a library folder. Note: applications or library files created with older versions of the program are supported too, but .MFA files are displayed faster and use less memory when displayed as library. To delete a library. Select the library in the library folder, and right click on it. Then choose Delete. To rename a library. Select the library in the library folder, and right click on it. Then choose Rename and enter the new name. To add a Library object to a frame. Select the library in the library folder and drag and drop the object from the Library window to the frame editor. Note: if a library contains only one frame, only the objects of this frame will be displayed in the Library window. If the library contains several frames, the list of frames will be displayed as well. You can drag & drop frames from the library window to the Workspace toolbar, i.e. you can make your own Frame libraries to create frame templates for your applications.
The Frame Editor – Layers
Clickteam Fusion 2.5 contains a complete layers handling in the frame editor. Layers allow you to classify the priority of your objects in … layers. The foremost layer will have its objects above the others. The back layer will be displayed under all the other layers. More than that layers allow you to perform scrolling in runtime. To create a layer, you first have to open the layer toolbar : choose the “View / Toolbars / Layers toolbar” in the main menu and the layers toolbar should appear on the right of your window. As a default, Clickteam Fusion 2.5 creates one layer in which all the objects go. If you load an application made with a previous version of Clickteam Fusion 2.5 or with The Games Factory, you will find all your objects in the first layer. Lets see in detail the buttons contained in the layer toolbar: This button enables or disables the display of all the objects contained in the layer. You can only hide the objects of the non-selected layers. This button locks all the objects of the layer : they become non selectable. Very handy when you have a complex frame with loads of objects. This miniature shows the content of the layer. Adds a new layer to the list of layers. Deletes the selected layer from the list. Beware, all the objects contained in the layer are destroyed at the same time. Other possibilities To move a layer before or after another one, just select it and drag & drop it to another layer. To move an object to another layer, just select it in the Frame editor and drag & drop it to the other layer in the Layer toolbar. Layer properties When you select a layer, its properties are displayed in the Property window: Name Its name, displayed in the Layer toolbar. Visible at start Option to hide or show the layer in runtime when the frame starts. Save background Advanced option to allow you to disable the background saving of the objects of this layer if it doesn’t move. Disabling the background saving allows you to save memory and speed up the display. Scrolling Options X and Y Coefficients Allow you to define the layer speed relatively to the others in scrolling applications. Floating point values, 1.0 = standard speed. For example if the X scrolling coefficient of Layer 1 is 1.0 and the X scrolling coefficient of Layer 2 is 1.5, then Layer 2 will scroll 1.5 times faster than Layer 1. Wrap Horizontally If this option is selected, the background objects will wrap horizontally. Wrap Vertically If this option is selected, the background objects will wrap vertically. Effect Same effect as previous layer [Todo] Note: If your version has HWA features, layers also have Effect properties in HWA mode, look at the HWA section of this help for more information.
The Frame Editor – Object List window
On the left of the main frame editor window, lays a vertical window : the Object List window. This window displays all the objects of the frame. You can drag & drop objects from this window to the frame editor. Note: selecting an object in the Object List window will select all its occurrences in the Frame editor. Popup menus When you right click in the empty space in the window, a popup menu appears : Small icons Displays the objects with small icons (16×16). Large icons Displays the objects with large icons (32×32) Arrange icons No Does not sort the icons. by Name Sorts the icons by name. by Type Sorts the icons by type (active with active, text with text etc.) When you right click on an object, the following popup menu appears : Edit Opens the setup box or graphic editor for the selected object. Rename Allows you to rename the object. Preferences Opens the Preferences dialog box. Properties Displays the properties of the object in the Property window. Creating folders For large projects with many objects, you can reduce the number of objects displayed in this window by creating folders. In order to do so, you have to right click on the frame name in the workspace toolbar, and choose the option “New folder”. Once done, a new folder appears, and you can drag & drop objects to it.
The Frame Editor – Menu
The commands specific to the Frame editor in the main menu are the following: Edit Undo CTRL+Z Allows you to undo the previous command. Redo CTRL+Y Allows you to redo the previously undone command. Cut CTRL+X Copies the selected objects to the clipboard and deletes them. Copy CTRL+C Copies the selected objects to the clipboard. Paste CTRL+V Paste the content of the clipboard. Delete Del Deletes the selected objects. Warning: if these objects are attached to events in the events of the frame, the events will be deleted and won’t be restored by the Undo command. Clone Creates (a) new object(s) from the selected object. Duplicate Creates (a) new occurrence(s) of the object. Find all… CTRL+SHIFT+F [Todo] Select All CTRL+A Selects all the objects. Unselect Unselects the selected objects. Invert Selection Unselects the selected objects and selects the unselected objects. Edit Enter [Todo] Rename F2 [Todo] Insert Object CTRL+J [Todo] Properties Displays the properties of the selected object(s) and shows the Property window if it’s hidden. View Zoom Allows you to zoom the display in and out. Center Centers the view around the selected object, or around the center of the frame if no object is selected. Show Grid Displays the grid. Snap to Grid When this option is selected, the objects are positioned on grid nodes when they are created or moved. Grid Setup Allows you to edit origin and spacing of the grid. Previous Frame CTRL+← Edits the previous frame in the current editor. Next Frame CTRL+→ Edits the next frame in the current editor. Full Screen [Todo] Arrange Order: allows you to change the order of the objects. Note 1: some types of objects cannot go in front of, or behind other types in a given layer. Background objects cannot go in front of Active objects, and Active objects cannot go in front of Windows control objects. To display Background objects in front of active objects, you have to create a new layer and move these background objects to this new layer. Note 2: this doesn’t apply to Windows control objects or more generally to objects displayed in their own window, as this kind of object is always displayed above all the layers, and especially above any background or active object. To Front: moves the object in front of the others in the same layer. To Back: moves the object behind the others in the same layer. Forward one: moves the object in front of the next object in the same layer. Backward one: moves the object behind the previous object in the same layer. By X / Y: sorts the selected objects by decreasing or increasing coordinates. Align In Frame: allows you to align the selected objects relatively to the frame. Align Objects: allows you to align the selected objects with the master object of the selection. Space Objects: allows you to space evenly the selected objects horizontally or vertically. Make Same Size: allows you to make the size of the selected objects equal to the size of the master object of the selection, horizontally or vertically. Flip: allows you to flip the selected objects horizontally or vertically. Lock: allows you to lock all the objects of given types. Locked objects cannot be selected. Unlock All: unlocks all the locked objects. Note: an object can also be individually unlocked by pressing SHIFT+CTRL while clicking on it. Show Created Items: displays the objects created by Create actions in the event editor. These objects are hidden by default. Text Menu The commands in this menu only apply to text oriented objects. Typeface: allows you to select a new font for the selected objects. Color: allows you to change the text color of the selected object. Style: allows you to change the text style of the selected object. Align: allows you to change the text alignment of the selected object. Show #: shows the end of line characters (Formatted Text object). When you click on an object with the right mouse button, a context menu appears: This menu contains most of the commands described above, plus several specific commands: Edit: Opens the editor associated with the object, for example the picture editor for the Backdrop object, or the setup box of other objects. Insert Object: opens the New Object dialog box. Select the type of object you want to create and then click in the frame editor to create it. Create Quick Backdrop Object: Creates a Quick Backdrop object from the selected object. Create Backdrop Object: Creates a Backdrop object from the selected object. Create Active Object: Creates an Active object from the selected object. Lock: locks the selected object(s).
The Frame Editor – Toolbar
When the frame editor is open, some new tools appear in the editor toolbar. Zoom The zoom combo box allows you to set the zoom factor of the editor. Free Move [Todo] Paint Mode T [Todo] Grid Setup A click on this icon opens the grid setup dialog box. Show grid Click on this button to see the grid on the frame. Snap to Grid Click this button so that the objects snap to the grid nodes. Font selection Only active when a text oriented object is selected. Opens the font selector. Bold Click this button to turn the selected text into bold. Italic Click this button to turn the selected text into italics. Underline Click this button to underline the selected text. Text color Open this combo box to choose a new color for your text. Left align Click this button to align the text on the left. Center Click this button to center the text. Right align Click this button to align the text on the right. Center Frame This button centers the currently selected object in the editor’s window. If no object is selected, the frame is centered.
The Frame Editor – Overview
The Frame editor is one of the most important editors in Clickteam Fusion 2.5. It allows you to dispose all the objects of a frame of your application nicely, and create your display progressively. The Frame editor consists of 2 panes. The left pane, usually small and vertical, is called the Object List window. It lists all the objects used in the frame. The right pane displays, and allows you to edit, the content of your frame. Your frame is displayed in the middle of the edit area, and is surrounded by a gray area. The gray area is not displayed at runtime, you can use it to hide objects. You can change the size of the gray area in the preferences of the Frame Editor (Horizontal and Vertical Margins). If the size of the frame is greater than the size of the window of your application, the size of the window is represented by a hatched rectangle in the top-left corner of the frame. Usually the size of the frame including the gray, invisible area, is greater than the size of the editor’s window. To access the hidden areas, just use the scrollbars, or press the SPACEBAR key while moving the frame with the left mouse button. How to insert new objects To insert a new object, either choose the menu option “Insert / New Object” in the menu bar, or right click in the editor and choose the option “Insert object” from the popup menu. You will be presented with the object selector box, pick one object and then click into the frame at the position you want to put it. Drag & Drop You can drag & drop objects from: – the Object List window – the Workspace window – the Library window – another Frame editor – the same Frame editor When you drag an object from the Object List window, a new occurrence of the object is created in the frame. All the occurrences of the same object share the same properties. You can also create new occurrences with the Duplicate command in the frame editor’s context menu. When you drag an object from the Workspace window or from the Library window, a new occurrence of the object is created in the frame. If the original object is from a different frame and has no occurrence in the destination frame, then a new object is created and appears in the Object List window. When you drag an object from / to the same Frame editor, the object is moved. If you press CTRL while releasing the mouse button, the object is duplicated, i.e. a new occurrence of the same object is created. Note: when you drag an object, the mouse cursor contains a ‘+’ when the object is going to be duplicated, otherwise it’s going to be moved. When you drag an object between 2 different frames, by default the object is duplicated in the destination frame . If you press SHIFT while releasing the mouse button, then the object is moved, i.e. it is deleted from the source frame. If you use the right mouse button to drag & drop an object, when you release the mouse button you are presented with a popup menu, in which you can choose: – Copy here, to duplicate the object. – Move here, to move the object. – Cancel, to cancel the drag & drop operation. Selection To select an object, simply click on it. The number displayed in the top-left corner of the selection box is the number of its layer, followed by the number of the object in the list of objects of this layer. To select several objects, either draw a selection box around the objects to select, or press SHIFT while clicking objects to add or remove them from the selection. When several objects are selected, you will notice that one of them has a dark blue selection frame, while the others have a hatched blue selection frame. The object with the dark blue selection frame is the master object. The master object is used in some commands like the Align Objects or Make Same Size commands. For example with a Make Same Width command, all the selected (resizable) objects will be resized to the width of the master object. With an Align Objects / Left command, all the objects will be moved so that their left border is aligned with the left border of the master object. You can change the master object in the current selection by pressing CTRL while clicking on the new master object. Move objects To move objects, just select them and drag them. You can also manually change their position in the Size & Position tab in the Properties, and/or use the various alignment commands in the menu. Resize & Rotate objects Some objects can be resized or rotated. To resize an object, select it and then click on it once again: resize handles appears around the selection box. Click and drag the handles to resize the object. To rotate an object, select it and then click twice to make the rotation handles appear. Click and drag the handles to rotate the object. You can also manually change the size and angle in the Size & Position tab in the Property window. Properties When you select an object in the Frame editor, its properties are automatically displayed in the Property window; If the Property window is hidden, right-click the object and select Properties in the context menu. When several objects are selected, only the shared properties are displayed in the Property window. Refer to the section about the objects in this documentation for more info about their properties. Cut and Paste Like any editor, the Frame editor responds to cut and paste operations. You can cut an object, or several objects, and paste them at other locations. The Cut / Paste options are located in the main menu / “Edit”, or in the popup menu you
The Storyboard Editor – Menu
When you right-click on the frame thumbnail, a popup menu appears : Frame Editor CTRL + M Opens the frame editor on the selected frame. Event Editor CTRL + E Opens the event editor on the selected frame. Event List Editor CTRL + L Opens the event list editor on the selected frame. New Folder This option is not available in the storyboard editor. New Object This option is not available in the storyboard editor. Rename F2 Changes the name of the selected frame. Clone Creates a new frame by copying the current frame. All the objects and events are copied. Cut CTRL + X Copies the frame to the clipboard and deletes it. Copy CTRL + C Copies the frame to the clipboard. Paste CTRL + V Pastes the content of the clipboard at the current location. Delete Del Deletes the current frame. Warning : there is no Undo in the storyboard editor! Preferences Opens the preferences dialog box. Properties Opens the property toolbar if not already opened.
The Storyboard Editor – Toolbar
When the Storyboard editor is active, the editors toolbar shows the following icons : The Zoom tool Use the slider to set the zoom factor of the editor, from 0 to 200. Show headers If selected, the column headers are displayed. Show comments If selected, the frame details (Comments column) are shown. Unselect this option if you want to display a large number of frames.
The Storyboard Editor – Overview
The Storyboard editor is where you edit the frames of your application. It shows the frames in the order you entered them, and allows you to resize them, change the order etc. Although all the options of the storyboard editor can be found in the frame properties, some people prefer to use the Storyboard editor for the synthetic view it provides. Frame Number This shows the number of the frame in the application. A click on this button will open the frame editor. Thumbnail Presents a reduced version of the frame. A right click opens a popup menu. Title Shows the title of the frame. Click on it to edit it. Fade In Click on this icon to enter a fade in transition. The fade in transition is then showed as a line above the frame. Fade Out Click on this icon to enter a fade out transition. The out transition is then showed as a line below the frame. Frame size Select a preset frame size from a list via the context menu. Size of the frame Enter the size of the frame in the edit zones. Drag & drop The storyboard editor allows you to re-order the frame as you wish : just click on the thumbnail of the frame you wish to move and drag & drop it to another location.
