Personal tools

Creating Vector Animation in Radi (Part 1)

From RadiWiki

Jump to: navigation, search

This tutorial is a two-parter. In this first part, we’ll cover the basics of creating vector graphics and animation in Radi. This walkthrough is primarily about graphics and design tools, so you won’t need any knowledge of web design or programming to complete this tutorial.

The second part is a look at the more technical side of things, as I’ll show you how to integrate the animation created in Part 1 into a real web page. Specifically, the animation is used to provide a little entertainment while the website is loading some other content in the background. Nobody enjoys staring at a looping progress indicator, right…? Radi’s vector animation capabilities offer a lightweight HTML5 alternative to static images or small GIF animation loops which have been the traditional solution in these situations. Web development experience is not a requirement for the second part either, although it certainly helps things along if words like “AJAX” and “JQuery” don’t merely look like a jumble of random Scrabble letters to you.


Let’s get started! This tutorial will produce a silly little animation of a chubby bird peeking through a round window. We’ll also add some text and a hyperlink: when the animation is clicked, the browser is directed to another webpage. For an idea of what the finished product will look like, I’ve made a sample animation – click here to view my effort (and please excuse the lack of artistry).

You can also download this sample project's original Radi document file - click here (zip file, 57 kB).


Topics covered in this tutorial will include (in order of appearance):

  • Importing and exporting vector graphics
  • Drawing shapes
  • Using sharp and smooth corners
  • Modifying a shape’s appearance
  • Animating layer position using keyframes
  • Using parent layers for animation
  • Using clipping layers for masking content
  • Creating text layers
  • Creating simple links (redirecting the browser to a new page when the canvas is clicked).


Contents

Main character enters the stage – importing the bird

At the start of this tutorial, you should have Radi open with an empty document. The size the document can be 640 x 360 pixels (this does not need to be exact since you’ll be creating the animation to match the document size anyway, therefore it’s ok to use any other size). There is a template with a suitable size provided in Radi’s “Starting Point” window, so just select that and click “Create a New Document with Template”:

radi_birdtutorial_sshot01.png


The very first thing to do is to create the body of the bird. So that this tutorial can move along quickly, I’ve prepared this cheesy drawing beforehand for you. To get the bird on stage, we’ll create a layer to hold the graphic and then import it from a file.

Click on the <canvas> button under 'Top-Level Elements / Create New':

radi_birdtutorial_sshot02.png

Then click on the Shapes button under 'Content Layers / Create New':

radi_birdtutorial_sshot03.png

Now two layers are shown in the list at the top left-hand corner of the document window:

radi_birdtutorial_sshot04.png

The top-level element is a container that holds the actual content. This element is what the web browser sees when this document is published, so the choice of the element’s type is important in determining how this animation is rendered by the browser. There are four different elements, and admittedly their names are not exactly obvious at first glance – how does a ‘div’ differ from a ‘canvas’, you may ask? In practice, choosing between these elements is pretty easy because they work so differently. The decision comes down to fundamental factors such as whether you want the content to render in realtime, or whether it should be streamed from a file.

For now, we don’t need to worry about any of this. We’ll just use this single <canvas> element to contain everything. Canvas is the appropriate choice for the kind of lightweight vector graphics that we'll do in this tutorial.

What about the content layer called ‘Shapes’? It’s currently empty, but as the name implies, it can be used to contain vector shapes. Not all layers are created equal in Radi: each layer can hold a specific type of content. If you’ve used Adobe Photoshop, this concept will probably seem familiar as Photoshop has an essentially similar notion of special layer types. Some of the layer types in Radi are the same as found in Photoshop, for example Adjustment layers and Text layers. Other layer types are different or all new – for example, in Radi you can create HTML content layers that are like live web pages that can be rendered anywhere, even inside a movie.

An important thing to understand about content layers in Radi is that they are always limited by the element that contains them. Each content layer tries its best to render itself within the element, but it can happen that the element fundamentally can’t support the type of content. For example, when you place a Movie content layer inside an Image element, it will only be able to render the first frame from the movie for the simple reason that an Image is a still picture; it can’t represent motion content. The same kind of thing happens when placing a Movie in the Canvas element: canvas is meant to represent vector graphics and dynamically rendered animation, it can’t deal with large video streams. Another limitation of Canvas is that it doesn’t support all the image filtering that you can do using Radi’s effects.

Again, this is something that we don’t need to worry about right now. In this tutorial we’ll use only the features of Radi that are needed for sharp vector graphics, so we won’t hit the limitations of the Canvas element. (More fundamentally, I would argue that the existence of these limitations is actually a sign of how Radi is designed to give you the maximum amount of flexibility: no other app covers the whole range of HTML5 web content, from video filters to realtime vector graphics, with the possibility to move content between element types at will.)

To bring some content to the stage, we’ll now import the bird from a file. First download the bird from here: zip-compressed file (small file, about 3 kB). You can place the file anywhere and delete it after you’ve got the bird imported – the file is not needed by the document after the import.

Select the layer ‘Shapes’. If the Inspector window is not open already, open it from the toolbar. At the middle of the Inspector, we see an empty space with some buttons below it:

radi_birdtutorial_sshot05.png

This space will contain a list of the shapes on this layer. To import the file, click on the ‘Tools’ button and then choose ‘Import Shapes from Text File’. A file browser window opens. Select the file you downloaded above, and click Ok. The bird should now appear in the document:

radi_birdtutorial_sshot06.png

Note that three separate shapes were imported:

radi_birdtutorial_sshot07.png

These are the body and two smaller shapes for the beak. You can select the individual shapes in the list in the Inspector, and you’ll see that the shapes’ properties such as “fill color” are shown according to what you can see in the document.

Add some emotion – drawing the eye

The bird is clearly lacking in expressiveness. Let’s give it an eye to fulfill the minimum requirements of an actual face, and get our hands dirty with Radi’s drawing tools.

The eye will be placed on a separate layer. This is so that we can animate the eye separately from the body later on.

First, let’s rename the ‘Shapes’ layer to something more descriptive, so that we don’t get our layers mixed up. Click on the layer in the document’s layer list and enter a new name, for example ‘bird’:

radi_birdtutorial_sshot08.png

Now click on the Create Shapes layer button again. Another layer appears on top of the bird layer. Rename the new layer to ‘eye’:

radi_birdtutorial_sshot09.png

Next, we’ll draw on the new layer. Select the Draw Shape tool from the toolbar at the left-hand side of the document viewer:

radi_birdtutorial_sshot10.png

Click in the viewer to make the eye shape. About six points is enough; the shape can be very rough at this point. Click on the ‘Finish shape’ button to complete it:

radi_birdtutorial_sshot11.png

Next, we’ll apply smoothing to the shape. Select the Select Shape Points tool from the toolbar:

radi_birdtutorial_sshot12.png

Click on a point on the shape to select it. From the buttons above the document viewer, click on “Smooth” under ‘Convert Selected Points’ to make the point become automatically smoothed:

radi_birdtutorial_sshot13.png

Apply the same operation to the rest of the points as appropriate. (You can select all the points and click on Smooth just once to apply the smoothing to all the points.) Then drag the points to make the eye shape more symmetrical – or whatever you prefer, of course.

Now we have the white of the eye, but we also need a pupil. We’ll draw it with the Draw Ellipse tool:

radi_birdtutorial_sshot14.png

Set the fill color of the pupil to black. Now the eye is complete:

radi_birdtutorial_sshot15.png

Flying around – creating keyframes

Now that we have a semblance of a bird, we’ll give it a flight plan. The bird will move in from the left to the middle, then back again, and peek up from the below. To accomplish this animation, we’ll place keyframes on the bird’s transform properties. These include position, scale and rotation. By animating these properties, we can move the bird between any place and orientation possible within the canvas.

The easiest way to create animation in Radi is to use the automatic keyframing feature, or simply “auto-keyframe”. When it’s enabled, any changes that you make to a layer are automatically recorded as keyframes. You can do changes either visually, by dragging or resizing the layer in the document viewer, or numerically using the Inspector window. Let’s try both.

To enable auto-keyframe, click on the checkbox at the top of the Inspector window:

radi_birdtutorial_sshot16.png

Now a big red key is displayed to indicate that auto-keyframe is on. (It’s red so that it would act as a more efficient visual reminder that any changes will be recorded – nobody likes having to undo accidentally created keyframes!) As you can see in the above screenshot, the same checkbox and red key icon are also shown above the document viewer when the Select Layers tool is enabled. (For other tools, the red key isn’t shown there because those tools can’t effect the kind of changes that would result in keyframes.)

Let’s try this in action. Select the bird layer and go to frame 1 on the timeline. (To move the playhead to a specific position, you can either click on the timeline area above the layers, or use the buttons to the left of the timeline.)

Drag the bird to the left. What happens is that the eye we drew will get left behind – we’ll fix that issue momentarily. For now, let’s just ignore it.

Then, move to frame 30 on the timeline, and drag the bird to the right, somewhere close to the middle of the document area. You should now see two keyframes being shown for the layer; these are the keyframes that were created by auto-keyframe:

radi_birdtutorial_sshot17.png

The dragging that we did only created position keyframes. Let’s add scaling as well. Go back to frame 1 and click and drag on one of the handle boxes at the corners of the layer:

radi_birdtutorial_sshot18.png

When you drag the handle up, the bird is scaled larger. Note that as you drag, the bird is being scaled around its anchor point. This point is the origin of the layer – effectively, when the layer is scaled or rotated, this point doesn’t move. The anchor point is shown visually as a little crosshair icon, so you can drag it around as well:

radi_birdtutorial_sshot19.png

The anchor point’s location can also be animated using keyframes, just like the layer’s other transform properties.

Now move to frame 30 again, and scale the bird so that it’s slightly bigger than at frame 1.

Click the Play button (located above the layers list, to the left of the timeline markers). You should see the bird moving and growing larger. Congratulations, you’ve animated something!

Parenting layers together

This achievement of creating a few keyframes is admittedly blemished by the fact that the eye of the bird didn’t follow along for the ride. Let’s fix that.

Radi has a feature called “parenting” that allows one or more child layers to follow a parent layer. The child layers “inherit” the transformation of the parent, but they can also move independently. The actual movement of a child layer is therefore a combination of the parent’s and its own. A simple example of this kind of behavior would be the Earth and the Moon: the Moon follows Earth on its orbit around the Sun, but it also moves on its own orbit around the Earth.

In this case, it’s clear that the eye layer should become a child of the bird layer. To make the bird the eye’s parent, select the eye layer. In the Inspector window, click on the Parent pop-up button and choose “bird”:

radi_birdtutorial_sshot20.png

Now click Play and watch how the bird moves to the center of the stage, its eye staying put on the bird’s face, staring at you, unblinking.

The clipping layer, revealed

Let’s give the bird the ability to blink. One easy way to accomplish this is to use a clipping layer. With this feature, we can hide part of the eye according to the shape of another layer. This is the clipping layer: it acts like a stencil or a mask that reveals parts of the layer below it.

Clip, stencil, mask, matte – you may encounter these words in computer graphics, and they all mean basically the same thing. The reason for the confusing nomenclature has more to do with history, as each field developed its own terminology. For example, movie people talked about mattes because that’s what they were called when working in film. (In case you’re younger than 20, I should clarify that ‘film’ refers to a plastic strip covered with light-sensitive silver particles. It was used as a ubiquitous photographic medium before the invention of JPEG and digicams… Ask your dad for more information.)

In Radi, you can turn any layer into a clipping layer. This offers a lot of creative potential: you can create masks of any complexity, and then animate those masks as needed to create unexpected combinations of the mask shape and the content layer below it.

In this case of the eye-blink, the clipping layer can be very simple. We’ll just use a rectangle shape, and then move that rectangle every now and then so that the eye gets partially hidden. This is enough to create the illusion of a blink.

We need another layer, so click once again on the Shapes button in Content Layers / Create New. (If the new layer didn’t get placed above the eye layer, drag it to the top in the layers list.) Rename this new layer to ‘eye blink mask’, or whatever you feel is appropriate.

Then choose the Draw Rectangle tool, and draw a rectangle that covers the eye:

radi_birdtutorial_sshot21.png

Next, click on the “Clipping layer” checkbox in the Inspector:

radi_birdtutorial_sshot22.png

The rectangle you just drew seems to have vanished from view. But try to drag it in the document viewer – you’ll see that, as the rectangle moves, the eye becomes visible only when it’s covered by the rectangle. We’ll use this to create blink.

Before keyframing, let’s ensure that this mask follows along with the eye automatically. Set the ‘eye’ layer as the parent of the mask layer. (See the previous section for more information on how to set one layer as the parent of another.)

Enable auto-keyframe again and go to frame 40. Drag the clipping rectangle so that it completely covers the eye:

radi_birdtutorial_sshot23.png

Then go to frame 45, and move the rectangle down so that it the upper half of the eye gets hidden:

radi_birdtutorial_sshot24.png

Go to frame 50, and move the rectangle back up. Now we have a 10-frame animation of the eye blinking. Click Play to watch it and ensure that it looks as expected.

Clipping with one mask is fine and dandy, but what if we want more clipping? It’s not uncommon that a layer needs to be clipped by its own mask (as in the case of this blink rectangle), while also clipped by a larger mask. For a visual example of what this looks like, check out my implementation of this tutorial: Watch example animation. As you can see, the bird is peeking through a round hole. This is a clipping mask that affects both the bird and the eye layers.

In this case, the eye still has its own clipping layer, but it has also inherited the mask from its parent. This is very easy to set up – just check the box labelled “Inherit clipping” in the child layer’s properties:

radi_birdtutorial_sshot20.png

Now for some content – adding text and links

My example implementation has two more features that are yet to be covered. At the end of the animation, the round layer through which the bird is peeking expands to show some text. Also, you can click on the animation to proceed to another website. Let’s see how this is implemented.

To create text, use the Draw Text tool. In its current incarnation, this tool doesn’t support paragraph boxes or any other fancy features… So all you can do with the tool is to click at a point in the viewer and a new text layer appears:

radi_birdtutorial_sshot25.png

To modify the text’s content and appearance, use the Inspector:

radi_birdtutorial_sshot26.png

Color, line height – these settings are all pretty basic and common, so I won’t bother explaining them in more detail. Something more unique to Radi here is the “dynamic text” option, which allows you to create text whose content you can change while the animation is running, via JavaScript. But this goes out of the scope of this tutorial (and I promised there wouldn’t be too much programming), so please check out Part 2 of this tutorial for more information on how to use dynamic text.

The other thing we still need to cover is the link that takes you to another website when the animation is clicked. All right – this does require some scripting (so much for my ‘no programming’ promise). But it’s very little. Let’s dive in at the shallow end…

The basic tenet of interactivity in Radi is that you can make top-level elements react to events. In this context, an ‘event’ is anything that the user does in a web browser: clicking with the mouse, pressing a key, etc. So, in this case, we want to make our canvas element respond to clicks.

Select the ‘Canvas element’ in the layer list, and have a look at the Interactivity section in the Inspector window:

radi_birdtutorial_sshot27.png

As you can see, I have entered the following line to be executed at the ‘click’ event:

 env.sceneRoot.canvasClicked(event)

This calls a function in the ‘scene root’ object. The name of the function, ‘canvasClicked’, has no special meaning; it’s chosen by me to be somewhat descriptive of what happens. You could use any name for this function. Only the ‘env.sceneRoot.’ part needs to be written exactly like this, because the scene root is a special object created by Radi in the web browser, and if this reference is wrong, the function would never get called.

So, when the user clicks on the canvas, the function called ‘canvasClicked’ gets executed. Let’s open the Script Editor window to see what this function actually looks like:

radi_birdtutorial_sshot28.png

Here is the code for the function:

 this.canvasClicked = function(event, rd) {
    if (env.currentFrame >= 260) {
      window.location = "http://twitter.com/pauliooj";
    }
 }

In my version of the animation, the text that entices the user to click on the animation doesn’t appear until a specific time in the animation. Therefore I’ve limited the interactivity so that when the user clicks the element, nothing happens unless the animation is past a specific time. (In this case, it’s frame number 260.)

Let’s quickly go over this function line by line. This requires basic knowledge of JavaScript, so feel free to skip over this part to the next section if you’ve promised your grandmother that you’ll never learn JavaScript, or have some other incredibly good reason to avoid the healthy fun that is programming on the web…

On the first line, we define “this.canvasClicked” as a function. The word ‘this’ is special in JavaScript. Here, it refers to the scene root object. Radi does things this way to ensure that the scene root is properly isolated from whatever other scripts are running in the same document; hence you need to include the ‘this’.

The function gets two arguments, ‘event’ and ‘rd’. ‘Event’ is an object that is passed to us by the web browser. It can be inspected to figure out things such as where on the screen did the click occur. ‘Rd’ is an object provided by Radi. It can be used to access the state of the animation’s layers, but that’s out of scope for this tutorial.

On the second line, a simple ‘if’ statement is used to check whether the animation is currently at frame 260 or beyond. The ‘env’ object here is provided by Radi. It provides access to the animation’s rendering environment, for example the current frame, which here is being read by accessing the ‘currentFrame’ property.

On the next line, we redirect the web browser to a new page. This is standard JavaScript. ‘Window’ is a special object that represents the web browser, and ‘location’ is a property that determines the currently shown page. To change the page, we simply set the location to a new URL – in this case, my Twitter account. (Feel free to mock me for being a social media hound desperate for attention.)

What next

That’s it for Part 1 of this tutorial. I’ve covered all the features that were used to produce my version of this tutorial animation. Although we didn’t get very far with animation here, having produced just a few keyframes, you now hopefully know how to continue with animating the bird, animating the eye blink, and perhaps adding a larger mask like the round hole in my example.

To view your animation in a web browser, click on the Preview in Browser button in the toolbar. It will open the file in your default browser (which on the Mac is Safari, if you haven’t changed the default).

When you’re ready to do something with this animation outside Radi, you can publish it as a HTML file – click on the Publish button in the toolbar.

Usually, you’re not making a web site that consists only of Radi animations. Rather you have some other content and you want to place the animation inside a web page. Embedding Radi animations in this way is fairly easy and accessible to anyone with a little knowledge of HTML. I’ve written a separate tutorial about embedding: Embedding Radi


Thanks for reading this far!

In Part 2, the topic of embedding is discussed on a deeper level. The animation produced here will be used as a loading screen that runs while the web site is busy loading some other content in the background. This is a typical scenario on so-called “AJAX” websites. Hopefully this can give you some ideas on how Radi can be used to easily produce entertaining content for modern websites. Radi’s animation engine is lightweight, so it can be deployed even for creating small animated graphics such as sophisticated progress bars or graphics overlays.

Proceed to Part 2 >


If you have any questions or suggestions, please email me: pauli at-symbol lacquer dot fi