Overview

The Toolbox offers quick-access to tools that can be used to manipulate, and create Elements directly on the 📘 Stage. These can be clicked directly in the Toolbox, but each also features a unique keyboard shortcut that can be pressed to activate each one.

Selection Tools

Noesis Studio offers two distinct selection tools that allow Elements to be selected and manipulated on the Stage; the 📑 Selection Tool and the 📑 Path Selection Tool. Between them, they each share similar 📑 Selection Mechanics, but contain unique functions tailored to each distinct Element type.

Path Tool

Selecting the Path Tool allows vector shapes to be drawn or modified directly on the 📘 Stage using the mechanisms outlined in 📘 Drawing Paths.

The Path Tool can also be activated by pressing P on the keyboard.

With a 📘 Path Element first selected on the 📘 Stage or in the 📘 Navigator Panel, the Path Tool can also be used to add, or remove Path Points from the selected Path.

Move Tool

Selecting the Move Tool allows any Element first selected on the 📘 Stage or in the 📘 Navigator Panel to be moved and resized direcltly on the Stage.

The Move Tool can also be activated by pressing M on the keyboard.

Although these features are also included in the 📑 Selection Tool and the 📑 Path Selection Tool, one particular advantage of using the Move Tool, is that these operations will be 'locked' to the selected Element, without the risk of accidentally selecting a different Element throughout these operations.

Clicking-and-dragging an Element with the Move Tool will adjust two sets of Properties in the 📘 Properties Panel:

• If the Element is within a 📘 Grid Element, its 'Column', 'Column Span', 'Row', and 'Row Span' Property values will update to reflect the new space the Element occupies within its 'parent' Grid.
• The Element's 'Margin' Property values will update to reflect its new position within its 'parent' Element.

Clicking-and-dragging the 'draggers' on each side and corner of the Element's adorner can be used to change its 'Width' and 'Height' Property values, whilst also automatically adjusting its 'Margin' Property values to reflect its distance from each edge of its 'parent' Element.

Transform Tool

Selecting the Transform Tool allows an Element to have many of its Property values edited directly on the 📘 Stage.

The Transform Tool can also be activated by pressing Y on the keyboard.

With the Transform Tool active:

• Clicking-and-dragging an Element can be used adjust its 'Render Transform: Translate X' and 'Render Transform: Translate Y' Property values.
• Clicking-and-dragging the 'draggers' on each side and corner of the Element's adorner can be used to adjust its its 'Render Transform: Scale X' and 'Render Transform: Scale Y' Property values.
• Hovering over any corner of an Element until the ↺ (Rotate) appears, then clicking-and-dragging can be used to adjust its 'Render Transform: Angle' value.
• Clicking-and-dragging the 'dragger' inside of an Element can be used to adjust its 'Render Transform: Origin' Property value.
• Clicking-and-dragging the 'draggers' outside of the adorners of the 📘 Rectangle Element or 📘 Border Element can be used to adjust its 'Radius X' and 'Radius Y' Property values and 'Corner Radius' values respectively.

Add Element Tool

The Add Element Tool visible in the Toolbox corresponds to the last Element selected in the 📘 Add Element Panel, and selecting it allows the Element in question to be directly 'drawn' on the 📘 Stage.

The Add Element Tool can also be activated by pressing E on the keyboard.

With the Add Element Tool selected, the Element displayed in the Toolbox can be added to the currently-open document by clicking-and-dragging on the 📘 Stage in the desired location and at the desired size.

Following a release of the click-and-drag, the Element will be added to the 📘 Navigator Panel, and similary to the mechanics found in the 📑 Move Tool, its 'Margin' Properties will automatically be set to correspond to its distance away from the edges of its 'parent' Element.

Furthermore, if the Element is 'drawn' within a 📘 Grid Element, its 'Column', 'Column Span', 'Row', and 'Row Span' Property values will automatically be set to reflect the cells within the Grid that the Element occupies inside of it.

Upon launching the application, the 📘 Button Element will be the default Element set in the Toolbox. Changing the Element can be accomplished by simply clicking any Element in the 📘 Add Element Panel. Making thiis selection will also automatically arm the Add Element Tool with the clicked Element type.

Gradient Tool

Selecting the Gradient Tool allows picking from a variety of powerful functions that allow the creation and customization of Gradients within Elements:

• Clicking on an Element with the Gradient Tool equipped, will instantly apply a default Linear Gradient to its 'Background' or 'Fill' Property, provided the Element offers one of these Properties.
• When a 'Background', 'Fill', 'Stroke', or 'Border' Property with a Linear Gradient or Radial Gradient is being modified in the 📘 Properties Panel, the Gradient Tool will be automatically selected, and allow modifying the Gradient's Properties either within the Brush Editor, or directly on the 📘 Stage, using the Gradient adorners.

The Gradient Tool can also be activated by pressing G on the keyboard.

With a Gradient applied to an Element Property, and the Gradient Tool active:

• Clicking-and-dragging the Gradient Spline's Start Point, or End Point can be used to change its angle, and length.
• Clicking along the Gradient's spline can be used to add additional Gradient Stops at the desired position.
• Clicking-and-dragging existing Gradients Stops can be used to reposition each stop along the Gradient's spline .
• Clicking an existing Gradient Stop, then either pressing Del on the keyboard, or dragging the Gradient Stop away from the spline, can be used to remove a Stop.
• Clicking an existing Gradient Stop can be used to select its Stop in the Brush Editor, from where it can be fine-tuned, including changing its Color.

Alignment Tool

Selecting the Alignment Tool allows multiple Elements to be aligned relative to each-other.

To activate the Alignment Tool, at least two conditions must be met:

1. At least two Elements must be selected using the techniques outlined in 📘 Multi-Selecting Elements
2. All Elements present in the multi-selection must be 'siblings' that both share the same 'parent' Element.

Once the multi-selection is active, the selected Elements will be adorned with a 'common' frame around them, representing the shared area they occupy on the 📘 Stage.

This 'common' frame forms the basis of the Alignment operation. As such, when an Alignment Mode is selected from the Alignment Tool, they will placed relative to this frame.

For example, selecting 'Align Left', will align the left edge of all selected Elements, to the left edge of their 'common' frame.

Setting an Alingment will adjust two sets of Properties in the 📘 Properties Panel:

• If the Elements are located within a 📘 Grid Element, their 'Column', 'Column Span', 'Row', and 'Row Span' Property values will update to reflect the new space the Elements occupy within their 'parent' Grid.
• The Elements 'Margin' Property values will update to reflect their new position within their shared 'parent' Element.

Universal Panels

• 📘 Navigator Panel
• 📘 Properties Panel
• 📘 Toolbox
• 📘 Stage Preview Toolbar
• 📘 View Toolbar
• 📘 Animation Timeline