The Picture editor is a complete paint package embedded in Clickteam Fusion 2.5. It contains all the necessary tools to draw, import and edit images.
Edit Area
The edit area, in the center of the dialog box, contains the image to edit. To draw, you have to select a tool from the Drawing tools on the left, select the drawing color(s) in the color palette on the right, and then use your mouse to draw in the image.
If the image is larger than the edit area, you can use the scroll bars to view the hidden areas. You can also press the SPACE key and move the image with the left mouse button without releasing the SPACEBAR key.
To zoom the image, either use the Zoom slider in the Drawing tools, or use the mouse wheel.
Drawing tools
Clear: erases the current image. | |
Import: opens the Import dialog allowing you to import an image file in the editor. See below. | |
Export: saves the image as an external file. | |
Options: allows you to choose the function of the right mouse click on the image, either the second (background) color, or pick a color from the image. | |
Cut: copies the current selection to the clipboard and deletes it. | |
Copy: copies the current selection to the clipboard. | |
Paste: pastes the content of the clipboard to the picture. | |
Delete: deletes the current selection. | |
Undo / Redo: cancels or redoes the last actions. | |
Flips the image horizontally. Press SHIFT to flip the alpha channel at the same time. | |
Flips the image vertically. Press SHIFT to flip the alpha channel at the same time. | |
Crop: resizes the image by eliminating the blank area around it. You can use a combination of keys to crop several images at the same time when you click on the Crop button : SHIFT to crop all the images of the current direction or image list, SHIFT + CONTROL to crop all the directions of the current animation, SHIFT + CONTROL + ALT to crop all the animations of the current object. | |
Transparency mode. In this mode you can choose to view and edit the transparent color, or the alpha channel. When drawing in the alpha channel, the color palette is replaced by shades of gray. | |
Magnifier: sets the zoom factor used to display the image. Use the slider beside the icon to change the zoom factor. | |
Selection: allows you to make a block around areas of the image. Use the Opacity slider to make the selected area semi-transparent. | |
Color picker: allows you to pick a color in the image using the mouse. The left mouse button allows you to pick the foreground color, the right mouse button allows you to pick the background color. | |
Brush: used to draw pixels and lines in the image. The options in the settings window allow you to change the size of the brush and modify its opacity. | |
Lines: allows you to draw straight lines in the image. The options in the settings window allow you to change the size of the line and modify its opacity. | |
Rectangle: used to draw rectangle shapes in the image. The options in the settings window allow you to choose between filled, outlined and filled+outlined rectangle, change the size of the border and modify the opacity of the rectangle. | |
Ellipse: used to draw circles and ellipses in the The options in the settings window allow you to choose between filled, outlined and filled+outlined ellipse, change the size of the border and modify the opacity of the ellipse. | |
Polygon: allows you to draw closed polygons. Draw the lines defining the polygon with the left mouse button, and close the polygon with a double click. The options in the settings window allow you to choose between filled, outlined and filled+outlined polygon, change the size of the border and modify the opacity of the polygon. | |
Shape: used to draw a closed shape with the mouse. The options in the settings window allow you to choose between filled, outlined and filled+outlined shape, change the size of the border and modify the opacity of the shape. | |
Fill: fills closed shapes with one color. You can change the color tolerance of the filling process in the settings window. | |
Spray: use a spray to draw in the image. You can change the size and pressure of the spray in the settings window. | |
Text: used to draw a text in the image. Choose the font and the attribute of the font, and enter your text in the dialog box. You can move the text with the mouse while the dialog box is open. The Import Font button is enabled when you edit a Counter, Score on Lives object displayed as Numbers. It allows you to import the numbers from a font. | |
Eraser: draws with the transparent color, therefore erasing the image. | |
Resize: used to resize the image. Enter the new size of the picture in the edit zones and click the Apply button. If you choose Proportional, the other coordinate will be calculated automatically to keep the proportions of the image. Stretch will stretch the image to the new size, Resample will resample the new image and produce a better resizing effect. | |
Rotation: used to rotate the image. Enter the angle and click the Apply button and this tool will rotate the image around its hot spot. | |
Hot spot: the hot spot is the point in the image corresponding to the actual X and Y coordinates of the object. You can set the position of the hot spot in the image with this tool. The Quick Move buttons allow you to move the hot spot to specific positions in the image: top-left, top-center, top-right, center-left, center, etc. If you are editing an image list, for example a direction in the Animation editor, you move the hot spot in all the images by pressing ALT while changing the position of the hot spot. | |
Action point: the action point is the location in the image where the action takes place (for example, when you launch an object, the bullet will be created at the position of the action point). You can set the position of the action point with this tool. The Quick Move buttons allow you to move the action point to specific positions in the image: top-left, top-center, top-right, center-left, center, etc. If you are editing an image list, for example a direction in the Animation editor, you move the action point in all the images by pressing ALT while changing the position of the action point. |
Color palette
The color palette depends on the object you are editing. If you are editing an object from the current frame, it will contain the 256-color palette of the frame. If you are editing the icon of an object, it will contain a standard Windows halftone palette. If you are editing an alpha channel, it will contain shades of gray. Click one of the colors in the color palette to select the color to use. Use the left button to select the foreground color, and the right button to select the background color.
The boxes below the color palette contain the background color, the foreground color and the transparent color. To draw with the transparent color, click the Transparent color box, with the left or right button. To customize the background or foreground color, double-click on it and select a color in the color selector.
Transparent Color
Each image in Clickteam Fusion 2.5 has a transparent color, even if it’s displayed as opaque. To change the transparent color, you can either press the SHIFT key while clicking on a color in the color palette, or select the Transparency tool in the toolbar and pick a color in the image.
In this version of Clickteam Fusion 2.5, any color can be transparent (in previous versions of Clickteam Fusion 2.5, only the black color was transparent).
Indicators
The 3 indicators at the bottom of the dialog box contain :
– The coordinates of the mouse cursor
– The size of the selection
– The RGB values of the pixel under the mouse cursor
Keyboard shortcuts
A = Rotate tool
B = Selection tool
D = Brush tool
E = Ellipse tool
F = Fill tool
G = Polygon tool
H = Hot Spot tool
L = Line Tool
M = Shape tool
P = color picker tool
Q = Action Point tool
R = Rectangle tool
S = Spray tool
T = Text tool
U = Eraser tool
W = Size tool
Y = Transparency tool
Ctrl + A = Select All
Ctrl + C = Copy
Ctrl + E = Edit alpha mask
Ctrl + I = Flip horizontally
Ctrl + J = Flip vertically
Ctrl + K = Crop
Ctrl + N = Clear
Ctrl + O = Import
Ctrl + S = Export
Ctrl + T = Show / Hide transparent color or alpha mask
Ctrl + V = Paste
Ctrl + X = Cut
Ctrl + Y = Redo
Ctrl + Z = Undo
Del = Delete Selection
Ctrl + Left Arrow = previous frame
Ctrl + Right Arrow = next frame
F2 / Ctrl + + = Zoom In
F3 / Ctrl + - = Zoom Out
F4 = Zoom x1
The Import dialog
When you click on the Import button, it opens a file selector, allowing you to select the image file to import. According to the type of image or animation you import, you will be able to select either simple image files, or animation files as well.
Note: numbered image files are considered as an animation. For example if you select the file IMAGE001.BMP and the files IMAGE002.BMP and IMAGE003.BMP exist in the same directory, Clickteam Fusion 2.5 will load the 3 images and display them in the Import Image dialog box.
When you have selected the image file to import, the following dialog box opens :
The top of the dialog box shows the picture to import. Use the scrollbars to display the hidden areas.
- Transparent Color
The color stated there will be taken as the transparent color (areas below the object will be visible). Use the Pick button to choose another color directly from the image, or double-click the colored square to choose a color in a color selector. If you do not want to use a transparent color, simply choose a color that is not present in the image. - Box mode
This option is very powerful: it allows you to capture several images contained in boxes in a single image file. In order for this option to work, you must respect some rules when saving the image file. First, every graphic you want to import must be surrounded by a rectangle of a color different from the background color of the image. The same color must be used to define all the rectangles surrounding the graphics contained in the image. Secondly (optional), you can define the hot-spot and action points of each image with a pixel of a different color in the horizontal and vertical lines of the rectangles. To define the hot-spot, indicate its position by a pixel of a different color in the top line (X coordinate) and left line (Y coordinate). To define the action point, put a different pixel in the bottom line (X coordinate) and right line (Y coordinate).
The capture process works from left to right and top to bottom (like reading). If you capture an animation, the top-left frame will be the first captured. - Import as Animation
If this option is not selected, the first imported image will replace the image currently edited in the picture editor. If this option is selected, another group of options becomes activated:- From Frame
Indicates the index of the first image that will be imported. - To Frame
Indicates the index of the last image that will be imported. - Replace current animation
The list of frames being edited will be cleared before importing the new images. - Insert before current frame
The imported images will be inserted before the frame being edited. - Insert after current frame
The imported images will be inserted after the frame being edited.
- From Frame
- Import selection
Imports the selected part of the image. To select a part of the image, click the Select button and draw a box around the area to import. - Import as selection
If this box is checked, the imported image will not replace the current picture, but will be imported as a selection in the picture editor.