Setting+up+an+Activity+in+Flash

The purpose of this page is to provide CLIPS kids (and others) with instructions on how to set up all of the inital components (text, images, etc.) given in a storyboard for an activity so that a programmer can take over and develop the logic for the activity.

1. Open an up-to-date [|ActivityTemplate.fla]
 * To open this file, you will need be in Internet Explore then right click on the link and "Save Target as"
 * Change the file extension from .doc to .fla
 * The fla needs to be saved in a folder that is at the same level as your classes folder. (Get your CLIPs parent to help you with this.)

Before proceeding, make sure you are comfortable navigating around the template. You should know how to :
 * get to a particular scene and frame number
 * insert a layer in the time line
 * convert a frame to a keyframe
 * open the Library (F11), drag objects from the libary to the stage
 * compile the activity (CTRL Enter)
 * open the actions panel (F9) and the properties tab (CTRL F3)
 * use the drawing tools to create basic shapes

2. Go to Scene 1, global:Frame 1.
 * Using the information on page 1 of the storyboard, update lines 30 thru 42. (ClusterName thru this.miniwrap_mc.activityNumber)
 * Set the PreferredCalc = " basic" for integer activities.
 * Change line 16 to var showFrameNumbers:Boolean = true;

3. Save the file using the Activity name and numbering convention at the top of the storyboard. Eg. CL##_C##_A##_M_ActivityName The fla needs to be saved in a folder that is at the same level as your classes folder. (Get your CLIP parent to help you with this.)

4. Use the [|StoryboardBuilder.swf] to create the code for each scene in the storyboard. See instructions below.

5. If clip art images are provided in a folder along with the storyboard, then these should be placed directly on the stage from the folder. See instructions below.

6. Save the fla after creating each scene.

7. Compile the fla (CTRL ENTER) and play it to see if it looks like you think it is supposed to.

**Using the Storyboard Builder ** Read the instructions that appear on the stage when the tool first opens.

**Select the Text Tab:** a) Replace Heading 1 b) Replace the instructions with the text from the storyboard. Use the blue dot to resize the text box if necessary. c) Textboxes which are to contain feedback, should appear in blue font. This will happen automatically as long as you select feedback on the text tab.

//Note:// Text boxes need to be a little bit larger than the text (an extra line or so) otherwise parts of the text sometimes disappear. However, the text boxes should not be overlapping each other or other objects on the stage.


 * Add the various other components to the stage.**

Notice there are two options for each object: Edit is used to create and modify the object; Move is used to adjust its location. The "Custom btns" tab is used to create buttons using your own wording. Objects may be resized using the blue dots when in Edit mode. Boxes which will be used for input from the user should be created using the GUI input box.

**Save your work:** In the Storyboard Builder, saving each scene allows you to go back and modify it later if need be. This is particularly useful for scenes that have multiple frames with only one or two things changing between scenes.

a) Enter the correct Cluster #, Clip #, Activity #, Scene# and Frame # in the boxes at the top. Use the actual Scene and Frame number in the fla you are creating, not the ones in the Storyboard. b) Enter your name where it says "Storyboard by". c) Click on File menu --- Select Save

**Accessing the code** Click on the File menu

a) If you have saved your work previously, select Open. Complete the search fields for the activity you are looking for. You can get all of the files you have saved, by typing your name into the Author box. Press Load. Select the file you want. Then follow the directions in step b).

b) To get the code for the elements that are currently on the stage, select Code.

The storyboard often tells you to place stuff on Frame 1...when programming, Frame 1 is reserved for initializing the components on the stage. So if the storyboard indicates something is to go on Frame 1.. it will actually take two frames in the actual fla.

Copy the code for frame 1 by clicking on the mini clipboard icons. Paste it below the code that already appears in the template on the actions & initialize layer frame 1 of the scene you are working on. Start building each activity in Scene 2. Copy the code for frame 2 from the storyboard builder and paste it into frame 2 of the of the scene you are working on.

The activity template has default text boxes already created on the stage for each scene. You will need to delete these text boxes. If you forget, you will get overlapping text. Click on the boxes on the stage and press delete.

**To add subsequent frames to the same scene:** Make the necessary changes to the stage in the Storyboard Builder.

When you click on CODE, you will get all of the elements (the old and the new) on the stage. Place Frame 1 code on Frame 3. Place Frame 2 code on Frame 4. Code must appear on a Key Frame. To convert a frame to a key frame, click on it in the timeline and press F6.

In Frame 3 and Frame 4, delete any code that is duplicated from the first two frames except for the following:
 * Frame 3: keep the "import" statements which appear near the top
 * Frame 4: keep the "stop;" and "showcontinue;" which also appear near the top

You will also need to eliminate any previous elements that you no longer wish to see from the stage. To do this, you will need to set their _visible property to false. Eg. star_mc is a movie clip created in frame 1... if later, say in frame 5 you no longer want to see the star, you need to add this line of code. star_mc._visible = false;

Repeat as needed for subsequent pairs of frames until the Scene is complete.

Mathcots To get a mathcot to show up, you will also need to drag the appropriate movie clip from the MathcotLibrary.fla to the Mathcot folder in the fla you are working on. The MathcotLibrary.fla is too large to upload to the wiki. Ask your CLIP parent to help you access this file.

**Importing an Image from a folder** Insert a new layer in the timeline for each image. Place a keyframe in this layer where you want the image to appear.

To preserve the Vector properties of images , a) drag clip art (with wmf extensions) from the folder to the stage, blue rectangles should appear around all the component pieces of the image. b) Right click and select convert to symbol. c) Give it a meaningful name ending in _mc... Eg. dart_mc

Use the properties tab to size and position the object on the stage. The colour can also be adjusted if necessary.

**To copy a scene from an existing activity**

Ask someone to help you with this the first time you do it.


 * Open both the activity you are working on (Current Activity) and the activity that you wish to copy a scene from (Old Activity).
 * Open the library (F11).
 * Open a new library panel. (blue button to the right of the activity name in the library)
 * There should now be two library panels open.
 * Set one panel to show the library objects for the Current Activity and the other to display the objects for the Old Activity.
 * Click on the Scene in the library for the Old Activity that you wish to copy and drag it over the library for the Current Activity.
 * You should get an error message that says "Resolve Library Conflict: One or more library items already exist in the document." Select "Replace existing items" and press OK
 * Compile the Current Activity to see if everything is working the way you hoped. If not, you will need to ask someone to help you trouble shoot.