Flash Game Scaling Example

**Clubsoft** · 20th March 2010, 01:06 AM

I've been trying to get flash game scaling to work for a few upcoming games on the Daily Click Arcade, and have managed to get it into a working state now (tested under IE8, FireFox, Opera, and Chrome)

Had a few people say they might also find this useful, so I'm posting an example of this up here should anyone find it useful.

First, a few examples of it in action:

http://www.create-games.com/sly/zeb_normal.html
http://www.create-games.com/sly/zeb_x2.html
http://www.create-games.com/sly/zeb_x3.html
http://www.create-games.com/sly/zeb_x0.5.html

It should be relatively easy to use, if you compair the source code of the first document with the three after it, you'll see 8 additional lines of code present.

These can be copied into your html document, and you should just need to change the game id, and scale value.. you'll find the ID of your game by looking at the original code, look for either an id="" or name="" tag (these should both be the same). This needs inserting into the first parameter (in the example above, this is "zeb").

The second parameter sets the scale, for example 1 = 100% (no change), 2 = 200% (double size), 0.5 = 50% (half size)

You'll also have to upload the .js file (included in the zip below) to your server, in the same directory as your html document. This should hopefully be all you need.

I've tested a number of games, and havn't found any issues with it yet, however there may always be some, so please be aware of this.

Anyone is welcome to use/adjust/modify/improve on this in anyway you wish, it's just an example, so play around as much as you want.

This zip contains the .js file, and all of the examples posted above:

http://www.create-games.com/sly/swfscale.zip

Edit: And one thing I forgot to mention.. vector based objects (Such as Strings, Text Counters, Buttons), are also resized and scaled correctly.. they're scaled as vectors would be though (Strings, for example, have their font size increased), rather than the pixels being doubled - which makes text much more readable and smooth

Thanks,
-Clubsoft

**nivram** · 20th March 2010, 01:23 AM

Clubsoft, this looks interesting and thanks.

Marv

**DavidN** · 20th March 2010, 01:26 AM

Thanks for pointing that out - what's especially useful is that the scaled games don't exhibit the scaling problem described here, even when you zoom the page. (Try the scrollwheel on the 2x or 3x pages, compared to the first "normal" one without the Javascript function.)

It's possibly to do with resizing the width and height of the Flash element directly? I'm not sure.

**Clubsoft** · 20th March 2010, 01:30 AM

By default, setting the width and height of the element directly will just resize the area which is displayed - the scale will stay the same, and you'll end up with hidden/offscreen objects appearing and other strange issues.

You can set the scale if you first call ".Zoom(0)" with JavaScript to the object (i.e. window.document["zeb"].Zoom(0) ) - which will then adhere to the objects specified size correctly - this is basically what the script does, and will resize the element automatically once it's loaded (I've had issues trying to do this before it's reached 100%)

**RickyRombo** · 20th March 2010, 01:35 AM

Thank you!!!

Now we don't have to worry about cheaters any more!

**Clubsoft** · 20th March 2010, 01:39 AM

It does seem to fix issues with the browser zoom if you set the scale to 1 (so nothing is resized):

Original: http://www.create-games.com/sly/zeb_normal.html
Fixed: http://www.create-games.com/sly/zeb_x1.html