• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Lesson 16. A Component-Based Flash Quiz > Preparing the Coldfusion Pages

Preparing the Coldfusion Pages

In this task, you will create the dante_quiz_login.cfm page and the dante_quiz_ questions.cfm page. The third page—dante_quiz_results.cfm—you'll complete in Lesson 17.

1.
Open dante_quiz_login.cfm in Dreamweaver. Add three paragraphs of text, as follows to the main body of the document. Link the word Return to index.cfm.

Take this ungraded quiz to see how well you've mastered the material.

To access the quiz, please login below.

Return to the Dante site home page.

The third line is supposed to be blank; that's where you'll add the form in a moment.

2.
Position the insertion point in the blank line, and use the Forms category of the Insert bar to insert a form. In the Property inspector, name the form frm_login, set its Action to dante_quiz_questions.cfm, and verify that its Method is set to POST.

This step creates the basic functionality of the form. Now all the form needs is a field to enable the user to enter her or his username and a Submit button so she or he can actually submit the form.

3.
With the insertion point inside the form, create a table with two rows and two columns, a Table width of 60 percent, a Border thickness of 1, Cell padding of 3, and Cell spacing of 0.

Remember, you can always put nonform elements in forms as well. This table will help us with layout.

4.
In the top-left cell of the new table, type Email Address; in the upper-right corner, insert a text field using the Forms category of the insert bar, and name it username; in the lower-right corner, insert a Submit button.

The form is now ready for use.

5.
Save, Put, and close dante_quiz_login.cfm.

It's easy to forget to Put files when you are done working on them, so get in the habit of putting files just before you close them.

6.
Open dante_quiz_questions.cfm. In the Bindings panel, select New Binding (+) > Form Variable. In the Form Variable dialog, name it username.

As before, creating the binding tells Dreamweaver how to find data that you expect to be available to the page.

7.
Replace the placeholder body text with You logged in as: and press Enter/Return once to create a new paragraph beneath it.

You'll dynamically output the username after the colon in the first line, and you'll insert the Flash movie in the second line.

8.
From the Bindings panel, press and drag the username variable onto the page to the right of the colon in the first line.

This should be familiar by now. As before, Dreamweaver writes a <cfoutput> tag into the code. At runtime, ColdFusion will replace <cfoutput>#form.username#</cfoutput> with the email address entered into the form on dante_quiz_login.cfm.

9.
Position the insertion point in the blank line just below the first line, and choose Insert > Media > Flash. Navigate to and select flash/dante_quiz.swf.

This step inserts the Flash movie into the page, but it does not yet insert the username variable Flash movie.

Flash has numerous options for sending data in and out. One of the simplest is to pass the variable in as a part of the request for the movie. When you insert a Flash movie into HTML, you provide the URL specifying where the movie is located.

10.
Click to select the Flash movie, and switch to Code view.

If you look in the code, you will see the Flash movie's URL referenced twice. Inserting Flash movies into HTML pages requires a bit of redundancy, because Internet Explorer deals with media players like the Flash player different than Netscape and other browsers. Specifically, the HTML includes both the <object> and <embed> tags, which are used to insert special media files into browsers. Both tags require the URL to the special media file, in this case the SWF, is included.

48 <!-- InstanceBeginEditable name="main_content" -->
49 <p>You logged in as:<cfoutput>#Form.username#</cfoutput></p>
50 <p>
51  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwav
52     <param name="movie" value="flash/dante_quiz.swf" />
53     <param name="quality" value="high" />
54    <embed scr="flash/dante_quiz.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type=
55   </object>
56  </p>
57 <!-- InstanceEndEditable --></td>


					  

You can append name-value pairs to these URLs, and when you do those variables are available in the main timeline of the Flash movie. Thus, if you wanted to pass the variable pairing username=yuki@sheepman.com into your Flash movie, the URL for the <object> and <embed> tags that insert the Flash movie would look as follows:

flash/dante_quiz?username=yuki@sheepman.com

The question mark separates the file from the variable(s). In this case, only one name-value pairing follows. The only catch is that you don't actually know the value in advance; you need to capture the username entered into the form. This problem, of course, can also be resolved with the ever-useful <cfoutput> tag.

11.
In Code view, append ?username=<cfoutput>#form.username#</cfoutput> to each of the two URLs. Each URL should read as follows:

"flash/dante_quiz.swf?username=<cfoutput>#form.username#</cfoutput>"

The <cfoutput> block will be resolved before the page is ever sent back to the browser, so by the time the Flash movie is requested, the correct data will already exist and be inserted into the Flash movie.

48 <!-- InstanceBeginEditable name="main_content" -->
49 <p>You logged in as:<cfoutput>#Form.username#</cfoutput></p>
50 <p>
51  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwav
52    <param name="movie" value="flash/dante_quiz.swf?username=<cfoutput>#form.username#</cfoutput>" />
53     <param name="quality" value="high" />
54    <embed src="flash/dante_quiz.swf?username=<cfoutput>#form.username#</cfoutput>" quality="high" pluginspage="http
55   </object>
56  </p>
57 <!-- InstanceEndEditable --></td>


					  

12.
Save and Put dante_quiz_questions.cfm. Also, be sure to Put flash/dante_quiz.swf.

You are ready to test this portion of the pages/movie.

13.
Select dante_quiz_login.cfm in the Files panel, and press F12. Enter an email address in the form and click Submit.

The second page, dante_quiz_questions.cfm should load, and the Flash movie with it. The username variable should be resolved both in the regular page and in the Flash movie.

If you got an error, make sure that you uploaded all three files, and that you tested starting from dante_quiz_login.cfm. If you try to test dante_quiz_questions.cfm, you'll get an error because that page depends on a form variable called username to have been submitted, and that variable exists only if you access dante_quiz_questions.cfm from dante_quiz_login.cfm.


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint