Editable Text

This recipe is similar to the “Editable Text Image”, with the exception that it doesn’t render the text on the client computer as an image. Instead, the text is sent to the server as plain text, and then rendered by the image server. The advantage of this solution is that it can be used from devices that don’t support Adobe Flash, such as iPhone/iPad. The disadvantage is that, while editing is in progress, the text isn’t displayed exactly as it will appear on screen, but is simply typed into a plain text field. The text is subsequently rendered using Flash on the image server, so you still get the same capabilities in terms of fonts and typographic precision.


Dynamic text edited using an iPhone.

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. Download the attached “AjaxText.zip” file, unpack it, and copy the entire resulting “AjaxText” folder to c:\wamp\www, so that the enclosed index.php file is located at c:\wamp\www\AjaxText\index.php. This file is responsible for presenting the text editing interface to the user through a web browser. The other file in this folder (poster.php) receives the text changes from the browser and updates a text file named “TheText.txt”, stored in the C:\DynImages folder.

Configuring the Dynamic Image Server

The WATCHOUT Dynamic Image Server needs to be configured as in the “Uploading with a Browser” recipe. Then download the attached “TextServer.zip” file, unpack it and copy the file “TextServer.swf” to the C:\DynImages folder. This file is subsequently used by the image server to render the text found in “TheText.txt” file mentioned above. Make sure the image server is running before proceeding. 

NOTE: The attached “TextServer.zip” file also contains the source file (TextServer.fla), in case you want to change the font, size or other parameters. Doing so requires Adobe Flash Professional CS5 or later.


Download  the attached “AjaxTextShow.zip” file, extract it and open the resulting “AjaxText.watch” show file in WATCHOUT. Make sure the “Text” media item is configured with the server address of your Dynamic Image Server. Now click the single cue on the main timeline to display the image.

NOTE: If you haven’t yet set the text, an error message will be displayed instead, as “TheText.txt” file mentioned above doesn’t exist. This will be corrected the first time you set the text.

Changing the Text

To change the text, browse to the AjaxText folder on your server (using the proper IP address of your server):

This will display a single text box, allowing you to edit the text. If no text has been set, this text box is initially empty. The text appears on screen as you type.


Files attached to this recipe: