Was this video useful to you?
Rate this video from 1 to 5.


Harmony 11 - Interface

Familiarize yourself with the basics of the Harmony interface. Learn and recognize elements of the Stage workspace that you’ll be using most often when animating in Harmony. You’ll learn how to create a new scene from scratch, work with the different views (positioning and resizing views), locate menus, position and enable toolbars, create custom workspaces and navigate around the interface.

Video Transcript

Welcome to Interface, the first video in the Harmony Quick Start Video Tutorial series. The Quick Start Video Tutorial series was designed to give you a general overview of how to create an animation from start to finish. For more detailed information on any of the subjects covered throughout this series, please refer to the Harmony User Guide by going to Help > Online Help, or by viewing our more detailed video series available for free through our website, toonboom.com.

So in this tutorial, I'm going to go over the basics of the Harmony 11 user interface. But before we begin, let's actually close the software, and I'm going to say don't save, so I can show you how to launch the application and create a project from scratch. So if you're using a Mac, the first thing you need to do is go to Finder. If you're using Windows, you can go to the Start-up Menu, which is usually located at the bottom left-hand corner of the screen, and go to Programs and find Harmony 11. If you're using Mac, you would go to Applications and scroll down and look for Harmony 11. You may also have the desktop icons somewhere on your desktop and it would look something like this. So all I have installed on my computer is Toom Boom Harmony Stand Alone 11. You might not have the Stand Alone there if you have the full network version. So the difference is that if you're working for a company and there are multiple artists working on the same animation project, you're probably in a network situation. However if you're working by yourself at home alone and you don't need to work with other people for the project, you're probably working with Harmony Stand Alone.

So what I'm going to do is double-click on the Stage icon right here and the Toon Boom Stage Window appears, so I have the option of connecting to the database or to work offline. Once again if you're working in the network situation where you're not working with Harmony Stage Stand Alone, you probably want to connect to the database. But since I'm working alone on my own project I'm going to work offline. So I'm going to click on the OK button and now the Welcome Screen opens. So this is where you can choose all of the parameters for your new project. So let me just close the window behind so it's a little bit less distracting. So the first option that you have under the New Scene heading is your Project Directory. So this is where you would save your project. So you can click on this little folder button to Browse for New Location if you would like. So this is where I would like to save my project actually. It's my Harmony Scenes folder and it's where I already have the Interface project scene saved. So I'm going to click on the Choose button. Then I can select a name for my project. So let's call this one New Project. Then I can select the resolution of my scene. So my Interface scene is 1920 x 1080 with a frame rate, or otherwise known as FPS, frames per second, of 24 frames per second. And the aspect ratio is 1.78.

So just for the sake of selecting something different, let's choose maybe NTSC instead of HDTV Vertical and before I click on the Create button, I just want to bring to your attention that you can actually add a custom parameter. So if the dimensions that you would like are not listed here, what you can do is click on this [+] Button and it'll allow you to create your own name for the resolution you would like, to choose the width and height for that new resolution. It'll automatically show you the aspect ratio depending on the width and height that you choose. You can also change the field of view by making it horizontal, vertical or a custom field of view. And of course you can change the frame rate. So for example, you might want it to be 30 frames per second or 12 frames per second depending on your own needs. So I'm going to cancel this. And if you do create a new resolution, you always have the option of deleting it by clicking on this [-] Button here. I don't believe you can delete any of the default resolutions, but if you create a custom resolution, you can always delete it. The [-] sign would then be enabled because right now we see that it's greyed out.

So I'm going to go back to the NTSC and a few other things that I'd like to show you before I click on the Create button is that if you want to open a scene that already exists, you can always click on the Open Scene button or if you opened it recently, it'll be listed here. So this 01_Interface title is actually a link to open up that scene and if I created many more scenes we would see them listed right here. In addition to this, there's the Help Documentation that you can access here in the bottom right-hand corner. So you can either click on the Getting Started Guide to open that PDF or you can click on the Online Documentation, which will launch your default web browser to allow you to see all of our Online Help Documentation. So now let's click on the Create button.

And as you can see our new scene has been created here. We can tell this is NTSC because it looks less wide than the HDTV that we had selected previously, and we can see here at the top that it's called New Project, which is the title name that we gave our project. And if we go back to Finder, if you're using Mac, and if you're using Windows you can browse to the location where you saved your project, just to see that it's there. So here's my New Project folder. And we don't see any type of an icon like we do with Interface yet. So the X-Stage file, because we haven't saved anything in this project yet. So if I actually draw something and then save, now if we go back to Finder, you can see that that newproject.xstage file has been created.

So what I'm going to do now is just re-open my Interface project by clicking on this folder here, which allows me to open a scene. I'm going to go to the 01_Interface folder and then click on the 01_Interface.xstage file, and then click on the Open button. So let's continue by looking at the Camera and Drawing Views. And that's what these are called: Views. So this section right here, this section over here, this section over here, these are all called Views. So the Drawing View as you can see by default is white and it has no frame around it, unlike the Camera View which is in default grey, and you can see the boundaries of the camera frame. Just to give you a quick idea of what the differences are between the two, in the Drawing View you would draw your animation elements, such as your characters, objects for the scene, etc., and in the Camera View, you would animate those objects. Next we have our Tools Toolbar, which is this row of icons right here. It actually goes from the Select Tool all the way to the Grabber Tool, and stops right here where you can see this line with the little running man. These four tools right here belong to the Animation Tools Toolbar. So in the Drawing Tools Toolbar, you have your basic drawing tools that are pretty much universal throughout most drawing programs. You have your Select Tool, your Contour Editor Tool, your Brush Tool, etc., and any tool that has a little grey tab in the corner, if you hold down, reveals other tools hidden beneath. Just as a quick tip, if you want to know what the keyboard shortcuts are for any of these tools because you plan to use them often, you would go to the Drawing Menu at the top and select Drawing > Drawing Tools and here you have a list of all the tools as well as their keyboard shortcuts. Because I'm using a Mac, you can see my keyboard shortcuts are listed as [Option] and a character such as a letter or number. If you're using Windows, you would probably see [Ctrl] as opposed to [Option]. So unlike in the older version, you can actually float the toolbars. Like if you tried to pull them out by grabbing this tab, you see that they bounce right back to their previous position. However, you can grab these tabs and slide them around like this. You can also reposition them in the same toolbar like that for example. So now these two tools are at the end instead of at the beginning of this row.

And if for example you would like to see one of the View Toolbars that isn't currently visible...So a View Toolbar is a toolbar that contains tools and functions that are specific to that view. So for example, this toolbar right here is the Camera View Toolbar and all of these functions you would use in the Camera View. The same goes for this toolbar right here, which is the Timeline View Toolbar. But you can also have other toolbars obviously in the view such as the Playback Toolbar, which is in the Timeline View. So let's go to a view that doesn't have its toolbar visible, such as the Network View and what you can do is right-click anywhere on the grey bar on top, so this section for the Network View, this section for the Timeline View, this section up here for the Camera View. And then from that you can select the View Toolbar, which is usually the first one at the top and it's delineated by this line right here. So I'm going to select the Network View and as you can see its toolbar has appeared. I can also get rid of the toolbar in the same way and I can add an unrelated toolbar. So let's say the Onion Skinning Toolbar for example. And once again I can get rid of it the same way. Next let's take a look at the Tool Properties View, which is right here. Whenever you select a different tool from the Drawing Tools Toolbar or even sometimes the Animation Tools Toolbar, you'll see that the Tool Properties will change. So for example, if I select the Brush Tool, you'll see that now in the tool's Tool Properties we have all the properties for the Brush. This will also occur if you use the keyboard shortcut, such as [Option] + [S] for the Select Tool. And now you see the Select Tool's Tool Properties have appeared in the Tool Properties panel. And this of course makes sense because as you're working you need to access the properties for the tool that you're working with.

The next view I'd like to take a look at is the Timeline View, which is this view down here. It looks very much like the standard set-up for any other animation or video software program, where you have a left side and a right side, and a left side containing layers of the names of the elements, and the right side being where you animate those elements using key frames for multiple drawings. So the next view I'd like to take a look at is the Colour View, which is this view right here. And this is the place you would go to to create colours or select colours, either for changing the colour of a line as you're drawing or for selecting a fill colour. I'm going to go into greater detail about the Colour View in a later tutorial, but I just wanted you to know of the existence of this view. So now let's take a look at the Library View, which is right here. This is a view that is very practical for enhancing the speed of creation for projects. With the Library, what you can do is when you create characters or background objects, you can save them as templates in the Library for reuse in other projects or project scenes. It also allows you to share elements between scenes as well as a good place just to store items that can be re-used again and again. And once again, just like the Colour View, I'm going to go into the Library View in greater detail in a video about creating templates.

So one of the last things I'd like to take a look at is the Playback Toolbar which is here just above the Timeline, where it's actually housed within the Timeline View. This is the place you would go to once you've created a bit of animation to play it back. You can always loop it, you can view it with sound, etc., so this is a very practical toolbar to know about. And lastly I'd like to look at the Top Menu, which is the row of words here at the top or row of menu titles. Most of them might be familiar to you from other programs, such as the File Menu, which includes all the actions that you would need for a file, such as to save it, to open it, to close it, to export it, etc. Same with the Edit, you see a lot of common actions such as to cut, paste, copy, undo, redo, etc. So all of these menu items actually are for the most part, are redundant, so they carry commands or they house commands that can be accessed usually somewhere else in the software. But if you don't know where that command might otherwise be hidden, you can always go to the Top Menu and generally find it by section. So for example, earlier on we had looked at the Drawing Tools, so we went to Drawing > Drawing Tools. So this isn't just a list of the tools and their shortcuts. If you actually select one of these menu items, you have now selected that tool. So I selected the Text Tool and now it's now selected in the Tools Toolbar and it's ready for use in the Camera View or in your drawing space. That's the same with the Playback Toolbar for example. We saw it here above the Timeline, but if you go to the Play Menu, you can execute all the same commands as you would find in that toolbar, such as to play, to change your start and stop frame, etc.

So now that we're done looking at various sections of the user interface, let's take a look at how we can add views to the interface. So the first way that we could do this is by going to the Windows Menu at the top and selecting from this list a new view. So if we select the Coordinates and Control Points View, we'll see that it automatically appears as a floating window within the workspace. Another way of accessing a view is by going to a specific section, such as right here where the Colour and the Network is and by going to this [+] Button here in the corner and then selecting the name of the view. We'll see now it's actually anchored in this specific section of the interface. So we can always delete that.

You can also open up several instances of a view. For example, we can see that we have the Network View here. We can open the Network View again in the section above and this can be useful for several reasons. For example, if you have a very large network, you would be able to have an overall view of the Network perhaps in this top section and then here in the bottom, you may have zoomed in to one specific section of the Network. The only four views that you cannot open multiple instances of are the Timeline, Tool Properties, Colour and Drawing Views, and for some obvious reasons. For example, if you had two instances of the Drawing View and you were at a certain place in the timeline, the software wouldn't be able to know which drawing would exist on that cell in that frame. So the other thing you can do is move views from one place in the interface to another place in the interface.

So for example, if I grab this tab with the Network View's name on it and I click and I drag it out, I can pull that view out so that it's a floating window. Then I can grab the same tab—so the tab is this dark rectangle in the corner with the view's name, it's not this light grey bar here at the top, this is actually the Window Title Bar—and I grab this tab and I drag it over the other tab names in a certain section of the interface and then release, I can then dock that view in a new place in the interface. The other thing you can do is take a view and put it into a whole new section in the interface or create a new space for it somewhere in the interface. For example, if I drag it here, you can see a black line delineating a potential new place to dock the view. So if I then release my mouse, that view has now taken this real estate in the interface. You can also grab the space between two views to adjust the size of the view. So you can shrink one side or stretch it out like this. You can use these little arrows that you see to completely hide a certain view without deleting it. So I can then click on this arrow again and then have my Camera drawing space back. So that's sort of a temporary way of working in case you don't want to completely close a view. And you can do the same here, you can expand this view to take up two sections of the interface, so both the top section and the bottom section, then you can re-collapse this view here. So that's what those little arrows mean. I'm going to pull the Network tab out completely again and then just close it. And you can do the same thing with toolbars as well. You could go to the Windows Menu at the top, click Toolbars and then bring up a toolbar that isn't currently available. And if you end up moving around a lot of views of the interface, you might find that all of a sudden, you feel a little bit lost because you can't find certain windows, you don't like your layout, there are toolbars there that were missing before. I mean you could go through the Windows Menu to replace the views and the toolbars properly or you can do it all in one shot.

And you can do that by going to the Windows Menu at the top and by selecting Restore Default Workspace and this is really your best friend. And I'm just going to maximize that again. So the last thing I'd like to talk to you about is interface navigation and it's actually best shown in the Camera View. I'm just going to switch back to the Select Tool. So some of the things that you can do in a view is to zoom in and zoom out. And in Harmony, to zoom out you use the keyboard shortcut [1] and to zoom in, you can use the keyboard shortcut [2]. You can rotate the canvas using [Option] + [Command] on Mac or [Ctrl] + [Alt] on Windows. You can pan in a view by using the space bar. The Grabber hand will appear and then you can click and drag your canvas or camera frame down wards. If you're using a Wacom tablet or other touch devices, you can use the scroll pads and other buttons on those devices also to navigate within the interface. If you wanted to reset your rotation for example, you can also go to the View Menu and select Reset Rotation or use the keyboard shortcut [Ctrl] + [X].

If you'd like to reset all of your navigations, such as a zoom, a pan or a rotation all at the same time, you can use the keyboard shortcut [Shift] + [M]. So I'm showing you all of this in the Camera View. You can also do it in the Drawing View, which is a little bit more difficult to see because there is no frame, so you have no reference for something like a rotation unless there was something already drawn on the page. But you can also do it in other views. For example, if I click in the Timeline View, and you know that the Timeline View is selected because this thin red line is surrounding the view, and we call this thin red line the Focus. So once my Focus is on the Timeline View, I can use the same keyboard shortcuts to zoom in or zoom out. I can also do that with certain views such as the Network View. I can zoom in or zoom out, I can use the Grabber to pan, etc. And as I showed you before, you can find all of the keyboard shortcuts or all those commands also within the View Menu. So that's it for the tutorial Interface. Stay tuned for the next tutorial, How To Draw and Animate.