ColdFusion 9.0 Resources

Creating Slide Presentations

You can use Adobe ColdFusion to create slide presentations.

About ColdFusion presentations

ColdFusion lets you create dynamic slide presentations from source files and from CFML and HTML code on a ColdFusion page. You can use data extracted from a database to populate the slide content, including graphs and charts. Also, you can add images, audio tracks, and video clips to each slide in the presentation. ColdFusion provides three tags for creating slide presentations:

Tag	Description
cfpresentation	Defines the look of the presentation and determines whether the presentation is saved to files or run directly in the client browser.
cfpresentationslide	Defines the content of the slide from one of the following: A SWF file An HTML file A URL that returns HTML content HTML and CFML code in the `cfpresentationslide` start and end tags
cfpresenter	Provides information about the person presenting a slide. You can assign a presenter to one or more slides. Presenter information is displayed in the control panel for the duration of the slide.

You specify at least one slide for the presentation and can assign each presenter to one or more slides. The following example shows a slide presentation with content from four different sources and two presenters:

<cfpresentation title="myPresentation"> 
    <cfpresenter name="Tuckerman" title="V.P. of Marketing"  
            email="tuckerman@company.com"> 
    <cfpresenter name="Anne" title="V.P. of Sales" email="anne@company.com"> 
    <cfpresentationslide src="slide1.swf" title="Overview" duration="10"  
            presenter="Anne"/> 
    <cfpresentationslide src="slide2.htm" title="Q1 Sales" duration="30"  
            presenter="Anne"/> 
    <cfpresentationslide src="http://www.markettrends.com/index.htm"      
            title="Market Trends" duration="30" presenter="Tuckerman"/> 
    <cfpresentationslide title="Summary" duration="10"> 
        <h3>Summary</h3> 
            <ul> 
                <li>Projected Sales</li> 
                <li>Challenges Ahead</li> 
                <li>Long Term Goals</li> 
            </ul> 
    </cfpresentationslide> 
</cfpresentation>

Note: The cfpresentationslide tag requires an end tag. If you specify a source file as the slide content, use the end slash as a shortcut for the end tag.

When the presentation runs, the slides appear in the order they are listed on the ColdFusion page for the duration specified in each slide. The presenter information is displayed in a control panel next to the slide to which it is assigned.

Creating a slide presentation

Use the cfpresentation tag to customize the look of the slide presentation. Customizations can include the control locations and the colors used in the presentation interface, as the following example shows:

<cfpresentation title="Sales Presentation" controlLocation="left" primaryColor="##0000FF" shadowColor="###000033" textColor="##FFFF00" showNotes="yes">

The title appears at the top of the control panel. The color settings affect the presentation interface, but not the format of the slides within the presentation. Set the showNotes attribute to yes to display text notes that are defined for individual slides.

If you do not specify a directory, as in the previous example, ColdFusion runs the presentation directly in the client browser. The presentation uses files written to a temp directory on the server. To save the presentation, specify an absolute path or a directory relative to the CFM page. (ColdFusion does not create the directory; it must exist already.) In the following example, the presentation files are stored in the salesPresentation directory on the local drive:

<cfpresentation title="Sales Presentation" directory="c:\salesPresenation">

ColdFusion automatically generates the following files necessary to run the presentation and saves them in the specified directory:

components.swf
index.htm
loadflash.js
viewer.swf

Also, ColdFusion creates a subdirectory called data where it stores the following files:

srchdata.xml (which creates the search interface)
vconfig.xml
viewer.xml
A SWF file generated for each slide in the presentation
Copies of the media files referenced in the presentation slides

Media files can include JPEG files, FLV and SWF video files, and mp3 audio files. To run the presentation that you saved to files, double-click the index.htm file.

Note: ColdFusion does not overwrite the files referenced by the slides in the presentation; changes to the generated presentation files do not affect the source files.

Adding presenters

Optionally, you can add one or more presenters under the cfpresentation tag. ColdFusion displays the presenter information in the control panel for the current slide to which it is assigned. A slide does not require a presenter.

Use the cfpresenter tag to specify personal information. This information can include a title, an e-mail address, a logo and an image of the person, as the following code shows:

<cfpresentation title="Sales Presentation"> 
<cfpresenter name="Anne" title="V.P. of Sales" biography="Anne Taylor has been a top seller at Widgets R Us for five years." logo="images/logo.jpg" image="images/ataylor_empPhoto.jpg" email="ataylor@widgetsrus.com">

The name attribute is required. You use this value to assign the presenter to one or more slides. To assign a presenter to a slide, use the cfpresenter tag name attribute value as the cfpresentationslide tag presenter attribute. The following example creates a presenter named Tuckerman and assigns him to a slide called Overview:

<cfpresentation title="Sales Presentation"> 
<cfpresenter name="Tuckerman" title="V.P. of Marketing"> 
<cfpresentationslide title="Overview" src="overview.swf" presenter="Tuckerman" duration="10"/> 
... 
</cfpresentation>

Note: Assign presenters explicitly to slides. To assign a presenter to more than one slide, use the presenter name in each of the cfpresentationslide tags.

When you assign a presenter to a slide, the presenter information is displayed in the control panel for the duration of the slide. Images must be in JPEG format and the files must be located in a path relative to the ColdFusion page. ColdFusion maps the email attribute value to the contact link in the control panel. This link opens an e-mail message in the local e-mail application when you click it.

The following code creates three presenters for a presentation and assigns two of the presenters to slides:

<cfpresentation title="Sales Presentation"> 
    <cfpresenter name="Hannah" title="V.P. of Marketing" image="hannah.jpg"> 
    <cfpresenter name="Anne" title="V.P. of Sales" image="Anne.jpg"> 
    <cfpresenter name="Wilson" title="V.P. of Engineering" 
            image="Wilson.jpg"> 
    <cfpresentationslide title="Overview" presenter="Hannah" duration="30" 
            src="slide1.htm"/> 
    <cfpresentationslide title="Q1 Sales" presenter="Anne" duration="15" 
            src="slide2.htm"/> 
    <cfpresentationslide title="Projected Sales" presenter="Anne" 
            duration="15" src="slide3.htm" video="promo.flv"/> 
    <cfpresentationslide title="Conclusion" src="slide4.htm"/> 
</cfpresentation>

The presenter Hannah is assigned to one slide and Anne is assigned to two slides. The last slide in the presentation has no presenter assigned to it. Because Wilson is not assigned to a slide, his information does not appear in the presentation. In the second slide, Anne’s photo is displayed in the control panel. In the third slide, however, the video called promo.flv runs in place of Anne’s photo in the control panel for the duration of the slide. The video does not display in the slide.

Note: Videos must be in SWF or FLV format. You cannot specify audio and video for the same slide.

Adding slides

Use one cfpresentationslide tag for each slide in the presentation. The presentation runs the slides in the order they are listed beneath the cfpresentation tag. You can create content for a slide in one of the following ways:

Source

Description

Example

A SWF or HTML file

The file must be located on the system running ColdFusion. You can specify an absolute path or a path relative to the ColdFusion page.

<cfpresentationslide title="slide 1" src="presentation/slide1.swf"/>

<cfpresentationslide title="slide 2" src="c:/presentation/slide2.htm"/>

A URL

The URL must return HTML content.

<cfpresentationslide title="slide 3" src="http://www.worldview.com/index.htm"/>

HTML and CFML code on the ColdFusion page

Enclose the HTML and CFML code within the cfpresentationslide start and end tags.

<cfpresentationslide>

<h3>Total Sales</h3>

<cfchart format="jpg" chartwidth="500" show3d="yes">

<cfchartseries type="pie" query="artwork" itemcolumn="issold" valuecolumn="price"/>

</cfchart>

</cfpresentationslide>

Creating content from source files

The following code creates a presentation with three slides from source files in different locations:

<cfpresentation title="Garden Mania" directory="gardenPresentation"> 
    <cfpresentationslide title="Seeds of Change" src="c:\gardening\seeds.html" audio="media\hendrix.mp3" duration="30"/> 
    <cfpresentationslide title="Flower Power" src="shockwave\flowerPower.swf" duration="40"/> 
    <cfpresentationslide title="Dig Deep" src="http://www.smartgarden.com/index.htm" duration="15"/> 
</cfpresentation>

In this example, ColdFusion generates the files required to run the presentation in the gardenPresentation directory. It generates a new SWF file in the data subdirectory from each of the slides. ColdFusion also copies the hendrix.mp3 file and saves it in the data subdirectory.

Note: Links within slides created from HTML files are not active.

Creating content from HTML and CFML code

If you do not specify a source file for a slide, create the content by using HTML or CFML in the cfpresentationslide tag body. The following presentation contains one slide with each with the following types of content:

Generated from HTML
Generated from HTML and CFML
Extracted from an HTML file on an external website

<cfpresentation title="The Road Ahead"> 
<cfpresentationslide title="Yellow Bricks" audio="myaudio1.mp3" duration="10"> 
    <h3>Yellow Bricks</h3> 
    <table cellpadding=10> 
        <tr> 
            <td> 
                <ul> 
                    <li>Way to go Dorothy</li> 
                    <li>Making tracks</li> 
                    <li>No place like home</li> 
                </ul> 
            </td> 
            <td><img src="../cfdocs/images/artgallery/maxwell01.jpg"/> 
            </td> 
        </tr> 
    </table> 
    </cfpresentationslide> 
<cfpresentationslide title="Wild Ride" duration="5"> 
    <h3>Wild Ride</h3> 
    <cfchart format="jpg" title="Who's Ahead" show3D="yes" chartHeight=500 chartWidth=500> 
        <cfchartseries type="pyramid"> 
            <cfchartdata item="Dorothy" value=10> 
            <cfchartdata item="Tin Man" value=30> 
            <cfchartdata item="Scarecrow" value=15> 
            <cfchartdata item="Lion" value=50> 
            <cfchartdata item="Toto" value=5> 
        </cfchartseries> 
    </cfchart> 
</cfpresentationslide> 
<cfpresentationslide title="The Golden Age of Ballooning" duration="10" src="http://www.balloning.com/index.htm"/> 
</cfpresentation>

Note: The value for the format attribute of the cfchart tag must be JPG or PNG.

The content for slides is not limited to static data: you can generate content from information extracted from a database or a query of queries.

Sample presentations

This section provides two sample presentations.

Example 1

The following example creates a simple presentation that incorporates data retrieved from the cfdocexamples database. It shows how to perform the following tasks:

Create slides generated from HTML and CFML.
Add images to slides.
Add charts and tables with data extracted from a database.
Add audio tracks to individual slides.

<!--- The following query extracts employee data from the cfdocexamples  
            database. ---> 
<cfquery name="GetSalaryDetails" datasource="cfdocexamples"> 
    SELECT Departmt.Dept_Name, 
        Employee.FirstName, 
        Employee.LastName, 
        Employee.StartDate, 
        Employee.Salary, 
        Employee.Contract 
    From Departmt, Employee 
    Where Departmt.Dept_ID = Employee.Dept_ID 
    ORDER BY Employee.LastName, Employee.Firstname 
</cfquery> 
 
<!--- The following code creates a presentation with three presenters. ---> 
<cfpresentation title="Employee Satisfaction" primaryColor="##0000FF" glowColor="##FF00FF" lightColor="##FFFF00" showoutline="no"> 
    <cfpresenter name="Jeff" title="CFO" email="jeff@company.com" 
            logo="../cfdocs/getting_started/photos/somewhere.jpg"  
            image="../cfdocs/images/artgallery/jeff01.jpg"> 
    <cfpresenter name="Lori" title="VP Marketing" email="lori@company.com" 
            logo="../cfdocs/getting_started/photos/somewhere.jpg"  
            image="../cfdocs/images/artgallery/lori01.jpg"> 
    <cfpresenter name="Paul" title="VP Sales" email="paul@company.com" 
            logo="../cfdocs/getting_started/photos/somewhere.jpg"  
            image="../cfdocs/images/artgallery/paul01.jpg"> 
 
<!--- The following code creates the first slide in the presentation  
            from HTML. ---> 
    <cfpresentationslide title="Introduction" presenter="Jeff" 
            audio="myAudio1.mp3" duration="5"> 
    <h3>Introduction</h3> 
    <table> 
        <tr><td> 
            <ul> 
                <li>Company Overview</li> 
                <li>Salary by Department</li> 
                <li>Employee Salary Details</li> 
            </ul> 
        </td></tr> 
    </table> 
    </cfpresentationslide> 
 
<!--- The following code creates the second slide in the presentation. 
            The chart is populated with data from the database query. ---> 
    <cfpresentationslide title="Salary by Department" presenter="Lori" 
            duration="5" audio="myAudio3.mp3"> 
        <h3>Salary by Department</h3> 
        <cfchart format="jpg" xaxistitle="Department" yaxistitle="Salary"> 
            <cfchartseries type="bar" query="GetSalaryDetails"  
                    itemcolumn="Dept_Name" valuecolumn="salary"> 
            </cfchartseries> 
        </cfchart> 
    </cfpresentationslide> 
 
<!--- The following code creates the third slide in the presentation. The table is populated with data from the query. The table also contains an image located relative to the CFM page on the server. ---> 
    <cfpresentationslide title="Salary Details" presenter="Paul"  
            duration="10" audio="myAudio1.mp3"> 
        <h3>Employee Salary Details</h3> 
        <table border cellspacing=0 cellpadding=5 valign="top"> 
        <tr> 
        <td> 
        <table border cellspacing=0 cellpadding=5 valign="top"> 
        <tr> 
            <th>Employee Name</th> 
            <th>Start Date</th> 
            <th>Salary</th> 
            <th>Department</th> 
            <th>Contract?</th> 
        </tr> 
        <cfoutput query="GetSalaryDetails"> 
        <tr> 
            <td>#FirstName# #LastName#</td> 
            <td>#dateFormat(StartDate, "mm/dd/yyyy")#</td> 
            <td>#numberFormat(Salary, "$9999,9999")#</td> 
            <td>#dept_name#</td> 
            <td>#Contract#</td> 
            </tr></cfoutput> 
            </table> 
        </td> 
        <td width="200" > 
            <img src="images/raquel02.jpg"/> 
        </td> 
    </table> 
    </cfpresentationslide> 
</cfpresentation>

Example 2

The following example shows how to create a simple sales presentation with data from the cfartgallery database. Specifically, it shows how to perform the following tasks:

Create slides generated from HTML and CFML.
Create a slide from a URL that returns HTML content.
Add charts with data extracted from a database and a query of queries.

Add video and audio tracks to individual slides.

<!--- The following query extracts data from the cfartgallery database. ---> 
<cfquery name="artwork" datasource="cfartgallery"> 
SELECT FIRSTNAME || ' '|| LASTNAME AS FULLNAME, ARTISTS.ARTISTID, ARTNAME, PRICE, ISSOLD 
FROM ARTISTS, ART 
WHERE ARTISTS.ARTISTID = ART.ARTISTID 
ORDER BY LASTNAME 
</cfquery> 
 
<!--- The following query of queries determines the total dollar amount of  
            sales per artist. ---> 
<cfquery dbtype="query" name="artistname"> 
SELECT FULLNAME, 
SUM(PRICE) AS totalSale 
FROM ARTWORK 
WHERE ISSOLD = 1 
GROUP BY FULLNAME  
ORDER BY totalSale 
</cfquery> 
 
<!--- The following code determines the look of the slide presentation. ColdFusion displays the slide presentation directly in the browser because no destination is specified. The title appears above the presenter information. ---> 
<cfpresentation title="Art Sales Presentation" primaryColor="##0000FF" glowColor="##FF00FF" lightColor="##FFFF00" showOutline="yes" showNotes="yes"> 
 
<!--- The following code defines the presenter information. You can assign each presenter to one or more slides. ---> 
    <cfpresenter name="Aiden" title="Artist" email="Aiden@artgallery.com" image="../cfdocs/images/artgallery/aiden01.jpg"> 
    <cfpresenter name="Raquel" title="Artist" email="raquel@artgallery.com" image="../cfdocs/images/artgallery/raquel05.jpg"> 
    <cfpresenter name="Paul" title="Artist" email="paul@artgallery.com" image="../cfdocs/images/artgallery/paul01.jpg"> 
 
<!--- The following code defines the content for the first slide in the presentation. The duration of the slide determines how long the slide plays before proceeding to the next slide. The audio plays for the duration of the slide. ---> 
    <cfpresentationslide title="Introduction" presenter="Aiden" duration="5" audio="myAudio1.mp3"> 
    <h3>Introduction</h3> 
    <table> 
        <tr><td> 
            <ul> 
                <li>Art Sales Overview</li> 
                <li>Total Sales</li> 
                <li>Total Sales by Artist</li> 
                <li>Conclusion</li> 
            </ul> 
        </td> 
        <td><img src="../cfdocs/images/artgallery/maxwell01.jpg"/></td></tr> 
    </table> 
    </cfpresentationslide> 
     
<!--- The following code generates the second slide in the presentation from an HTML file located on an external website. ---> 
    <cfpresentationslide title="Artwork Sales Overview" presenter="Raquel" audio="myAudio2.mp3" duration="5" src="http://www.louvre.com/index.html"/> 
 
<!--- The following code generates the third slide in the presentation, which contains a pie chart with data extracted from the initial database query. ColdFusion runs the video defined in the cfpresentationslide tag in place of the presenter image defined in the cfpresenter tag. ---> 
    <cfpresentationslide title="Total Artwork Sold" presenter="Aiden" 
            duration="5" video="video1.flv"> 
        <h3>Total Sales</h3> 
        <cfchart format="jpg" chartwidth="500" show3d="yes"> 
            <cfchartseries type="pie" query="artwork" 
                    colorlist="##00FFFF,##FF00FF" itemcolumn="issold" 
                    valuecolumn="price"/> 
            </cfchart> 
        </cfpresentationslide> 
 
<!--- The following code generates the fourth slide in the presentation with  
                data extracted from the query of queries. ---> 
    <cfpresentationslide title="Sales by Artist" presenter="Paul"  
            duration="5" audio="myAudio3.mp3"> 
        <h3>Total Sales by Artist</h3> 
        <table border cellspacing=10 cellpadding=0> 
        <TR> 
        <TD> 
            <table border cellspacing=0 cellpadding=5> 
                <tr> 
                    <th>Artist Name</th> 
                    <th>Total Sales</th> 
                </tr> 
                <tr> 
                <cfoutput query="artistname"> 
                <td>#FULLNAME#</td> 
                <td>#dollarFormat(totalSale)#</td> 
                </tr> 
                </cfoutput> 
            </table> 
            </td> 
            <td> 
                <cfchart format="jpg" xaxistitle="Artist" yaxistitle="Total Sales" 
                        chartwidth="400"> 
                    <cfchartseries type="bar" query="artistname" 
                            itemcolumn="fullname" valuecolumn="totalSale"/> 
                </cfchart> 
            </td> 
            </tr> 
        </table> 
    </cfpresentationslide> 
 
<!--- The following code defines the final slide in the presentation. This slide does not have a presenter assigned to it. ---> 
    <cfpresentationslide title="Conclusion" duration="1" notes="Special thanks to Lori and Jeff for contributing their art and expertise."> 
    <h1>Great Job Team!</h1> 
    <p><img src="../cfdocs/images/artgallery/paul05.jpg"></p> 
    </cfpresentationslide> 
</cfpresentation>