Personal tools

Radi user interface

From RadiWiki

Jump to: navigation, search

Each document has a window that is split into two important parts: the editing workspace at the bottom, and the timeline at the top. At the very top of the window, there is also a toolbar that contains frequently used functions:


All the commands in the toolbar can also be found in either the application’s menus or as buttons below the timeline. If you don’t need the toolbar or your computer display is getting crowded, you can hide the toolbar in the View menu.


Editing workspace

The editing workspace is where you’ll be spending a lot of time when drawing or moving layers. It displays the web page that is being worked on. Around the workspace, you’ll find tools and document settings. They are shown in the following illustration:


(As an aside, the editing workspace in Radi is not actually a web browser in itself, but rather a hardware-accelerated display in which everything is rendered as close as possible to a real browser. Radi’s display architecture is optimized for multimedia, which allows it to be much faster than a browser for some operations like rendering video effects – this is crucial when you’re working on realtime video, for instance. You can always easily check what your content looks like in a real browser using the Preview or Publish commands.)

At the left-hand side of the workspace, the tool palette contains the tools that you can use for editing. When a tool is selected, its settings are shown on above the editing workspace. The tools are:

Select Layer Select, drag and scale layers.

When a shape layer is selected, you can also edit the shapes inside it. Double-click the layer to activate shape selection mode. A second row of editing tools will appear. These tools can be used to modify shape points and to toggle Auto-pose. To return to layer selection, click outside a shape.

Shortcut key: A (short for 'arrow')

Zoom Zoom the editing workspace.

To zoom out, hold down the Alt key while clicking.

Shortcut key: M (short for ‘magnify’)

Pan Pan the editing workspace.

You can also pan the workspace by holding down the Spacebar key and dragging inside the view. This way of panning works regardless of what tool is active.

Shortcut key: H (short for ‘hand cursor’)

Draw Shapes Create new shapes.

Start drawing a shape by clicking inside the editing workspace. Each click will add a new point to the shape. To finish the shape, either double-click or click on the first point again, or click the “Finish shape” button in the tool settings above the workspace.

Shapes must be placed within shape layers. If you don’t have a shape layer selected, you’ll be asked whether you’d like to create a new shape layer for drawing.

By default, shapes have straight edges. It’s possible to draw smooth curves as well. To create smoothed points while drawing, hold down the Alt key while clicking the points. Points can also be converted to smoothing later. You can use either the Select Layer tool or the Select Shape Components tool – select one or more points in the shape, then click “Convert > Smooth” in the tool settings.

Shortcut key: P (short for ‘pen tool’)

Draw Rectangle Create rectangle shapes.

You can create two kinds of rectangles with this tool. If the “Create fixed rectangles” checkbox is enabled, the new rectangles will be fixed in form – that is, they will always remain rectangles when edited. This is useful for creating objects that you know must remain boxes, so they can’t be accidentally edited.

If the “Create fixed rectangles” checkbox is not enabled, the new shapes will be as if they were created with the Draw Shapes tool: you can remove and add points, and move individual points to distort the rectangle into something else.

Shortcut key: R

Draw Oval Create oval shapes, for example circles.

Oval shapes are always fixed in form – they can’t be turned into regular shapes. (See discussion for Draw Rectangle above for an explanation of fixed shapes vs. editable shapes.)

Shortcut key: O

Brush Create shapes that are freehand brush strokes.

Anything that you draw with the Brush tool is a vector shape, so it remains editable and can be scaled and rotated without losing its quality.

The line width can vary within a brush stroke. Currently this pressure-like width variation is computed based on the speed of cursor movement: if you start a stroke slowly, it will be thinner at the start. (Wacom tablet pressure support will be added soon.)

If you’re working on realtime animation rather than pre-rendered video, be careful with complex brush strokes. When exported to HTML5 Canvas, they can create quite large files due to the complexity of rendering varying-width curves. If you find that your published files are too large, you can simplify the strokes by deleting points using the Delete Shape Point tool.

Shortcut key: B

Select Shape Components Select and drag shapes within a shape layer, and points within a shape.

You can also access this tool within the Select Layer tool – just double-click on a shape, and the settings for selecting shape components will appear as a second row.

Shortcut key: S

Delete Shape Points Delete points within a shape.

Click on a point to delete it.

Shortcut key: D

Create Text Create a new text layer.

Currently this tool doesn’t support any kind of editing; it can only be used to create new layers by clicking in the workspace.

To edit a text layer, use the Inspector window.

Shortcut key: T

Below the editing workspace are controls for zooming/panning and changing the document’s properties:


You can also zoom the view with the Zoom tool. The controls here are shortcuts to make it easier to zoom to a specific value (e.g. 400%). The “Center” button will pan the view so that the document lies exactly at the center of the view.

Document background is an important property, as it determines how your published web page will look outside of your top-level elements (and behind them). There are three options: transparent, solid color and pattern.

Transparent will result in a web page that has a transparent background. This is indicated by a gray “checkerboard” pattern. This setting can be useful if you intend to include your Radi creation within another web page.

Solid color sets the page background to a color. Click on the color button to open the Colors panel where you can change the color.

Pattern sets the page background to a repeating pattern image. Using a background pattern can be a great way to add life to your web page. When viewing the published page in a web browser, the pattern will fill the browser window.

To change and edit the pattern, click on “Pattern Properties”. This opens the pattern’s properties in the Inspector window. There you can change the pattern’s size and position and the pattern design. Radi includes a number of pattern designs by default such as fabrics, linens and brushed aluminum. You can easily tweak these readymade patterns by changing their background and foreground colors. This way, the pattern can be colored to fit your overall color scheme. It’s also possible to edit the patterns in more detail and to create your custom patterns. (For more information on using patterns, refer to the chapter “Creating vector shapes” in this book.)

Finally, the document’s size and timing properties are in the bottom-right corner of the document window. These include the display size of the document, its duration in frames, and the frame rate which determines how fast the animation proceeds. For example, if your frame rate is 20 fps (frames per second) and your document contains 100 frames, it will play for 5 seconds. (You don’t need to do convert frames to seconds in your head while working: the current time in seconds is shown in the top-left corner of the window, to the right of the Play button.)


Under construction


Under construction

Script Editor

Under construction

Conduit Editor

Under construction

This was Chapter 2 of the book Learn HTML5 Multimedia With Radi.
← Go to the previous chapter
Go to the next chapter →