In the previous video, we set up some initial variables to track the position of the bushes on-screen. We’ll now use some of these properties to make our bushes interact with the position of the mouse cursor across the stage.
- [Voiceover] In the previous video we set up some initial…variables to track the position of the bushes on screen.…We'll now use some of these properties to make our bushes…interact with the position of the mouse cursor…across the stage.…To do this, let's add some additional snippets below…our bushRestX variable declaration here.…I'll paste these in from our snippets file…and you can see that it's a single function.…What we do is we add an event listener using on…to the stage and the event we're listening…for is stagemousemove.…
The function itself is just right here.…And what this function does is it calculates a new…X position which is initially set to zero.…And it calculates that based on this if statement here.…So if the cursor X position based on event.stageX…is less than the mid point of the bushes that we calculated…up here, then the new X is going to equal the mid point…minus our cursor X position divided by 20.…
I divide it by 20 simply because I want to deaden…the impact of the actual change in pixels…
- 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.