Fork me on Github !

Converting .png to .swf

If you are able to convert your graphics to .swf format before uploading to UpStage, you will achieve a better result. This is because .swfs are vector graphics, rather than pixel-based; additionally, UpStage converts all graphics to .swf format when they are uploaded, so if it is already in that format then it is better.

To generate .swf graphics, first of all create your graphic in another graphics application and save it as .png – this will preserve transparency if you have clear-cut the image. You will need to have access to the Flash MX application (if anyone knows of an open source alternative to Flash, please let us know!).

  1. Open a new document in Flash MX.
  2. Import your .png file (File > Import)
  3. Convert the imported image to a symbol (Insert > Convert to symbol); you should see the line around the object change from grey to pale blue.
  4. Resize your image: remember that it will appear much larger (2-3 times larger) once it has been uploaded to UpStage. Start by resizing the document (Modify > Document size) to approximately the size you want (see below for more information about sizes).
  5. Select the object (image) and use apple+T (ctrl+T for windows users) to open the Transform dialogue box, which allows you to reduce it by percentages, with proportions constrained. Reduce it and move it to fit onto the modified document (which shows as a white square).
  6. If you need to, adjust the document size further to precisely fit the image (if the document is larger than the image, it will effectively create additional transparent space around your avatar).
  7. If you are creating a multiframe avatar, repeat the above steps for each frame. Note that you can also create animations within frames and embed audio files – this requires a bit more than basic knowledge of Flash, beyond the scope of this tutorial.
  8. Export the file as an image (File > Export Image) or as a movie if it is a multiframe avatar. In the dialogue box, set JPG quality to 100%.

A word about size
As mentioned above, graphics increase in size about 2-3 times when uploaded to UpStage, therefore you need to make your .swf smaller than you want it to be. It can be difficult to work out the right size without doing a few experiments. As a guide, the “average” avatars such as those of Helen and Vicki were uploaded as .swfs of about 100 pixels high.

Create a test avatar first, of the size you think might be right, then upload it and assign it to a stage to see how big it really is. If it is not the right size, you will need to remake it, so it’s a good idea to keep the .fla file at least until you are sure that you have the right size. From the .fla file you can just adjust the size of the object and document.

If you are remaking avatars, please remember to delete any unwanted epxeriments!