So the problem is that we are loading a list of font names into a combo box for a user to select. We then pass the name of the font to a FontManager (that we have created) that loads the fonts and dispatches a Complete event when it is loaded. We also have a few other custom events that are being dispatched like FONT_READY, and FONT_ERROR. When we compile the app the user can select the combo box then pick a font and the font loads just fine, but if the user starts using the arrow keys to navigate through the combo box really fast, the fonts do not load and if they do, they usually are messed up.

I traced out everything and it was saying the fonts were loaded and the text was displayed, but it wasn’t. I tried loading the two previous fonts to no avail; it always seemed like it was a timing issue. No matter what I did, the user could always move through the list using the arrow keys too fast for the font to load.

So I thought I would just do a fontSelector.enable = false; until the font is ready and then do a fontSelector.enable = true;, (fontSelector being my ComboBox), but this did not work since it still thought the font was being loaded and the user still could cycle through the list regardless. So the issue remains. I even tried to go deeper into a few Adobe classes but that is way to much for this fix and would mess up some other comboBoxes we are using.

So the solution I came up with is to setFocus to something else on the stage. I have a Color Picker on the stage as well, so when the user picks a font, it sets the focus to the ColorPicker colorPicker.setFocus();. Then when the font was ready, I set the focus back on the fontSelector, fontSelector.setFocus();. This seems to solve the issue, and the user still is able to use the arrow keys and move through the ComboBox, but this time the font has time to load and display properly before it lands on the next font in the list.

Now this may be a hack in some peoples eyes, but it works and I could not come up with anything else. If you know of another way to slow down the user’s comboBox selection, please comment here and let me know. If not, I hope this helps someone.

T

Okay my setup, I have Eclipse and I use the Flex plug-in and then I use Flash as my designing area. If you have never put a new SDK into Flex it is really easy. You have to goto Adobe and download the SDK your looking for. Then you have to unzip it and then you need to locate the folder in the Adobe Flex Plug-in folder that is named sdk’s. You then place the sdk you just unzipped into that folder.

Now open up Eclipse and goto project and then properties. Once in the properties menu click on the Compiler option on the left hand side. Once you click on this option you will see an option on the right hand side to pick your sdk. You need to click on configure and then browse to the folder you place the SDK you downloaded and once highlighted click ok. Now before you click OK on this main window you need to click the option to import all AIR classes. Once you do this you will be able to get the Vector class in your Flex project.

I hope this helps some of you.

Todd

Let’ get started using Flex and learn how to create a new MXML project and make a small application.

With Flex open go to the option bar and click File > New > Flex Project.

New Project Dialog Box

new Flex project

In this dialog box you will enter the name to your new project. I named my firstProject you can save it in another location but I left mine in the default location of My Documents/Flex 3. Just leave there rest as the default settings, we will get into the AIR applications later. Now click the Finish button and that will set up the project and create all the folders needed for the project to work.

It will take a second to load up and when it does you will see an MXML with your your projects name now open in the workspace. You will see two buttons located at the top of the workspace
one says Source and the other is Design. Design will show you the design view and Source will show you the code view only. As you get used to using ActionScript 3 you will spend most of your time in the Source view but if you are coming from Flash and have a lot of design experience then you will keep wanting to use the Design view to do everything but it will change trust me.

Now click on Design view and you will see all the properties and components that are available. There are too many to list here but as we use them I will try to explain what they do if need be.

We also need to make sure you have the Flex Properties window open. So go to Window > Flex Properties and click. This will bring up the Flex Properties on the right side of the workspace.

So let’s put something on the stage. We need to make sure we are in the design view so click on the Design tab at the top of the page and this will show you the default color background and the stage to put things on.

Now we are going to put a button on the stage so located at the bottom left of your stage you should have the Components tab, if you don’t have it click, window > Components, and the tab will appear. Now click the plus sign to the left of the controls folder to expand it and you will see all the components located inside. Here is where you will find the button we are looking for.

So click on the button and drag it to the upper left corner of the stage. You will notice that the button says Button on it. We can change this by going to the Flex Properties tab and under the Label field rename it Hello World. Notice how it resized to fit the words that were placed inside the button?

Now we need to put a text box on the stage as well. So back in the Control folder go down to where it says Text and click and drag it to the center of the stage.

We want to give this Text box an ID so in the Flex Properties tab go to the ID field and type an id name. I’m naming mine txtBox.

Lets format the text as well so make sure you click on the text box on the stage and in the Flex Properties tab under the text field change the size to 20 and the color to White or xFFFFFF.

Why we are in the text properties let’s take out the word Text in the test field and leave it blank.  As soon as you click out of the box you will notice a square box on the stage. This is just letting you know where the box is located.

We should give our Button an ID as well so click on the Button and notice how the Flex Properties changed. It will change to give you the properties of the component you have selected. Now in the ID field name the button myBtn.

Now let’s make something happen.  If you click on the button component on the stage you will notice in the Flex Properties tab that there is an On click field. This is where we need to enter a little code to make the button work and display our text.

So click inside the On click input field and type:  txtBox.text=’hello world’.  This is the text that will show up in the text box when we click on the button.

The code is layout like this: txtBox (is the name of the text component that is on the stage and we named it txtBox), now the .text is telling the MXML tag to put the text or string that follows the .text  in the component named txtBox . To do this the .text must have an = sign and a single quote followed by your text and closed with a single quote.

The single quotes need to be used because the On click function uses double quotes and you can never combine the two.

Now we are ready to test the application. So press the F11 key(pc) or command F11(mac) to test the application. When you do press the key this will open up your browser and your button should be on the stage.

If you click on the button your text Hello World should appear in the middle of the stage.

The first time you run a program you might have a problem with the program saying that your Flash Player is not the debugger version. If this is the case follow the link and download the debugger version for your operating system and then it should run just fine.

Congrats you just finished your first Flex project.