Is there a way to take a compiled SWF file and figure out how much of it's size is used by code and how much is assets (images, etc)? I'd like to see if I can get my Flex SWF smaller but I'm unsure what's taking up the most space.
You can use the -link-report MXMLC compiler parameter or you can use the swfdump tool in the open source Flex SDK to see what is in a SWF.
Related
Could you explain why a Flash Builder source folder - no larger than 2 MB - compiles into a SWF exceeding 15 MB with debugging turned off (exported release build)?
There is only 1 embedded image at about 93k - no other images. The application is not that complicated, basically calls are made to a MySQL db to display information, as well as store information. I have used drop shadows and borders, but all standard to Flash Builder. Some custom classes and one custom skin.
Thank you...
Here is listing of the files:
.DS_Store
mx_4.5.1.21328.swz
Main.html
playerProductInstall.swf
Main.swf > 15 MB
rpc_4.5.1.21328.swz
amf_config.ini
services
assets
skins
charts_4.5.1.21328.swz
spark_4.5.1.21328.swz
framework_4.5.1.21328.swz
sparkskins_4.5.1.21328.swz
gateway.php
swfobject.js
history
textLayout_2.0.0.232.swz
This seems pretty large to me.
When you say "Debugging Turned Off" what does that mean? Did you export a release build? Or did you just press the "play" button to run your code instead of the "Debug" button?
Do you have the Flex Framework linkage type set to RSL (AKA External) or Merge into Code?
Are you using an external libraries (SWC)? A framework, such as RobotLegs or Swiz, could add to the size of the SWF; but will probably not be located in the source folder.
Well, well...thought I'd revisit this since I found the problem - a font in a css file with embed set to 'true'. This font wasn't even being used, so I removed it and the css file completely (not in use either). They probably got inserted way early in the project. Code now hovering around 1 MB and less than that for the export build. Hope this helps someone. Cheers!
Flex is a collection of ActionScript classes and components, so when you build an app based on Flex, some of these classes get embedded into your application.
Something as simple as a <s:Button means that the byte code of spark.components.Button has to be included into your application along with your custom code, it's not part of the runtime.
We build prototypes and demo applications in Flex 4.5.1 and AIR 2.7 for mobile and desktop use. These tend to involve a large number of full-screen .PNG files. Lately we have been looking at ways to segment our code for flexibility and multi-screen re-use.
What suggestions do people have for segmenting the project and libraries such that compile times are minimal and images are easy to replace?
A couple of strategies pop to mind:
Externalize the assets from in-line [Embed] statements, to using a CSS file.
Configure the CSS to compile as a seperate SWF, and load it at runtime. This should minimize the amount of PNG encoding the compiler is doing during your normal compilation process.
If that still doesn't speed it up enough (I've found that the incremental compiler sometimes gets mixed up and re-encoded the embedded assets, killing compiler speed), move the CSS files to a separate project altogether.
This option is preferable, as loading your images at runtime gives you better flexibility in your multi-screen projects.
Alternatively:
If using CSS isn't an option for some reason, move your [Embed]'s from your main project to a separate SWC project, and embed them on classes.
Add the swc as a dependant project
Reference the assets via the classes.
eg:
// assets-project/src/Images.as
public class Images {
[Embed('/assets/img/defaultAvatar.png')]
public static var defaultAvatar:Object;
}
// main-project/src/SomeView.mxml
<s:BitmapImage source="{Images.defaultAvatar"} />
Compile the following module with all framework SWC-s excluded in release mode in Flex 4:
<mx:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"/>
The SWF size will be 35,658 bytes.
Now generate link report via -link-report for this SWF and load it via -load-externs. Size of the SWF now is 33.174 bytes.
If you check link report now, you will see that some framework classes like mx.modules:IModuleInfo or mx.utils:LoaderUtil are still there.
How to exclude them from SWF?
You are excluding framework SWCs by using RSLs, right?
If I had to guess, those classes are required by Modules and there is a reason for compiling them into the class. I'm sure Adobe was meticulous when creating RSLs and put a lot of thought into what should or should not be included in the main SWF.
I wonder why this is important, though. A 30K swf is really small.
The problem is that the standard components are not in the client runtime enviroment.
For example, in Flash with AS2 or AS3 if you use a ComboBox you have more than 20KB of overhead because the binaries for the component must be packed with your swf. This happend with Flex too. To make an small binary I used an small footprint library with the flash components, but this was for Flash AS2.
Good Luck.
I guess you have to dig through the link report. Find out which classes depend on mx.modules:IModuleInfo and mx.utils:LoaderUtil, and you're likely to understand how or why this happens.
It must be quite many classes, because the once mentioned including their dependencies have 6 KB raw and 2.8 KB optimized size.
greetz
back2dos
Here's a dumb question. I compile my Flex application with several swc's (libraries) and it creates a swf file. The sum of the swc's is roughly 4 MB yet the actual swf generated is only 1.6 MB. How is this possible?
Thanks!
The compiler only compile classes from the swc that your application need, unless you specify which classes you want to 'embed'. Hence the smaller size of the swf at the end.
To expand on PeZ's response a bit, typically SWCs supplied to the Flex application compiler using the "library-path" compiler argument:
library-path path-element [...]
Links SWC files to the resulting application SWF file. The compiler only links in those classes for the SWC file that are required. You can specify a directory or individual SWC files.
You can use "include-libraries" instead:
include-libraries library [...]
Links all classes inside a SWC file to the resulting application SWF file, regardless of whether or not they are used.
Contrast this option with the library-path option that includes only those classes that are referenced at compile time.
You'll typically want to use "library-path" to help keep the size of your SWF as small as possible. However you may need to use "include-libraries" if your application instantiates classes from a SWC via reflection only. Since these classes are not actually linked to in the application, they won't be included if you use "library-path" to reference the SWC, and you'll get a runtime error during instantiation since the type is not available. However if you use "include-libraries" the class (and all other classes in the SWC) will be available to the app.
1) in swf file only required classes are included
2) more files result in additional header information that will also increase size slightly.
To reduce the size of flex swf you can use these techniques mentioned in this article :
http://askmeflash.com/article_m.php?p=article&id=9
Which is a better format to store graphic assets for a Flex application, SWF or SWC?
Are there any real differences, and if so what are they?
Assets in a seperate SWF are loaded and included at runtime.
Assets in a SWC are loaded and included / compiled at compile time.
You can also directly embed assets within the main app SWF at compile time (check out the Embed meta data).
Of course, you can also load individual assets (such as a PNG) directly at runtime.
As far as which is better, it really depends on what you are trying to do, and how the assets are used.
mike
SWC is what you use when you're looking for a library to compile into your app. You have access to the classes and can import individual parts. SWF is more likely what you're looking for when embedding graphics.
Here's the docs you might be interested in:
http://livedocs.adobe.com/flex/3/html/help.html?content=layoutperformance_06.html#223998
I've been having good success with SVG for images, but there's some caveats since Flex only implements a subset of the features.
I have no real reason for doing this so it may be incorrect but I usually create SWF's for things that need to be loaded during runtime and SWC's for things that need to be available for design time.
A SWC is simply a SWF and some metadata wrapped into a zip file. Other than the fact that runtime loading of SWC isn't supported, I don't think there are any major differences between using the two formats.