self-learning actionscript 3 note 1

I’ve been using actionscript on and off when i work on flash animation, but it really depend on the need of my job nature.
Until actionscript 3 release, i still keep using actionscript 2 coz actionscript 3 is quite a big difference from actioinscript 2, and i have to say it’s definitely not easy for designer to learn and use.
Recently, i found i have the need to use as3, and decide to learn and get familar with it, at the very beginning, it’s very hard for me, i bought few books to read, my first impression is that why some effect is so easy for as2 but it is so not easy to write the script in as3! After a month of learning and using it at work, i start to find as3 is more logicial than as2 , and i almost learn new thing or effect everyday when i need to do some effect, and it took lot of effort to get what i need to do, so i would write the note here in case i forgot.

What tasks i aim to finish:
1. I m making a video playlist including : a video player which play the videos on the left, and a playlist with thumbnail and 4 comboboxes /dropdown list on the right (the data of each combobox is extracted from xml)
2. make the playlist scroll like iphone

Problems i encountered:
1. I made the playlist scroll but i found the selected item of combobox didnt show, and after searching on web, i found the mask have to be removed to show the selected item, but i need the mask for scroll, so i need to use embed fonts to work with combobox.

Here are steps:
1. ADD NEW FONT SYMBOL IN LIBRARY
I followed the Adobe Flash Quick Start – Embed Font tutorial, but in case the tutorial gone, so i decide to write down the note. Open the fla, to create a new font symbol, select New Font from the library’s pop-up menu (in the upper-right corner of the Library panel). This opens the Font Symbol Properties dialog box, which allows you to specify the font symbol’s properties.
Ref site: http://www.adobe.com/devnet/flash/quickstart/embedding_fonts/

Figure 1. Creating a new font symbol in a Flash document’s library.

Setting Font symbol properties
The Font Symbols Properties dialog box allows you to define a name for a font symbol, select a font face, and set various styles. The font name is the name that the symbol will have in the Library panel. In order to access this font dynamically using ActionScript, you’ll need to set the font’s linkage properties. The font pop-up menu lets you select the desired font face from a list of fonts installed on the current computer.
Creating a font library item:

1. Open the library in which you want to add a font symbol.
2. Select New Font from the Library Panel menu.
3. Enter a name for the font in the Name field.
4. Select a font from the Font menu or enter the name of a font in the Font field.
5. (Optional) Select your desired font style (Regular, Italic, Bold, or Bold Italic) from the Style drop-down menu.
6. (Optional) To embed the font information as bitmap data rather than as vector outline data, select the Bitmap Text option and enter a font size in the Size text field. (Bitmap fonts cannot use anti-aliasing. If you select Bitmap Text, you must also select Bitmap Text as the anti-aliasing option in the Property inspector for text that uses this font.)

Setting linkage properties for a Font symbol
Before you can instantiate a new Font instance dynamically, you need to make sure it has a linkage class name defined. To set a linkage class:
1. Right-click the font symbol in the library and select Linkage.
2. Click Export for ActionScript and enter a class name.
3. Click OK.

Creating a new Font symbol instance using ActionScript
Once you have a font symbol in your library and a linkage class defined, you can create a new instance of that font symbol using the new operator and specify the linkage class name defined earlier. To apply the embedded font to a dynamically created TextField, you do the following:

• Create a TextFormat object, set its fontFamily property to the name of the embedded font, and apply the TextFormat object to the TextField. When specifying an embedded font, the fontFamily property should only contain a single name; it cannot use a comma-delimited list of multiple font names.
• If using CSS styles to set fonts for TextFields, set the font-family CSS property to the name of the embedded font. The font-family property must contain a single name and not a list of names if you want to specify an embedded font.
• Set the embedFonts property of the TextField to true.

2. ADD COMBOBOX COMPONENT TO THE STAGE
Either by actionscript or Click Window ->Components->User Interface, drag the ComboBox to stage.
Assign the name “myComboBox” to the combobox component on stage.

3. ADD ACTIONSCRIPT
As my flash work with a class and xml, so i only put the main part of code which work for me here:
import flash.display.MovieClip;
import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import fl.controls.ScrollBarDirection;
import flash.events.MouseEvent;
import fl.controls.ComboBox;
import fl.data.DataProvider;
import fl.events.ComponentEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import fl.controls.Slider;
import fl.events.SliderEvent;
import fl.controls.SliderDirection;
import fl.data.DataProvider;
import flash.text.Font;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;
import flash.text.AntiAliasType;
import flash.text.*;

var cFont:TextFormat=new TextFormat();
cFont.font=new myFont2().fontName; //myFont2 is the classname of the font i added in step1
cFont.size=12;
myComboBox.textField.setStyle("embedFonts", true);
myComboBox.textField.setStyle("textFormat", cFont);
myComboBox.dropdown.setRendererStyle("embedFonts", true);
myComboBox.dropdown.setRendererStyle("textFormat", cFont);

Tip for using combobox:
1. click the combobox – Parameters, u can set the value of rowCount to decide how many items show and scroll if the item over the number of rowCount.

Problem solved earlier when making the video playlist:
1. assign a flv video to the video player as default to void showing the skin not found error

In As2, it’s easy to call movieclip of the root but in As3, use:
MovieClip(root).mc or MovieClip(parent).mc

One Response to “self-learning actionscript 3 note 1”

1. Andrew Says:
   August 21st, 2009 at 9:45 am

   I can’t read your website, though I would like to. I suggest you change your theme.

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website