- 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.
Author
Released
12/5/2014Want to learn more? Join Chris Converse in this course, as he covers all the essentials of this powerful toolset. Chris shows how to build basic compositions with shapes, text, images, and HTML5 video; animate the different elements; trigger actions and events; and incorporate custom CSS and JavaScript effects. He also shows how to make your Edge Animate layouts responsive, embed web fonts, and accommodate older browsers. When your composition is complete, learn how to add it to a webpage or take content into other applications like InDesign, Dreamweaver, Muse, and iBooks Author.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications
Skill Level Beginner
Duration
Views
Related Courses
-
After Effects CC 2013 Essential Training
with Ian Robinson14h 51m Intermediate
-
Introduction
-
Welcome57s
-
What is HTML5 animation?1m 23s
-
Understanding the interface2m 45s
-
-
1. Creating Content in Edge Animate
-
Creating a new project4m 16s
-
-
2. Preparing Web Assets for Use in Edge Animate Projects
-
Encoding HTML5 audio4m 25s
-
Encoding HTML5 video4m 55s
-
Adding external JavaScript3m 18s
-
3. Working with Web Fonts
-
4. Compositing Layouts
-
Creating a composition7m 11s
-
Creating complex artwork5m 8s
-
Creating reusable symbols5m 41s
-
-
5. Making Your Compositions Responsive
-
Using responsive presets3m 30s
-
6. Creating Animations
-
Animating elements7m 26s
-
Creating an animated symbol5m 48s
-
-
7. Working with Actions
-
What is an action?5m 28s
-
Using swipe gesture events5m 10s
-
-
8. The Code Panel
-
The Code window interface5m 34s
-
-
9. Considering Older Web Browsers and Network Speed
-
10. Going Beyond the Edge Animate Interface
-
Using self-hosted fonts3m 16s
-
Creating rollover effects4m 41s
-
11. Publishing Your Edge Animate Project
-
Publishing for the web4m 34s
-
-
12. Adding Edge Animate Compositions to Existing HTML Pages
-
13. Using Edge Animate Compositions in Other Authoring Applications
-
Using OAM files in Muse3m 2s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Understanding the interface