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

While it’s possible to have both individual Flash Tracer and Firebug extensions running at the same time, performance often suffers significantly. Adding Flash Tracer as a Firebug extension seems to have improved performance while making it more convenient and accessible.

As of this writing, it’s still in early beta but it’s working well enough for me. Check it out for yourself at sephiroth.it .

- 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

“Unknown object type tag (17)”

The Adobe documentation insisted this was possible but I tried everything I could think of with no success. There were a few developers sharing my misery but their calls for help went unanswered, and by extension, so did mine.

After spending the better part of two days tooling around with the code and searching the web, I finally hit on the solution. It derived from a combination of Oscar Trelles’ post on AS3 Flash Remoting and a post on laflash.org about AS3 and Flash Media Server. In order to pass a structure to a ColdFusion component, I had to set the netConnection’s objectEncoding to AMF0 (the default is AMF3).

I’m guessing that this qualifies as a bug since AMF0 is supposed to be for serializing AS1 and AS2 objects and AMF3 is supposed to be optimized for AS3 objects. While I was able to send simple objects, like strings and integers, to the web service using the default setting, I ran into a wall when sending an Array, Object, or Dictionary type.

Until this issue is addressed, if you’re going to be sending complex objects to a ColdFusion web service, make sure to set the object encoding to AMF0. Here’s a simple example that sends a structure containing a string to a web service. The web service then returns the string:

AS3 CODE

var myService = new NetConnection()
////////////////////////////////////////////////
//set encoding to AMF0 for complex objects
myService.objectEncoding = 0;
///////////////////////////////////////////////
myService.connect("http://www.yourdomain.com/flashservices/gateway")

var responder = new Responder(getTest_Result, onFault);
var mystruct:Array = new Array();
mystruct.mystring = "foo";
myService.call("testAPI.test", responder, mystruct);

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

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

COLDFUSION WEB SERVICE:

If you’re REALLY interested in objectEncoding, you can read up on it in Adobe’s livedocs .

I hope this post saves someone the two days I just blew figuring it out!

-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.