The generated code is simple; the getter returns the value and the setter sets the value:

private var _myData:String;

public function get myData():String {
    return _myData;
}

public function set myData(value:String):void {
   _myData = value;
}

Oftentimes in Flex, however, changing a variable is a trigger that causes other code to run or update. But why would you want this extra processing to occur if the value that is being assigned hasn’t changed?

Instead, add a quick comparison:

public function set myData(value:String):void {
    if(_myData != value) {
       _myData = value;
    }
}

Note that you would use ObjectUtil.compare rather than equality to compare complex Objects:

public function set myObjectData(value:Object):void {
    if(ObjectUtil.compare(_myObjectData,value) != 0 ) {
       _myObjectData = value;
    }
}

Obviously, depending on the complexity and size of the objects, and the amount of work to be done after an update, comparing Objects may not make sense in all circumstances. That’s a judgement call you can make based on your particular code.

The compilation errors can be SO helpful that you rely on them as guides. When refactoring code the errors tell you where you need to go to fix affected code. And if you use metadata correctly, the errors can tell you when you’ve forgotten to include a required component.

As helpful as the metadata, code-hinting and error-checking is, it’s not quite perfect; and it’s these little imperfections that can set you off on an afternoon-long detour. Reason being, while metadata can help enforce rules and enhance code-hinting, and while error-checking can point out problems with your code, metadata itself is not error-checked.

Enter my problem…

I added a skin state and skin parts to an existing component and couldn’t for the life of me figure out why the component class would not update the content of the text fields I had placed in the skin. I’d done this several times before but this time it just wouldn’t work.

I made sure I had defined the skin parts in my component, I traced and debugged for several hours, I googled  and traversed several blogs, I read through the Adobe online help reading in-depth descriptions of getCurrentSkinState, invalidateSkinState, and attachSkin.

Finally, it dawned on me. I scrolled once again up to the section of my component where I defined the skin parts and looked closely at the meta data definition. Sure enough, there was the problem.  I had type “Skinpart” instead of “SkinPart”. I forgot to capitalize the P. No warnings, no errors; just a bunch of text fields in the skin and variables in the component that were acting appropriately on their own, but were not connected in any way.

It took about a half hour to remove all of the ridiculous code I had added to try to compensate for that lowercase p. In the end, I walk away with a better knowledge of Flex skins, and hopefully an ability to recognize that issue sooner in the future.

That was the case I found when recently working with the Spark List Component. Dynamically assigning an ArrayList as a Spark List’s data provider was a quick task and everything worked as expected. I was thrilled. Now I just had to tweak the spacing between the list items and I’d be finished. Easy, right? Ultimately the answer is yes. However, arriving at the solution took me a couple of hours!

The Spark List component automatically adds cool rollover and select effects. It also allows you to change rollover colors, set the width, and adjust the font size with simple attributes. What it doesn’t let you do so easily is set the spacing between list items. ( Note that I’m referring to a dynamically populated List, not one in which you define each item individually where you have the luxury of modifying the attributes of each item ).

Here’s some code to demonstrate the situation:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	preinitialize="preinitHandler(event)"  >
	<fx:Script>
		<![CDATA[
		import mx.collections.ArrayList;
		import mx.events.FlexEvent;

		[Bindable]
		private var monthsList:ArrayList;

		protected function preinitHandler(event:FlexEvent):void {
			monthsList = new ArrayList(["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November","December"]);
		}
		]]>
	</fx:Script>

	<s:List id="months" dataProvider="{monthsList}" />
</s:Application>

The code above populates a Spark List with months. Very quick and easy! But now I want to close up the space between the months. Simple padding or gap attribute on the list, right? Nope. lineheight? No. Custom VerticalLayout? Uh uh. Google? Majority of results show examples where each item is defined manually…that doesn’t help either.

The answer it turns out is to define a custom ItemRenderer. This is used to tell the results how they should render when displayed. Common sense, right? And it’s pretty easy to do too:

<s:List id="months" dataProvider="{monthsList}" >
	<s:itemRenderer>
		<fx:Component>
			<s:ItemRenderer>
				<s:Label text="{data}" paddingTop="3" paddingBottom="3" fontSize="11" />
			</s:ItemRenderer>
		</fx:Component>
	</s:itemRenderer>
</s:List>

You can style the output any way you like by styling the label in the ItemRenderer. Note that if your data source contains multiple “fields” with property names, you’ll need to tweak the label text value slightly to reflect the property name of the value you’ll be displaying. So, instead of {data}, you would use something like {data.propertyName}.

Bonus tip: For reusability and flexibility you can define the the ItemRenderer as a separate MXML file and assign it to the itemRenderer property of the Spark List. Even better, you can add the Label style to a style sheet and use it throughout your application.

-rG

1. Create the Font SWF

The first step is to use Flash to create a font swf. To do so, create a new Flash document and add a dynamic text field to the stage. Select the text field and choose the font you want to use in your Flex application. Next, click the Character Embedding button from the Property panel and choose the characters that you want available to your Flex application. Choose only the characters you need as each extra character will add unnecessary size. Finally, publish the swf and place a copy in your Flex application folder.

Make a font swf for each font you want to use in your Flex application then close Flash.

2. Embed the Font SWF

The next step is to pull those font swfs into your Flex application and create classes, or styleNames, for them. This is done inside the fx:Style tag (mx:Style in Flex 3)

<fx:Style >
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

		@font-face	{
			src: url("fonts/calvin.swf");
			font-family: "Calvin and Hobbes";
		}
		@font-face {
			src:url("fonts/lcd.swf");
			font-family:"LCD";
		}
		@font-face {
			src:url("fonts/ransom.swf");
			font-family:"RansomNote";
		}

		.calvin {font-family: "Calvin and Hobbes";}
		.lcd {font-family: "LCD";}
		.ransom {font-family: "RansomNote";}

	</fx:Style>

Note that the font-family is the name of the font as listed in the Flash IDE. Once this is done I can assign the styleNames “smack”, “square”, and “curlz” to an mx:Text field and it will be presented in that font, something like this:

<mx:Text id="myText" text="This is my text" styleName="calvin"  />

If you stop here you will have a text field using your embedded font.

3. Create a Font Selector

We can take this an additional step by adding a radio button group and a simple function to allow dynamic switching between fonts:

<fx:Declarations>
	<s:RadioButtonGroup id="radiogroup1"/>
</fx:Declarations>
<mx:Text id="myText" x="159" y="28" text="Select another font" styleName="calvin"   fontSize="20"/>
<s:RadioButton id="calvin" x="10" y="10" label="Calvin" groupName="radiogroup1" click="handleChangeFont(event)" selected="true"/>
<s:RadioButton id="lcd" x="10" y="36" label="LCD" groupName="radiogroup1" click="handleChangeFont(event)"/>
<s:RadioButton id="ransom" y="62" label="Ransom Note" groupName="radiogroup1" click="handleChangeFont(event)" x="10"/>

Note that, as an id for each radiobutton I used the class name they will invoke. This will allow me to use only one line of code in one function to assign the appropriate styleName to my text field:

<fx:Script>
	<![CDATA[

		protected function handleChangeFont(evt:Event):void {
		myText.styleName = evt.target.id;
	        }

	]]>
</fx:Script>

The finished product looks something like this:

Right-click on the swf and then click “View Source” to view or download the source.

When I was creating my coding portfolio I wanted a slider app that would display a series of screenshots from some of my recent projects. While it was easy to find several WordPress widgets that presented slideshows, it was very difficult to find one that allowed multiple instances on the same page. Many didn’t even allow multiple instances across the blog.

I decided it would be easiest to create one myself. Admittedly it’s nothing flashy, but it fit the purpose well and I thought it may be useful to post. It utilizes Tweener, an amazingly simple open-source tweening library, for transitions. The library is included with the source. Other version and documentation are available on Google code.

How to set up a slider

1. Create a subfolder under the folder where the slider swf will be stored. Each slideshow must have its own separate subfolder.
2. Create a series of 250px(w) x 175px(h) images and place them in the subfolder.
3. Create an XML file named slides.xml in the subfolder with your images. This involves adding the image name, an optional title, and an optional description. The structure is as follows:

   <?xml version="1.0" encoding="UTF-8"?>
   <slides>
   	<slide>
   		<title>Slide 1 Title</title>
   		<desc>Here is a description of Slide 1</desc>
   		<image>slide1.png</image>
   	</slide>
   	<slide>
   		<title>Slide 2 Title</title>
   		<desc>Here is a description of Slide 2</desc>
   		<image>slide2.png</image>
   	</slide>
   </slides>
   

4. VERY IMPORTANT: Pass the folder path to the SWF as a flashvar named contentfolder. For example, if you’re using Adobe’s embedding method and your xml and images are on your site under /swf/myslides, you would add ‘flashvars’,'contentfolder=/swf/myslides/’ at the end of the AC_FL_RunContent function (don’t forget to add a comma before it to separate it from the other values).

Tips

• The code is in a document class named CustomDocument.as under the com subfolder.
• If you want to change the navigation buttons, you can change them in the library. nextGraphic and prevGraphic are the base graphics and Next and Prev apply filtering and state modifications.
• If you want slides of a different size, it should only take a couple of tweaks. First, resize your document ( Modify > Document ). Then, modify the buttons and Slide to accommodate your new size. These objects are in the library (The Next and Previous buttons, and the Slide itself, are all in the library ( Window > Library ). Finally, modify the nextX and nextY variables in the CustomDocument.as file. nextX is the X coordinate where the first slide will be placed. nextY is the Y coordinate.
• The source is packaged using the _sans device font. You can change the font inside the Slide movie clip. Remember to embed the characters or your font will not appear!
• If your images won’t load then you’re probably either forgetting to pass the contentfolder flashvar, or your images aren’t in the right place. Firebug is a great tool for troubleshooting this issue.

Glenn

Download the source

The first upgrade I made was to take the code out of the timeline and place into a Document class. The Document class is a class that will execute when your application starts. In most cases it extends the main timeline, which is a MovieClip. You define your Document class in the “Document Class” field of the Property Inspector when nothing is selected. It can also be defined in the ActionScript 3 Settings section of your Publish Settings ( File > Publish Settings > [Flash] > Settings > Document Class.

There are plenty of reasons to like the Document class but one of my favorites is that it allows me to code in the FlashDevelop IDE rather than in the confining embrace of the Flash IDE code editor. If you’re a PC user and you’ve never seen FlashDevelop you should check it out.

A few things to remember about the Document class that differ from the timeline method:
1) The Document class is a Class like any other that must follow the correct syntax. You must include the package (folder) and define it as an extension of a Display Object ( public class CustomDocument extends MovieClip ).
2) You need to include the classes required to support the objects that you are using. For example, if you are using a TextField you must import flash.text.Textfield.
3) If you are referencing any objects that exist on the stage from your Document Class you must define a variable for that object. For example, because my application has a text field in the first frame with an instance name of fullMonth_txt, I must declare that variable in my Document class ( public var fullMonth_txt:TextField; )

If you don’t think you’re ready to start using a Document class, have no fear, I modified the code on the timeline too. Just uncomment it and remove the Document Class reference and you’re good to go old-school!

When the application starts it stops the main timeline, then proceeds to loop through the array of months that I declared earlier:

private var month_array:Array = new Array ({month:"JAN",fullNm:"January"},{month:"FEB",fullNm:"February"},...;
...
for (var a:Number = 0; a < month_array.length; a++) {
	container_mc = new MovieClip();
	button_mc = new ButtonMC();
	addChild(container_mc);
	container_mc.addChild(button_mc);
	container_mc.x = nextX;
	container_mc.y = nextY;
	button_mc.month_txt.text = month_array[a].month;
	button_mc.monthName = month_array[a].fullNm;
	button_mc.mouseChildren = false;
	...

ButtonMC is a class that was created dynamically by Flash using the button_mc movie clip in the library. You can do this for any movie clip simply by going into its properties and clicking “Export for ActionScript.”

For every month, a new instance of my button is placed on the stage. The month abbreviation is used to update the dynamic text field inside the button named month_txt. The full month name is stored as a dynamic property of the button. This will be used to populate the fullMonth_txt text field when the button is clicked.

“button_mc.mouseChildren = false;” tells the player to ignore any children of button_mc for mouse actions. Without this line the mouse events would not work if the user were to hover over the button text. This drove me batty for a while!

Next is the code that will set the current month’s button to the selected state. If you don’t want a button to be selected at startup just get rid of this code:

private var today:Date = new Date();
private var thisMonth:Number = today.getMonth();
...
if(a == thisMonth) {
	button_mc.gotoAndStop("selected");
	selectedButton = button_mc;
} else {
	button_mc.stop();
}
</code></pre>

When I declare the variable thisMonth above, I set it to the number of the current month. Because month numbering starts with 0, it will align perfectly with my loop through the months array. Therefore, when ‘a’ (the loop index) equals ‘thisMonth’, that button is set to the selected state.

Next I assign the mouse event listeners. This is how you code button functionality in AS3. The listeners will be responsible for calling the appropriate function when a mouse event takes place:

button_mc.addEventListener(MouseEvent.CLICK,buttonClick);
button_mc.addEventListener(MouseEvent.MOUSE_OVER,buttonOver);
button_mc.addEventListener(MouseEvent.MOUSE_OUT,buttonOut);
button_mc.addEventListener(MouseEvent.MOUSE_DOWN,buttonDown);

For example, when the mouse clicks button_mc it will fire the buttonClick function. The buttonClick function takes the event as a parameter and executes its code which populates the Month Name text field (fullMonth_txt), moves the previously selected button to the active state, moves itself to the selected state, and assigns itself as selectedButton.

private function buttonClick(evt:MouseEvent):void {
	fullMonth_txt.text = evt.target.monthName;
	if(selectedButton && (selectedButton != evt.target)) {
		selectedButton.gotoAndStop("active");
	}
	selectedButton = evt.target;
	evt.target.gotoAndStop("selected");
}

The selectedButton Movie Clip that I declared at the top of the Document class always holds a reference to the selected button. The target of the event (evt.target) is the object that was clicked. That’s how one function can handle the changes for any button without having to poll all buttons for their states every time a new button is selected.

There’s a little more in the actual code but those are most of the key points. If you find this post useful, be sure to check out my previous post, AS3 Clickable Button Inside a Draggable Movie Clip .

If you missed the link to the example above, you can download it here.

-Glenn

I haven’t posted in a LONG time and I thought it was a great idea. Not only does it get me blogging again, but it’s a great, short introduction to a couple of the new features in AS3.

Download the sample

AS3 uses events to handle mouse click functionality. Rather than the AS2 method of adding an onRelease function to the clickable object, you now assign an event listener. While this is a pretty significant difference that may take a bit of getting used to, programmatically it makes a lot of sense.

AS3 used the DOM event model as a basis for its own event handling. So, instead of something that looks like this:

//AS2 button event
container_mc.drag_btn.onPress = function() {
	startDrag(this._parent);
};

The AS3 method looks like this:

//AS3 event handling
container_mc.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler_Drag);
function mouseDownHandler_Drag(mEvent:MouseEvent):void {
	mEvent.target.startDrag();
}

For a good introduction to AS3 Event Handlers, check out the Newton Flash 6 part series. Even though he uses the moniker of “Devigner”, which I can’t stand, the posts are pretty informative and to the point.

Another significant difference is that I no longer need an invisible button to allow me to drag the container around. AS3′s event bubbling makes it possible to listen to both the container and the button within the container at the same time. Ruben Swieringa wrote a great post explaining AS3 bubbling which is definitely worth a look.

One addition to the code that may trip you up is the assignment of buttonMode to the Click Me button. AS3 does not assume that you want the hand cursor to appear over a movie clip just because you added a listener. Because of this, by default the cursor will remain an I-bar unless you set the clip’s buttonMode to true:

container_mc.btn.buttonMode = true;

Another change to notice in the sample code is that there are no longer referrals to “_parent.” (Though if there were, you would see that the new syntax drops the underscore so that it is simply “parent”.) The reason it was required in the first place was because I needed to reference an object that was out of the clickable objects scope, and I didn’t want to use _root. AS3′s Event Handling method allows you to put the function code in the same scope as the outer container. This means that I can refer to it directly rather than having to navigate upwards:

//as2
this._parent._parent.text_txt.text="\rclick #"+counter;

//as3
text_txt.text="\rclick #"+counter;

One final piece that I’d like to point out is the reference to mEvent.target in my handler functions. mEvent is a reference to the mouse event pulled from the function’s parms. mEvent.target is a reference to the object that the listener was attached to. So, when I want to start dragging the object that was clicked, I just refer to the target of the event:

mEvent.target.startDrag();

My apologies for such a long post about such a short sample. I just felt that this sample offered a great opportunity to address some of the early stumbling blocks when making the move to AS3.

-Glenn

NOTE: If you didn’t notice the sample link above, here it is again.

I know that, although you can’t refer to Stage directly, it is a property of every DisplayObject named ‘stage’ (lower case ‘s’). For example, if my class extends Sprite, I can get the Stage width by referring to “stage.width”.

The problem arises when a class does not extend a DisplayObject and a DisplayObject is not passed to your class. The project I’m working on fell into this category. The purpose of my class is simply to create and manage instances of another class. The problem I ran into was that I could not refer to the Stage because my class had no reference to a DisplayObject.

I ended up working around the problem by passing a DisplayObject instance, but out of curiosity, I’d like to know if there is any way around this issue. Is there a way to refer to the Stage from a class file that has no DisplayObject instance?

-rG

I’ve posted on a few forums now with no results so I’m resorting to my own blog. What I’m trying to do is pass a structure to a ColdFusion component from Flash. I’ve tried using Array, Object, and Dictionary types but it keeps failing with this error:

“Unknown object type tag (17)”

The error seems to be returned before the method is even reached suggesting that the cfc is rejecting the Remoting request altogether. I know the code is sound because I can change the structure to a string and get results back. I’ve also tried the Flash.Params method.

I’ve done a fair amount of research already, including studying Adobe livedocs which insists that it’s possible to do.

Here is my code:

loadData_btn.addEventListener(MouseEvent.MOUSE_DOWN, loadData)

var myService = new NetConnection()
myService.connect("http://localhost/flashservices/gateway/")

function loadData(evt:MouseEvent){
    var responder = new Responder(getTest_Result, onFault);
/* I've tried everything here including defining it as an Object and Dictionary. I also tried
defining it using dot notation and sending it as an object like so: {mystring:"hello"} */
	var mystruct:Array = new Array();
	mystruct["mystring"] = "hello";
	myService.call("com.mycomponent.test", responder, mystruct);
}

function getTest_Result(result){
    trace("success: "+ result);
}

function onFault( f){
	trace("There was a problem: " + f.description);
}

…and here’s my component function (I’ve tried with an argument type of ‘struct’ as well as ‘any’):

Thanks in advance for any help!

rG

SOLUTION: After many hours of Googling, and much trial and error, I figured out how to make this work…and it’s a one line solution. Simply add myService.objectEncoding=0 before the myService.connect line at the top. It has to do with the way objects are serialized using AMF.

Check it out!

rG