Batching .PNGs into .SWFs

[dark13]

These JSFL scripts will automatically convert PNGs into SWFs using flash professional.

Why using SWFs instead of PNGs into an hyperspin theme? Flash supports a "smooth" feature, when "smooth" flag is used a SWF will look much better than a PNG when hyperspin runs at a resolution higher than 1024*768. If you plan to use 1024*768 on hyperspin, instead, it is better to NOT use "smooth" as the artwork will be blurred a bit.

This is mostly a workaround for those who wants to design future-proof themes at 1080p. Create your artworks layer in photoshop (or gimp or whatever) at 1080p, save background and artworks as .png in a folder. Double click the script and point to that folder in flash (a dialog will appear). The script will convert EVERY PNG in the chosen folder to SWF. Basically you create png assets for a 1080p theme and the script will convert them to swf usable in the current version of hyperspin.

SCRIPTs EXPLANATION

1080p to 1024*768 scripts

PNG_to_SWF_dark13_1080p_scale_Artwork: Use this script to convert artworks. The swf canvas will have 1 more pixel on Y and 1 more pixels on X and no-pixels will be lost when the scale will result in something like 333,45px

PNG_to_SWF_dark13_1080p_scale_BK: Use this script to convert 1920*1080 background, embed pngs will be 1024*768, canvas will be 1024*768

PNG_to_SWF_Zero_Dreams_1920x1080_to_1024x768: Use this script to convert 1920*1080 background, embed pngs will be 1024*768, canvas will be 1024*768 (maybe more precise as it's not a % based scaling but a resolution scaling)

4:3 to 16:9 Script

PNG_to_SWF_dark13_4-3_to 16-9_Conversion: Use this script to convert 4:3 assets to 16:9 assets. Useful when converting pre-made artworks for 16:9 themes

PNG to SWF scripts

PNG_to_SWF_dark13_NO_SCALE_SMOOTH: Use this script to convert PNGs to SWFs. If you prefer to correct aspect ratio in photoshop use this script.

PNG_to_SWF_dark13_NO_SCALE_NO_SMOOTH: It's basically unuseful. Using this script you can see the difference in a SWF when smooth flag is not used.

 

PNG_to_SWF_Wheel_Only_Scripts

PNG_to_SWF_dark13_4-3_to 16-9_WHEEL_Conversion

Use ONLY to convert a .png wheelset to .swf wheelset, 4:3 to 16:9 ratio

PNG_to_SWF_dark13_4-3_WHEEL_Conversion

Use ONLY to convert a .png wheelset to .swf wheelset, 1:1 ratio

 

 

--------------------

All those scripts are based on the script you can find here https://www.yofla.com/flash/png2swf/

If you want to check or modify the script just open it with text editor. Jsfl is basically a simple .txt with a jsfl extension.

 

Dropbox link: https://www.dropbox.com/s/smx8mt1eoc3hh2t/png to swf scripts2.rar?dl=0

 

 

[zero dreams]

Let me say Thank You so very very much Dark. I compared the first script with the last one which was titled center image to try and understand how to get it to do more than convert from png to swf and did a little reading. Mind you that I really know next to exactly nothing but the extreme basics in Flash but with a couple lines and moving your image placement lines down, the script successfully converted over 100 1080 backgrounds to HS properties in about 3 minutes. For me this is mind blowingly amazingly useful to me.

I'm just gonna leave the script here for you as it'll be easy to see what I added and you'll also know how to make it look correct.

Adobe Flash CS6 tested

/*
*  PNG2SWF_MULTIPLE JSFL v 1.0
*  by Matus Laco, http://www.YoFLA.com
*  Modified by dark13 to embedd PNGs as uncompressed files and allow smoothing
*  product URL: http://www.yofla.com/flash/png2swf/
*  inspired by Mr.doob http://mrdoob.com/tools/jsfl/png2swf.jsfl
*
*  Description:
*  Converts multiple png files to multiple swf files.
*  Input: Select folder dialog box
*  Output: Same folder, same filename, swf extension
*/

png2swf();

function png2swf()
{
var folderURI = fl.browseForFolderURL("Select a folder.");
if (folderURI == null) { return; }
var folderContents = FLfile.listFolder(folderURI);

var doc = fl.createDocument();
doc.backgroundColor = '#00FF00';

var imported = 0;

for(var i=0; i< folderContents.length; i++){


	var pngURI = folderURI + "/" +folderContents[i];
	if (pngURI.substr(pngURI.length-4) != ".png") continue;

	doc.importFile(pngURI);

	// get item		
	var bmp_lib = doc.library.items[imported];
	bmp_lib.compressionType = "lossless";		
               bmp_lib.allowSmoothing = true;
	var bmp_tl = fl.getDocumentDOM().getTimeline().layers[0].frames[0].elements[0];


// When you change the width and height properties,  
// Flash Player changes the scaleX and scaleY properties accordingly. 
bmp_tl.width = 1024; 
bmp_tl.height = 768;

// Align image at 0,0;
bmp_tl.x = 0;
bmp_tl.y = 0;

	// export	
	var swfURI = pngURI.substr(0,pngURI.lastIndexOf(".")+1)+"swf";
	doc.exportSWF(swfURI, true );

	// remove previous from timeline
	doc.selectAll();
	doc.deleteSelection();

	// increase imported count
	imported++;
}

doc.close(false);

alert(imported + " files created.");
}

[dark13]

Thank you

zero dreams can you do me a favor? As far as i've seen on my 1360*768 screen there is no difference between a 1080p image resized in flash and a 1080p image resized in photoshop and imported in flash. 2 theme makers (i don't remember their name) told me it's the same on a 1080p screen. Basically the only flash feature that make looks the image better should be the "smooth" flag, as in the very end flash is always outputting a 1024*768 image. Can you test it for me? I'm asking this because when resizing in flash and then moving the object gives as result a more cpu intensive .swf

[zero dreams]

One thing I noticed when converting a 1080 image in Flash and changing its properties to 1024*768 is that the original image is left intact and can be reused like a smart object. All one needs to do is correct the properties if HS goes HD and the artwork is still viable. If the image is already resized before Flash then you wouldn't have anywhere to go and Flash does a great job at scaling the images. If HyperLaunch is native at 1920*1080 then I set my standard to that and all images produced can just be Flash in with this script for HS usage.

When I tried the png to swf conversion script it did its job perfectly but the image retained its 1080 properties which is way too large a scale for HS. I didn't change anything for me in that respect an all I was able to view was the top left corners of my backgrounds. I'm not really sure how intensive they are but my pc hasn't really blinked using these backgrounds with adjusted properties. Now if the image was scrolling, I don't know.

[dark13]

While making aeon nox animations i noticed that using, let's say, a 200*200 circle in a 200*200 png is less cpu intensive than a 200*200 circle into a 600*600 png. Testing swf themes on a p4 3ghz is pretty useful to evaluate performances (i was using 1024*768 pngs to avoid positioning in flash)

I was talking about image quality, zero dreams, can you please do this little test when you have a bit of time? For background that script is ok, i think it is even possible to scale with ratio lock to 1365*768 and then 75% on X so you can design at 1080p then convert to flash but i fear performance may drop when using multiple complex swfs with animation and other stuff. HS can deal with a 1024*768 >30fps even on a q6600 but if you have multiple layers with animations and other stuff it would be better to optimize everything

BTW, take a look here, I found a way to lock SWF speed with a script (it's not perfect) http://www.hyperspin-fe.com/forum/showthread.php?39413-HOW-TO-Keeping-framerate-under-control-in-a-SFW

[dark13]

Ok, I've gone a bit further. If someone prefer to create theme's artwork at 1080p so they will be future-proof here's 2 script that are resolution-independant. Make your theme in photoshop at 1080p, export artworks as png then use the script to convert them in flash. Scaler is based on % so you don't need to calculate the size and change the script.

The BK script is setted to transform a 1080p to 1024*768 with ratio correction for widescreen, use it for background (or use zero dream script), the other script will do the same thing BUT will create a canvas with 1 more pixels on Y and 1 more pixel on Y to avoid problems. Working with % can result with, let's say, a 30,56*20,34 canvas in flash so 1 more pixel on Y and X will ensure all pixels of your artwork will be there. You can use the BK script for your artwork without problems IF after trimming the artwork in photoshop you will add some more pixels on the canvas (only "empty pixels" may end outside the canvas in flash and that will not be a problem).

The scripts have not been intensively tested but they should work without problems

PNG to SWF actionscript for flash 1080p to 1024x768 and 16-9 correction.zip

Edited February 24, 2015 by dark13

[zero dreams]

My bad on the late reply but the internet got cut off. Did you still happen to want me to check out the image quality of a HD image resized in PS with your script?

Btw, if it weren't for this thread and your scripts I would never be so far into my project as the entire thing was on a 1080 canvas and it would take generations to import export everything. I made a Flash folder so all I gotta do is just throw HD images in there, launch the script to it, and it's a night and day difference between the first manual process and this automated one, which looks better I noticed. You should just rename the script to "HS to HD". Again, beautifully done.

[dark13]

Yeah, I am curious to know if you see some differences between artwork pre-scaled in photoshop and the ones scaled in flash. Right now it's just a curiosity as the script with scaling percentage makes 1080p themes conversion a breeze

If you see an improvement in artworks made with that script i guess you were not using "smooth" flag with manual method BTW if you need to convert png to swf for a 1024*768 theme delete bmp_lib.allowSmoothing = true; or set it to false, at 1024*768 swf with smooth looks more blurred.

I asked THK to stick the thread as those scripts are really useful and no flash knowledge is needed to use them

LATEST VERSION OF SCRIPTS CAN BE FOUND ON THE FIRST POST OF THIS THREAD

[zillion23]

First off,these are amazing scripts...thank you very much! I have been using the 4:3 to 16:9 script to convert some of my boxart and it does the .png files fine when the .png extension in lower case letters. When the boxart has the extension .png in all capital letters such as (.PNG) the script skips over those files that has the .PNG extension is in all capital letters. Is there a work around for this so the script also does the files that have extensions that the .PNG is in all caps? Thanks!

[dark13]

Extensions should ALWAYS be lower case

Probably changing this

 var pngURI = folderURI + "/" +folderContents[i];
	if (pngURI.substr(pngURI.length-4) != ".png") continue;

to

 var pngURI = folderURI + "/" +folderContents[i];
	if (pngURI.substr(pngURI.length-4) != ".[color="#0000CD"]PNG[/color]") continue; 

Will convert .PNG files (but NOT .png files).

Honestly, the best solution is using a software like this http://rename.lupasfreeware.org/ to change the extension back to .png on whole folders

[Styphelus]

Tried these out but they don't do a good job. Anything with a shadow becomes white. They don't like transparencies.

[dark13]

Which version of flash are you using? Is the problem related to a specific script? I moved from 5.5 to CC just because sometimes 5.5 introduced a problem NOT using smooth while saving, my best guess is your flash is not saving uncompressed .png into the swf

 

Tested it using PNG_to_SWF_dark13_4-3_to 16-9_Conversion and it seems ok. Please check this test theme

 

https://www.dropbox.com/s/it5kivzsizcn1dw/test%20-%20TEST-d13%2820150722%29.zip?dl=0

[Styphelus]

I have Flash Pro CS6. Could that be the problem?

[dark13]

Yeah... maybe I did an intensive batching with 5.5 and everything went fine, when batching a new set franky rizzo noticed a problem with smooth flag not being applied. Well, im' not 100% but I guess flash software tends to self destruction lol. Check option and try to set "uncompressed" as default, I'm pretty sure the software DOES NOT read image setting in the script for some reason. I'm not 100% sure but I think someone has used these scripts on cs6 without problem...

[Styphelus]

Thanks. Got it working. Played around with my png settings. Thanks for the tip.

[Yardley]

Hey guys, have a couple of questions. When creating a theme in Photoshop, to be used with both 1920*1080 and 1024*768 resolutions, should I make the theme in one size for example 1920*1080 only or should I make one in each size? I'd love to understand this better as I've been making themes lately and want to achieve the most flexibility for different resolutions . At the moment I've been exporting them as PNG's on a 1024*768 canvas. Also, which of these scripts should I run to convert the PNG's to SWF's after the theme is ready and what is the advantage of SWF?

 

I'm a complete noon at this and know nothing about Flash so a detailed explanation would be really appreciated.   

[dark13]

My suggestion is to design everything at 1920*1080 then save the .psd (so you'll have true 1080p source). Then scale the document to 1024*768, exports background and artworks as .png in a folder then run PNG_to_SWF_dark13_NO_SCALE_SMOOTH. Difference between pre-scaled graphic and graphic scaled directly in flash is negligible and pre-scaled graphic will run faster on HS engine and will create a smaller .swf. Someone, anyway, prefer to use true 1080p.

 

If you want true 1080p graphic you can design everything at 1080p and export artworks and background as .png then run PNG_to_SWF_dark13_1080p_scale_Artwork on artworks and PNG_to_SWF_Zero_Dreams_1920x1080_to_1024x768 or PNG_to_SWF_dark13_1080p_scale_BK on background image (it's better to NOT use artwork script on background as it adds 1 pixel on Y and one pixel on X as flash scale is not integer (es artworks can be 640,5*480,7  pixels).

 

No flash knowledge is needed, just double click the script with adobe flash professional installed, choose "run as script" and select the folder containing .pngs you want to convert in .swfs.

[DryFour]

Hello Dark,

 

Thank you so much for the scripts. I just have a couple of questions:

 

1. I do not own flash professional right now, what would be the most cost effective solution to that?

Ideas:

* Purchasing the monthly 19.99(29.99 if taken monthly) Flash license​ at adobe.

* Finding an older used license for flash like CS6 or something.

EDIT: I think there is a 30 days free trial at adobe but I'm not sure.

2. The difference between the zero dream and the other artwork script is what exactly? You try both script and take the one that looks the best?

3. My backgrounds are designed in GIMP on a 1080p canvas. What about artwork? Lets say, do you put a small image of 200X150 on a 1080P canvas?

4. My resolution in Hyperspin 1.4 is 1024x768 is this what you all use?

 

Im currently using the widescreen theme made, but I'm designing 18 controllers cards for my project and I need them to be converted.

 

Thanks for the suggestion.

[Yardley]

My suggestion is to design everything at 1920*1080 then save the .psd (so you'll have true 1080p source). Then scale the document to 1024*768, exports background and artworks as .png in a folder then run PNG_to_SWF_dark13_NO_SCALE_SMOOTH. Difference between pre-scaled graphic and graphic scaled directly in flash is negligible and pre-scaled graphic will run faster on HS engine and will create a smaller .swf. Someone, anyway, prefer to use true 1080p.

 

If you want true 1080p graphic you can design everything at 1080p and export artworks and background as .png then run PNG_to_SWF_dark13_1080p_scale_Artwork on artworks and PNG_to_SWF_Zero_Dreams_1920x1080_to_1024x768 or PNG_to_SWF_dark13_1080p_scale_BK on background image (it's better to NOT use artwork script on background as it adds 1 pixel on Y and one pixel on X as flash scale is not integer (es artworks can be 640,5*480,7  pixels).

 

No flash knowledge is needed, just double click the script with adobe flash professional installed, choose "run as script" and select the folder containing .pngs you want to convert in .swfs.

 

Thanks! That worked perfectly. Question, should I still design themes in both resolutions? There's no one fits all correct? I designed the theme in question for 1080p then used your scripts, it looks great on my 1080p system but it's a bit squished on my 1024*768 system so I resized the background in Photoshop and moved everything around accordingly then saved it as a new theme for use specifically in my 1024*768 system. (saved it as png's) 

 

Is this correct or I'm I missing something/doing too much work?

[dark13]

Obviously there's no real method to make a theme looking good at 4:3 and 16:9. Some softwares use scaling tricks but usable space is just way too much different, there will always be something "wrong". Just design a theme at 1080p then adapt graphic for 4:3 repositioning background and changing artworks position in hypertheme.

[Black Hazor]

Hi,

first of all thank u very much for ur Batch files. I used this file: PNG_to_SWF_dark13_4-3_to 16-9_Conversion and everything worked fine (the file shows in adobe flash professional cs6 like it should). I wanned to convert all my wheels, carts, boxes and so on...but now they arent showin in hyperspin, even after renaming them to png. Could u pls help me with this? I attached a sample File, had to pack it up otherwise i couldnt upload it. Thanks in advance.

3-D WorldRunner (USA).7z

[dark13]

Artwork layers (boxarts, carts, etc) should not have any issues, do you have problem with them?

 

Current hyperspin build does not support .swf wheelart, they don't work even when renamed to .png. Wheelart MUST be .png.

 

To resize wheelart for 16:9 screen you can use photoshop's action: start recording a new action, resize 100% Y, 75% X and save. Now launch the action on the whole folder (always better to select a different output folder to not overwrite original files).

[Black Hazor]

o ok thank u very much dark. Another question...im using photosizer for resizingright now, is there a big advantage with photoshop?

[billyc999]

could do with video accepting swf. I have 3 screenshots per game  for Amstrad games that are in single swf files

or a way of converting them to mp4 so each screen is 3-5 seconds long

http://www.filedropper.com/1943e

[dark13]

 

could do with video accepting swf. I have 3 screenshots per game  for Amstrad games that are in single swf files

or a way of converting them to mp4 so each screen is 3-5 seconds long

http://www.filedropper.com/1943e

 

What is that for billyc999? Do you use a script for that?