The first thing we must do to build our interactive web banner animation is to configure the stage and timeline. We’ll create a new HTML5 Canvas project and set everything up for subsequent lessons.
- [Narrator] The first thing we must do to build our…interactive web banner animation is to configure the…stage and timeline.…We've got a new HTML5 Canvas project here.…We just need to set everything up…for the subsequent lessons.…So, let's go ahead and change the stage color…for one thing.…I'm going to pop in some numbers here, 006699.…We get this nice blue color.…I'm going to also modify the width to 700 pixels,…and the height to 200 pixels.…
Then we'll center the stage, using the center stage button.…We're going to have eight layers in our timeline.…We've got one right now.…Let's create the other seven by choosing…the new layer button here, seven times.…There we go.…We have our eight different layers.…And now we'll name them all.…So, the first one is going to be actions,…and that's where all our code will reside,…so we'll lock that down.…The second one will be reserved for our title.…We'll need one for foreground elements.…
Happy bug for our little insect to reside upon.…A layer for our hill element,…and we have two layers for our bushes that are going…
- 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 Appropriate for all
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.