Understanding the interface

- When you launch Edge Animate you're gonna be greeted with this splash screen. On the right hand side are a series of individual pages. We're on the What's New page by default. If you click getting started there's a series of in app lessons that you can use to further learn some of the features of Edge Animate. Under Resources are some online tutorials and videos. Again that will help you learn some of the features in Edge Animate. And then there's my favorite section over here called Quiet. Which will simply just make the screen nice and dark. Now on the left side of the screen we have three links. Open File, Create New, and Create from Template.

And as you start working with individual projects the recent files list here will give you direct access to projects you have recently worked on. Now in order to see the rest of the interface we will need to create a new project. So I'll come over here and click Create New. Now inside of her on the left-hand side of the screen is the Properties panel. The Properties panel is contextual to anything you have selected on the main stage. Which is here in the center. And this will give you all of the visual tools to create and manipulate compositions on the main stage. Across the top left we have a series of tools. Next to the tools we have a couple of presets and again we'll talk more about these later on in the course.

In the main stage area you'll notice that we're working in a html file. As we discussed earlier Edge Animate is always working inside of an html file. And it dynamically creates JavaScript as it needs to as we build our compositions. Next to the stage to the right we have the Elements Panel. Now the Elements Panel for those who are familiar with html, will show you all of the html that Edge Animate is going to create as you build your composition. So for example if I came over here and selected the rectangle tool and came down here and clicked into a rectangle now over here in the Elements panel I can see that this object is named Rectangle but the JavaScript is actually going to inject an html div element in the final project.

Now to the far right of the screen these are the same lessons that we saw on the Splash Screen. Now I'll close the Lessons panel so we have more room to work inside of Edge Animate. Under the Elements Panel we have the Library Panel. All of the elements that we can import into Edge Animate including things like Audio and Video, Images, and JavaScript files will all be referenced inside of this Library panel. And then finally down at the bottom we have our Timeline Panel. Most of the work that we're gonna do inside of Edge Animate is going to be between the Timeline Panel and the Properties Panel.

And now since I drew a rectangle on the stage if I select a rectangle on the stage down in the Timeline Panel I can see that's highlighted down here. I can also select items on the stage directly in the Timeline Panel. The Properties Panel has now updated all of its contents to tell me all the properties of that rectangle. And in the Elements Panel I can see that we also have the Rectangle layer selected here. So as we work inside of our compositions the panels inside of Edge Animate will always update contextually based on what's selected. Regardless of what method we used to make the selection.