Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

Actionscript Code Snippets in Flash Professional CS5

0 (0 Likes / 0 Dislikes)
[♪Music♪] [ADOBE TV Presents..] [Paul Trani in..] [♪Music♪] [Adobe Flash Professional CS5 - Training with Trani] Hello, and welcome to Training with Trani. My name is Paul Trani, and I'm about to show you, honestly, my favorite CS5 feature in Flash. It's going to be a lot of fun. It's all about adding interactivity to your files, so hey, what's not to love about this? I have an FLA file open. This came directly from enDesign; and in fact, if I just do a "Test Movie," you'll see that it will just start to flash through all of the spreads. So unless you're a really fast reader, this really isn't going to help out very much. And quite frankly, what we need to do is we need to go ahead and stop the time line, and then we need to introduce some interactivity on these buttons. So I've got multiple buttons here, all right; and where I'm going to start is, of course, with the obvious issue of that cycling through. So I'm going to go to "Window," and I'm going to go halfway down to "Code Snippets." Now, what this is is just a lot of pre-built code, that's really at my fingertips, that I can go ahead and use. In fact, let's just twirl this up, and you can see all of the various categories. Really cool being able to, say for instance, open up the Timeline Navigation; and again, if I wanted to say, "Stop the timeline," I'd, of course, select this and make sure wherever my playhead is, that's where it's going to insert this Stop action; and all I need to do is double-click, there it is. Again, code I didn't have to write; very nice. In fact, I will just minimize that side panel so you can see it, because not only does it add the code I need which is really just this one word, it tells me what it does, and the general sort of thoughts, and what I need to modify, if anything. This is just known as a comment; but again, this does all the work right here--this Stop action. All right, so that Stop action actually is in place, I want to add a couple more things. In fact, I'll just select this button. This is just a button, it tells me it's a button in the Properties panel. In fact, it's already given a name of "move_btn." I can call it whatever I want, just make sure there are no spaces in there, no special characters; keep it simple, keep it somewhat descriptive. All right, so what do I want to do with this Move button? I want it to jump to, say for instance, this point in the timeline, because this is the Move section. So about frame ten; that's where I want it to go. So again, with my button selected, I'm going to go over to my various Timeline Navigation, and instead of stopping, I want to click to go to a frame and stop. So that's what I want to do, select that. In fact, I'll just double-click on it and it will go ahead and add that code to that same spot because that's where I want to add this code. But in general, I love it; it gives me instructions. So not only am I building my project, but I get to learn sort of how this works. because it does say 'replace the number five in the code below with the frame number you want to go to.' That's easy enough; I'll come down here, replace 5 with 10 because that's where I want to go, and it's that easy. So again, I can do more with it if I want. In fact, once we're in the Move section, I might need to add another button, and, again, I'll add a new layer and I'll just drop in this Home button because once you're in the Move section, you have to be able to get back. So let's put that Home button down there. And again, it's the same process for everything. You need to give it an instance name which is going to be a unique name. So 'Home_btn', just like that. In fact, I'll move this layer down, and I'll just call this the 'Home Button,' like that. Again, it doesn't matter what it is. I'll go ahead and select that button to go to a frame and stop. It adds that code, and I can go ahead and make sure it goes to that first frame just like that. Okay, so, so far so good. Here's plenty that's added, and it's really a matter of going on down the line and doing the same thing. For the Live button, again, clicking and adding that. I want this to go to frame 20. Again, I'm picking up the pace a little bit because this is pretty straightforward. This third section goes to the 30th frame, and this Enjoy. Watch what happens if I add this, and keep in mind it doesn't have an instance name. I'll double-click on it. It says, hey, you know what? The selected symbol requires an instance name, so it says, hey, you know what? It's going to put a generic one in there for you. Sure enough, it did, and it just calls it Button One, but if I minimize this panel, you can see it calls it 'Enjoy.' I'm going to call it 'Enjoy_btn.' And again, this 'Enjoy_btn,' needs to match up with the instance name right here. So whether you name it yourself or Flash names it, is entirely up to you. But again, I built out all of this navigation in probably, say, less than 5 minutes, easy. In fact, I'll just go ahead and do a 'Control Test Movie,' and let's see if the seizure animation is gone; it is. Here is what I get, my nice clouds, Move, Live, Eat. So there's my 'Move' section, Home button; everything works exactly as expected. I love how easy this is. And then 'Enjoy.' So there's one thing the Enjoy button did not do. Let's take a look. That first frame, I can see that only goes to frame 5 when it's supposed to go to frame 40. All right, let's look at some things that are more complex, because in the Enjoy section, I have more going on. In fact, right in here there's actually a video. So I'm going to double-click. And notice that there's this SWF file. There's this Flash Video file. And what I want to do is when you click on this button, I want to play this video. So again, it's a matter of selecting the button, giving it a name-- call it 'play_btn,' just like that--give it a unique name, and then I need to give this FLV Playback Component a specific name, as well. And this is just going to be called 'Bike Video,' because that's what it is. Notice how Autoplay is not selected. I am given properties for that, by the way. All right, next up, selecting that button. And again, it's a matter of going to the Code Snippets and going beyond Timeline Navigation, clear down to Audio and Video. So I encourage you to kind of peruse all of these on your own. But what I want to select is 'Click to Play Video.' So I'll double-click that, it adds that code, tells me how to modify it; I love it. Again, it recognizes the Play button, but it doesn't recognize my 'Bike Video,' like that. Again, change that instance name. Well, I think we're good to go. Let's go ahead and give it a whirl, test this out. Again, the Enjoy section, there's my button; if I click, it plays. [♪Music♪] So my next step is to, of course, make this button go away when you click on it. I'm going to go to the Load and Unload section, and I'm going to select 'Remove Instance From the Stage.' So again, with that button selected, double-click 'Remove Instance From the Stage,' and it's going to remove the Play button. Now you can go ahead and read about it here, but what I want to do is I want to actually move this right up in here within this function, because at this point in time, when that button is clicked, I want to play the video and then remove that Play button. So we should be good there. In fact, I can go ahead and test this movie out once more. And again, pretty simple. The video plays, that button goes away; exactly what I expect. And I really appreciate how this works and how easy it is. But the great thing is, is once you create some code and maybe you've done some customizing, what you might want to do is actually save this work that you've done. Well, I can go ahead and select this code right here. And in my Code Snippets panel, I can go to Create a New Code Snippet from that flyout menu. So I'm going to select that, and I'll give it a name, "Play Video Hide Button.' And, of course, Tool Tip 'Plays the Video and Hides the Button that Plays the Video.' Kind of long for Tool Tip, but you get the idea. And I can either type in here what I want, or since this is selected, I can click Autofill. So it's that easy; it puts that code right in there. Select 'Okay,' and, sure enough, right down here in my Code Snippets panel, under Custom, there's my code. So again, this is going to be available for me next time I open up good old Flash, and I can use it in my next project. But again, you can see how easy it is to add interactivity to a project. It's pretty straightforward. That's all I have for this episode, so join me next time. [♪Music♪] [Executive Producer, Bob Donlon; Producer, Karl Miller] [Director/VFX, Kush Amerasinghe; DP/Post Production, Erik Espera] [ADOBE TV Productions, tv.adobe.com]

Video Details

Duration: 11 minutes and 1 second
Country:
Language: English
License: All rights reserved
Genre: None
Views: 117
Posted by: adobetv on Oct 7, 2010

In this episode, trainer Paul Trani shows off one of his favorite features in Flash Professional CS5: Actionscript Code Snippets. He'll show you how to use and modify existing snippets to quickly add functionality to your project, as well as creating and saving your own snippets for later use.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.