Adobe Animate: Creating Buttons and Interactive Movies

Name: Adobe Animate: Creating Buttons and Interactive Movies
Author: Jessica Henley

Learn how to create buttons and interactive movies.

Preview the first lesson free — get full access to all 3 lessons.

Course: On-Demand

Hello, my name is Jessica Henley and in these lessons you'll be learning about how to create movie buttons, creating a scene layout and how to create movie code snippets. In this lesson, I will show you how to create movie buttons. You can add the animation over the video or you can leave those off. For the movie buttons, navigating here to the library, you can see the tweens that I have added over my shapes. So you'll either have these tweens by adding your own animation over your video or you can leave those tweens off. As I right click in this space here, I can create a new symbol. This new symbol is going to be responsible for the play button, so I'm going to name it play button. Make sure that the type is set to button. Then hit OK. The canvas is still set to blue so that's why it's blue at this time. If you were to change it back to white, then whatever is on the stage here, it would also be changed. So just keep that in mind. For the play button, I'm going to use the line tool. Notice the shortcut for the line tool is the letter N. Now for properties, I'm just going to check on the size of that line. I'm gonna change that to three and check the outline color. I'm going to change that to black and go ahead and draw a play button symbol. So just gonna click here and create a play button. Now with the selection tool activated, you can put your mouse here. You can see that backwards L shape underneath the black arrow. You can actually move this tip around. If you have any spare lines, you can just click on it and hit Delete. Now to fill it with red, so I'm just going to select a red color, and here clicking on Paint Bucket, notice that the shortcut for paint bucket is the letter K. I'm going to click on Gap Size and change it to close large gaps and fill it. I didn't see any gaps before. Yours may automatically fill, but if it doesn't, you can check the close large gaps. Here we have the button, which is layer one and I can add more keyframes for up, over, down and hit. When you hover over it, I do wanted to change colors. So with that second frame selected, click on the selection tool. Notice when you click on it, everything is selected, so click off, select what's inside and you can actually change the color to any color of your choice. For down, I will do the same thing. Everything is selected. Click off, click the inside, and paint bucket. You could also leave it all red for all of the four frames. I like changing the color. That way as the user is placing their mouse over it, it will actually change the color. Heading to the library, I have the play button. Now I'm just gonna go ahead and also create the stop. I'm going to right click and create a new symbol and it's still set to button. I'm going to call that stop button. Here's a stop button, and here I'm just going to go ahead and click and hold the polystar. Go back to the rectangle tool. Choose a color for the stop button. For the stop button, I'll just pick a blue and make a square. Now what I wanna do is go ahead and hit the Insert Keyframe a few times for up, over, down and hit. Now clicking on over, what I wanna do is go ahead and as I click on it, notice that everything is selected. So clicking on selection tool, clicking in the background, I can click on the insert fill and change that. I also wanna change that to yellow. Likewise, for the down, click off on the background, click on the inside and change the color. Again, you can keep them all the same color if you like. In the next lesson, I will discuss creating a scene layout. Thanks for watching.

Advanced Provider : Jessica Henley 3 Lessons · 12m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

In this course, students will learn how to create play and stop buttons from scratch, and how to store them in the library. We will explore how to use the Tools Panel and discuss how to select from different tools to design the play and stop buttons needed for working with movies. We will also look at how to create a symbol for the button type, and the different button type settings we can choose. Students will learn how to pair the buttons they have made with the drag-and-drop programming code featured in Adobe Animate. We will discuss how to create a scene layout, including a movie file and synchronized buttons. We will also show students how to apply code snippets to the buttons to make the movie more interactive. In these lessons, students will learn how to create movie buttons, how to create a scene for interactive movies, and how to apply code snippets for a movie.

What You'll Learn

Create play and stop buttons from scratch and store them in the library
Use the Tools Panel to select tools for designing movie buttons
Create a symbol for the button type and choose button type settings
Pair buttons with Adobe Animate's drag-and-drop programming code
Build a scene layout that includes a movie file and synchronized buttons
Apply code snippets to buttons to make a movie more interactive

Key Takeaways

Play and stop buttons can be built from scratch and stored in the library for reuse.
The Tools Panel offers different tools that can be selected to design the buttons needed for working with movies.
Buttons can be created as symbols, with different button type settings available to choose from.
Buttons can be paired with the drag-and-drop programming code featured in Adobe Animate.
Applying code snippets to buttons makes a movie more interactive.

Frequently Asked Questions

What will I learn in this course?

You will learn how to create movie buttons, how to create a scene for interactive movies, and how to apply code snippets for a movie. The learning objectives are to create movie buttons, identify code snippets, and apply code to symbols.

What lessons does this course include?

The course includes three lessons: Creating Movie Buttons, Creating a Scene Layout, and Creating a Movie Code Snippet.

What skills does this course cover?

This course covers ActionScript, Adobe Animate, Adobe Flash, and Interactive Learning.

How are buttons made interactive in this course?

Students learn to pair the buttons they make with the drag-and-drop programming code featured in Adobe Animate and to apply code snippets to the buttons to make the movie more interactive.

How are play and stop buttons handled in this course?

Students learn how to create play and stop buttons from scratch, store them in the library, use the Tools Panel to design them, and create a symbol for the button type with different button type settings to choose from.