7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Flash

Quick Tip: Exploring the Flash CS5 Code Snippets Panel

Scroll to top
Read Time: 3 mins

In this Quick Tip I'll show you how to use the brand new Flash CS5 Code Snippets Panel to easily add keyboard and mouse interaction to your projects, without necessarily needing to learn AS3. Let's take a look!

Final Result Preview

Here is the final result we're gonna achieve. With the help of the Code Snippets Panel we use Click Movie Clip as a button to start animation. Also, with keyboard arrows you can move "active.tutsplus.com" logo and if you click on it, it will take you to the site. These functions are carried out with the help of the Code Snippets Panel.

Step 1: Load Project

Download the Source zip file using the link above and extract it somewhere.

Open Adobe Flash Professional then click File > Open.

Step 2: Open Source File

Select the downloaded source file "Quick_Tip_Code_Snippets.fla".

Step 3: Set Instance Name

Here at our disposal is a Flash Banner. In order to give it some functionality we're gonna use the new Flash CS5 Code Snippets Panel. Let's start with "Click" Movie Clip. Choose layer "Click" and then the Movie Clip itself with the Selection Tool (shortcut V). In the Properties window give it the Instance name "Click".

Step 4: Open Code Snippets Panel

Now open your Code Snippets Panel (if you can't see it, go to Window > Code Snippets). Select category Timeline Navigation > Click to Go to Frame and Play. Double-click it.

P.S. Remember that before opening Code Snippets Panel the "Click" Movie Clip should be selected.

Step 5: Alter the Auto-generated Code

After that the Action panel will be opened and you'll see some code with instructions. Let's follow the instructions and change number 5 in the brackets to number 2. This will cause our animation to play from frame 2 if we click our "Click" Movie Clip.

I've added some animations to the timeline from frame 2 onwards, so you will see them play once the button is clicked.

Step 6: ActiveTuts Movie Clip

The next thing we should do is to give some functions to our ActiveTuts Movie Clip. Select it on the stage and give it the instance name "ActiveTuts".

Step 7: Movement with Keyboard

With the Movie Clip "ActiveTuts" selected go to Code Snippets Panel > Animation > Move with Keyboard Arrows. We won't change the default parameters of the code as they serve well. This function will allow us to move our ActiveTuts Movie Clip with the keyboard arrows.

Step 8: Clickable Link

In addition, let's make our ActiveTuts Movie Clip behave like a link. Again with it selected go to Code Snippets Panel > Actions > Click to Go to Web Page.

You should have the following code in your Actions Panel:

Step 9: URL

Our Actions Panel will be opened and there we'll see some instructions on how to change the URL we need. In my case I'll change it to "https://code.tutsplus.com/categories/flash".

The last thing we need is to write a stop() function at the end of the code on frame 1. After this you can preview what we've achieved.


You now know how to use the new Code Snippets Panel! It's useful both for people who know AS3 (saves some time) and for those who begin to dive into it. It gives an opportunity to add some actions to the objects without writing a single line of code!

I hope you liked this Quick Tip and that it will help you. Thanks for reading!

Editor: Just one last thing - don't forget you can store and share all your code snippets at snipplr.com, the newest addition to the Envato network!
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.