Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Information on how to learn Flash is prevalent, but it can be frustrating to understand how to make an entire working web site using this unique technology. Here's a course that cuts through the clutter and offers practical tools for creating a dynamic web site, even for first-time developers. In Creating a First Web Site with Flash CS4 Professional, veteran Flash instructor Paul Trani simplifies the process of integrating animation, video, audio, and user interactivity to create a site that is dynamic and appealing. The goal of this hands-on workshop is to teach web site-building skills for today's demanding interactive industry. Exercise files accompany the course.
What's really powerful about ActionScript is I can reuse the code and apply it to different elements. For instance, I have a tween and this tween is basically being applied to multiple movie clips. For instance, I can click the About section and I can see that tween bounce up. If I go to the Home section, I can see that home movie clip slide in along its X-axis. So it's really just the same lines of code duplicated and then modified slightly to give me a totally different results. In fact, if I go to the Portfolio section, we'll see that fade in. Again it's the same chunk of code copied and then modified as well. Contact will stretch out.
So let's watch this one. So that's the result I'm going for. I want to take this code that's in this sliding in and I want to modify it for these other three sections. So let's take a look at reusing my code. So I'm going to the Timeline, select that first frame in Actions/Labels layer. Let's go to Window, down to Actions and let's take a look at what's going on. We are pulling in all the code that makes the tween work and here is the Tween call. So in general here is a variable, so here's a container. Its specific name is the homeTween. I'm calling it a tween explicitly saying, hey, this is a tween, I'm making new one with all of these new parameters.
So in general, take this Home movie clip, move it from the right to the left with elasticity, so it kind of bounces in. It's going to move it starting off the stage on the right side so this first parameter; if I put my cursor right in there I can click on Show code hint. So as you know what, it started 1000 pixels off the screen because this is the X position so that's 1000 pixels to the right and then if I just scroll down, use my arrow keys, I can see the finish position in 0 over the course of 3 seconds.
It works great for the Home section but I want to use the same code for the About section. So let me just copy this line of code, right-click, Copy and let me move this Actions panel down. So I want to go to frame 10 in this layer here, select that About label and on this frame this is where I want the action to take place to bounce this in. So I'm going to bring it in and it's going to, with elasticity, come up from the bottom. So I'm going to change its Y position. It's going to move in.
All right, so let me select that first frame there, go to my Actions panel, you can see there is nothing in here. I just need to right-click and select Paste and now I can modify this code. So the variable name is going to be aboutTween. That's its explicit name and for the aboutTween, we are not going to move the Home movie clip. We are going to move the About movie clip. I need to make sure that that's its correct instance name; I think this is very important. I want to make sure this is about_mc. If I click on this movie clip and go to the Properties panel, that does say about_mc.
All right let me click that frame again and go back to my code. Here we are in about_mc. I want to move its Y position so it's going to move up and down that's what the Y does. It's going to do with elasticity. Now let's take a look at where we are going to move it from. If I move that down, it's going to start out at 1000 pixels below sort of outside of your viewable area and it's going to bring it into position where it is currently. So let's look at where it is currently. If I select the About movie clip in my Properties panel, I can see the Y position is at 112. So that's its final resting position and it is going to start off at 1000 pixels, way down below there. We bring that back up. Let me select that frame, come back and here it's going to start right of there and it's going to end about 112 pixels and it's going to do over the course of 3 seconds.
So there is my aboutTween. Let me go ahead and do a Control > Test Movie to watch it. Home section slides in because that's the X position since we are dealing with the Y position it's going to move up and down, let's click About, sure enough it bounces in. So again, Home section, About section works great. Same line of code, modifying some parameters, some properties, dealing specifically with the Y property and you can see, you can get a totally different look.
Now for the Portfolio section, I want this to fade in. So we are going to modify its Alpha. So I'm going to close this and I'm going to go back to the Timeline and I'm going to add this code to the Portfolio sections, so I'm clicking on frame 20 in the Actions/ Labels layer and this is where I want to add my code. If I move down that Actions panel, I'm going add this code to this Portfolio movie clip. If I select it, I can see that it does say portfolio_mc. Let's go back to frame 20 and I'm going to right-click and I'm going to paste in that same chunk of code that I copied earlier that homeTween and I'm going to call this Portfolio. This is the portfolioTween. It's going to animate the Portfolio movie clip. It's not going to animate its position it's going to animate its alpha. Alpha means transparency.
Now we don't want it to elastically animate the alpha, we just wanted to just do a regular fade in. So I'm going to change this Elastic word to Regular. Just faded in at a steady pace. All right these are the two parameters and again I can click anywhere in this code and select my code hint, just to see what it's referring to. Its beginning numbers is going to be 0. That's going to start out 100% transparent and that's going to end up opaque and if I want to end up opaque, I just need to type in 1 there and that's going to do over the course of 3 seconds.
So that's looking pretty good, in fact, let's go ahead and do the Contact section now as well. So let me click this last frame here and go down to my Contact section. Let me select that movie clip. It is the contact_mc and for this one, I'm going to adjust its scale. So it's going to start out squeezed on the left side and then it's going to stretch out and with elasticity it's going to rest in the place. So let's go back to our Contact frame. That's the frame 30 in our Actions/Labels layer, go back to our Actions panel, right-click and paste.
Again, the same chunk of code for the Contact section. Creating this contactTween, it's going to modify the contact_mc. It's going to modify its scale so it's X scale and again X means it's right to left position. So it's going to modify how wide it is. It's going to do with elasticity, this is the starting number, let me click code hint and the starting number is actually going to be 0. In fact, let me expand out this panel a little bit more so we can see everything on one line for the most part, all right there we are.
Now I didn't remove some spaces and spaces in this case isn't going to break the code or anything like that. Sometimes it is a good practice but in this case I want to show everything on one line. It's going to start out at 0 and it's going to go up to 1, so it's going to stretch it out fully from 0-1. So it's going to restore it to 100% over the course of 3 seconds. All right so code looks pretty good, I'm going to go ahead and test this now.
I'm going to click, go to Control > Test Movie. That slides in the About section which we did earlier, bounces up Portfolio, we have modified the alpha, so it should fade in when I click on it, sure enough it does fade in really smooth because it happens over the course of 3 seconds. Contact section stretches out, so let's try this one. Click and it does stretch out and it has some bounciness, going on some elasticity but it looks great and all I did is I took one line of code that was for the home section and modified it for these three other sections. So again, the power of ActionScript being able to reuse one line of code by copying it, pasting it and then modifying the parameters is really powerful.
Find answers to the most frequently asked questions about Creating a First Web Site with Flash CS4 Professional.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.