Okay - now that we have all of our assets created and the initial animation complete, we can move on to programming some interactivity into this banner. The first thing we must do is stop the animation on the final frame and then prepare some properties and variables for later use.
- View Offline
- [Instructor] Okay, now that we have all our assets created and the initial animation complete, we can move on to programming some interactivity into this banner. The first thing we must do is stop the animation on the final frame, and then prepare some properties and variables for later use. So inside of our Actions layer, let's go way down to frame 75 and we'll choose to Insert, Timeline, Blank Keyframe. This inserts a new blank keyframe right here on 75.
And here's where we're actually gonna go ahead and put all of our code. So to do that, let's open up our Actions panel from Window, Actions. With this opened up, I'm gonna paste in a snippet from our Snippets file, which you can find in the Exercise folders, and the first thing we do is tell the main timeline to stop, so this.stop. That will stop the playhead right here, and it won't continue looping. We'll also go ahead and enable Touch on the stage using the createjs.Touch class.
We'll also go ahead and enable mouse movement monitoring outside of the stage via stage.mouseMoveOutside setting equal to the Boolean of true. Now for the different variables we'll use throughout the interactive. The first thing we'll do is set a variable called root, and set it equal to this. This will allow us to access a number of different instances on the stage, even if we're not in scope. We'll then go ahead and set the midpoint. The midpoint is gonna be calculated based on this.stage.canvas.width / 2.
So if our canvas width is 700 pixels, the midpoint should be 350. We'll also determine where the bushes start off in terms of its exposition. For that, we'll calculate bushes1.x, and we'll preserve this so that we always know the origin point of our bushes and can move them back and forth accordingly. All right, that's it. We're now ready to move on with specific functional tasks.
- 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