Before we get into any of the interactive projects for this course... let’s have a look at how to enable mouse and touch interactions within an HTML5 Canvas project, and some of the fundamentals you should know when dealing with device limitations.
- [Voiceover] Before we get into any of the interactive…projects for this course, let's have a look at how…to enable mouse and touch interactions…within an HTML5 Canvas project, and some of the fundamentals…you should know when dealing with device limitations.…So you can see here I just have a basic HTML5 Canvas…Document open and I've renamed the initial layer to Actions.…The reason that I do that is because any code that we put…on our frame should not have any additional visual content…with it, no other assets, it should be reserved…specifically for code.…
This is a longstanding practice with Adobe Animate.…If we want to add code to this, what we would do is choose…Window and open up our Actions panel.…From here we can either type code or paste it in.…I have a piece of code in our snippets file that I'm gonna…paste in right now.…This might look like a lot of code, but what it does is it…demonstrates both mouse movement and mouse click.…If I hit Control or Command Enter we can see this in action.…
So as I move my mouse across the stage, the drawing API…
- 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.