Page 4. Counterexample Application

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

Back to Intermediate Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.