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 “http://active.tutsplus.com”.
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.
Conclusion
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!