The final page of this tutorial gives a practical application used in a Discrete Mathematics class. The broad idea is to create individual questions in separate swf files and then make a managing movie that can import them one at a time and keep track of the student's progress. Note that if these questions use a simple interface (e.g., multiple choice, true/false, etc.), then this can be done as we have described in the Basics section of the www.flashandmath.com website. The additional advantage to the techniques described in this tutorial is that each individual question can have rich user intereractions. In addition, by using individual files, we can add, replace or rearrange the problems quickly and easily. Finally, by using external files we can use the generic problem_manager.fla program to accommodate more than one problem set..
Before discussing the scripts for this application, we encourage you to try out the interface with the applet below.
Scripts for the Counterexample application
The main movie for this application is the file problem_manager.fla. We use three separate problem files, shown separately below, as well as the file video_instructions.swf that is built just like the video2.swf file from the previous page. The only exception is the addition of a gray rectangular background (to cover the main stage) and a button labeled "close video" that simply takes the video_instructions.swf movie to its third and final frame. As with our previous examples, the video_instructions.swf file is closed and removed when it reaches its final frame.
prob0.swf |
|
prob1.swf |
|
prob2.swf |
The problem_manager.fla file has three frames. Frame 1 is an introductory screen with a "BEGIN" button and a button that allows the user to view a video with instructions for the application. This is done using the same ideas we used in the manager4.fla example on Page 3 of this tutorial. The BEGIN button takes the movie to Frame 2, which is put together just like the manage2.fla example from Page 2 of this tutorial. Frame 3 of problem_manager.fla does nothing more than summarize the student's results, so this requires no external clips or videos at all.
Frame 1 Script
The following script is almost identical to the manager4.fla example. The only difference is the use of the .visible property of buttons to assure that buttons on the stage are inaccessible while the video is playing. The video_instructions.swf file has its own "close" button in case the user does not want to watch the entire video, but as in manager4.fla, the video_instructions.swf will be removed automatically when the video has finished playing no matter what.
// Stuff to load and control file as in our previous examples
var instructionsMC:MovieClip = new MovieClip();
var instructionsLoader:Loader = new Loader();
instructionsLoader.contentLoaderInfo.addEventListener(Event.INIT, doneInstructionsLoading);
// When the instructions clip has loaded, play it on the stage and start listening for it to finish.
function doneInstructionsLoading(e:Event):void {
instructionsMC = MovieClip(instructionsLoader.content);
instructionsLoader.unload();
stage.addChild(instructionsMC);
instructionsMC.gotoAndPlay(1);
stage.addEventListener(Event.ENTER_FRAME, runOnce);
}
// When the start button is clicked we will skip to frame 2, the main part of our movie
btnStart.addEventListener(MouseEvent.CLICK, playFirst);
function playFirst(e:MouseEvent):void {
gotoAndPlay(2);
}
// When the "video" button is clicked hide all buttons on the stage and load the video clip.
btnOpenVideo.addEventListener(MouseEvent.CLICK, showVideo);
function showVideo(evt:MouseEvent):void {
btnStart.visible = false;
btnOpenVideo.visible = false;
instructionsLoader.load(new URLRequest("video_instructions.swf") );
}
// Same runOnce function we have used before with addition of making main buttons visible.
function runOnce(e:Event):void {
if (instructionsMC.currentFrame == instructionsMC.totalFrames) {
stage.removeChild(instructionsMC);
stage.removeEventListener(Event.ENTER_FRAME, runOnce);
btnStart.visible = true;
btnOpenVideo.visible = true;
}
}
// Stay on Frame 1 (and let btnStart be the only way to go to Frame 2)
stop();
Frame 2 Script
The script below should look very similar to that of manager2.fla. The most noticeable difference is the use of the arrays arrCorrectAnswer and arrUserAnswer to keep track of the user's answers by getting information from the variables isTrue and foundCounter, which are global variables of the externally loaded clip. You can find these variables defined in the problem files prob0.fla, prob1.fla and prob2.fla. The "dot notation" (e.g., thisMC.isTrue) is a very intuitive way for the parent movie (problem_manager.swf) to get state information from the child movie clip.
// Array of external clips to use. Variable index refers to next clip to be displayed.
var clips:Array = ["prob1.swf", "prob0.swf", "prob2.swf"];
var index:int = 0;
// Array of to store user answers and correct answers for each problem.
var arrCorrectAnswer:Array = new Array(clips.length);
var arrUserAnswer:Array = new Array(clips.length);
// Stuff to load problem files like in previous examples
var theLoader:Loader = new Loader();
theLoader.contentLoaderInfo.addEventListener(Event.INIT, doneLoading);
var thisMC:MovieClip = new MovieClip;
stage.addChild(thisMC);
// Load the next clip, calling doneLoading when initialization is complete.
function nextClip():void {
theLoader.load(new URLRequest(clips[index]) );
}
// Tell AS that the loaded file is a movie clip and add to the stage in place of the previous one.
function doneLoading(e:Event):void {
stage.removeChild(thisMC);
thisMC = MovieClip(theLoader.content);
theLoader.unload();
thisMC.x = 0;
thisMC.y = 50;
stage.addChild(thisMC);
}
// "Next button" calls a function that goes to the next file name (mod the # of files in the list)
// When all files have been used, we go to Frame 3 to get summary of results.
btnNext.addEventListener(MouseEvent.CLICK, playNext);
function playNext(e:MouseEvent):void {
arrCorrectAnswer[index] = thisMC.isTrue;
arrUserAnswer[index] = 1 - thisMC.foundCounter;
index++;
if (index == clips.length) {
stage.removeChild(thisMC);
nextFrame();
}
else {
nextClip();
}
}
// Call nextClip function initially to load the first problem
nextClip();
// Stay on Frame 2 (and let btnNext be the only way to go to Frame 3)
stop();
Frame 3 Summary
The role of Frame 3 is to give results of the student's answers. We do not include the explicit code here because it has nothing to do with the tutorial topic, loading and controlling external clips and video. Frame 3 simply sums the results in the arrCorrectAnswer and arrUserAnswer arrays and puts the results in a textbox already on the stage. See the source code to see how this is done in this case.
Downloads
- The Flash CS3 file problem_manager.fla contains the above code for holding the counterexample problems in the files prob0.swf, prob1.swf and prob2.swf.
- The source files prob0.fla, prob1.fla and prob2.fla contain the code for the individual problems. We do not discuss them in detail here, but it uses fairly basic interactions and the source code is commented.
- The video instructions are contained in the clip video_instructions.swf that is created from the source file video_instructions.fla using the Flash video file instructions.flv created separately in Camtasia.
