Are there any tips / best practices / secrets for optimizing the size of AS3 SWF files? In particular, any way to get a breakdown of what is taking up space inside the SWF, like you used to be able to in the old Flash 7/8 days? I'm not using the Flash IDE any more, but now I'm using either Flex Builder or FlashDevelop, so it needs to be something that I can do without the Flash IDE.
If you're interested what in the code is taking up space, you can get that information from the link report. It's not as detailed as what you can get out of the Flash IDE, but it shows the size of each class (uncompressed.)
To create a link report, use the -link-report <filename> flag on mxmlc. It creates an XML file with information about the classes linked into your SWF.
I used the .XSL file described in the link below to clean it up and make it more readable:
http://blog.iconara.net/2007/02/25/visualizing-mxmlcs-link-report/
One tip would be to try Joa Ebert's "Reducer" tool which can greatly reduce the size of any PNG files in your SWF if you used the embed tag.
http://blog.joa-ebert.com/2009/08/08/reducer/
Make sure, you use PNG-8 where it is possible and PNG-24 where you need alpha-channel.
Use pngout tool to optimize them.
And there are some tools that can obfuscate and optimize SWF files.
I'm not sure what can be done with Flex Builder or FlashDevelop but what I always watch out for is font embedding. I take care to embed only the characters which will definately be used in the final swf.
Hi I previously posted this link in a related question about link report analysis (here), I've used this in the past and its quite a nice tool
LinkReportAIR
Related
I have to "convert" some flash projects to HTML5/JS but I don't really know how I can do it :(
This flash projects are little "activities" like this one :
https://www.brainpop.com/artsandmusic/artconcepts/cameras/activity/#=standard
I did some research about it, but i'm a bit lost...
I found other people asking the same question and a lot of responses are to use Haxe/OpenFL and as3hx (https://github.com/HaxeFoundation/as3hx) but I don't really understand how to proceed...
Is it possible to load a .swf file with openfl-swf to create a similar .html file ?
Should I convert AS3 to Haxe3 with as3hx ?
Is there a simple way to just get a graphic render of this activities without any interactivity so I can add manually input text field ?
I never used ActionScript or Haxe before.
If someone has any suggestions i'll be glad to hear it :)
I hope my explanations are clear, english is not my first language, so excuse me for any mistake.
Cheers !
as3hx will convert only as3 code to haxe openfl and may well need hand tweaking. To make the code more flexible try to avoid extending Sprite then potentially it will be easier to use your activity logic in more webgl accelerated haxe solutions like Kha and Luxe.
You probably need clean seperation of the code and the onscreen layout.
To run a fla swf that is mostly graphics in openfl you need to use the haxelib https://github.com/openfl/swf, it can be quite fiddly getting to different children or frames and the gradients are not perfect, just remember when using it that it's not the same as accessing a child normally your using a structure that is a bit different to do that.
Alternatively you may find flump useful it can be used with openflump.
https://github.com/SavedByZero/openflump exports from flash IDE.
It converts lots of your graphics to png sequences in nested structures, it would probably be worth rebuilding textfields yourself.
Openfl js can be slow I suggest you do some tests before committing to a solution, since Kha or Luxe may provide you a more shader modern approach to graphics than a flash emulation api solution, but then all you assets largely need to be images.
I doubt if there is any ideal way but getting your logic in Haxe is really good idea because then you can do c++, c#, js etc.. The first step if you choose openfl is to perhaps to try just porting parts of your code to haxe and then use them as a swc in your current projects this will allow you to gradually check your conversion and fix an issues easily within a haxe flash approach prior to trying to do the same in html haxe. You may find the swf library is not ideal for html5 and that png's are the way to go, Animate now provides export png sequence which I have used in starling as3. Another approach to consider is the away3d plugin for Animate it can convert flash timeline into typescript away3d (2D ) that you can control with javascript code ( even haxe you may have got from as3hx if you remove some of the flash specific haxe and adjust it to work with the away3d 2d but I guess it could be very complex ).
I am making a project in AS3, but I have come to a point, where I need to branch out, because I want it to publish to 2 places, which each require a bit of different additional code to function properly. So is it possible to achieve that I do not need to make 2 projects and maintain 2 similar projects?
I hope I wrote it clear enough.
Thanks for your responses.
You can do several things, depending on whether you're working in the Flash IDE, Flash Builder, or one of the other tools like IntelliJ.
If you are working in the Flash IDE and/or have a Flash Professional project set up in Flash Builder, you can go into the ActionScript Properties panel and set up a source path that points anywhere (I usually try to keep it relative, but it's up to you).
If you're working without a fla/xfl, then you probably need to look at setting up a library project.
This is a big reaseon for OOP! Write Base Classes and extend them for your Projects as needed.
Also check out Conditional Compilation
If I embed icons in the CSS file and refer to the style name in action script code, is that a good practice? Will that increase the swf size?
Any help would be really appreciated.
Thanks,
Gurjaspal
Yes, whatever way you choose, the font face will be embedded inside the SWF file.
Two ways to limit file size when using embedded fonts are :
Include only the needed character range. See this page for more information.
You can embed fonts in the main application and reference them in other parts of the application that are loaded later on (modules or their stylesheets)
Yes... Embed away. Flex has many built in compression algorithms that do a fantastic job of reducing file size. I've tried to optimize this process myself when building for web delivery and ultimately I could not get the file any smaller than flex could embedding the assets natively.
EDIT:
My assumption on adding this second answer is you were asking about icons (imagery) and not fonts.
I am fairly new to Flash and AS3.
My questions is do I actually still need to use Flash CS6 to setup the stage and library files.
Or can it all be done from FlashDevelop ?
Thanks
Flash CS6 is an application similar to Photoshop, you generally use it for creating/structuring/positioning graphical resources and then makes it possible to animate these (from keyframe to keyframe) and then access the graphical content from code.
So, the answer is no, you can create a SWF file without Flash, you can embed content to use in AS3-code without flash and you can use flex-components and position them without flash.
But creating any bigger project like that would be pretty unnecessary since you just as well could use some other language or tools for doing that kind of stuff. Tools and languages that were designed to do this specific thing.
Few months ago I switched completely to FD and since today I successfully built everything only in FD. The reason was that I had huge project to publish, and I couldn't compile it in Flash because of memory shortage for JVM compiler. With FD that was not a problem.
So in short, no, you don't need flash any more.
Though maybe there can be some things that you can create quicker and easier way in Flash than in FD (for example: some timeline animation and then publish to SWC to use with FD).
I still have Flash installed, just in case for quick animation jobs.
You need it if you want to create graphic objects to use them later in your code. The alternative is to create everything by code
It depends. If you need to use vector graphics, drawn in Flash, then the easiest way to incorporate them in your project is to use the IDE-based project (http://www.flashdevelop.org/wikidocs/index.php?title=Projects#AS3_Flash_IDE_Project). This isn't the only way, but it's easier than packaging them up and using libraries. In this case you are effectively using FD just as an external AS editor (and it's worth doing it just for this, since it is a much better editor than the one built in to Flash Pro.
If, on the other hand, you are working with objects drawn in code, with text, or with external bitmaps, then no, there's no real need to use CS* at all.
The advantage to OOP is having an environment like Flash for layout. It's been pretty crucial for me as a designer and when implemented correctly with a proper class structure, becomes extremely powerful. It really depends on what you are using as3 for. I find the Flash architecture to be most advantageous in the context of interface design, but for things like games or "static" interactives, sometimes its much more efficient to do everything in code and compile outside of Flash.
I was just wondering what are the pros and cons of using embedded images instead of dynamic loading? Because when making games on pure AS3 (without Flash IDE), its a pain to manually embed all the assets needed... That makes your code sloppy, besides you don't have control to automatically change the hud, for example, by only changing the external file.
But I heard that some sites only let you upload a single swf, so you can't have external images. Also I heard that some are worried about users downloading their art... But as far as I know, and please correct if I'm wrong, they can also download them if they hack the swf with a decompiler. Having it external, you can encrypt the image, and unencrypt it on the code, so if they try to download they will only get encrypted code.
So... What do you think about embedding images? Please share all your thoughts to me.
I believe dynamic loading of images is a better approach. I agree with you about the game problem you stated, but when you are talking of flash/as3 as a whole, games are just one of the things among the many, you do. Also there are a few which also accept multiple files & maybe more will allow later. As of now hosting sites are just being on the safe side by not allowing multiple files & formats. So if you really have additional files you could just host them elsewhere & call them from your main swf.
I however cant agree about the point of making the code sloppy by managing images dynamically. When you do it through an IDE the IDE is writing the code for you, but as you might realize letting an IDE decide what to write doesn't always make the best. Manually handling things let's you understand all entry & exit points of an app. Moreover, would you want to open a flash IDE every time you wish to add an image, make an update, etc.
I usually like to use IDE cause of the awesome tools it provides to make things more efficient & prefer letting the code do all management/control stuff.And yes, if you have many small images (as in online flash games), embedding is better approach.
As far as the security is concerned even externally loaded files can be accessed if the encryption algorithm you use, can be found by decompiling the swf. So your best bet in case of security is usually using a third party software to encrypt the swf, which let's say increases your chance to prevent theft of your material. So if you really encrypt the swf using a 3rd party tool, both the ways would be acceptable.
I believe both approaches are valid, it mainly depends on your assets.
As you know embedding assets, will increase the size of your swf, I would only consider doing this for icon type images where size is hardly an issue.
For bigger images, I would definitely go for dynamic loading which I also find more flexible.
If I have lots of small icons, I'm embedding them. Imagine that number of requests in runtime, any of which may timeout. Pain of embedding, where? A single Embed tag in source or CSS for an asset. "Constant" assets must be embedded, "variable" ones - loaded.
Edit: OK, I got it. Pain of embedding lots of assets. Here is one idea come to my mind... Even if you loading something dynamically, you need some list with all filenames? You may take list of files and generate class full of public static const members with [Embed] attributes, that's fairly trivial. Then you use that class in project and voila, all is in the place. Maybe this helps.