Join Chris Converse for an in-depth discussion in this video Combining video with animation, part of Edge Animate Essential Training.
- Video has become a popular format…for adding motion-design elements into a Web page.…Here we're going to incorporate video…into our composition as a design element.…Now, I have this really simple animation here,…I click and drag, and scrub the timeline,…we have a lower-third element coming up here,…with a message, and then after about…three and a half seconds, we have a logo that fades in.…Now, by itself this looks pretty boring.…What we're going to be doing is adding…an HTML5 video to the background,…and then the animation of the video can play…at the same time as the HTML5…animated elements on the composition.…
Let's click the Add Video button,…and in the Exercise Files, let's go…into 00 Assets, let's go down into Video,…into Encoded, and here I have the video…that's been encoded into MPEG-4, Ogg Theora, and WebM.…Hold the Command or Control key…to select all of these, click Open.…Now, when we import a WebM video,…Edge Animate will let us know that it does not…support that format to be displayed on the stage.…
Author
Chris Converse
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
-
Introduction
-
Welcome1m 1s
-
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
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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: Combining video with animation