Adobe Flash

I am still working in Flash. Flash is not dead! Earlier this month (February 8th) Adobe announced that Flash is getting a name change. Flash is now called Adobe Animate CC to better reflect its animation ability in an HTML5 world. But I still develop some courses in Flash (for various reasons). Earlier this week a client asked us to create a printable page for an interaction in Flash.

These instructions may sound familiar. I have created a printable results page in Captivate (and even a printable PDF interaction in Captivate), and Bryce taught us how to do it in Storyline. The principles are the same for Flash.

Step 1: Download the Zip File 

Extract these files (download link). We will be editing print.html. You can change logo.png to your logo. Just name it logo.png and place it in root of the file.

Step 2: Incorporate text Variables in Your .fla File

Create 5 text boxes for the questions. Set these as Dynamic Text and give each question an instance name of question#, where # is a number 1-5.  Set question1 on frame 1, question2 on frame 2, question3 on frame 3, etc.

step2a

Create 5 text boxes for the learner to type into. Set these up as Input text and give them an instance name of input#, where # is a number 1-5. Set input1 on frame 1, input2 on frame 2, input3 on frame 3, etc.

step2b

Step 3: Set up the buttons

Create the next button. Copy the next button 4 times and place them on frames 1, 2, 3 and 4. Give them an instance name of nxt_btn#, where # is a number 1-4.

step3a

Create a print button. Give it an instance name of print_btn.

step3b

Step 4: Setting up the actions

If you have any trouble with this step, please look at the .fla provided. First create an actions layer. We are then going to write actions on each frame. Frames 1 and 5 will be slightly different. But 2-4 will be the same.

On frame 1, we are setting things up. Variables text1 through text5 are for the input text boxes. Variables qtext1 through qtext5 are the question variables.

stop();
//declare your variables
var text1, text2, text3, text4, text5 = ""; //this is the feedback text boxes
var qtext1, qtext2, qtext3, qtext4, qtext5 = ""; //this is the question box textboxes

Next we create some functions. This first function is for the first next button. Pretty much what it says is “send what I put in the input box into text1, send the question to qtext1, and then go to the next frame.”

//next button action for item 1
nxt_btn1.addEventListener("click", nxt_btn_1);
function nxt_btn_1(e: MouseEvent): void {
text1= input1.text;
qtext1= question1.text + "~~";
this.play();
}

step4a

Copy the above text and go to the next frame. Type stop(); then paste the text and change where it says 1 to 2. You should have to change 1 to 2 eight different times.

step4b

Do this for frames 3 and 4, making the appropriate number changes as before.

On frame 5, it will be different. Copy this text below:

stop();
//print button
print_btn.addEventListener("click", pnt_btn_5);
function pnt_btn_5(e: MouseEvent): void {
text5 = input5.text;
qtext5= question5.text + "~~";
printablePage();
}

It’s pretty much the same, except it calls a print function after it gets the variables text5 and qtext5 into place.  The print function looks surprisingly similar to the other print functions we have done in Storyline and Captivate tutorials (linked above).

Copy and paste the following text:

function printablePage():void{
trace("1", text1, "2", text2, "3", text3, "4", text4, "5", text5);
var header = "Your header goes here~~"
var args =(
"~~Question 1~~" + //~~ is the splitter
qtext1 +
text1 +
"~~Question 2~~" +
qtext2 +
text2 +
"~~Question 3~~" +
qtext3 +
text3 +
"~~Question 4~~" +
qtext4 +
text4 +
"~~Question 5~~" +
qtext5 +
text5
)
var url = ("print.html?=" + header + args);
if (ExternalInterface.available) {
ExternalInterface.call("alert", "External Interface is Working!!!!");
ExternalInterface.call("window.open", url, "win", "height=600,width=800,toolbar=no,scrollbars=yes");
}
}

We have a variable called header and a variable called args. Header will be the title of the page that you print. Variable args will be the text from the questions and the input boxes. The ~~ are the splitters. I have ~~ before and after the Question # text. This will add a line break before and after the Question # text. You may have also noticed I placed + “~~” in the qtext# variable on the next and print functions. I thought this was a cleaner place to place it. You may want to place it so it says something linke qtext1 + “~~” + instead. For me it seemed cleaner to view it the way I have it above.

In the next section, after args variable is set, you will see a variable named url. This points to the print.html file inside the .zip.

You can comment out the line that starts with “trace(“1”, text1…” And the one that starts with “ExternalInterfaces.call(“Alert”,” by placing // in front of them. These are for debugging purposes.

step4c

Step 5: Setting up print.html

Open up the print.html file included in the zip. Here you can change the CSS of how the text appears once you press print by changing the code on lines 43-85.

Lines 27-40 allow you to change the formatting a little more. Text positon starts from the top and goes to the bottom. You will have to publish and upload and place your file on a server (FTP, SCORM, etc.) to test it rather than testing it locally on your machine. As another tip, I use Chrome and use their inspect tool when I test. Right Click on an empty space off stage and click Inspect. This will bring up an Inspect popup. Click the arrow on the top left and then hover over the paragraphs to see what formatting it is. In this image it’s an H2. This will help you decipher what to change to make it look the way you want it too. Line 34 in the print.html file says:

else if (textPosition == 2 || textPosition == 5 || textPosition == 8 || textPosition == 11 | textPosition == 14) {
document.write('<h2>' + decodeURIComponent(pVar) + '</h2>');
}

Use the textPosition and create another “else if” if additional rules are needed. || means or. So the code reads like, “if text position is 2 or 5 or 8 or 11 or 14, do this rule.”

step5a

Lines 88-90 are the print function. I have it set it up to send the print pop up immediately on loading. You can change this behavior at this point in the code to whatever you need.

Step 6: Publish and clean up

Don’t forget to change the logo.png to your logo.  Also, to test it I would suggest selecting the HTML Wrapper.

step6

Then Upload it and finalize. Or repeat step 5 until you get it the way you want.

Once you have it finalized, your users will be able to Print the page with the content you created!

Let us know if you have questions in the comments below and we’ll do our best to help you get this working.

Pin It on Pinterest