Troy Henderson's LaTeX2swf utility (http://www.tlhiv.org/cgi-bin/LaTeX2swf/index.cgi) is a wonderful tool for including nicely typeset mathematical expressions as static (but scalable) graphics in your Flash projects. The link above does not have include any documentation, but the page http://mathonweb.org/wiki/index.php/LaTeX provides information and links on LaTeX as well as a separate LaTeX previewer that produces pdf files and other types. The instructions on the present page will focus on the use of this utility to create the scrolling instructions below:

Step 1. Setting up the ScrollPane component

Open a new Flash (ActionScript 3.0) file, and create an instance of a ScrollPane as we did on page 1 of this tutorial. Give your ScrollPane the instance name spInstructions and set its x, y, width, and height properties to be 10, 10, 425, 350, respectively. Do not bother setting any of the parameters for this ScrollPane within the Properties panel. We will control everything with the script in the Actions panel.

Step 2. Creating the InstructionsClip

Open the Library panel and pull-down the menu from the top-right corner to select the option "New Symbol" as shown in the screen shot below on the left. Fill in the resulting dialog box as shown in the screen shot below on the right. This will make our new MovieClip symbol (called InstructionClip) accessible from our ActionScript code.

Once the MovieClip symbol exists, we can edit it by right-clicking on InstructionsClip in the Library panel (use Ctrl+L to open this panel if it is not already open) and choosing Edit from the resulting menu. This will take you into the timeline for InstructionsClip. We will not be using the timeline or writing code for this particular example -- we will only be adding graphic components to the stage.

Step 3. Adding graphic background and text To create the example shown above, you should (within the timeline for InstructionsClip!) create a filled rectangle with width 400 and height 700 (or so), and set the (x,y) coordinates of this rectangle to (5,5). I added the large static text "Instructions" at the top and drew a horizontal line under it for emphasis. The result of this step is shown below, albeit zoomed out for space considerations. Step 4. Adding mathematical content from LaTeX2swf Go to the site http://www.tlhiv.org/cgi-bin/LaTeX2swf/index.cgi and type the following into the text area. This content is also available in the file instructions.txt if you prefer to copy-and-paste.

\begin{minipage}{2.25in}

A family of curves is given by $F(x,y,\alpha) = 0$. That is, for each value of $\alpha$ the equation defines a curve in $x$ and $y$. To find an equation of the envelope, $\ldots$

\begin{enumerate}

\item Take the partial derivative with respect to $\alpha$.

\item Use the equations of $F$ and $F_{\alpha}$ to eliminate the parameter $\alpha$.

\item The resulting equation in $x$ and $y$ is the envelope.

\end{enumerate}

\end{minipage}

Press the "Preview Output" button and then the "Get SWF" button. You will be prompted to save the output file, which will have default name preview.swf. It would be wise to change the name to something more descriptive like instructions.swf Back in Flash, choose File > Import > Import to Library, and select the instructions.swf file that you just created. Open the Library panel and you will see a generic "symbol" object is new in the library. Right click on this symbol and choose Type > Movie Clip from the menu as shown on the right. You can rename it as well (using the same menu) if you would like, but it is not necessary for our purposes. Finally, make sure you are still within the InstructionsClip timeline (if not, repeat the last paragraph of "step 2" above), and drag an instance of the mathematical instructions movie clip from the Library panel into the middle of your mostly-empty rectangle. Once it is there, you can scale it up by choosing Modify > Transform > Scale with your movie clip selected. The final result can be seen in the InstructionsClip in the source file available in the download section below.

Step 5. Adding the script

The script below will set the parameters for the ScrollPane. In particular, we set the source property to be an instance of the InstructionsClip that we created and linked in the library.

var mcInstructions:InstructionsClip = new InstructionsClip();

// Set parameters so that vertical scrolling will exist if necessary and "drag scrolling" with the mouse is enabled.

spInstructions.verticalScrollPolicy = "auto";

spInstructions.horizontalScrollPolicy = "off";

spInstructions.scrollDrag = true;

// Put the InstructionsClip within the ScrollPane

spInstructions.source = mcInstructions;

Downloads

The source file ScrollPaneInstructions.fla contains the complete example discussed above. In creating that file, we used the external file instructions.swf created by the LaTeX2swf utility with LaTeX input from the file instructions.txt.