Adobe Flash on the theatre stage
I did some work a few years ago using Flash in the Theatre. The information is no longer current, so I’m taking it off my main website, but keeping it here in my blog for future reference.
Flash on Stage
Introduction
I have been involved in stage productions where computer animation and video has featured within the show. This has been achieved using a computer projector and Flash MX 2004.
This describes the techniques used in creating and running the animations during a stage production.
Small beginnings
The first stage production where we used computer animation was “The Other Side of St. John 2003”. This
was a variety show by Warwickshire St. John Ambulance starring youth and adult members.
The Flash player was used in full screen mode to play a few simple animations.
This included a pre-show animation (similar to the “popcorn on sale” ads you may see at the cinema), which was also adapted for use in the interval & at the end of the show; a spinning globe to accompany one of the songs and falling poppies used during a remembrance part.
The show was projected onto a single screen at the left hand side of the stage. A conventional portable
OHP stand was used, but the legs were hidden using a union flag. The operator (ie. me) was positioned to
the left of the projector with the laptop a short distance from the projector.
Each of the animations were standalone swf files. When the flash wasn’t playing the “blank” option was
selected on the projector using the remote control. This allowed me to return to windows explorer;
launch the next animation and rewind so that it was at the start (Ctrl-r). Then once it was time to
run the next animation the projector was “un-blanked” and the animation run (Ctrl-Enter).
This worked OK for this limited usage. There were however a number of limitations. The first was that
the operator needed to be within a close proximity to the projector. You certainly had to be within
the infrared range of the remote control. It took a while to change to the next flash animation and
blank / un-blank the projector so it would have been hard to project something new for each sketch.
It was however a good way to try introducing computer animation and was not too ambitious.
The next show was a giant leap in introducing new ideas.
Taking it Further
The second show involved a lot more computer graphics. The idea from the start was to actually include
the computer throughout the show rather than just use it for a couple of sketches. Also to try and make
the stage more symmetrical the animation needed to be projected to both sides of the stage. The initial
idea was to project to the back of the stage, however this was not tried due to concerns that the lack
of brightness from domestic projectors would be swamped by the stage lighting. Instead two projectors
were used one at each side of the stage. We also connected the PC into the theatre’s sound system to allow sound and video to be projected simultaneously. An autocue was also used.
Projecting Sight and Sound
The first aspect was the projectors. When using dual projectors it is best if the two projectors can be
identical. Unfortunately as we were using projectors borrowed from different sources this was not
possible. The biggest impact this had was that keystone correction worked differently giving a different
aspect ratio on the two screens. This was partly because we needed to set the keystone correction on
it’s highest setting.
Positioning The Projector
One problem that I have experienced constantly is the issue of having to angle projectors at a steep angle.
Most projectors are designed to be used so that the projected image is only a few degrees higher
than the projector. This works OK in an office environment where a desk or stand is used. However for
the stage (and also applicable to large conferences) it is beneficial to raise the height of the
projected image, perhaps at a 45° angle. In the past I have used books, boxes, lever arch files and
all manner of different items to achieve this. For this show I decided to create my own adjustable
stand. This was created using 2 pieces of laminated wood that are hinged together. The top piece had rails
fitted (using cupboard door handles) to hold the projector in place. To make the height adjustable
wooden blocks were created with wooden dowels to hold them together. By using one, two, or three blocks
of wood the angle could be adjusted. Fine adjustments can still be made using the feet of the projector.
The projector stand could be placed on top of a table or stool to raise the angle of the projector.
Screen
For the show we wanted to create a screen that didn’t use stand. We used a very thick white sheet cut
to the appropriate size. We would have liked to mount that on a wooden frame and fasten it to the wall
however drilling into the side of the stage was not an option. Instead we had to use white “Gaffa” tape.
Unfortunately the wall was artexed which made it harder but with enough layers of tape it managed to
stay up for the duration of the show.
The Image on the left shows the screen and the projector on it’s stand. As you can see the screen is significantly higher than the projector, and this needed the steep angle.
Sound
Most of the output from the laptop didn’t require sound. However we did include some video with sound as
a filler between some of the sketches. This sound needed to be fed into the theatre sound equipment.
The only sound output available on the laptop used for the projection is a standard stereo headphone socket.
Although we tried using a splitter adapter that we use in conjunction with the projector this was not really
suitable. Therefore a USB external sound module was used. The equipment used was a EDIROL UA-25.
The image on the right shows the USB cable entering the adapter and the 2 theatre sound plugs that
connect this to the sound deck. The device took it’s power from the USB and did not need an external
power supply.
Autocue Screens
There were a lot of songs that had to be learned in a short period of time. Allowing for the different age
groups that were expected to remember these we decided to provide an autocue. Performers were still encouraged to learn the words, but if they were stuck on stage they were able to look at the autocue.
The autocue consisted of two flat screen monitors positioned at the front of the stage about a third of
the way from each side. These were placed on chairs and a black cloth draped over to hide them from the
audience. The image below shows the screens with highlighting so that you can see them. By looking at the earlier picture you can see what the audience could see.
Computer Desk
The image below shows the computer desk used to control the main projectors and the autocue. The laptop on the left ran the autocue, and the one on the right the projectors. On the show nights there were two operators, one for each laptop, but during the rehearsals and dress / technical rehearsals this was done by a single operator.
Whilst it was possible for one person to control both, as they both needed changes at the same time it was
easier with two people.
The desk was positioned to the right hand side of the stage between the band and the conductor. The operators could see the projected images, and the stage to ensure that they were always projecting correctly. With access through a door to the rear of the stage which provided access to the distant projector in the event that there was a problem with the projector. Fortunately this was not needed.
Video Cables and Splitter
To run two projectors (monitors for the autocue), from a single VGA output port required VGA splitters.
These are available as passive devices, if the cable was relatively short, but for the long cable runs required
we had two active port splitters. One was a 4 device and the other a 8 device splitter, sending the same input to a maximum of 4 and 8 projectors / monitors. As these were active devices that retransmitted the signal these could theoretically double the maximum cable length by positioning the splitter at the midway point.
The splitter was placed under the stage extension so was hidden from site and as a result required less
cables to be run from the laptops to the stage. The splitters did require their own power supply, but this was
provided by using multi-way adapters on the electrical feed used for the projectors.
When transmitting VGA signals over long distances then you have to be careful that the signal doesn’t
deteriorate. If the cable length is 15 meters or less then you will pretty much get a good signal at the
far end, but going much further and the signal may suffer from shadows, or blurred images, or eventually
drop off all together. Generally it’s considered that you can go up to 30 meters using a good quality cable,
but this may depend upon the resolution being used, and any noise from nearby power cables etc. The use of an active splitter can effectively double the maximum length by having a second cable between the splitter and the projector, but that also depends upon having somewhere convenient that the splitter can go with an appropriate power source.
The splitter in use required a Male-to-Female cable to connect between the laptop and the splitter, and a
Male-to-Male cable to connect from the splitter to the projector. I used 15 m cables from the laptops to the
splitters (this was more than was needed but was purchased to allow for excess depending upon where the projectors were located), and then a 5 m cable from each of the splitters to the nearest projector / monitor and a 15 m cable from the splitter to the distant projector / monitor. These lengths were more than adequate for the size and position of the stage.
Flash Menus and Autocue
Each of the acts had a separate swf file created with the animation for that act. A separate swf file was used for the menu to control which animation was being played when. Whilst the menu was arranged so that the flash files were all in sequence the menu also needed to have the option to jump to different menu items as required. It would have been ideal to have a different view on the laptop screen to that projected onto the side of the stage. The laptops used did not have this capability, so that method was not available. Depending upon available hardware I may look at using the LocalConnection object within Macromedia Flash MX 2004 to control different instances of flash player running on different screens.
Navigation
To navigate through the different clips required a menu system and controls in each of the swf files.
The menu system was a separate swf file which was primarily a black screen, but with the words “Stage
and Screen 2005” on the first keyframe and “St. John Ambulance” on the second. This was shown
whenever we were not showing one of the sketch swf files.
The screen was designed to be as inconspicuous as possible but still offer maximum functionality. Each
of the letters in the words linked directly to one of the swf files to allow jumping directly into
a sketch, these were listed on the running order for the show to be able to accommodate any emergency
changes. The main control was however done using hidden buttons which were positioned as per the diagram below:
For example the most often used button was to click at the right hand side where the Next Clip button
was located. Whilst not visible it was possible to see whether the mouse was over the button as the
cursor changed to a hand symbol. This highlights one of the disadvantages of this menu in that as
the operator had to be able to see the cursor, so could the audience. The cursor was made small and
a grey colour to make it as well hidden as possible, but that is one thing I would like to remove
from future versions. Preferably by having the audience view different to that of the operator, but an
alternative maybe to use keyboard to control flash.
There was also another button in the middle of the screen which toggled between the two different act menus.
Although the forward button would advance it at the end it gave more flexibility of jumping directly to the
appropriate screen if required.
When in a clip then there was a different menu layout again using hidden buttons. The menu buttons were located
to not overlap with any of the main menu buttons, which are still available on a lower layer. In hindsight
it may have been better for the clip buttons to completely cover the menu buttons to reduce the risk of selecting a button from the menu instead of the clip by accident.
As the menu showed text across the bottom of the screen this needed to be hidden by a rectangle set to the background colour unless it was already hidden throughout the clip movie.
Menu Programming
The following is the ActionScript code required for the menu and clip buttons to work.
Menu Setup
The following code was used on the first keyframe in the menu. It was used to setup some global variables
which are required to maintain the state information.
movienum = 0; movie = new Array(); movie[0] = "sketch1.swf"; movie[1] = "sketch2.swf"; movie[2] = "sketch3.swf"; movie[3] = "sketch4.swf"; movie[4] = "band1.swf"; movie[5] = "sketch5.swf"; movie[6] = "sketch6.swf"; movie[7] = "dance1.swf"; movie[8] = "sketch7.swf"; movie[9] = "sketch8.swf"; movie[10] = "interval1.swf";
This sets the movienum to 0 (which indicates which clip should be being played next) and fills an array
with the names of the individual clip swf files (the actual swf files used had more meaningful names). On another layer there was also the command stop() used to ensure that we remained on keyframe 1 (act 1), until ready to move to act 2. On keyframe 2 the same code was included but with the names of the sketches for act 2 in the array.
Intro Button
The button at the top of the screen would always play the flash intro. This is used to introduce the show.
on (release) {
movienum = 0;
loadMovieNum("showintro.swf",1);
}
This resets the movienum to 0 (so that we are ready to start the show). This is needed as we did some testing before the show and so didn’t always have the menu at the initial stage before the show. Then it loads the swf file for the introduction onto screen 1 (the layer used for the clips), as the menu is always on layer 0 this shows the movie over the top.
Previous Clip Button
To go back to a previous clip the movienum had to be reduced by two. The following code shows
this in action as well as showing how the array was used to load the appropriate movie.
on (release) {
movienum -= 2;
if (movienum < 0) {movienum = 0;}
loadMovieNum(movie[movienum],1);
}
Toggle Act Button
To be able to switch to the act 2 menu the following code was used for the button in the middle of the
screen.
on (release) {
gotoAndPlay(2);
}
Similarly on the act 2 keyframe the frame number was replaced with number 1.
Next Clip Button
The next clip button loaded the next movie onto screen 1, and then incremented the movienum ready for
the next sketch. If we had reached the end of the first act (after the interval move clip has been played)
then it switches to the next keyframe for the second acts menu.
on (release) {
if (movienum == 11) {
gotoAndPlay(2);
}
else {
loadMovieNum(movie[movienum],1);
movienum ++;
}
}
Goto Sketch Buttons
The final set of buttons are the letters across the bottom of the screen. When these are clicked it
jumps straight to that movie. The running order had the letter listed next to each of the sketches (e.g. 3 “Comedy Sketch Title” Stage).
on (release) {
movienum = 2;
loadMovieNum(movie[movienum],1);
movienum++;
}
The number 2 (refers to the 3rd skit) would be changed to the appropriate movienum for each button.
Sketch Pause Button
To be able to pause the animation required a variable to keep track of the status of the movie. The variable
isrunning is set to 0 if the movie is paused and 1 if it is running.
on (release) {
if (isrunning) { isrunning =0; stop();}
else {isrunning = 1; play();}
}
Exit Movie Button
To exit the movie just uses the unloadMovie command. This closes the current clip and leaves the display
at layer 0 back to the menu.
on (release) {
unloadMovie (this);
}
Restart Movie Button
The restart button wasn’t really designed to be used during the show, but was useful for the rehearsals
when trying to see how the movie would be displayed compared with the timing of the song / sketch etc.
on (release) {
gotoandplay (1);
}
Play Next Button
Normally the play next button just exited the movie. It was used in some multi-part movies to advance to
a subsequent part of the movie.
ActionScript Within Movie
Generally the only actionscript on the normal timeline of the movie was a gotoandplay at the end which
kept the movie playing in a loop. Although some did use actionscript to animate parts of the movie.
Autocue
The autocue used was fairly basic and had to be created for each song that was created. For future shows
I’d like to create a autocue that took the words from a seperate file so that the words could be
quickly created and changed if required. The current one works by having a text box move across the screen
using a motion tween and using the following code to move the screen up based upon a hidden button that
covered the whole of the screen.
stop();
advance.onRelease = function () { play();
};
It doesn’t provide anyway of moving backwards which was a inconvenience and for most of the songs the
lyrics had to be split across at least 2 layers, because some of the words at the end were being dropped.
Flash Examples
You may find it better to understand if you read through the section on the stage flash first.
When in the flash demonstrations you can pause and play the animations by clicking in the top left
of the image, restart by clicking in the bottom left, and clicking the top and bottom right of the
animations will normally stop the animation completely.
Menu
I have provided a copy of the menu .fla file. I have not provided a swf file as you will need
the all the swf files to be able to see it in action, which it won’t be able to load over the Internet.
You can download the rest of the demonstrations and edit the actionscript to use only those
files.
- showmenu1.fla (approx. 340 Kb)
Introduction
The introduction is a basic animation relying primarily on motion tweens. I have provided a demo of the
swf file, but due to copyright issues with the St. John Ambulance logo I am not able to provide the
original .fla file (this site is in no way associated with St. John Ambulance).
- Show Intro. (approx. 500Kb)
Lights for Dance
Whilst there was a dance on the stage I wanted to try and imitate some form of disco style lighting.
Initially I tried created random coloured and sized lights appearing on the screen to create a kind
of 70’s disco effect, but I didn’t like the end result. Here’s the code I used:
depthCount = 0;
_root.onEnterFrame = function() {
newCircle = _root.attachMovie ("circle1", "circle_"+depthCount, depthCount);
scale = (Math.random() * 0.25) + 0.2;
newCircle._xscale *= scale;
newCircle._yscale *= scale;
newCircle._x = Math.random() * 800;
newCircle._y = Math.random() * 600;
//setProperty(newCircle, color, Color.setRGB);
var my_color:Color = new Color('newCircle');
currentcolor = Math.round(Math.random() * 16777215);
my_color.setRGB(currentcolor);
//my_color.setRGB(0xFF0000);
depthCount ++;
}
Whilst working on this I saw the effect of a light bouncing off a mirror ball and thought that the effect of
moving lights looked better than the flashing lights. The lights I created weren’t random like mirror
balls produce, but are just as series of guide layers used with lots of copies of the same symbol. The
use of a library symbol meant that I could change the colour once for a second dance and it effected
all the lights. Using the symbol also kept the file size smaller (less than 10Kb), but that was not the aim as it was designed to be run locally rather than as a download.
- Dance Demo. (approx. 10Kb)
- showdance1.fla (approx. 64Kb)
You can also see the clip menu buttons in the fla file.
Titanic Sketch
The final example shows a animation used for a comedy sketch. Most of this is tweening there is some
ActionScript used to jump around on the timeline to make the “Funny fish” appear to come
out randomly. You may need to watch for a while to see it as it only made a few appearances during the
sketch.
- Titanic Demo. (approx. 35Kb)
- showtitanic1.fla (approx. 270Kb)
Updated Adobe (Macromedia) Flash Autocue
Warning
This flash example is provided as is. I have abandoned work on it, and at the moment
I don’t intend to develop it any further. I have decided that the autocue in
Macromedia flash was a bit clumsy and not as flexible as I would like. I created a
rough program using Perl/TK as a potential to replace this. The Perl/Tk program is much
better, and more flexible. I am therefore going to be developing the Perl/Tk program. I have
made this available if anyone would like to use it as it stands (I have used it at several
rehearsals and it did help for a while), or if anyone would like to develop it further.
Introduction
I had created a very basic autocue using Macromedia Flash MX. In this I was looking
at making a improved version on Adobe (Macromedia) Flash Professional 8 (part of the Adobe Macromedia Studio 8).
The main criteria is that it was able to read the lyrics from a separate file (so that the file
could be updated outside of Flash), and that it was to have the ability to move forward and
backwards. This meant writing some actionscript to handle reading in the file and displaying
it in a text box.
ActionScript Code
The main part of the actionscript code is shown below.
var songList:Array = new Array("Song 1 ", "Song 2 ", "Song 3 ", "Song 4 ",\
"Song 5 ", "Song 6 ", "Song 7 ", "Song 8 ", "Song 9 ", "Song 10 ");
var songFiles:Array = new Array("song1.html", "song2.html", "song3.html", "song4.html",\
"song5.html", "song6.html", "song7.html", "song8.html", "song9.html", "song10.html");
// Create a new style sheet object and set styles for it.
var styles:TextField.StyleSheet = new TextField.StyleSheet();
styles.setStyle("p", {fontSize:'36px'});
styles.setStyle(".heading", {color:'#888888', fontFamily:'Times,serif'});
styles.setStyle(".female1", {color:'#ff0000'});
styles.setStyle(".class1", {color:'#ff0000'});
styles.setStyle(".duet1", {color:'#00ff00'});
styles.setStyle(".class2", {color:'#00ff00'});
styles.setStyle(".class3", {color:'#0000ff'});
styles.setStyle(".male1", {color:'#0000ff'});
styles.setStyle(".class4", {color:'#666666'});
styles.setStyle(".all1", {color:'#000000'});
styles.setStyle(".small1", {fontSize:'12px'});
/* Assign the style sheet object to myTextArea component.
Set html property to true, set styleSheet property to the style sheet object. */
MainArea.styleSheet = styles;
MainArea.html = true;
MainArea.vScrollPolicy = "off";
MainArea.condenseWhite = true;
MainArea.label.condenseWhite = true;
var myVars:LoadVars = new LoadVars();
// Define onData handler and load text to be displayed.
myVars.onData = function(myStr:String):Void {
if (myStr != undefined) {
MainArea.text = myStr;
} else {
trace("Unable to load text file.");
}
};
function load_song() {
MainArea.vPosition = 0;
myVars.load(songFiles[selectFile.selectedIndex]);
}
load_btn.addEventListener("click", load_song);
for (i=0; i<songList.length; i++) {
selectFile.addItem (songList[i], songFiles[i]);
}
If you are familiar with Actionscript then most of this should be fairly self explanatory.
I not really involved in actionscript enough to give details on how it works.
The Flash Files
The flash files are provided in three formats. There is a .fla file, which is the raw
flash file. If you want to develop the program further this is the file you should be
using. You will need the full Flash software, either purchased seperately, or as part of
Studio 8.
The second is a .swf file. This is suitable for playing in the Adobe Macromedia Flash Player.
Finally there is an executable .exe file. This is a standalone program, but will only work
on Windows
You should be able to double click on the appropriate file.
Download the Macromedia Flash autocue
You can download a zip file of all the flash files:
Creating your own Lyric Files
By default the autocue supports 10 files named song1.html to song10.html. If you want to change
these or there names then you will need to edit the actionscript and compile and run using Flash.
These should be html files, although to get them to work as I wanted they do have to have some
changes from raw html. This actually breaks the html standard. There should be no heading / body
tags. The html should go straight into <p> tags, and text.
e.g.:
<p class="heading">At the end of the day</p>
<p class="all1">
At the end of the day you're another day older<br />
And that's all you can say for the life of the poor<br />
It's a struggle, it's a war And there's nothing that anyone's giving<br />
</p>
<p class="all1">
One more day standing about<br />
What is it for?<br />
One day less to be living!<br />
</p>
The lyrics above are the first two verses to “At the end of the day” from the musical Les Miserables.
The class value is used to determine the colour of the text, so that different singers
can be identifed. The supported classes are:
- heading – Title
- all1 – All Singers
- female1 – Female singer
- male1 – Male singer
- duet1 – Duets
- class1 .. class4 – For any other uses
- small1 – Small Text
For example if you wanted to have a male singer you would put the lyrics between
<p class=”male1″> and a closing </p>, and for a female singer between
<p class=”female1″> and a closing </p>. In reality it doesn’t matter
which of the available classes you use for the different people, but they have been
given those names to make it easier to create the files. Anywhere that you want
a new line then a <br /> is inserted.
Future development
I did create some other versions using Perk/Tk and wxPython which ran under Linux, but I’m no longer involved in any shows so I am unlikely to continue development of those any further.