For this introduction we are going to build the basic interface to the workshop file. We will use the standard drawing tools, and take you step by step on the interface was created using shortcuts of course J

Go to Modify > Movie. Set your movie to 600 pixels wide by 300 pixels high.

Set your background color to white and click OK.

Name your first layer interface.

Draw a large box across the top of your entire movie area around the edge. Make sure the box has no fill.

Using the line tool draw a new line (which will be the top of your interface) with dark gray near the top of the box to look like the one pictured below and remove any unnecessary lines hanging off the edges when you create it.

Select the entire line then go to Edit > Copy, then Edit > Paste in Place. It will paste this directly over the other line and still have it selected for you.

Use your arrow keys to move the line about 4 pixels down from the original. Use the ink bottle to change the color of this second line to a light gray.

Now, select both sets of lines (dark gray and light gray) and go to Edit > Copy, then Edit > Paste in Place again.

With the line still selected go t o Modify > Transform > Flip Horizontal. Now you should have the direct opposite of the other line.

With the line still selected move it down near the bottom of the stage.
Use the paint bucket tool to fill the top and bottom of the stage with a nice bright orange like in the picture below.

To finalize the background, fill the middle section with a standard gray.

Delete the outer lines of the box.

Select the middle gray area and go to Edit > Cut.

Create a new layer called background and go to Edit > Paste in Place.

Now we want the text title at the top to fade in. This involves using the text panel and simple tweening. You will learn about tweening further ahead, but we will at least document it in this area, since we are working on one part of the file at a time.

First step it to type your text on a new layer called "logo" at frame 1. You can select the text and change colors within it. You can also adjust the spacing between letters (kerning) to make your text fit nicer across the top.

Now, select your text and go to Modify > Convert to Symbol. Select graphic from the radio buttons and give it a name you'll remember.

Create a keframe at frame 15, by selecting frame 15 and going to Insert > Keyframe.

Go back and highlight frame 1, and select Insert > Create Motion Tween.

To make it fade in you need to alpha the graphic out on the first frame. Here's how:

Select your title graphic at frame 1.

Open up the effect panel under Window > Panels > Effect.

Select Alpha from the drop down menu.

Set the alpha to 0%.

Now if you run through your timeline over those frames, you should see your title fade in J

In this section we will show you how to create the main buttons that fly in at the beginning of the movie. You can create 3D button effects through the use of gradients and imagination. IF you want a shortcut, they do have these buttons pre-made in Flash 5 that you can grab under Window > Common Libraries > Buttons. Here is a screenshot overview of the steps it takes to create one of these buttons:

Create 3 circles with no fill within each other. Just make sure they are spaced evenly apart.

Using the Fill panel select linear from the drop down menu and edit the gradient palette. Fill the 2 outer circles with linear gradients (3 colors white, black, dark slate green).

Now select radial from the fill panel drop down menu. Change the gradient to chocolate brown to black.

For an added effect you can create highlights on the button.

Circular highlight:

Create a circle and fill it with a radial gradient.

Set the center color to tan with alpha set at 40%.

Set the outer color to tan with alpha at 0%.

Group this circle and place it over your button to look like a highlight.

Crescent highlight:

Select the inside of the button and copy > paste it.

Draw a line through the middle of the circle.

Select the top part of the circle and delete it.

Use the arrow tool and "bend" the line you just drew down to make a crescent shape.

Erase all the lines around it, and fill it with the gradient you created for the circular highlight.

Group the crescent and move it over your button to where it looks nice.

Now you have the look of the button created. But it's not a "button" until you convert it to one. So here's how and it's really simple!

Select your entire button (highlights and all) and go to Modify > Convert to Symbol.

Select button from the radio buttons and name it "main select button". That's it!

Open up your personal library under Window > Library and you should now see the button symbol in there.

Since we are in the library we might as well create a new folder to keep things organized.



Click the new folder icon and rename it to "main graphics".

Now you can just select your button that you just created and drag n' drop it into the folder.

This will really get you into tweens or motion tweening. It allows you to animate an object from point A to point B in Flash. Even though the timeline below might look a bit daunting, it's really not that difficult. We'll just take it one step at a time, and show you how to animate your buttons coming in on the main movie.

Create a new layer and name it "button -1".

At frame 1 drag your "main select button" from the library onto the main stage. Line it up so it's in line with the bottom interface of your movie OUTSIDE the movie stage. We do this so people won't see the buttons sitting there when the movie opens. They'll just see them coming in from outside.

Now on the same layer select frame 35 and insert a keyframe (Insert > Keyframe).

Go back and select frame 1 and add a motion tween by using Insert > Create Motion Tween.

We want a natural effect when the buttons come in, so we'll need to add "easing". This is where you can make a tween have a type of gravity. It can slow down or speed up depending on what you have it to. In this case we want the buttons to slide in fast and slow down when they approach there stopping point. So we'll need to set the easing OUT.

Select frame 1 and open up your frame panel (Window > Panels > Frame), and you should see easing on this panel.

Set the easing to 100 and it will register it as out.

Now we need to create the other three layers of buttons. Here's a shortcut!:

Select frames 1 - 35 of the "button-1" layers and do Edit > Copy Frames.

Create a new layer and select frame 5 (evenly spaced apart) and do Edit > Paste Frames. Name the layer to "button-2".

Create a new layer and select frame 10 and do Edit > Paste Frames. Name the layer to "button-3".

Create a new layer and select frame 15 and do Edit > Paste Frames. Name the layer to "button-4".

This will be the first section where we will work with movie clip symbols. Movie clips are like timelines within your main timeline. You can embed movie clips within other movie clips and make them all talk to each other too J This is one of the most powerful features in Flash and you will learn as you work through this, how they work.

For now we're going to build the each small movie clip that will be contained within the main movie clip called "tweening mc".

Standard Motion Tween

Create a new symbol (Insert > New Symbol) and make it a movie clip and call it "motion clip".

Open up your motion clip movie. You can do this by opening your Window > Library and double clicking it from in the library. This will bring you to that movie clips editing timeline.

Create a small black box and open the "info" panel (Window > Panels > Info). The info panel will tell you the dimensions of your box. Use the info panel to size the width and height to 18 x 18 pixels.

Convert the square into a symbol (Insert>Convert to symbol). Select it as graphic and call it "blackbox".
Note: It's always best to name your symbols and objects before working with them.

Select frame 20 and frame 40 and do Insert > Keyframe.

Now select frame 20 and move your box to the right. Now you have frame 1 box on the left, frame 20 box on the right, and frame 40 box to original spot. Now Flash can do the rest for us.

Select frame 1 and create a motion tween (Insert> Create motion tween). Using Window > Panels > Frame you can modify the tween and type of tween. Set the easing to 100 (out) - slows down.

Do the same for frame 20 except set the easy to -100 (in) - speeds up.

The way we have the easing applied in this example will make the square take off, slow down to the end of the tween then slowly start coming back before speeding up to finish.

Note: It's always a good idea to set the tweening on the last frame to "none". This will keep motion tweens from extending where they are not needed which will lower your file size. With the easing in place this effect resembles a ball being bounced.

Alpha Motion Tweens

Motion tweens also cover color changes and alpha. Let's make that same box fade in and fade out. For a shortcut let's just duplicate the movie clip we made above in the library.

Open up Window > Library.

Select "motion clip" from the library. Go to the options button at the top of the library window and select Duplicate.

Rename it to "alpha clip" and make sure it's set to movie clip. Done!

While you're here add a new folder like you did earlier and name it "tweening graphics". Move your motion clip, alpha clip, and blackbox all into this folder for organization.

Now that saved a TON of time from having to totally recreate the same tween again from scratch J

Open up the alpha clip to edit.

Select the box at frame 20 and line it back up with the boxes at frame 1 and 40. This is so it won't move.

Select frame 20 and open your "effect" panel (Window>Panels>effect). Here you will see a drop menu. Select "Alpha" from the list and set the value to 0%.

When using the Alpha tool, the lower the number the more transparent the object. When used in motion tweens the alpha will change gradually as the tween advances giving it a fade in/fade out appearance.

Color Motion Tweens

Duplicate the alpha clip like you did above and name this one to "color clip" and make sure it's set to movie clip.

Insert a new keyframe at frame 60 (Insert > Keyframe). And make sure to create another motion tween from frame 40 to frame 60.

Select the box on frame 1 and open the "effect" panel (Window > Panels > Effect).

On the effect panel choose "Tint" from the drop down box and choose a green color from the palette.

This will tint the box the color you have chosen. The number value on the right is the strength of the tint. When set at 100% the object will be the new color. The lower the number the lighter the tint, at 0% the object will be its original color. You can also match a certain color using the RGB value boxes at right.

Note: This does not actually change the original movie clip itself. If you look in the library and the blackbox graphic you'll see that it is still black J This helps save file size to reuse images as much as possible.

Select frame 20 and change the box to a bright blue.

On frame 40 change it to a rose, and on frame 60 change it to the green you started with.
By returning to the same color you started with you will have a looping effect to the color changes.

Shape Tweens

Shape tweens are very different from motion tweens. Most people refer to this as morphing. You CAN'T use grouped objects or symbols in a shape tween. You MUST only use basic lines and fills. Let's do something real simple:

In an effort to create as less work for us as possible it's always easy to duplicate symbols if you can.

Duplicate the "color clip" symbol you just created. Name the new symbol "shape clip" and make sure it's set to movie clip.

Select frame 1 and open Window > Panels > Frame and from the drop down menu change Motion to Shape.

Do this at frame 40 and at frame 60. The tweens should now be green arrows rather than blue ones. This ALWAYS indicates shape tweens.

Select the box at frame 1 and delete it. Use the text tool and write "F" with a thick font. Now we MUST get into a fill format because it's shape tween right?

So select the "F" and go to Modify > Break Apart. This will break objects down into their most basic formats of lines and fills.

Select the square at frame 20 and use Modify > Break Apart. You can even break apart symbols! Now change the square to a greyish blue.

Remove the object at frame 40 and draw a purple circle.

Select your F at frame 1 and go to Edit > Copy.

Now delete the object out of frame 60 and go to Edit > Paste in Place.

If you run through the timeline now, you'll see your objects morph from one to another. They'll even change colors while doing it too J

Motion guides

Motion guides provide a path for your motion tween to follow. It's a little difficult at first and just takes some practice.

Duplicate your "motion clip" and call the new one "motion gui clip". Make sure it's set to movie clip.

Select frame 40 and drag n' drop it over to frame 80 to extend your tween.

Select frame 20 and drag n' drop it over to frame 40. Easy eh? Half the work is done now just from duplicate symbol and moving frames!

Select your current layer and go to Insert > Motion Guide. Now you'll see a new layer appear above your old one with a guide symbol by the name.

Using the pencil tool draw some type of squiggly line at frame 1.

Select frame 80 and Insert > Frame. No need to insert a keyframe, because you just want the line to appear throughout the motion tween.

Turn your snap feature on under View > Snap to Objects.

Lock your guide layer (the layer with the line out it).

Select the object at frame 1 and drag it until it "snaps" to the beginning of the line.

At frame 40 snap it to the end of the line.

And at frame 80 snap it back to the beginning of the line.

Now if you run through your timeline your box should follow the motion path you created.

All the tweening clips we created earlier are going to be placed inside this main movie clip. Another great thing about movie clips is they loop continuously unless you tell them not too. So all those small clips we created will always be playing for a cool effect.

Insert > New Symbol and set it at movie clip and call it "tweening mc".

Create layers called background, invisible buttons, diagrams, text, and actions (actions being the top).

Click the first frame of the background layer and draw a large gray box with the fill set at 57% alpha as shown below.

Open your Info panel (Window > Panels > Info) and set the size of this rectangle to width: 607, Height: 179. Center the box in the middle of the crosshairs on the screen as best you can.

Insert a keyframe at frame 10 on the background layer.

Select frame 1 of the background layer and open your frame panel (Window > Panels > Frame) and set the tweening to Shape.

Resize the rectangle in frame 10 to width: 607, height: 49 (use the Info panel for this).

What we just did will eventually be the introduction to the selection of tweening options. The grey box will shrink down when the user clicks the tweening button the main movie stage.

Now, to put all of our tweens into use we will also need a way for the user to select them. One of the easiest ways to do this is the use of an "invisible button". That way the user only needs to click in the general area of our example tweens.

Create a new button symbol and call it "invis button".

Insert a keyframe in the Hit state of the button. The hit state is the area of your button that can be clicked. Think of it as the buttons hotspot.

Draw a square in the center of your stage.

Open up your info panel and size the square to 56 pixels width x 48 pixels height.

In the Over state copy the box you created in the Hit state and Edit > Paste in Place. Change the color of the box to an orange color and make it 30% alpha with the Mixer panel.

Basically all an "invisible" button means is that there is nothing drawn in the up state. So the user won't see anything until they roll over an item. That's all there is to making an invisible button. When you use your button on the main stage it will appear as a transparent turquoise box.

Open up your tweening mc movie clip.

On the invisible buttons layer, insert a keyframe at frame 10.

Drag and drop 5 copies of your "invisi button" from your library onto the stage and place them on the gray rectangle.

To align these objects easily, click on the frame containing the buttons (so they will all be selected) and open your align panel (Window > Panels > Align). You want to space the boxes apart evenly and also make sure they are all on the same path. So you will need to click the button for Align: Top, and also click the button for Space: Horizontally.

On your "text" layer create a keyframe in frame 10.

Select your text tool and create a label for each button like in the screenshot below (Motion, Alpha, Color, Shapes, Guides):

On the diagram layer create a keyframe at frame.

Open your library and drag the 5 tweens that you just created to the button they match (shown below):

Your objects should appear like this. Remember that the motion and guides tweens move back and forth, so set them a little to the left.

On the actions layer, create a keyframe on frame 10.

Click this frame and open your Actions window (Window > Actions).

Double click the "Stop" action in the "basic actions" folder. The stop action will appear in the right side dialog box. Close out this box when you are finished.

Label this frame "tweeningstart" by opening the frame panel (Window > Panels > Frame) and typing in a label in the correct box.

In the timeline, if the area is grey that means there is an object in it. Sometimes you may not want this and need add multiple blank frames. Here how:

Make sure that all your layers are unlocked and click on frame 11 in your uppermost layer. While holding the mouse button down drag it to the bottom layer frame 11. You will see that frame 11 in all layers is black. Now insert a blank keyframe in these selected frames (Insert > Blank keyframe).

Here we are really going to get into the depths of working with the Flash timeline. You'll have to pay attention and follow along with special care! We are going to stop showing how to open panels as you should already know how to do that if you've gotten this far.

Select frame 10 on the Text layer. Click on the "motion" text and copy it.

Then insert a keyframe in the text layer at frame 20.

Paste the text in place at frame 20. Insert another keyframe at frame 30.

Tween frames 20 to 30.

Repeat these steps for the Diagram layer.

On your Actions layer, insert a keframe at frame 20 and label it "Motion".

Insert a keyframe at frame 30 and place a stop action on it.

On the background layer create a keyframe at frame 20 and copy the background box from frame 10. Paste it in place at frame 20.

Copy the same box from frame 1 of that layer. Create a new BLANK keyframe at frame 30 and paste in place the box on that frame.

SHAPE tween the background layer from frame 20 to frame 30.

Now we need to move the motion text and diagram at frame 30. Just select them and move them to where they are above the background box like in this screenshot below:

Now if you scrub through the timeline, you'll see you are building the motion tween area. The user will see this when they click the button that says "Motion" and the box will enlarge and the word motion will fly to the top of the box area.

Since there is a stop action on frame 30 so the user can read what's there. We will add a "back" button so the user can go back to the main selection menu.

Create a new layer called "back & scroll buttons".

Create a BLANK keyframe at frame 30.

Go the pre-made Flash library (Window > Common Libraries > Buttons) and just use a button that looks like a back button.

Place it above your background box area.

Select the button and open up your actions window (Window > Actions).

Select the action "Goto" under the "basic actions" folder and double click it. It will show up to the right as:
On (Release)

When the user click the button we want them to go to frame 31. So type 31 in the bottom of the action window where it says Frame.

Now that the button is done and has the actions it needs we just need to finish the remainder of the motion area on the timeline from frame 31 to frame 40 J

On the background layer create a BLANK keyframe at frame 40.

Copy the background from frame 20 and paste in place at frame 40.

Shape tween the frames from frame 30 to frame 40.

Insert a BLANK keyframe at frame 40 on the actions layer.

Open the actions panel and select the "go to" action and set the scene to "current scene". Set the type to "frame label" and set the frame to "tweeningstart".

Select the invisible buttons layer in the layer box and add one more layer named "descriptions".

Insert a keyframe at frame 30.

Insert blank keyframes on all layers on frame 41 like you did for frame 11.

What this does is when the player is running through the timeline after the user leaves that section, it will hit that frame and say "Ok, go to the label 'tweeningstart' which is at the beginning of the movie". All the user sees is that they are leaving this area and are back to the main menu. cool eh?

Your tweening mc timeline should look like this so far. If you have extra keyframes that are filled with gray simply insert blank keyframes behind the filled keyframe .

Our main tweening movie clip has FIVE sections. Well, we certainly don't want to re-create all the above steps 5 times do we? Let's make this easier.

Select frame 20 of the actions layer - hold down - and drag it all the way to frame 40 of the background layer.

Now go to Edit > Copy Frames.

Now to paste we need to highlight frame 50 on actions to 70 on the background and then go to Edit > Paste Frames. Note: If you don't highlight the frames before you paste, it will just insert a bunch of new layers and we don't want that.

Do this same thing for frames 80-100, 110-130 and 140-160.

Now you'll just need to go through each section and change out information which is easy enough!

First let's change labels. Frame 50 label should be "actions". Frame 80 is "color". Frame 110 is "shape". And frame 140 is "guides".

On the text layer you'll need to replace "motion" with the appropriate wording for that section.

And lastly we need to swap out the diagrams. Go to frame 50 on the diagrams layer.

Select the motion clip and open the instance panel.

At the bottom of the instance panels is a swap image button. Press that and select the alpha clip out of your library and press ok.

Done! Easy enough. now just do that for the remainder of the items on that layer.

There are three kinds of text fields. Static, dynamic and input. We will work with static and dynamic here.

At frame 30 of the descriptions layer insert a BLANK keyframe and just use your text tool to type in some text. This is considered static text and we won't elaborate any more on this.

At frame 60 of the descriptions layer insert a blank keyframe.

Create a new text box and type some text into this. NOW, this time select the text and open up the Text Options panel (Window > Panels > Text Options).

In the drop down menu change it from static text to "dynamic text".

You'll see some options change. For instance, you'll need to now check the "work wrap" box. And also change it from single line to multiline.

If you select off the box you'll notice that there is a dotted line around the text. This means it's dynamic.

On a very basic level, this example was used so you could have aliased type font in your Flash movie, rather than anti-aliased. But there are more uses that you will see in the next example.

One of the more useful features of dynamic text is the ability to load text files or HTML files into Flash. We will cover one area of the tweening section below rather than 3. We will import the HTML file only and this will show you the steps you need to do the other two.

First things first. We will need to create the HTML/text file we will import. HTML in Flash is VERY picky.

So here's a screenshot of what some of ours looks like below.

The main thing you want to be concerned with is where it says &motionguides=. This is the variable name. It saying that motionguides=your text file text.

On frame 150 of the actions layer you will need to add one more action above your stop action. You will need to add a "Load Variable" action.

Double click the frame and under the "actions" folder double click "LoadVariables".

Now on frame 150 of the descriptions layer create an EMPTY dynamic text box. Set all the items to look like the one below:

This was short and to the point. So what's happening here? Basically, in Flash we are giving our dynamic text field a VARIABLE name of "motionguides". Then on our frame we are telling it to load the variables from the HTML file motionguies.html. Now what's going to happen is Flash is going to read in that text field and say "Oh, I see that &motionguides=blahblahblah", and then stick it right into that dynamic text field J

Now go back to your invisible buttons layer at frame 10.

Select your first button and open the actions window (Window > Actions).

Double click "goto" under the "Basic Actions" folder. Make sure it's set to on (release).

Select "current scene" from the dropdown box, and specify it to the frame label "motion". Make sure the check "goto and play" at the bottom IS checked. This will make the play head skip to the frame labeled "motion".

Now just follow these same steps for the other four buttons. But just specify them to gotoAndPlay to their appropriate labels.

When you have completed all these button actions, create a layer on the main timeline and call it "tweening mc".

Make sure this is ABOVE your background layers so the user can see it of course J

Create a BLANK keyframe at frame 50 (after your buttons have slide in from the side).

Drag and drop it from the library into frame 50.

Open the instance panel (Window > Panels > Instance) for this movieclip, and give it the instance name "tweeningmc".

On the main stage we want the users to roll over our main menu buttons have the words fly in from the side. That way they know what section they are going on before they click it.

Create new movie clip symbol and call it "category words".

Create 2 layers: one called text and one called actions.

On frame 1 of the actions layer add a stop action.

Create some text at frame 1 on the text layer that says "Learn Tweening". Convert it to a graphic symbol. And align it to the right side of the crosshairs.

Create 3 other symbols with the words "basic actions" "other effects" and " finalizing". But remove them from the stage. For right now we only want to work with Learn Tweening.

Back in our category words movie clip, label the first frame of the actions layer "tweening".

Insert stop actions on frame 1, 15 and 25.

On the text layer insert keyframes at frame 15 and 25.

On frame 15 move the text to the left side of the crosshairs.

Apply motion tweens to frame 1 and frame 15.

At frame 1 set the alpha on the text to 0 and set the easing to 100 on frame 1.

At frame 15 set the easing to -100.

On frame 25 set the alpha to 0 on the text.

Insert a BLANK keyframe on the text layer at frame 26.

Select all frames in both layers from 1 to 26 and copy them (Edit > Copy Frames).

Paste these frames at frame 35, 70 and 105.

On the actions layer, label frame 35 "actions". Label frame 70 "effects". Label frame 105 "finalizing".

On the text layer switch out the "learn tweening" with the correct text in the tweens that start on frames 35, 70, and 105. For instance in the "actions" section, replace the learn tweening graphic with the "basic actions" graphic. Here's any easy way how that will keep consistency and make it easier too J

Go to frame 35 of the text layer and select your text. Open the instance panel. At the bottom of that panel you'll see a button   that is the "swap symbol" button. Press the button and it will open up a window of your library. Select the "actions" graphic text and press OK. Walah! Simple as that and you didn't have to do any extra work aligning or swapping out images manually. This cuts down lots of time in Flash.

When finished drag and drop your new movie clip onto the bottom left hand corner of the main stage. Place it just outside the main stage in the gray area. You won't be able to see anything, so just use your best judgement with the selection box to line it up. Select the movie clip and open the instance panel. Give it the instance name of "catagorywords".

If we were to export the Flash movie right now, then IMMEDIATELY you would be able to see the tweening movie clip. We don't want that. We want the user to actually have to click the button THEN be able to see it. We can prevent this by adding a simple SetProperty action:

On your main timeline in the actions layer create a blank keyframe at frame 50.

Open your actions window and under the "actions" folder double click "SetProperty".

At the bottom of the actions window set the property drop down to _visible (Visibility).

In the target box you'll need to target the movie clip instance name "tweeningmc" since that is the movie clip we are wanting to hide. Now, there is an easy way to do this.
Place your cursor in the target box. See the little target turn blue at the bottom of the window. Click that button.

Now it will bring up a window where you can actually SEE all the instances in your whole movie. Browse to the "tweeningmc" instance and select it. Press OK.

When you go back to your actions window you'll now see the target path in there: _root.tweeningmc.

Now in the value box just type 0 (zero).

That's it! Now when you play your Flash movie the tweening clip will appear invisible to the user until they click the button. Below we will work on the actions on those buttons.

Now we are at are last step to being able to export our movie and actually see it functioning. We will be working on the main timeline at FRAME 50 when all the buttons are stopped.

These buttons serve two purposes. 1) to actually pull up their appropriate sections and 2) to show the category name when the user rolls over them. This is all done through targeting methods and instance names. It's a bit daunting at first but Flash 5 makes it a ton easier than what it was in Flash 4. So it should be easy to see now J

Select the first button that comes in on your main stage. We want this button to call up the "learn tweening" category name from our movie clip. Open the actions for this button. Here is what our coding for this button will look like.

Under the "actions" folder double click "with". Use the target path to target the "categorywords" movie clip". Make sure the box "Roll Over" is checked. Select the with statement in your actual window and add a goto action now. Set it to go to a label named "tweening".

Explanation: What this is doing is saying that when the user rolls over this button, I want to target the categorywords movie clip to play. AND I want it to start playing at the label tweening. So now, you'll get this effect that when the user rolls over the button the "Learn Tweening" text will fly in from the side of your movie.

Follow the same actions for the second step, except this time don't set it to a frame label. Set it to a frame number (16). And set the mouse event to "Roll Out".

Explanation: This is what will happen when the user rolls off the button. It target the "categorywords" movie clip to play 16 which is where the "Learn Tweening" text fades back out.

On the last set of actions start by double clicking "SetProperty" under the "actions" folder. This will automatically add your mouse event for you. Make sure that is set to "Release". Select the property and target your "tweeningmc" instance name to your movie clip. Set it to _visible and set the value to 1 (one). Then, add the with action and target the "tweeningmc" again. Tell it to goto and play frame 1.

Explanation: This does two things essentially. First, when the user releases the mouse the tweening movie clip will appear, hence setting the visibility to equal 1. Then we need to make it play. So we target that same movie clip and force it to play by saying gotoAndPlay (1).

These are the actions for all buttons on the main timeline but they target different movie clips. The only code that will change is the frame label and frame number that you target in the first 2 sections of code, the movie clip that has the 1 in the visible command and the target of the last goto and play action.

This also might be a good time to clean up your library and organize your files into appropriate folders. We still have a ways to go, and cleaning up is a good idea J

When you get done with total workshop there are a few issues that need to be addressed. On the buttons that you created above, you'll need to add a few more Set Visibility actions. Throughout those 4 buttons you'll be turning visibility off and on. So make sure you set them all correctly.

Also on your main timeline, you'll need to add 3 more set visibility to 0. This will set all your movie clips to invisible when the movie starts.

Create a new movie clip and name it "Effects mc". .

In this movie clip there will be 4 embedded movie clips. We will create them one by one below. These are basic effects in flash and will get you familiar with how motion tweens work together to create more complex visual effects.

Once you complete all these effects below:

Create a new layer on the main timeline and call it "effects mc".

Create a BLANK keyframe at frame 50.

Insert the effect mc into the keyframe and line it up.

Give it an instance name of "effectsmc" for targeting purposes.

Create a new movie clip symbol and name it "masking".

Create two layers and name the top layer "Circle" and the bottom one "text".

Create a circle on the circle layer and convert it to a graphic symbol named "circle" (how'd ya guess ?)

On frame 1 of the text layer type in the word "Masking", make it a large and thick font.

Insert a keyframe at frame 70 on the text layer.

Insert a keyframe at frame 70 on the circle layer.

Add motion tweening from frame 1 to frame 70 on the circle layer.

In your circle layer on frame 1 place the circle on the left side of the masking text.

On frame 70 place the circle on the opposite side of the masking text. The circle should move across the text now.

Select your circle layer and open the layer properties using Modify > Layer.

Select "Mask" and hit ok.

Make sure both layers are locked and the text should disappear.

Now if you scrub through the timeline ONLY the area that is under the circle will show through. Ahhh the beauty of masking J

Create a new movie clip symbol and name it "onion skins".

Create a graphic that you want to animate. In this case we did a star. Convert it to a graphic symbol.

Create about 4 new layers for each star to animate on. Name them "object 1", "object 2", "object 3" and "object 4". Remember: motion tweens can only have one animation per layer at the same time.

Drag and drop the star graphic from the library into frame 1 of the "object 1" layer.

On the object 1 layer insert a keyframe at frames 15, 30, 40 and 55.

At frames 30 and 40 you'll need to move the star to the right. You can do this evenly by holding down the Shift key and using pressing the right arrow about 6 times.

Select frame 15 and open the frame properties panel.

Set the tweening to motion. Set rotate to CW (counter-clockwise) 1 time.

On frame 40 set the tweening to motion and the rotation to CCW ( counter clock wise) 1 time.

Now add a FRAME at frame 58.

Select frame 15 through 55 of your object 1 layer and copy the frames.

Paste the frames on each layer one behind the other like in the picture below:

Go up to you object 2 layer and set all the objects to 75% alpha.

On the object 3 layer set them all to 50% alpha.

On the object 4 layer set them all to 25% alpha.

Now you should have an "Onion skin" type effect. Where each images follows the other just a little bit behind going from dark to light.

Create a new movie clip symbol and name it "dropshadows".

Create 2 layers and name one "text" and the other "shadow". Make sure shadow is on the layer below text.

On the text layer create a text box and type in the word "shadow" in a large bold font.

Select your text and copy it. Paste it in place on the first frame of the shadow layer.

Break the text apart on the shadow layer (Modify > Break Apart). Select the S, A and O and move them down below the other letters.

Using the paint bucket fill ALL the letters letter with a dark gray.

Select the letter S and go to (Modify > Shape > Soften fill edges).

Set the distance to 6 and the number of steps to 6. Also make sure that "Expand" is selected. Press OK.

Drag a box around this new S to select it all and group it (Modify > group).

Repeat this for all the letters and when finished move them back to their original position.

Shadow effects are really simple. But beware too much can increase filesize! Also the reason we had to move the letters apart and do them separately is because if we would have left them in their original places, the fills would have clumped together and looked bad. This was it's nice and clean J

Create a new movie clip symbol and name it " text fades".

Create two layers and name one "text" and the other "fade". Make sure the fade layer is below the text layer.

In the first frame of the text layer create a text box and type in " text fades".

Size this text up and convert it to a symbol and name it "textfade graphic".

Insert a FRAME on the text layer at frame 45.

Copy your text from the first frame of the text layer and paste it in place on the first frame of the fade layer.

Insert a keyframe in the fade layer at frames 25.

Set the tweening of the first frame of the fade layer to motion.

At frame 25 scale your text up some (Modify > Transform > Scale). I set up up about 150%.

Set the object on frame 25 to alpha 0%.

If you test it you should get an effect where your test will remain but the same text will fade out from behind it.

For this section we will build one tooltip out of the three displayed, so that we don't repeat steps.

Create a new movie clip called "finalizing mc" and add 3 more layers. Name all layers: Actions, Tooltips, Objects, and buttons.

On the actions layer insert a stop action at frame 1 and frame 26.

Insert a blank keyframe on the tooltips layer at frame 26.

If you look in the picture below you'll see a swirl type graphic. You can create anything you want here. It's just for looks. Just make sure to convert it to a graphic symbol.

On the objects layer drag and drop the swirl graphic into frame 1.

Insert a keyframe on frame 20.

Motion tween frame 1 to frame 20 and use easing, alpha, and rotation to make your swirl fade in while it's turning and come to a stop.

Insert a frame at frame 25.

For the tooltip we will only build out the Publishing tip. In the actual file there are two more sections, but if you follow these steps you can build the other ones as well and understand how to do them.

Create new movie clip and name it tooltips.

Create 3 layers: Actions, Text, and Background.

Place stop actions on frames 1 and 2 of the actions layer.

Give frame 2 the label name of "publish".

On the background layer draw a rectangle using the rectangle tool. Fill this rectangle with a powder blue and draw in a heading box. Fill the heading box with navy blue. Or you can do whatever you think looks cool. We just did this because it was quick and easy J

On the text layer create a text box and type some text over your box. Again you can do whatever you like at this point.

If you look at the timeline below there are two extra sections. You can copy > paste frames at this point and change out information if you'd like. If not that's okay too. But at least you are going to have one tooltip built for "publishing".

Now we will create the actions so that when the user rolls over the word publishing a little pop up will happen.

Drag and drop the tooltips movie clip from the library into your finalizing movie clip on the tooltips layer at frame 26. Give it an instance name of publishing. All you will see will be a dot, so select that to give it an instance name. The reason this happens is because no objects are on your first keyframe therefore you can't see anything but a dot when you place it on the main stage.

Type the word Publishing on the buttons layer at frame 26 and convert it to a button symbol. Edit the buttons hit state to make sure it is easily selectable. Line up the button to where it is in a nice spot on your screen.

Select the publishing button and openpen the actions window. Here is the code for our publish button.

There are two sections. The first section is an on mouse event set to Rollover. Use the with action and target the tooltips movie clip that has an instance name of "publishing" with your target window. Give it a goto and stop (do NOT check the play option) action to the label "publish".

Select the "startdrag" action under the "actions" window and target the tooltips movie clip with the instance name "publishing". Set startdrag to true.

Now start another on mouse event and set it to RollOut.

Use the with command and target the same movieclip.

Give it a goto and stop action to frame 1.

Select the stopdrag action and your all done.

So what is all this saying? In English it means:
That when the user rolls over the button, it's going to target the publishing tooltip to appear. Then as long as you are on that button it will drag that publishing window around. But once you roll off it, the window is going to disappear because the target is going back and stopping at frame 1 which is an empty frame. And also stop dragging the window at this point.

For this section we are going to only build one draggable window for the "goto" button (when we get further). We won't create the sections for every button as they are all the same. So once you do this you should know how to do the rest of them.

Create a new movie clip and call it actions mc.

Create 4 layers and name them actions, drag menu, text, and buttons.

In the actions layer insert a keyframe on frame 20.

Insert a keyframe on the drag menu and buttons layer at frame 20.

Create a textbox on the first frame of of the text layer and type in the following text in a column:

Convert all the text names to a graphic and tween it in from the left with alpha ending on frame 20.

Drag and drop a copy of your invisible button over the "goto" text on the buttons layer and size it to fit the text. (You created this much earlier in this workshop).

Create a new movie clip and name it "actions drag menu".

Create the following layers: actions, text, draggable menu, drag button, close button, light palette.

On the actions menu insert stop actions on frames 1 and 10.

Create a colored panel like the one shown below on frame 10 of the draggable menu layer.

Select the top navy blue fill and cut it.

Paste it in place on frame 10 of the drag button layer.

Convert this box to a button and give it a black over and down state.

Cut the orange box and paste it in place on frame 10 of the close button layer.

Convert it to a button and give it a gray overstate and a blue down state.

On the text layer insert text for the goto action.

On the text layer in frame 10 place a text box over the small orange box at the bottom right and type in "close".

Select the button on the drag button layer and open up the actions window.

Select the on mouse event action and set it to "on press". Select the start drag action and target the dragactions movieclip.

Create another on mouse event and set it to release. Insert the stopdrag action.

Open up the actions box for the close button on the button layer.

Select an on mouse event (release). Give it the goto action to go to frame 1 and stop on the current scene. (This will make the menu disappear since it will go to an empty frame at frame 1).

Go back and open up actions mc movie clip.

When finished get the drag action menu movie clip and place it in frame 20 of the of the actions mc movie clip on the "drag menu" layer. Give it the instance name "dragactions".

Then drag the actions mc movie clip from the library to frame 50 of the main time line in the actions mc layer.

Give it an instance name of "actions mc" for targeting purposes.

This is just a general guideline to the workshop file to help refresh your memory on how to use Flash. It's pretty lengthy and probably would be tedious from start to finish, but it should get you up to par with some advanced features of Flash.

Our site is https://www.virtual-fx.net Flash Resources. We have over 190 Flash tutorials and are always posting more. It's a great resource to the community.

We also have a book out called Foundation Flash 5 that you can get at Amazon.com, Borders, and Barnes & Noble published by FriendsofEd.com. It is a beginner book and very thorough!

Enjoy!

Amanda Farr & Seth Jackson

Team at Virtual-FX.net