Join Chris Converse for an in-depth discussion in this video Creating animations from a sprite-sheet animation, part of Edge Animate Essential Training.
- Another animation technique that we can use…inside of Edge Animate is a cell-based…or frame-based animation.…This is similar to traditional cartooning…where we have individual frames…played in rapid sequence.…Edge Animate has a great feature for…importing a Sprite Sheet and setting up our frames.…The first Sprite Sheet we're going to import…is going to have individual frames to make it look like…the coffee grinder on our Edge Animate stage…is grinding up coffee beans.…If you were to open up this Sprite Sheet…_coffee.png in the 00 Assets folder,…what you would see is basically six pieces of artwork.…
They're all cropped to the same shape which matches…the illustrator shape of the coffee grinder…and what I did is I created a bunch of noise…and then put in some random color bits to make it…look like the coffee was being ground.…What we're going to be doing is bringing this…into Edge Animate, defining out one individual cell,…and then Edge Animate will create an animated symbol…that will adjust the background image…
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
-
Migrating from Flash to Edge Animate
with Jake Ströh2h 27m 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: Creating animations from a sprite-sheet animation