DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: WEC Flash Presentation

Author:Kasper Skårhøj
Created:2002-11-01T00:32:00
Changed:2011-11-29T14:05:20
Author:Web-Empowered Church Team
Email:flashpresentation@webempoweredchurch.org
Info 3:
Info 4:

EXT: WEC Flash Presentation

Extension Key: wec_flashpresentation

Copyright 2006, Foundation For Evangelism: http://ww.evangelize.org

Author: Web-Empowered Church Team, <flashpresentation@webempoweredchurch.org>

Support Community: http://www.webempoweredchurch.com/support/community/

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.com

Table of Contents

EXT: WEC Flash Presentation 1

Introduction 1

What does it do? 1

What is the Web-Empowered Church? 1

Screenshots 2

Users manual 2

Installation 2

Video Settings 3

Audio Settings 4

Slide Images and Timings 4

Constant Editor 5

Administration 6

Configuration 6

Video Only Parameters 6

Audio Only Parameters 7

Common Parameters 7

Setting Fields Dynamically 9

Calling the Flash Presentation via HTML 10

Known problems 10

Extension 10

Adobe Flash Player 10

To-Do list 10

Changelog 10

Introduction

What does it do?

The Web-Empowered Church Flash Presentation Extension produces a synchronized slideshow/media presentation through a Flash movie. Media can be in the form of MP3 audio only or Flash FLV files containing both audio and video. Both low bandwidth and high bandwidth FLV files can be provided, with automatic bandwidth detection serving the correct file to the user. Currently, video must at a resolution of 320 x 240 or less.

Silde images and timings are entered through the TYPO3 backend to enhance the MP3 or FLV media. As the media plays, the displayed slides are updated to reflect the information being presented through the MP3 or FLV.

The Flash movies contain all of the functionality for controlling slides, audio, and video; TYPO3 is only used to provide a means for entering data and passing that data to Flash. This data passing is accomplished by embedding FlashVars in the HTML of a pages.

What is the Web-Empowered Church?

The Web-Empowered Church (WEC) is a ministry of the Foundation for Evangelism ( :underline:`www.evangelize.org <http://www.evangelize.org/>`_ ). The mission of WEC is to innovatively apply WEB technology to EMPOWER the worldwide CHURCH for ministry.

WEC will help churches around the world expand evangelism, discipleship, and care through the innovative application of Internet technology. WEC web-based tools and training will help make church ministries more efficient and effective, and will extend ministry impact to a world in need of Jesus (See :underline:`www.WebEmpoweredChurch.org/Jesus <http://www.webempoweredchurch.org/Jesus>`_ ). We want to fuel a worldwide movement using the Internet to point the world to Jesus Christ, to grow disciples, and to care for those in need. Our desire is to use the web to empower the Church to become a truly 24 hours per day 7 days per week ministry that is not constrained by walls or distance or time.

If you would like to find out more about WEC or our tools, or support us in any way, please go to our website for users: :underline:`www.webempoweredchurch.com <http://www.webempoweredchurch.com/>`_ and for software/web developers: :underline:`www.webempoweredchurch.org. <http://www.webempoweredchurch.org/>`_

Screenshots

Output for Flash Presentation - Video
img-1
Output for Flash Presentation - Audio

img-2

Users manual

Installation

The WEC Flash Presentation extension can be installed through the typical TYPO3 installation process using the Extension Manager. It is highly recommended that it is installed as a Local extension in the typo3conf folder however. A local install is required for the slide/timing wizard and for the default Typoscript configuration of file paths.

Once installed, adding the audio or video version of the Flash Presentation plugin is as simple as adding a frontend plugin to the page where you wish for the data appear. If the plugin is added through the new content wizard, special rows will be displayed for adding the Flash Presentation plugins, as shown below.

img-3

After selecting the version of the Flash Presentation Plugin that you want to appear on your page, you will be presented with a FlexForm- based page for data entry. The FlexForm will contain two tabs; the first tab contains information about the audio or the video depending on which plugin you selected while the second tab is used to enter pairings for slides and timings.

The sections immediately below provide a brief overview of the fields that are available while the Configuration section of this document provides a more detailed explanation of each field.

Video Settings

If the Flash Presentation -Video plugin was selected, the first tab in the FlexForm will be Video Settings, as shown below. This tab lets you specify the title of the presentation, as well as actual files to play for low bandwidth and high bandwidth users.

img-4 Each field in the FlexForm must be filled in for the extension to work properly. If you try to save an incomplete form, a yellow exclamation mark will appear to indicate the incomplete data. The error could be anywhere in the FlexForm and is not necessarily in the field next to the exclamation mark.

Audio Settings

If the Flash Presentation – Audio plugin was selected, the first tab in the FlexForm will ba Audio Settings, as shown below. This tab lets you specify the title of the presentation along with the MP3 file that will be played as a soundtrack for the slideshow.

Each field in the FlexForm must be filled in for the extension to work properly. If you try to save an incomplete form, a yellow exclamation mark will appear to indicate the incomplete data. The error could be anywhere in the FlexForm and is not necessarily in the field next to the exclamation mark.

img-5

Slide Images and Timings

Both the Flash Presentation – Audio and the Flash Presentation – Video have a second tab where pairings for slide images and slide timings can be entered. These pairing indicate the time in the audio or video file at which a new slide should be displayed.

img-6

By default, data is entered in a free form mode, with a space between slide images and timings and a return separating image/timings pairs. However, on the right side of the Slide Images and Timings text area is an icon that will put data entry in wizard mode, as shown below.

img-7

For more information on the slide image and timing formats accepted by the extension, please see the Configuration section.

Constant Editor

In addition to the FlexForm based values, there are several additional variables that may need to be changed on rare occasions. These variables, such as movie size, path, background color, etc are all available from the Constant Editor within the TYPO3 Template module.

img-8

Administration

No special administration is required for this extension.

Configuration

Both the audio and video versions of the Flash Presentation plugin have been developed with the goal of being highly configurable while still being easy to use. The Users Manual section above described several different places where data may be entered. The goal was to put the values that will change most often in a FlexForm, while those that will only change occasionally are placed in the Constant Editor so that their values can be shared across multiple instances of the Flash Presentation Plugins. In addition to these locations, there are several variables that will only change on very rare occasions. These variables are only set in the Typoscript setup.

In an effort to enhance the customizablity of the extension, however, all variables can be set from Typoscript directly if you prefer. Any FlexForm values that have been set will override the Typoscript values, but giving every variable a Typoscript object allows the plugin to be used in a very dynamic environment. Likewise, the available Typoscript values and their FlexForm counterparts are in no way hard coded into the extension output. If you need to modify the Flash source files to meet a specific requirement of your site, simply add a new Typoscript object and its value will automatically be passed through as part of the FlashVars output.

Video Only Parameters

Each video parameter can be found within plugin.tx_wecflashpresentation_pi1

Example: plugin.tx_wecflashpresentation_pi1.videobase.value = fileadmin/video/

videobase

Field Name

videobase

Description

Directory that video files are stored in.

Type

TEXT

Notes

Stored in Typoscript Setup.

Value defaults to the uploads folder (uploads/tx_wecflashpresentation) since uploaded files will be placed here.

Path can be rellative to TYPO3 root (uploads/tx_wecflashpresentation) or absolute (http://www.mysite.com/uploads/tx_wecflashpresentation).

videolow

Field Name

videolow

Description

Filename of low bandwidth video.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

File is expected to be in the FLV video format at a resolution of 320 x 240 or less.

videohigh

Field Name

videohigh

Description

Filename of high bandwidth video.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup

File is expected to be in the FLV video format at a resolution of 320 x 240 or less.

radioLabelLow

Field Name

radioLabelLow

Description

Radio button label for low bandwidth option.

Type

TEXT

Notes

Stored in Constant Editor or Typoscript Setup.

Value defaults to “Low (Dialup)”.

radioLabelHigh

Field Name

radioLabelHigh

Description

Radio button label for high bandwidth option.

Type

TEXT

Notes

Stored in Constant Editor or Typoscript Setup.

Value defaults to “High (Broadband)”.

videolowEC

Field Name

videolowEC

Description

Encoding bitrate for low bandwidth video,.

Type

TEXT

Notes

Stored in FlexForm, Typoscript Setup.

Encoding should be entered as kbps.

videohighEC

Field Name

videohighEC

Description

Encoding bitrate for high bandwidth video,.

Type

TEXT

Notes

FlexForm, Typoscript Setup.

Encoding should be entered as kbps.

swapUI

Field Name

swapUI

Description

Swaps the location for slides and video.

Type

TEXT

Notes

Stored in Constant Editor or Typoscript Setup.

By default, slides are on the left and video is on the right. Setting swapUI to 1 will reverse this.

[tsref:plugin.tx_wecflashpresentation_pi1]

Audio Only Parameters

Each audio parameter can be found within plugin.tx_wecflashpresentation_pi2

Example: plugin.tx_wecflashpresentation_pi2.audiobase.value = fileadmin/audio/

audiobase

Field Name

audiobase

Description

Directory that audio files are stored in.

Type

TEXT

Notes

Stored in Typoscript Setup.

Value defaults to the uploads folder (uploads/tx_wecflashpresentation) since uploaded files will be placed here.

audiofile

Field Name

audiofile

Description

Filename of MP3 audio file.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

File is expected to be in the MP3 audio format.

audioEC

Field Name

audioEC

Description

Encoding bitrate for MP3 audio..

Type

TEXT

Notes

Stored in Flexform or Typoscript Setup.

Encoding should be entered as kbps.

See Known Issues for a description of common audioEC problems.

[tsref:plugin.tx_wecflashpresentation_pi2]

Common Parameters

Common parameters can be found in both plugin.tx_wecflashpresentation_pi1 and plugin.tx_wecflashpresentation_pi2, depending on whether you want to set the parameter for video (pi1) or audio (pi2)

Example: plugin.tx_wecflashpresentation_pi1.flashPath.value = filead min/flash_video.flaplugin.tx_wecflashpresentation_pi2.flashPath.val ue = fileadmin/flash_audio.fla

flashPath

Field Name

flashPath

Description

Path to Flash movie to be loaded.

Type

TEXT

Notes

Stored in Constant Editor.

Value may be an absolute or relative URL.

Defaults to typo3conf/ext/wec_flashpresentation/fla/video_chart_final.swf for video version or typo3conf/ext/wec_flashpresentation/fla/mp3_chart_final.swf for audio version.

This value is only used in the HTML markup and is not passed to the Flash movie.

width

Field Name

width

Description

Width of the the Flash movie.

Type

TEXT

Notes

Stored in Constant Editor.

Defaults to 770 for video version or 400 for audio version.

This value is only used in the HTML markup and is not passed to the Flash movie.

height

Field Name

height

Description

Height of the Flash movie.

Type

TEXT

Notes

Stored in Constant Editor.

Defaults to 400 for video version or 420 for audio version.

This value is only used in the HTML markup and is not passed to the Flash movie.

bgcolor

Field Name

bgcolor

Description

Background color for the Flash movie.

Type

TEXT

Notes

Stored in Constant Editor.

Defaults to #FFFFFF (white).

This value is only used in the HTML markup and is not passed to the Flash movie.

textcolor

Field Name

textcolor

Description

Text Color.

Type

TEXT

Notes

Stored in Constant Editor or Typoscript Setup.

Default value is #000000 (black).

wmode

Field Name

wmode

Description

Windowless mode for the Flash movie.

Type

TEXT

Notes

The value of wmode can be opaque, transparent, or window. Opaque is the default behavior and is allows the Flash movie to be layered below DHTML menus.

This value is only used in the HTML markup and is not passed to the Flash movie.

classtitle

Field Name

classtitle

Description

Title of class / video.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

intromessage

Field Name

intromessage

Description

A welcome or intro/directions message.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

bwbase

Field Name

bwbase

Description

Directory that bandwidth testing image is stored in.

Type

TEXT

Notes

Stored in Typoscript setup.

Default value is res folder within the extension directory (typo3conf/ext/wec_flashpresentation/res).

bwimage

Field Name

bwimage

Description

Filename of bandwidth checker image.

Type

TEXT

Notes

Stored in Typoscript Setup.

bgbase

Field Name

bgbase

Description

Directory that background image is stored in.

Type

TEXT

Notes

Stored in FlexForm, Typoscript Setup.

Value defaults to the uploads folder (uploads/tx_wecflashpresentation) since uploaded files will be placed here.

bgimage

Field Name

bgimage

Description

Filename of background image.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

imagesbase

Field Name

imagesbase

Description

Directory that slide images are stored in.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

slides

Field Name

slides

Description

Pairing of image filenames and corresponding timing.

Type

TEXT

Notes

Stored in FlexForm or Typoscript Setup.

Data should be entered in the following format:

image1.jpg 7

image2.jpg 05:15

image3.jpg 01:10:24

This example creates three slide image/timing pairs. The first slide will appear when the video playback reaches 7 second, the second at 5 minutes, 15 seconds, and the third at 1 hour, 10 minutes, 24 seconds. Time should always be entered in the HH:MM:SS format but any time entered will default to the lowest possibility (ex. 7:10 is interpreted as 7 minutes, 10 seconds rather than 7 hours, 10 seconds).

This field will be transformed on output and split the slide images and timings into two separate fields, slideImages and slideTimings. The example above would be passed to Flash in the following format.

slideImages=image1.jpg,image2.jpg,image3.jpg&slideTimings=7,315,4224

If a timing is entered without a corresponding slide image, the timing is ignored completely and is not passed to Flash.

If a slide image is entered without a corresponding timing, a default timing is created one second after the last slide image/timing pair.

baseurl

Field Name

baseurl

Description

Base URL that all media files are read from.

Type

UNDEFINED

Notes

By default, the baseurl is not manually defined and is instead automatically set to the main TYPO3 path.

To use a custom URL, set up a TEXT cObject with the base URL that media should be loaded from.

[tsref:plugin.tx_wecflashpresentation_pi1][tsref:plugin.tx_wecflash presentation_pi2]

Setting Fields Dynamically

As alluded to above, it is possible to set extension parameters dynamically through Typoscript. By default, the title of a Flash player is assigned in the Frontend Plugin's FlexForm. In this default configuration, the following Typoscript setup is defined.

plugin.tx_wecflashpresentation_pi1.classtitle = TEXT
plugin.tx_wecflashpresentation_pi1.classtitle.value =

If you'd like to set a static value in Typoscript, simple change the second line.

plugin.tx_wecflashpresentation_pi1.classtitle.value = My Class Title

More interesting is a dynamic value. The following example will set the class title to the title of the current page.

plugin.tx_wecflashpresentation_pi1.classtitle = TEXT
plugin.tx_wecflashpresentation_pi1.classtitle.field = title

For each of these example, a value in the FlexForm will take precedence over any special Typoscript configuration you may perform.

It is also possible to set up the entire extension via Typoscript, following similar concepts as shown above. The following Typoscript would render the Flash Video presentation.

page.10 < plugin.tx_wecflashpresentation_pi1
page.10 {
  classtitle.value = My Class Title
  intromessage.value = Loading...
  bgbase.value = fileadmin/introvideo
  bgimage.value = background.jpg

  videolow.value = low.flv
  videolowEC.value = 128
  videohigh.value = high.flv
  videohighEC.value = 256

  imagesbase.value = fileadmin/introvideo
  slides.value (
    slide01.jpg 0
    slide02.jpg 5
    slide03.jpg 10
 )
}

Calling the Flash Presentation via HTML

In addition to the dynamic, Typoscript-based configurations, it is also possible to use the Flash Presentation within a static HTML page. The disadvantage of using static HTML is that many of the default values provided by TYPO3 must now be manually entered so it is recommended that you use Typoscript whenever possible. An example of using the Flash Video Presentation from a static HTML context is shown below.

<div class="tx-wecflashpresentation-pi1">
  <embed src="typo3conf/ext/wec_flashpresentation/res/video_chart.swf" flashvars="textcolor=#000000&classtitle=My Class Title&intromessage=Loading...&bgbase=fileadmin/&bgimage=bg.jpg&bwbase=typo3conf/ext/wec_flashpresentation/res/&bwimage=100k.jpg&videobase=uploads/tx_wecflashpresentation/&videolow=low.flv&videolowEC=128&radioLabelLow=Low&videohigh=high.flv&videohighEC=256&radioLabelHigh=High&imagesbase=fileadmin/&slideImages=01.jpg,02.jpg&slideTimes=0,5&baseurl=http://typo3.dev/&lastloaded=true" width="760" height="400" bgcolor="#FFFFFF" quality="high"  pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</div>

There are a couple things worth noting in this example. There are several values (src, width, height, bgcolor, etc) that are not passed along to the Flash movie and are only used in generating the HTML. In the table of parameters above, the special variables are noted. Aside from these special cases, all parameters are passed to the Flash movie inside the flashvars attribute. The parameter names used in the HTML are identical to those described in the table above. Parameters and their values are separated by an equal sign while parameter / value pairs are separated by an ampersand.

In addition to those parameters described in the table above, there are two paramters that are always included automatically by TYPO3: baseurl and lastloaded. When generating the Flash movie from static HTML, you'll need to set lastloaded to true and baseurl to the root URL of your site.

Known problems

Extension

No validation is performed on the Slide Images and Timings when the form is saved. The extension attempts to modify incorrect image/timing pairs to produce usable data, but this may not always be successfully.

The backend data entry wizard only works correctly if the script is installed as a local extension at typo3conf/ext.

FLV videos are currently limited to a resolution of 320 x 240 or less.

Adobe Flash Player

The Adobe Flash Player plugin has a known issue with MP3 Playback where certain pairings of bitrate and frequency result in playback at double speed. Please see http://loudblog.de/forum/viewtopic.php?id=46 for a list of bitrates and frequencies that are known to work.

To-Do list

- Update bandwidth switching code to stay as close to the current video location as possible, rather than restarting.

- Move refactored code from Video Presentation into Audio Presentation.

Changelog

1.5.0

Version

1.5.0

Changes

Moved Typoscript into a static template. This template must be included for the extension to work properly.

((Unknown Property))

Version

Changes

Updated to SWFOject version 2.0. This solves some compatibility problems with external Javascript libraries such as Mootools.

((Unknown Property))

Version

Changes

Added Context Sensitive Help for all fields in the Flash Presentation – Audio plugin and the Flash Presentation – Video plugin.

((Unknown Property))

Version

Changes

TYPO3 4.6 compatibility.

1.4.1

Version

1.4.1

Changes

Updated to the latest SWFObject library.

((Unknown Property))

Version

Changes

Added default settings for wmode to allow layering below menus.

((Unknown Property))

Version

Changes

Fixed bug when quotes were used in class title or intro message.

1.4.0

Version

1.4.0

Changes

Corrected typo that prevented background color from being set.

((Unknown Property))

Version

Changes

Updated Javascript inclusion to prevent Out of Memory errors in IE.

((Unknown Property))

Version

Changes

Added possibility to set baseurl from Typoscript, rather than having it automatically generated.

1.3.0

Version

1.3.0

Changes

Major refactoring of Flash source for Video Presentation.

((Unknown Property))

Version

Changes

Fixed bug with play/pause buttons on Video Presentation after changing video version or syncing.

((Unknown Property))

Version

Changes

Fixed bug with bandwidth detection on Video Presentation if the user had a very fast Internet connection.

((Unknown Property))

Version

Changes

Fixed but with audio controls on Audio Presentation that kept other buttons from working until the play button had been clicked.

((Unknown Property))

Version

Changes

Removed trailing commas from slide and image lists that are passed to Flash movie.

((Unknown Property))

Version

Changes

Updated require statements for SWFObject to avoid open_basedir issues.

1.2.0

Version

1.2.0

Changes

Updated Flash rendering to use SWFObject from http://blog.deconcept.com/swfobject/ for better IE support.

((Unknown Property))

Version

Changes

Added swapUI option to reverse layout of slides and video.

1.1.1

Version

1.1.1

Changes

Fixed a bug in the audio version that broke slide control buttons (first slide, previous, next, last slide).

1.1.0

Version

1.1.0

Changes

Removed stray debug statements and cleaned up comments.

((Unknown Property))

Version

Changes

Added trim() to remove whitespace before Image/Timing pair. Should be beneficial for Typoscript only setups.

((Unknown Property))

Version

Changes

Added Flash capability to append slashes when missing in paths provided by FlashVars.

((Unknown Property))

Version

Changes

Added more detail to extension manual or Typoscript and HTML configurations.

1.0.1

Version

1.0.1

Changes

Removed .fla files to keep extension size smaller.

1.0.0

Version

1.0.0

Changes

Initial release.

img-9 EXT: WEC Flash Presentation - 10