The stage and timeline setup for this project should be fairly straightforward. We’ll again employ the HTML5 Canvas document type, and create a number of layers to hold specific pieces of content for use in our interactive.
- [Narrator] The stage and timeline setup for this project should be fairly straightforward. We'll, again, employ the html 5 canvas document type, and create a number of layers to hold specific pieces of content for use in our interactive. The first thing we'll do with this html 5 canvas document is change the stage color. I'm gonna use 006699 for this same blue that we used for the interactive banner project. The width will be 700 pixels, and the height, we'll set to 600 pixels.
Let's center this and add some additional layers here. We need four layers for this project. We already have one, so we'll use the new layer button to create three more, and then name them appropriately. This first one, we'll call actions, and this will hold all of our code for this interactive. The next one is winner, this will display our winner text once the user completes the interactive. The third layer here will be overlay.
This is simply an overlay that's gonna go over all of our content. And finally, this last one will hold our interactives, so we'll name it interactives. Okay, with the project configured in this way, we can go ahead and import the assets that we've already prepared.
- Implementing desktop and mobile interactions
- Designing an animated web banner
- Creating titles
- Programming the banner
- Publishing the banner
- Designing, programming, and publishing an interactive animation
- Importing visuals and audio
- Integrating Animate animations into a responsive HTML website
Skill Level Intermediate
Learning 2D Animation Principleswith Dermot O' Connor2h 25m Beginner
Adobe Animate CC for Web Designerswith Paul Trani1h 21m Beginner
2D Animation: Walk Cycles Basicswith Dermot O' Connor57m 24s Intermediate
1. Desktop and Mobile Interaction
2. Design an Animated Web Banner
3. Program the Animated Web Banner
4. Design an Interactive Animation
Import visuals and audio2m 52s
5. Program the Interactive Animation
6. Website Integration
- 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.Cancel
Take 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.