Flash Forms

Flash Static Text Fields

1. Using the Text Tool from the Tools window let's make two Static Text Fields with
a Font of _sans and a size of 12.
2. Create two text input fields with the text "Name:" and "Homecity:".
3. Make sure they are lined up properly. With the arrow tool drag a box around both
text fields to select them, then choose from the menu Modify < Align < Right to
get a clean lineup.

Creating Flash Input Fields

1. With the Text Tool selected, choose the following from the Properties window:
Input Text with a Font of _sans and a size of 12.
2. Create two input boxes to the right of Name: and Home: that look something like
this:

Now get them aligned by selecting both boxes with the arrow tool and going to the menu
and choosing Modify < Align < Left

Creating Flash Input Variables

1. If we are going to send this data to another web page, we are going to need access
to the contents of these input fields. Flash uses variable names as a way to access
the values that are contained in input text fields. Variable names are assigned in
the Properties window when you have the text input field selected.
2. Use the arrow tool to select the text input field to the right of Name: and set Var:
field to "Name".
3. Select Home's input and name it "Home".
Creating a Flash Submit Button
1. To access these buttons go to the Flash menu Windows < Common Libraries <
Buttons and you should see this window popup.
2. Open the "buttons" directory and select any button.

Adding Flash Action getURL

We are now going to add an action to our button, so when it is clicked it will send the
data contained in the input fields to a web page that will process the data. Using the arrow
tool select the button and open up the Actions window:

1. Window < Actions. Navigate to the getURL action.

2. Make sure that Script Assist is turned on and then double click getURL to bring up
the ActionScript wizard for getURL.
3. Enter in the following information to the fields and you'll be done!

• URL: "http://www.example.com/processer.php"
• Window: ""
• Variables: "Send Using POST"
 FLASH BANNER

Flash Banner Dimensions

There are several standard advertising dimensions for a Flash file and this lesson will focus on the
most popular of those standards, the 468x60 pixel graphical banner (468 pixels wide and 60 pixels
tall). Start a new Flash project and right click on the stage to change the dimensions to the following:

Press OK

Creating a Basic Animation

shape tweening and motion tweening. People are often confused by the difference between the two.
The most important thing to distinguish them is that a shape tween uses shapes, while an animation
tween uses symbols. If you create an Oval and convert it to a symbol, then you can no longer use
shape tween because it is no longer a "shape".

Motion Tween
rename the default layer "Layer 1" that is in the Timeline window to "Potential".

Choose the Text Tool from the Tools menu and choose the following settings for your text from the
Properties window:

Static Text, Font: Verdana, Fill Color: Black, Font Size: 15

Left click on the stage and type "Unlock Your Potential" and center this text the best you can.
Now insert three keyframes at frames 57, 60 and 135. We will be using these frames soon.

We are now going to add "Tizag Tutorials" to our flash banner. Create a new layer and rename the
layer "Tizag Title".

Insert KeyFrames at 55, 60 and 135.

Select frame 55 and choose the Text Tool from the Tools window. Set the following properties: Fill
Color #FF6600 (orangey), Static Text, Font: Verdana, Font Size: 28

With your mouse just above the viewable Stage area Left-Click to create a new Static Text field and
type "Tizag Tutorials" and center it.

Select the 60th KeyFrame in the Timeline window for layer "Potential" and select the text field which
contains "Unlock Your Potential". We are going to squash this text down to about half of its original
height. In the Properties window, enter 10 into the Height (marked with H:) text field and press enter.
Then drag your text down a bit, as we have done.

Select the Tizag Title Layer, while still in frame 60, drag the text field "Tizag Tutorials" so that it rests
right on top of "Unlock Your Potential".
Right click on frame 58 and select Create Motion Tween for both the Tizag Title and Potential layers.

Shape Tween
Let's move on to our shape tween. Add a new layer to the Timeline window and name it Bubbles.

Select the Oval tool from the Tools window and create to small blue circles (by holding the shift key
when you create the shape). Place one circle in the top left.

Use the arrow tool to select that circle and then copy and paste an identical circle. Place this copy in
the top right section of the banner.

Insert KeyFrames at frame 60, 110 and 135 in the Timeline window for the Bubbles layer.

In the Timeline window for the Bubbles layer select frame 60. We are now going to manipulate our
shapes. With the Selection Tool from the Tools window select the left circle and drag it so it is just a bit
to the left of "Tizag Tutorials". Next, select the right circle and drag it so that it is equally far away on
the right side of "Tizag Tutorials".

Select the left circle and press Ctrl+T to bring up the Transform window, if it is not already displayed.
Check the constrain checkbox, enter in 300% for the new size
Press enter. Your left circle should now look like this:

Do the same to the right circle.

Left-click on any from frame 2-59 in the Timeline window for the Bubbles layer. Within the Properties
layer is a Tween drop down selector, choose Shape from this selector to create a Shape Tween from
frame 1-60 for the Bubbles layer.

Left-click anywhere between frame 61 and 134 and choose the Shape tween from the Properties
window.

Flash Button
The process of creating a button in Macromedia Flash. Remember, Macromedia has included a large
number of premade buttons in the common libraries. Access them by going to the menu and selecting
Windows < Common Libraries < Buttons!

Creating a Flash Button

1. Start with a clean slate by going to File < New and select Flash Document.
2. From the Tools window select the Oval shape tool.
3.Select the red fill and the black stroke from the Properties window:

Hold shift and left click on the stage and drag to create a circle like the one we have below.

4.Select the arrow tool from the Tools menu and double click the circle to select both the red fill and the
black stroke. Right click the circle and choose Convert to Symbol

Name: My_Button, Behavior: Button

Press OK

5.With the arrow tool, double click My_Button to bring up the symbol edit mode for My_Button. We are
now going to change the behavior when the user mouses over the button. Choose the Over column
from the timeline for My Button.

6.Insert KeyFrame in the Over state. (A shortcut for inserting KeyFrames is the F6 key)

With frame Over still selected, double-click the circle to select it and choose a blue fill from the
Properties window.
7.Select Down in the Timeline for My_Button and insert a KeyFrame for Down.

8.With frame Down still selected, double-click the circle to select it and give it a yellow fill using the
Properties window.

Testing Out Button States

Go to the Flash menu and navigate to: Control < Test Movie. Mouse over and click your button. Notice
that it changes colors!

Adding a Button Action: GetURL

Now we want our button to actually do something, so let's make it so when you click the button it loads
up Tizag.com. From the menu choose: Edit < Document

Right click our button and choose "Actions" from the pop up menu if it is not already selected. Within
the Actions Toolbar select: Action < getURL. Be sure that your Script Assist is enabled.

Double click getURL to create a new getURL action, which also brings up the text fields you will need
to manipulate. Type the URL in the URL field

Test the movie