Video icon 64
Learning to code? Skill up faster with our practical video courses. Start your free trial today.
Advertisement

Quick Tip: Exploring the Flash CS5 Code Snippets Panel

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →

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!

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!
Advertisement