How to Use the Picture Scroller Template

The CommandSim Fire: Instructor edition distribution includes templates (base Flash documents) that simplify performing certain tasks. For example, on this page, we will show you how to use the template for the picture scroller. You can use the picture scroller without the template, but you should be familiar with using Flash components before doing so. These templates are installed into Flash when you install CommandSim Fire.

Steps to Make a Scrolling Picture

1. Before you begin, find a photograph you want to use as the scrolling background. This photograph should be larger than 640x480 pixels or else there will be no scrolling necessary!
2. One template included in distribution is called Basic Scrolled Image. When you first open Flash, you need to click on the CommandSim folder under the heading "Create from Template." If you do not see this folder, you have not installed CommandSim Fire properly.
   
   As the description reads, the Basic Scrolled Image is a template with a scrolling picture element provided by default:
   
   
   
3. Click OK and Flash will open with the picture scrolling elements already embedded. The Instructions will be displayed prominently:
   
   
4. We will follow these steps in this tutorial. Right-click over the instructions and choose the Edit in Place menu entry.
   
   
   
5. Bring in a photograph by choosing the menu File > Import... > Import to Stage. When the photograph comes onto the screen, click and drag on the photograph to align its top-left corner with the top left corner of the Stage, indicated by a small crosshairs icon. In the figure below, we have not aligned them yet.
   
   
   
   Optional: After you've gotten the hang of moving a picture around, you can try out Flash's alignment tool (Window > Align menu) that can help you align graphics precisely, either to one another (all those selected), or to the Stage. In our case, we could select the picture and align it to the top-left of the Stage.
   
   
   
   You align things to the Stage by selecting "To stage:" and the element you want to align, then you click on the button indicating how to align those elements. For example, top-left is the first graphic below "Align" (which is align to left border), and the fourth graphic on the same row (which is align to top).
6. Once you have aligned your photograph to the top left corner, you're all done!
   
   Save the movie (File > Save). When you save the movie, if you are using Flash 8, you will a message asking if you want to save it in the new format (since the template is in Flash MX 2004 format, for backwards-compatibility):
   
   
   
   Press the Save button. Now test it (Control > Test Movie).
   
   
   
   When a picture is larger than the Stage, the picture scroller does not tell the viewer it can scroll -- he or she must move the cursor to the border of the picture.
   
   Advanced: The picture scroller can add a note to let viewers know they can look left, right, up, or down. Those are the white rectangles you see above (we call them "text cues"). Here is a closeup:
   
   
   
   On the next page, you will see how to control this as well as all of the scrolling pictures parameters, such as scroll speed, initial position, border width, etc.
7. Because you saved the movie, Flash will create an SWF (distributable) file in the same folder as the source file (FLA). If the people you are distributing it to do not have Flash, you can click on File > Publish to create an HTML page that accompanies and displays the SWF. For PowerPoint, you will include the SWF and do not need an HTML page.
8. Click on the tab that says Scene 1 (next to the words Timeline) and you will finish editing your scrolling view.
   
   If you want to change the picture, or you have just entered Flash and opened the document you saved, right-click over the picture and choose Edit in Place (as in Step 4). Once you are now editing the picture, you can delete it (select it and press the Delete key), and you can then import a new picture.

Adding Smoke and Fire into your Scrolling Picture

When you issue Edit in Place, you are actually editing what Flash calls a "movie clip". The movie clip contains your photograph and the instructions. You can place other things in the movie clip, such as CommandSim Effects generators. In this way, the smoke will stay exactly in place when your viewers scroll.