Lemme start off by saying UGH.
Ok, so I’ve been trying to get swfobject to work with ExternalInterface. The swf and the html are located on the same domain (locally - not running on a server). Upon calling the js function that should have called my as function, it kept giving me the error “Error calling method on NPObject!”.
Anyway, there is a fair amount of documentation on google as to what problems you might be having if you get this error (summarized by this guy reasonably well) but my case didn’t fit any of those criteria.
My code looked like this (latching onto the creationComplete of the Application):
Apparently this is bad. It doesn’t like that I’m passing “Alert.show”.
It works if I do this:
where I define “stupidstupid” in the script portion of the Application.
Anyway, the quick summary is, don’t use Alert.show (other similar calls probably don’t work as well…for reasons unclear to me at the moment).
In my context, there were no cross domain considerations since it was all local.
*shakes fist*
CSS has been implemented in Flex, but it has some major shortcomings. One of the main ones is that it does not allow a single component to use multiple styles. Another is that a CSS style cannot inherit (or cascade…imagine that!) from another style. I wrote some code that might help fix that a bit.
Continue Reading »
Recently I’ve run into the problem of controlling the size of an embedded swf movie in a Flex application. The size of the stage in Flash didn’t match the size of the SWFLoader-loaded component in Flex for some reason. I tried putting a Canvas around it and using the clipContent field, but that didn’t. After a few hours of pain, though, I did get a somewhat reasonable solution.
This post should also serve as a very light example of applying a mask.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Canvas mask="{myMask}">
<mx:SWFLoader source="path/to/mySwf.swf"/>
<mx:UIComponent id="myMask"
creationComplete="myMask.graphics.beginFill(0xff0000);myMask.graphics.drawRect(0,0,360,541);myMask.graphics.endFill()"/>
</mx:Canvas>
</mx:Application>
Here, the size and location of the rectangle you draw in the myMask determines the visible area of the swf.
I haven’t yet cooked up an actual example showing what this actually does - maybe I’ll do so later…
On a different note, if anyone knows of a quick way (perhaps a wordpress plugin) to post an example coded in Flex Builder, let me know - it would be much appreciated! Right now, I’m bundling a release build and manually pushing it up each time with no regard to specific posts, then hard-linking…
Maybe I’ll write something to do it…knowing me it’ll never get done…
One of the nice things about Flex is that you can default stylistic elements such as padding from a top level via CSS declarations on the Application level. However, if the property you have in mind isn’t a Flex Style, it isn’t so easy to default.
A common example is the horizontalScrollPolicy and verticalScrollPolicy values of the Container class. For various reasons, Adobe (understandably) chose to make these two values properties instead of styles. They’re defaulted to “auto” which means scrollbars are created when needed, but often it would be more convenient if they were defaulted to “off”.
Anyway, here’s one way to default those values:
Continue Reading »
The Flex framework provides a rich library of components right out of the box, but often creating a custom component is necessary. When the component is a container, you might want to use it as the base of an mxml file. Here’s how.
Continue Reading »
I did some searching for a good plugin to embed swf files into wordpress posts and it seemed like lots of the ones I turned up were rather dated until I ran into this one by Matt Carpenter. It uses the latest version of the SWFObject project and is compatible with Wordpress 2.6.
In Flex, if you have a custom slider thumb, it will always be scaled to a set size that Flex wants (I think 20×20).
For example,
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:HSlider thumbSkin="@Embed(source='resources/images/mario8bit.png')" />
</mx:Application>
would give you this:
To fix this, I wrote a class that extends SliderThumb and sets to the measured size of the skin image:
import mx.controls.sliderClasses.SliderThumb;
import mx.core.mx_internal;
use namespace mx_internal;
public class FlexibleSliderThumb extends SliderThumb {
override protected function measure():void {
super.measure();
measuredWidth = currentSkin.measuredWidth;
measuredHeight = currentSkin.measuredHeight;
}
}
}
Now, modifying the mxml file like so:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#ffffff"
width="300" height="100">
<mx:Script>
<![CDATA[
import controls.sliderClasses.FlexibleSliderThumb;
]]>
</mx:Script>
<mx:HSlider
thumbSkin="@Embed(source='resources/images/mario8bit.png')"
sliderThumbClass="{controls.sliderClasses.FlexibleSliderThumb}"/>
</mx:Application>
gives you this:
The Flash plugin is required to view this object.
I wrote an Flex app yesterday as a demo of component lifecycle and metadata tag usage.
It’s a remake of the classic Gorillas game.
You can play it here.
The source code is here.

