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.
Since I'm making a Flash site, I want to use Flash for what it's really good at, which is animating. In this particular case, I want to create some transitions that are going to be animating in each section. So if I click on Home, we can watch the transition that I'm about to build. Click on Home. That slides in along its X-axis. So it's X position is moving, it's starting on the right side and it's sliding in with a really cool bounce effect. So let's go back to About and let's jump to Home again, so you can watch it again.
You can see it bounce and something pretty tricky to do if you are using the timeline. So let's take a look at our timeline. Let me close this file down. In my timeline, you can see that absolutely nothing is going on in this timeline. There is no motion tween. So I did not use the timeline for this animation. If I did, you could expect it to be really complex because of the bouncing that was going on. That elasticity of it kind of going back and forth and then finally resting into place. What I have used instead and what I want to use now is a tween using ActionScript. So I want to use ActionScript code because it's going to give me a lot of control, some flexibility as well. I can control many properties with a tween using ActionScript.
Okay, the first thing I want to note is this movie clip. So if I click on this movie clip, know that its instance name is home_mc. So I want to keep that in mind because this is its unique name for controlling it. I need to make sure it has a unique name. So I'm going to this first layer here, this first frame, the Actions and Labels layer. I'm going to Window, down to Actions to open up my Actions panel. This is where I'm going to write my code. So I'm going to write in a comment. So I'm just going to do two forward slashes to type in a comment of what I want to happen.
So I want to animate in the home_mc from right to left using the tween class. So I'm going to use this Tween class. I'm going to just select that word and if I right-click, I can go and View Help. So what happens is Help will open up. Here we are in ActionScript 3.0 Language and Components Reference, which is awesome. It pulls up exactly what I just searched on. Not only does it describe what it does, because it does say the Tween class, lets you move, resize and fade in movie clips by specifying certain properties.
But what I'm going to do is I'm actually going to take this code right here and I'm going to use it in Flash. The Help is helpful. When it comes to code, I can actually take this code and bring it into Flash. So I'm going to right-click, Copy, and go back into Flash. All right, so this is great. I'm going to right-click and Paste. Here is the code from the Flash Help that I want to go ahead and modify, but first, I'm going to describe what's going on here.
If I just do two forward slashes, I can add in comment for these first two lines. Because all that's happening here, we are just telling Flash, we are saying, hey Flash! Go get code that's going to make the tween work. More or less, that's all that's happening here. I get almost careless about what the code is. All I care is that it works. So what this allows Flash to do is go and grab the code that's going to make this line of code work. All right, so that's what's going on there. Let's go to this line here. Let me add another comment. So again, I want to move the home_mc, animate in is what's going to happen here.
All right, I've got to give it a unique name is where I want to start. So it's the first thing I'm going to do. I want to replace myTween with homeTween. It could be whatever you want it to be called. But I'm just giving it a unique name just so I can differentiate it from other tweens that are going to be happening. So homeTween, this identifies it as a tween and this New is the magic word because this is what happens. I have the word new. It's actually going to create a new tween. It's going to create this new tween with all of these various parameters or properties.
All right, you probably are wondering what all this stuff is. Now, the Help can tell me, but what I can also use is Flash. So all I need to do is place my cursor anywhere in here and then in my Actions panel I can click this little bubble, Show code hint. If I click there, it tells me what everything is. So I can start typing in this. This object is going to be home_mc. If I go over to this "x", well again, this "x" is the X position. It's its position from left to right. Okay, and that's what I want to animate. Whatever property I want to animate, I want to put in these quotes.
Next up is this elasticity. So this is what makes it bounce and move really smoothly. So there is a lot of power that happens with that parameter there. Next up is this begin number. So where do we want it to start? Well, I wanted to start off the stage and I want it to animate into position. So let me just move down my Actions panel, so we can see our stage here. If I click that dropdown, I can fit this in window, just to show you that if I click and drag it, I want it to start over here.
So I want it to start its X position. If I click on that number to be about 1000 pixels so it starts off the stage, it's going to start there and I want it to end at 0 into position right here. So really reference your Properties panel for the numbers you want to get. So it's going to start at 1000 pixels and move it to 0 pixels. So let's select our first frame there in the Actions/ Labels layer and go to my Actions panel again. With those two numbers in mind, I can type in 1000. It's going to move it into 0. It's the end position. Again, I can always use my Show code hint to identify this as the finishing position. It's going to do this for a duration of 3 seconds. Use seconds that's equal to true.
So that's the animation. Let's see if it bounces on in. it should be pretty slick. I'm going to go to Control > Test Movie and let's watch it. It's going to happen right away. We can see it bounce in. Let's go to another section and then click back on Home and watch it bounce in, very slick. Again, I didn't have to use the timeline in at all, because doing an animation like that in the timeline would take some time and wouldn't be as flexible.
But you can see, with one line of code, I was able to add a really slick, elastic movement to that Home movie clip, very 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.