It happens to DisplayObjects A inside DisplayObjectContainers B inside DisplayObjectContainer C, when

• A was not initially visible (not inside initial scroll rect of C)
• A is in 3D mode (I just change rotationY for that)
• B is in «cached as Bitmap» (cacheAsBitmap would do, I go with DropShadowFilter in the example)
• C’s scrollrect property is set, so A is shows up (well, it doesn’t – that’s the bug after all ;)

Here the example:

bug-3d-shadow.swf

And here the code:

/* Flash Bug - Flash Player 10.0.22.87
	disappearance when 3d's parent has shadow
	more info: betabong@gmail.com
*/
 
this.stage.scaleMode = StageScaleMode.NO_SCALE;
this.stage.align = StageAlign.TOP_LEFT;
 
 
var scroller:Sprite = new Sprite();
addChild( scroller );
scroller = this;
 
var filter:DropShadowFilter = new DropShadowFilter( 2 , 90 , 0 , 0.5 , 8 , 8 , 1 , 2 );
var r:Sprite,rect:Sprite;
 
for ( var mode:int = 0 ; mode<=1 ; mode++ ) {
	for ( var i:int=0 ; i<3000 ; i+=100 ) {
		r = new Sprite();
		r.addChild( rect = new Sprite() );
		rect.graphics.beginFill( 0xff0000 );
		rect.graphics.drawRect( -40 , -40 , 80 , 80 );
		rect.graphics.endFill();
		rect.addEventListener( MouseEvent.MOUSE_MOVE , rotate );
		if ( !mode ) r.cacheAsBitmap = true; //r.filters = [ filter ];
		r.y = i + 100;
		r.x = mode * 150 + 100;
		addChild( r );
	}
}
 
stage.addEventListener( Event.ENTER_FRAME , move );
 
var scroll:Number = 0;
function move( event:Event ) : void {
	scroll += ( stage.mouseY - 100 ) / 50;
	scroller.scrollRect = new Rectangle( 0 , scroll , 500 , 200 );
}
 
 
function rotate(e:*) {
	e.target.rotationY++;
}

Update: Now that: it took me about 20 min to file a bug in the Adobe Bug System (which is slow as hell anyway). And when I want to submit it, I get a message saying they’d be in maintenance. Well, buggy bug systems piss me off quite a bit.

Related posts:

1. MetaTunnel with Pixel Bender

In Flash we have a menu command called «Simulate Download» to see how things run at different bandwidth situations. But how to achieve this in Flex?

I’ve been using Sloppy for a long time. It’s little java app that can be started via a simple web click. It’s really easy to use and does very well what it does. For debugging your app (your flash website) throttled in Flex Builder simply follow these steps:

1. Open the Sloppy website
2. Click the little Sloppy icon:
   
   
3. A «sloppy.jnlp» file is downloaded. Open it if doesn’t open automatically.
4. The actual application will be downloaded and started. If it asks you to trust: trust! :-)
5. Enter the address of your html file in the bin-debug or bin-release folder. It should be a webserver address. I usually create a symbolic link of my project directory and put it into my local webserver directory.
   
6. Click «Go» – this will start the Sloppy proxy and open the page in your default browser. 
7. Copy the address from the browser window (usually http://127.0.0.1:7569/your/path)
   
8. You may close the window. Go to Flex Builder and open the project properties (right click on project folder, last item). In an Actionscript Project, switch to ActionScript Build Path.
    
9. Enter the copied address into «Output folder URL», clear the html name (e.g. App.html).
   
10. Click «OK» and you’re done. You can now Run and Debug as if your website was hosted on some server and you had a 256K ADSL connection (instead of your T1).

Note: I tried to automate the whole thing (with Ant of course) and succeeded to a certain limit. What I did was download Sloopy’s source code (java), modify it so it can handle more terminal attributes and build the  .jar file. This can be run on command line, which will start the sloopy server. So I created an ant file that does all that for me, but this ant file would only be cool, if it could also trigger the run or debug commands and modify the output folder url. I haven’t found a way (at least not a satisfying one) to do this, so I might just follow the manual street for once ;)

Another note: If you are windows user, you might wanna try this Firefox plugin: Firefox Throttle

Related posts:

1. Test Movie from Flex to Flash (easy way)
2. Develop in Flex Builder, publish in Flash IDE (Mac OS X)
3. Flash Debug Speed

<?xml version="1.0" encoding="UTF-8"?>
<project name="Publish" default="Publish" basedir="./">
	<!-- project specifics -->
	<target name="Publish">
		<concat destfile="build.jsfl">
			fl.getDocumentDOM().testMovie();
		</concat>
		<exec executable="open" failonerror="true" logerror="true">
			<arg line="build.jsfl" />
		</exec>
		<delete file="build.jsfl" />
	</target>
</project>

This tests the frontmost document in Flash IDE. (basically what does this plugin). Tested on Mac OS X 10.5.5 with Flex Builder Pro 3.0.2 and Flash CS4.

No need for FlashCommand. No need to alter the file for other projects. Just a super easy file for people with not too many requirements.

You can still go more advanced with something like that:

<?xml version="1.0" encoding="UTF-8"?>
<project name="Build Project" default="Publish and Test" basedir="../">
	<!-- common -->
	<property name="browser" value="Safari"/>
	<property name="log.path" value="${user.home}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt"/>
 
	<!-- project specifics -->
	<property name="fla.path" value="${basedir}/main.fla"/>
	<property name="swf.path" value="${basedir}/result.swf"/>
	<property name="test.path" value="http://localhost/projects/test/index.html" />
 
	<target name="Publish and Test">
		<antcall target="Publish"/>
		<antcall target="Clear Log"/>
		<antcall target="Open in Browser"/>
	</target>
 
	<!-- publish swf -->
	<target name="Publish">
		<concat destfile="build.jsfl">
			var sourceFile = "#FLA#";
			var outputFile = "#SWF#";
			var doc = fl.getDocumentDOM();
			if ( !doc || sourceFile.indexOf( doc.path ) &lt; 0 ) {
				doc = fl.openDocument(sourceFile);
			}
			doc.exportSWF(outputFile, true);
			<filterchain>
				<replacetokens begintoken="#" endtoken="#">
					<token key="FLA" value="file:///${fla.path}"/>
					<token key="SWF" value="file:///${swf.path}"/>
				</replacetokens>
			</filterchain>
		</concat>
		<exec executable="open" failonerror="true" logerror="true">
			<arg line="build.jsfl" />
		</exec>
		<delete file="build.jsfl" />
	</target>
 
 
	<!-- Open in local browser -->
	<target name="Open in Browser">
		<exec executable="open">
			<arg line="-a ${browser} ${test.path}" />
		</exec>
	</target>
 
	<!-- Clear Debug Log -->
	<target name="Clear Log">
		<concat destfile="${log.path}">                                                                                                            
		.: Sev Log File :.
 
</concat>
		<exec executable="open">
			<arg line="-a console '${log.path}'" />
		</exec>
	</target>
 
</project>

This has pretty much the same results as posted here.

I have created a Flex Project that contains all necessary files (fla, main class, build file). Just download and import into Flex:

Download Flex Project

Update: Mirko Sablijic sent me a Hello World project for Windows (he runs Vista):

Download Flex Project (Windows)

Related posts:

1. Test Flex/Flash throttled (aka Simulate Download)
2. Develop in Flex Builder, publish in Flash IDE (Mac OS X)
3. Flex Project – SVN Strategy

Once you got used to developing for Flash in Flex Builder, you hate to do any programming in Flash IDE. Still you sometimes might have to: Flex Builder won’t allow to publish into a FLA file. (There are of course many other reasons, like supporting older AS1/AS2 projects, we don’t go into that here.) Thanks to Eclipse’s ability to be customized, there are ways to make things at least a little easier. I give here a little overview of how I’ve set up my environment, based on several helpful resources I’ve found in the web.

1. Install FlashCommand
2. Install Ant

And for each project:

1. Create/modify Ant file
2. Create Actionscript project
3. Set up project and FLA file

What you need

• Flex Builder
• Flash IDE (CS3 or CS4)

Install FlashCommand

flashcommand is a python script by Mike Chambers that lets you compile FLA files from the command line using Flash IDE. Download it and put it wherever you want.

Install ANT

If you’re used to FDT (or Eclipse in any way) you may well know Ant. Ant is the premier build tool for any developers working in Eclipse, with many many cool possibilites to automate your workflow. Here’s how you install Ant in Flex Builder 3 Standalone:

1. Go to Help > Software Updates > Find and Install
2. Search for new features to install, click next
3. Select «The Eclipse Project Updates», click finish
   Note: If you do not have the option above click «New Remote Site» and enter «The Eclipse Project Updates» as the name and «http://update.eclipse.org/updates/3.3» as the url.
4. In Eclipse project updates look for «Eclipse Java Development Tools …» – it might be in «Eclipse SDK Eclipse 3.3.2» but this depends on what version you have installed and what version is currently available. Select it and click next.
5. Accept licence agreement, click next. Then click «Finish» to start download.
6. Once downloaded, click «Install all»
7. Restart Eclipse (you’ll be asked to)

Create Project

1. Create a new Actionscript Project in Flex Builder
2. Add a new «build» directory in the project root
3. Add your FLA file(s) and assets to the build folder and your source files to the src folder
   (I also strongly recommend adding external libraries to and «externals» directory and use svn:externals property on it, but that’s another story)
4. Add build paths. You have to do this at least twice:
   • In the Flash IDE for the FLA: Publish Settings > Actionscript 3 «Settings…». Don’t forget to add the src folder at least.
     Test your FLA once done. It should compile just fine.
   • In Flex Builder: Project > Properties > ActionScript Build Path. Add your external libraries here. This is used so Flex knows where to lookup your classes, it won’t actually be needed for compiling, because that’s what Flash IDE’s gonna do.
5. Now you’re almost done: you can edit your classes in Flex Builder and switch to Flash IDE to publish and/or test your movie. We’re gonna make this a little more comfortable with Ant and flashcommand.

Add Ant build file

1. Create a new file build.xml in the root folder and open it with Ant Editor (in Flex Builder aka Eclipse)
2. Edit the build.xml according your setup (see below for example)
3. Add build.xml to Ant View (Window > Other Views…)
4. Run an action by double clicking it in Ant View: there you go!! It will compile in Flash IDE and open in your browser for testing!

Sample Ant build.xml

	<?xml version="1.0" encoding="UTF-8"?>
	<!-- ====================================================================== 
	     Nov 28, 2008 1:37:54 AM                                                        
 
	     MyProject    
	     Compile in Flash IDE
 
	     sev                                                                
	     ====================================================================== -->
	<project name="MyProject" default="Compile and Run" basedir="./">
	        <!-- project specifics -->
	        <property name="browser" value="Safari"/>
	        <property name="swf.filename" value="MyProject"/>
	        <property name="html.filename" value="fla/index.html" />
 
	        <!-- Flash IDE Commandline compiler -->
	        <property name="python" value="/usr/bin/python" />
	        <property name="flash.command" value="/path/to/flashcommand" />
 
	        <!-- directories -->
			<property name="user.path" value="/Users/yourname"/>
 
	        <property name="build.dir" value="${basedir}/build" />
 
	        <property name="main.fla" value="${build.dir}/${swf.filename}.fla" />
	        <!-- paths -->
	        <property name="output.path" value="${build.dir}/${swf.filename}.swf" />
 
			<!-- you can also point to the file:///path/to/index.html -->
	        <property name="local.path" value="http://localhost/projects/MyProject/${html.filename}"/>
	        <property name="log.path" value="${user.path}/Library/Preferences/Macromedia/Flash Player/Logs/flashlog.txt"/>
 
	        <!-- Compile python flashcommand -e  -s build/MyProject.fla -o build/MyProject.swf 
 
	        usage: flashcommand -e | -c | -p [-v] [-x] (-s <sourcefile>) ([-o] <exportpath>) ([-t] <timeout>)([-d] <tempdir>) [-j]
 
	        Options and arguments:
 
	        -a : Prints version and about information.
	        -c : Specifies save and compact action. 
	        -d : Specifies temp directory that will be used for temporary files. Optional.
	        -e : Specifies export action.
	        -h : Prints usage information.
	        -j : Specifies that the generated JSFL file should be printed. If this option is specified, Flash will not be executed.
	        -o : Specifies the output file if -e flag is also set. Optional. If not specified, file will be output to same directory as source.
	        -p : Specifies publish action.
	        -s : Specifies source file. Required.
	        -t : Specifies timeout value. Optional.
	        -v : Specifies verbose mode. Optional.
	        -f : Specifies that the Flash authoring version installed is a version other than Flash CS3
	        -x : Specifies whether Flash should be closed after it is done processing. Optional.    
 
	        -->
 
	<target name="Compile and Run">
		<antcall target="Compile in IDE"/>
		<antcall target="Clear Log"/>
		<antcall target="Open in Browser"/>
	</target>
 
        <target name="Compile in IDE">
        		<echo>${flash.command} -e -c -s ${main.fla} -o ${output.path}</echo>
                <exec executable="${python}" failonerror="true" logError="true">
                        <arg line="${flash.command}" />
                        <arg line="-e " />
                        <arg line="-s ${main.fla} "/>
                        <arg line="-o ${output.path}"/>
                </exec>
        </target>
 
 
        <!-- Open in local browser -->
        <target name="Open in Browser">
                <exec executable="open">
                        <arg line="-a ${browser} ${local.path}" />
                </exec>
        </target>
 
        <!-- Clear Debug Log -->
        <target name="Clear Log">
 
        	<concat destfile="${log.path}">                                                                                                            
.: Sev Log File :.
 
</concat>
            <exec executable="open">
                    <arg line="-a console '${log.path}'" />
            </exec>
        </target>
	</project>

Update: Lee Brimelov just released a plugin for Eclipse, that provides this functionality (more or less) with a single click of an icon. It’s an alpha version, and you won’t have all the Ant flexibility (well, you could still install Ant), but you can avoid most of the installation hazzle, and that’s pretty cool. Unfortunately I couldn’t get it to work so far.

Update 2: It bugged me that every time I execute this action Flash would pop up. To work around that I slightly modified the FlashCommand script (it actually checks wether the FLA file is already open, and if so won’t call the open command). Also I had to leave away the -c option (save and compact), something I don’t need anyway. So now when you execute the command from Flex the following happens:

1. The little publish dialog pops up (Fla is exported to SWF)
2. The HTML file is opened in the browser (which comes to front), as well as the Console displaying the trace output

Also I have bound the «Launch last external tool» command in Flex Builder to a key combo. Now things run pretty smooth and as much satisfying as compiling via Flash can be. Btw, I also looked into this Eclipse plugin – as it seems the only thing it does is to tell Flash to «Test Movie» with the frontmost open document. That’s absolutely okay for most people, but I’m glad for the extra functionality I get with this solution (at the cost of more initial effort of course). Download here the modified FlashCommand: flashcommand.zip

Related posts:

1. Test Movie from Flex to Flash (easy way)
2. Test Flex/Flash throttled (aka Simulate Download)
3. Flex Project – SVN Strategy

There’s also one for Actionscript 3 (xpath-as3). But.. well… I wanted to go for some real speed! I like XPath a lot, but we now have native E4X selection in Actionscript 3, quite a different concept of node selection, and the conversion of XPath to E4X obviously results in quite a compromise in performance.

So all I need is a decent E4X parser. And hey, I found one! E4XParser from Digital Primates. It does its job really well, especially considering the very compact code it consists of. Thanks to some preparsing and caching, it’s also quite fast.

Still I thought I can do better :-) So I planted myself for a day (and a night) in front of my displays and hacked the hell out of it. The result is a little library which does pretty much the same thing as E4XParser, though pretty much more and a little faster too (15% to 50%). It’s about half as fast as the native E4X selection (once parsed). You can do nearly anything you can do with E4X. Use it like this:

import com.betabong.xml.e4x.E4X;
var result : XMLList = E4X.evaluate( xmllist , "author.( name.@last == 'Jobs' )" );
 
// E4X.evaluate( source : XMLList , expression : String ) : XMLList

 
If your source is XML, just do XMLList( xml ), if your result should be xml, do xml = result[0]

Test it here

Restrictions: You can’t use AND/OR in comparisions. So, this won’t go: author.( name.@first == ‘Steve’ && name.@last == ‘Jobs’ ) – though this is only a real limitations for OR. do this for AND: author.( name.@first == ‘Steve’ ).( name.@last == ‘Jobs’ ).

What you can do: Yes, you can do quite advanced stuff like author.( name.@first == name.@last ) or car.@rating.average() (one of the few proprietary functions I added). Or even

*..car.( @brand.toLowerCase() == 'volvo' ).( parent().( localName() == 'group' ).@rating > @rating )

– a weird example, I admit, but fancy, ain’t it? :-)

This is the first time ever I’m releasing part of my library as Open Source (MIT licence). As soon as I’ll find some time (and if I see any interest), I’m gonna put this into Google Code, so everybody can easily checkout and participate. Until then download it from here:

Download (zip 13kb)

Related posts:

1. Simplicity follows Performance – parsing Strings in Actionscript 3
2. Alchemy – THE cool new flash feature!
3. Nested inner functions can be evil

Still you can struggle over unexpected behaviour. First of all there is no guarantee that objects are garbaged (well it’s probably not a memory thing.. more about unreferencing, what the heck do I know?!) as soon as there aren’t any references left. But, in my experience, weak references work quite good.. I didn’t have to worry about them living for some more seconds or so. But. But! They’ll live on at least until next rendering step, meaning until actionscript execution is done.

I struggled over this with a validation manager, that keeps tracks of unvalidated objects in a weak dictionary. So when object unvalidates, it tells so to the validator who will validate before rendering update. Now let’s assume the object shall be destroyed in the mean time – it will unlisten to dispatchers, it will unlink sprites and so on.. but may be it’s already registered in the validator. So it’ll stay alive to fullfill next validation processing. (Which led into uncaught errors due to null references in the destroyed object in my example.)

I could of course unregister at the validator at destroy. But.. hmm.. I want my engine to be as fast and robust as possible and unregistering can be difficult and time consuming (especially when 1000 objects will be destroyed). So what I’ve done is, I set a flag ‘destroyed’ when destruction is complete, and on each validation I’ll check for that flag:

public function validateDisplay() : void {
  if ( _render_dirty && !destroyed ) {
    render();
  }
}

Checking against a boolean flag is fast as hell, so that’s cool. And also, it won’t happen often (it was really a rare exceptional case actually). So besides weak references in AS3 we still have to be careful as hell about memory leaks. By the way, the profiler in Flex Pro is just fucking great :-)

On a side note: Any one any info on MethodClosure objects lying around in memory?? I know what they are used for, but it seems they live and live and live….

Related posts:

1. Nested inner functions can be evil
2. Weak Method Closure
3. E4X String Parser

http://code.google.com/creative/radiohead/viewer.html (Flash)

http://code.google.com/creative/radiohead/ (see video in better quality, making of and more…)

No related posts.