This will look somewhat familiar. We are going to replicate the bush movement from earlier in this course in order to make this project seem similar to a continuation of the previous one - once both are embedded within the same page - it will be a continuous experience for the user.
- [Narrator] This next part will look somewhat familiar.…We're going to replicate the bush movement…from earlier in this course in order to make…this project seem like more of a continuation…of the previous one.…Once both are embedded within the same page,…it will be a continuous experience for the user.…So, inside of switch state,…I'm gonna add something else in here.…For state one, and that is an event listener.…So I'm adding an event listener of type…stagemousemove, and I'm binding that…to the stage itself.…
When our project detects a stagemousemove event,…it will invoke a function called onMouseMove.…So I have another snippet that I can use…for onMouseMove, and for that, I'll bring it way up here…around line nine, and paste it in.…There's two things that I have going on here,…the first one is bushRestX, so,…this is exactly the same thing we did for…our interactive banner project for the mystery garden.…
Here it sets it, in this case,…to this.segment1.bushes1.x,…so it preserves that initial position of our bushes.…
- 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.