Flash Game Scaling Example

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

Clubsoft, this looks interesting and thanks.

Marv

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.

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%)

Thank you!!! :D

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

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

Clubso[color:#000000]f[/color]t you are my hero. :D

Yes I know, I've already tried!

Hence the excitement!!! :D

Clickteam should add this to the exporter.

Thanks so much Clubsoft. I agree it would be nice to have a checkbox in the exporter parameters. :)

There's only one level of Zeb. WAH!

if only this was possible with using just the SWF, so I can upload to newgrounds with the scaling ability. But it's good to know it's possible

I noticed a glitch with the camera when you file missiles into the barrels. I hope that's a glitch with the game and not the scaling trick

While this is a nice example, I still hope there will be some way for this to be fixed in the flash game itself. All it takes is for someone to disable javascript and the problem comes back. Or they could download the SWF and play it, and the problem comes back.

I've read all the threads regarding the scale problem, and I still don't understand why other flash games, made in actionscript, are able to scale properly (as long as the same aspect ratio is used) whereas the games made with the flash exporter don't scale at all? I'm going to hold out buying the flash exporter until something is done about that...

"If" the problem can be fixed, you can count on Click Team to fix it.

Marv

I bet 90% chance it's because flash is for vector graphics and MMF2 uses raster(?) graphics. All flash games that scale properly have the vector is graphics. All flash games that don't (yes I have seen a few) use the kind of graphics that MMF2 uses. Clickteam proably can't do much of anyhting, from what they have said in the past. :\

Raster is the correct term. You can use the VectorialShape object by Sphax for vector, but I don't know if that would fix the problem at all.

this is very cool, it would be cool to have this as a built in option (like others have said) so people who have java disabled still get the expected results. personally i hate playing 320x240 games at 1x. it has to be 2x !!!

I think the problem can be fixed, see my post here -

http://www.clickteam.com/epicenter/ubbthreads.php?ubb=showflat&Number=181368#Post1813 68

Has anyone else noticed a problem with this when used with IE8?

I usually don't use Internet Explorer, but I got an email that told me one of my games was not showing up at the right size. I checked Chrome, Firefox, and IE6 (the version I have installed), and everything resized correctly. Then I downloaded a portable version of IE8 to test with and sure enough, the game is not resizing. :/

Odd!

I notice 2 things. 1st one IE has got problem with refreshing Flash after resizing by zooming. 2nd one maybe we see bigger area that is visible for players but still events like leaving visible area ARE WORKING so the 'original frame' is there.

As a proof you can try not resized version of zeb - go before the 4th soldier and stand on the left platform horizontally equally to him. After shooting rocket it would be destroyed at the end of visible area thanks to what soldier is still alive (you can check it by going to him). Go back to that place and zoom out the area so you will see the soldier and now try to use rocket. You will notice that it disappears before it reaches soldier, why? Because that's place where 'visible' screen from first test is ending - and that's place where it was destroyed.

So there is a possibility to 'cheat' this cheating thing.

Hm, does it matter whether its being actually scaled or will it still occur if you're using this to keep it within the width and length of the application?

I don't know if it's much relevant, but I've noticed that when playing MMF-made .swf files locally with the Flash Player, I can resize them without problems. I can even play fullscreen (1680*1050) with only a little lag.
I wonder why is the local Flash Player different from the Flash plugins used by the browsers?

You mean in a page, right?

Quote:

---

Originally Posted by RickyRombo

You mean in a page, right?

---

No, I mean playing local .swf files with Adobe's Flash Player which is installed here on my HD:
"C:\Program Files\Adobe\Adobe Flash CS4\Players\FlashPlayer.exe"

EDIT: You can download a standalone Flash Player from the page below > Adobe Flash Player 10 — Debugger Versions > Download the Windows Flash Player 10 Projector content debugger (EXE, 5.18 MB):
http://www.adobe.com/support/flashplayer/downloads.html

because its not embedded inside a browser and yet does not suffer of the browser limitations, it is a runtime and behaves like when you do an exe with mmf including full screen.

Thanks jpcr, now I understand. It's a shame that some newer browsers have greater limitations (yes I'm looking at you Microsoft).

I'm not sure how a game is "scaled" as far as this example goes if it is not embedded!

RickyRombo, if you mean that you can't scale an application with the standalone Flash Player, here' how. Just open a .swf file, in the menu check View > Show All, then resize the window at will.

I meant to force it from showing things outside of the desired area - does this do that?

Why this is not sticked thread? It should be from very beginning. Could anyonw correct this mistake? Because still this ONE is not available directly from MMF hopefully in new Flash update it will be built in. And still thanks Clubsoft for it you're life saver.

As a workaround I use a large AO which is always set to front. Only the playfield area is cut out and filled with the transparent color. Of course, it's not very comfortable in Frame Editor if you need to put some backdrops outside the visible playfield.

Also JoKa your solution doesn't help when we place flash file in website and we don't want it to change the size - for example of the table - because it will destroy the site design.

Still I noticed that preloader (at least Image one which I'm using) is not scalable.