The little bug is so central to the overall banner - and there is even more we can do to interact with him. We’ll now make it so if we touch the bug with our cursor - he’ll duck away and hide… wait a bit… and then slowly emerge once again. We’ll accomplish this with CreateJS tweens!
- [Narrator] This little bug is so central…to the overall banner and there's even more we can do…to interact with him.…We'll now make it so that if we touch the bug…with our cursor, he'll duck away and hide,…wait a bit, and then slowly emerge once again.…We'll accomplish this with CreateJS tweens.…So, right underneath our variable declarations,…I have another code snippet to punch in…from our snippets file…and there's a couple of different things…that are being included here.…The first two are bugRestX and Y.…
This is going to preserve the initial X and Y position…of our bug head.…We'll use this later on,…inside of our click and emerge functions.…The next thing we do is attach a event listeners to bughead.…So this one here is adding an event listener…using on, off type click to bughead.…So whenever we click on bughead, this will fire off.…And what we'll do is use createjs.Tween…to create a new tween.…
The target is gonna be root.bughead…and this time we actually don't want…to override anything else.…We want this animation cycle to complete…
- 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.