UpStage 2021

Creating Media for UpStage

Avatars, backdrops and props for UpStage can be created using standard graphics applications such as Gimp, Krita, Photoshop, etc. However, before you go ahead and upload something you prepared earlier, please read this chapter as there are many important points to ensure that your graphics appear the way you want them once uploaded to UpStage.

Format and size

The recommended formats for your original graphics files are or .png. Vector-based images will appear much cleaner than pixel images (such as .gif and .jpeg), as they resize in UpStage to match the dimensions of individual screens and browsers. You can use .gif and .jpg but your images will lose quality (note – as the exception to the rule, backdrops are fine as jpegs).

Avatars and props will appear on stage approximately two to three times larger than the original file. This is because the stage is not in a fixed-size window: it allows for different screen resolutions and sizes, and different sizes of browser window. The aspect ratio is 7:3 (see the backdrop diagram below). => is it already right ????

The recommended size for the original file for a "standard" size avatar is approximately 100x100 pixels – obviously you will want bigger and smaller ones, but this gives you somewhere to start. In order to test the size of your avatar, you must upload it, assign it to a stage, then look at it on that stage (the same applies to props, and also for backdrops if you are working out what is going to be obscured by the chat window). => is it already right ????

It can be a time-consuming process getting your graphics to the size you want, so it’s a good idea to make a couple of samples first and then base the rest of your graphics on those once you have got them the size you want. If you upload graphics that are not the right size, please remember to delete your unwanted files, to keep the server tidy.

Creating .pngs

The .png file format is good for avatars and props, as it allows for transparency (unlike .gif or .jpg) and gives a good quality image. Most graphics applications will allow you to save your files as .png. In the File menu, choose Save As and look for the .png option.

Do NOT interlace the file when you save it.

Animated avatars and backdrops

To create an animated sequence, follow these steps


As long as the original image is 380x240px or larger, a backdrop will fill the UpStage screen, including going behind the text chat window. You may wish to create a backdrop that has a blank area on the right where the text chat window is to ensure that important parts of your backdrop are not hidden behind the chat window. => is it already right ????

The proportions of the whole image are: => is it already right ????

total width : total height - 800 : 500 (or multiples of these proportions) => is it already right ????

width of stage area : width of chat area - 5 : 3.5 (if your image is 800 wide, the chat will begin at 550).   => is it already right ????

minimum width : height – 380 : 240 pixels => is it already right ????

Bear in mind that everyone’s screen size and browser window size can be different – your backdrop will stretch to fill the space.

TIP: it's a good idea to look at your stage in audience view as well as player view; you can do this while you're working by having it open in two browsers, one where you are logged in and one not.

Backdrops can be created as .png, .gif or .jpeg; as with avatars and props, .png will give the best quality results, however generally a .jpg backdrop will also be fine. If you are using .gif or .jpeg, upload a test backdrop to see if it’s going to be good enough, and remember to delete unwanted images.

Note that .png files should NOT be interlaced when saving.  

File Sizes

UpStage has a default file size limit of 1MB for each media item uploaded. This can be over-ridden by giving a player unlimited upload permission, but in general it's a good idea to keep your files as small as possible. The larger the files you upload, and the more media assigned to your stage, the slower the stage will load.

What is a "reasonable" file size for your original graphic? This is very hard to say, as it’s completely different for a small static flat graphic prop which may be only 1K, and an animated flash backdrop or multiframe avatar, which could be over 500K. And a stage with a single large graphic may load faster than one with many medium sized graphics.

If your original files are larger than 500K, check whether you can resize them and save them again to a smaller file size. Remember that screen resolution is only 72ppi so there is no need for your originals to be at a higher resolution.

Deleting Graphics

It is good practice to delete unwanted graphics in order to keep the server tidy and minimise digital storage requirements.

  1. process

If you are working on a server that is used by many players, such as the Open UpStage (link) please do not delete anything that has been uploaded by someone else. But also be aware that we operate a Creative Commons policy, so your media may be "borrowed" by others, for learning and playing; no-one should use someone else's media in a performance without the original creator's permission.

Embedding links in graphics

is still possible ???

Active hyperlinks can be created by typing a URL into the text chat window (use right-click or ctrl+click to open or copy the link); however sometimes it’s useful to have a graphic onstage that provides a hyperlink to another stage or a different web site.

The way to do this is to create a .swf image with an ActionScript button containing the following code:

    on (release) {

                getURL("http://desired.url", "_self");

This could be an avatar or a prop that is placed on the stage at the time that you want the audience to follow the link.

Il y a une erreur de communication avec le serveur Booktype. Nous ne savons pas actuellement où est le problème.

Vous devriez rafraîchir la page.