This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

Now, the next thing I will focus on is just setting up some kind of a display for the text that we have got. That is pretty much the content of our website a whole bunch of screens of text and other said we are going to kind of make this interesting.

So, let us pull the text into our home screen and we will setup a sample of what we are going to do for the rest of the screens. I am going to make a layer for the text and we have got them all these movie clips so we can just go into the text folder or find the appropriate one there is the home text and I will just drag it on in.

Now, on our previews lessons we seen how to bring this in from external content and also how to manage this using dynamic text fields and that is all applicable here but just to keep things stream line I am going to work on just managing the way that the text appears and also setting up a nap system to separate all of these different screens that were going to put in together.

So, you can add more to this later of you like, for right now, I want to add some background to this because you can see is I want still focus on showcasing these images. I want to still make the text readable so I will typically use some kind of a transparent background in a case like this just so that I can get the best of both worlds.

Let me set up a layer for our background. I will pull it behind the text layer once I have got it in and just to get thing started I am just going to use this simple rectangle I will go with a with feel but we will go up into the color menu and let us drop that white fill down to or let us say 30% to start with.

I will just pull it on down here to about 30% and I will drag it right around the text area and you probably zoom in. But I think snapping was turned on. So, I have got a rectangle that is just the size of the text field that we were working with.

Now, you can see that helps to read ability to text immensely. The contrast could still use a little bit of help. I am going o fix that in another way by layering our transparent graphic up so we get more layers and enhance more opacity.

Now, to get started on that let us just make that into a movie clip. Remember our movie clips are going to be fundamental to a usability of our files and it is also going to have make it very easy for us to access all of these elements with action script later.

So, let us make a movie clip out of that I will call it something like white background just to add a little interest to this site I would like to make a quick animation of both of these elements to text and the background.

Now, here is another place where we could be doing stuff and action script but do not forget about the time line. Sometimes it is a little bit easier and more convenient just to put an animation together in the time line and then use action script to expand on it by reusing it later. What I am going to do to get that going, is I got my white rectangle selected.

I am going to package that again in the movie clip that I will call text background animation and we will setup our animation inside that movie clip. I will just give that a name of text background anon. So, I can tell which one it is and let us go back setting up an animation for this background.

Now, let us just double click into that animation movie clip. We will setup a quickie time line here and I will figure it out get myself about 30 to 40 frames of our background and what I would like to kind of layer it up is to at least two of these.

So, I am going to take that first one selected, I will just copy it and we will create a second layer that we can put another one on and I will use my paste and place paste it right over top of the first one and I will select it just so we can see a little edge and we will create a border out of this. I will increase the size. Let us say by 10 pixels.

Now, by doing it a little evenly like this it make so much easier for me to space this around the screen. Looks like I typed the wrong the field for that one 380 should go to 390, there you go about 310.

Now, you can see that with those two values I have got an exactly 10 pixels bigger than the last one and you could already see how a double layer of a transparent element is going to increase the opacity of the center point but give me this border around the edge.

Now, by upping up by 10 pixels I can just use my arrow key to nudge it over by five. So, what to select and move it over five pixels. I will go ahead and move it up five pixels and now I got two pieces in here a little border around the edge and I want to just animate to both of these.

Now, since I got that top one selected I would like this to kind of build up the background so I am going to move the first key frame of it and in just a little bit so it does not come until about frame 15. I will add another key frame down here close to the end of the animation and we will just have this one let us say this is the top one. I will kind of it drop in from the top and I just want to have kind of a layering build animation so I am going to move this straight up I am holding my shift key to move it up.

I will squish our first key frame down a little bit and did want to transform from the center, so with the transform tools select I can always toggle it from center to edge by holding the option or alt key.

Okay, so we are just going to make a little bit smaller up there and as a final thing I will just add a little out fit to it. In fact I think I will add a little alpha to it. In fact, I will add a lot of out fit to that one. I will just put all the way at zero and we will just do a quick twin on this one.

Once again I can use a context click that would be control click on the MAC or right click and I can just do a create motion twin and we got that kind of that panel dropping and sliding in the place.

Now, if you are doing these types of animations you see websites like this all the time. It is not a bad idea to not just roll or spin or move one of these backgrounds in but also try to get a little perspective going on it.

So, I am going to take this first one at the bottom and I am just going to use the break apart command that will change our movie clip back into a shape and that I can use some stored features on it.

So, once again, I just want to setup a quick animation with the couple key frames I will add one let us say around here a 20 and going back to the first key frame this time I am going to make this much smaller. So, let us squish it down and now you can see I have the opposite problem. I do not want to be transforming from the side I wanted to be at the middle.

So, once again I will just use the option or alt key to toggle it to a center and I will make my square much small that way. I will kind a move it down here to the bottom and I wanted to fly with a little perspective so it looks like it is coming for the back of the screen. So I am just going to use under the transform tool the distort options.

Now, this is the reason I made this into a shape because these options are only available for vector shapes. So, now it should be able to go in and give a little perspective look and probably sure that would be better. So, they are kind a looks like a piece of paper flying in for the background.

We will set up a quick twin on that but this time of course I am going to be using a shape twin and let us how is that going there. There you got we got a flying up in the place and actually it might not be too bad I can get a little hook on this one if I just add another key frame in the middle of the stream here.

Let us have six and I will bring it up just a little bit. So, it kind of has an up down motion and see how that looks. Flies up, kind of drops in, looks like it almost rotates in the position.

Alright so, we are kind of build up a little section where we have got a building background, let us add to that a fading in text and we will have our screen manipulation all finished out and then we can reuse them.

Now, we will go back out to our home screen and we will fix up the text and that will see where we are. Now, I want that movie clip to play the background. You can see that instead o

Now, the next thing I will focus on is just setting up some kind of a display for the text that we have got. That is pretty much the content of our website a whole bunch of screens of text and other said we are going to kind of make... click to read more