Editable Text Image

The Dynamic Image Server can also be used to create easily editable text plates, which can be edited without changing the WATCHOUT show. This might be used by a receptionist to enter a welcome message for today’s visitors, or a similar message to be included in the show.

While texts can be produced and displayed in a number of ways, this recipe uses a technique quite similar to the one used in the Webcam recipe, in that Flash is used to edit and render the text on the client. The resulting image is then uploaded to the Dynamic Image Server. This method has the following advantages:

  • The text being edited is displayed exactly as it will appear in WATCHOUT, using the same typefaces and layout.
  • You can use any typeface (font) you want, since the typeface is embedded in the Flash file used to edit the text.

A disadvantage is that this method relies on running the Flash-based text editor/renderer in your web browser, which isn’t compatible with browsers not supporting Flash, such as Safari on the iPhone/iPad. See “Editable Text” for a recipe that supports such cases.

Web Server Configuration

This recipe uses the same web server as the one titled “Uploading with a Browser”, but adds a folder containing the server-side code as well as the client (HTML and Flash) code. Download the attached “TextImage.zip” file, unpack it, and copy the entire resulting “TextImage” folder to c:\wamp\www, so that the PNGUpload.php file is located at: c:\wamp\www\TextImage\PNGUpload.php. The PNGUpload.php file is responsible for receiving the PNG images generated by the text editor, storing them in the c:\DynImages folder. The other three files in the folder make up the client interface, which is presented using a web browser by going to the TextImageClient.html file. This makes use of the fact that we’re running a web server on computer to serve up the HTML/Flash based user interface as well.

Client-side Editor

The client used to edit the text in this example runs in your web browser. There’s nothing to install on the computer used to edit the text. From a technical point of view, the editor consists of a small HTML file that presents the Flash-based editing screen, shown below. Simply browse to the address of the editor and click in the text to edit it. Once you’re done, select the name of the image to update and click “Upload.” This example supports nine separate texts, as indicated on the “Name” menu.

NOTE: In the example shown below, the image server and the web server run on a computer with IP address 192.168.0.48. Adjust this to match the IP address of your server.

TextImageScreenshot.png

Flash based user interface for editing the text.

Although the text is shown on a gray background as it’s being edited, the text image sent to the image server is rendered on a transparent background, allowing you to composite it with other image elements in WATCHOUT.

Configuring the Dynamic Image Server

The WATCHOUT Dynamic Image Server needs to be configured exactly as in the “Uploading with a Browser” recipe. Make sure the image server is running before proceeding. Remember to start it using a shortcut that points the image server to the “C:\DynImages" folder.

WATCHOUT Show

Download and extract the attached “PNGTextUploads.zip” file, which contains a WATCHOUT show file and some sample images. The IP address of the Dynamic Image Server is specified in Preferences under the Control tab. Make sure that the address specified in the “Default Dynamic Image Server Address” field matches the address of your server. Click the corresponding cue on the main timeline to display the text. Note how this example supports the use of several different text plates, and how the text plates are rendered on transparent background, allowing them to be composited over other images.

Chang​ing the Client-side Editor

The attached file “TextImageClientSrc.zip” contains the full source code for the application, in case you want to change it (changing it requires Adobe Flash Professional CS5 or later). This Flash project also uses the “as3corelib”, which you have to download and make available to Flash Professional if you want to change the client application. It’s available here:

It also uses the UploadPostHelper.as file (enclosed in the zip). See inside this file for proper attribution.

 

Files attached to this recipe: