What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

Control Tag Summary of XML to UI in Flash

XML to UI

Layout tag summary for XML to UI dialog boxes

Control tag summary for XML to UI dialog boxes

<column>

<columns>

<dialog>

<grid>

<hbox>

<row>

<rows>

<separator>

<spacer>

<vbox>

<button>

<checkbox>

<choosefile>

<colorchip>

<flash>

<label>

<listbox>

<listitem>

<menulist>

<menupop>

<menuitem>

<popupslider>

<property>

<radiogroup>

<radio>

<targetlist>

<textbox>

About the Configuration Folders

Application Level Configuration Directories

XML to UI

TOP

Macromedia Flash Basic 8 and Flash Professional 8 come with several extensibility features including Behaviors, Commands (JavaScript API), Effects, and Tools. With these features, advanced users can extend or automate the authoring tool's functionality. The XML to UI engine works with each of these extensibility features to create dialog boxes that the user sees if the extension either requires or accepts parameters.

XML to UI uses a subset of the XML User Interface Language (XUL), along with some tags created for Flash. These tags define a dialog box exclusively with XML. The XML to UI rendering engine parses the XML and generates a modal dialog box. Modal dialog boxes, unlike modeless dialog boxes, must be dismissed (either accepted or cancelled) before the application can continue operation.

When used with Behaviors, the XML tags that define the dialog box reside in the same XML file in which the behavior is defined. For Effects, Tools, and the JavaScript API, the XML tags must be placed in a separate XML file.
 

Layout tag summary for XML to UI dialog boxes

#TOP

The following tags are used for dialog box layout:

 

Tag

Description

<column>

Creates one column in a tabular grid layout.

<columns>

Creates a container tag for the <column> tags in a tabular grid layout.

<dialog>

Creates the container tag for the entire dialog box.

<grid>

Creates a container for tabular layout using <rows> and <columns>.

<hbox>

Creates a container for items laid out horizontally.

<row>

Creates one row in a tabular grid layout

<rows>

Creates a container tag for the <row> tags in a tabular grid layout.

<separator>

Creates a separator bar that displays vertically in an <hbox> and horizontally in a <vbox>.

<spacer>

Creates a transparent fill space used to arrange controls.

<vbox>

Creates a container for items laid out vertically.

 

Control tag summary for XML to UI dialog boxes

TOP

The Application configuration folders are:

Tag

Description

<button>

Creates a button control.

<checkbox>

Creates a check box control.

<choosefile>

Creates a file chooser control (this is not part of the XUL standard).

<colorchip>

Creates a color picker control (this is not part of the XUL standard).

<flash>

Creates a container for an embedded SWF file (this is not part of the XUL standard).

<label>

Creates a text label that can be associated with another control.

<listbox>

Creates a list box control to contain <listitem> tags.

<listitem>

Creates an individual item in a list box control.

<menulist>

Creates a pop-up menu control that contains <menupop> and <menuitem> tags.

<menupop>

Creates the pop-up menu in a pop-up menu control; contains <menuitem> tags.

<menuitem>

Creates an individual item in a pop-up menu control.

<popupslider>

Creates a pop-up slider control (this is not part of the XUL standard).

<property>

Creates a custom property in an embedded SWF file; used with the <flash> tag.

<radiogroup>

Creates a container for a group of radio button controls.

<radio>

Creates a single radio button control. This tag must be used within a <radiogroup> tag.

<targetlist>

Creates a control that lists all instances of a class and lets the user select an instance.

<textbox>

Creates a control that allows the input of text.

 

<column>

TOP

Availability

Flash MX 2004.

Usage

<column>

...

child tags

...

</column>


Attributes

None.

Child tags

Control tags.

Parent tag

<columns>

Description

Layout tag; creates one column in a tabular grid layout. The column tag must be within a <columns> tag, which must be within a <grid> tag.

 

<columns>

TOP

Availability

Flash MX 2004.

Usage

<columns>

...
child tags

...

</columns>

Attributes

None.

Child tags

<column>

Parent tag

<grid>

Description

Layout tag; creates a container tag for the <column> tags in a tabular grid layout. The <columns> tag must be within a <grid> tag.

<dialog>

TOP

Availability

 Flash MX 2004.

Usage

<dialog

id = "myID"

title="yourTitle"

buttons="accept[, cancel]">

...
child tags
...

</dialog>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the dialog box and access the values it returns.

title String; text that appears in the title bar of the dialog box.

buttons Accepts either or both of the strings "accept" and "cancel", which represent the OK and Cancel buttons, respectively.

Child tags

<hbox>,<grid>,<vbox>

Description

Layout tag; creates the container tag for the entire dialog box. All other tags used must be contained in this tag.

 

<grid>

TOP

Availability

Flash MX 2004.

Usage

<grid>

...
child tags
...

</grid>

Attributes

None.

Child tags

<columns>, <rows>

Parent tag

<dialog>

Description

Layout tag; creates a container for tabular layout using <rows> and <columns> tags.

Example

The following example uses the <grid>, <columns> and <rows> tags to define a dialog box. To see how this dialog box works with a JavaScript API command, see the example for

 <menulist>.

<dialog id="scale-dialog" title="Scale Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="center">

<label value="Scale x: " control="xScale"/>

<textbox id="xScale"/>

</row>

<row align="center">

<label value="Scale y:" control="yScale"/>

<textbox id="yScale" />

</row>

</rows>

</grid>

</dialog>

 

<hbox>

TOP

Availability

Flash MX 2004.

Usage

<hbox>

...
child tags
...

</hbox>

Attributes

None.

Child tags

<hbox>, <vbox>

Parent tag

<dialog>, <hbox>,<vbox>

Description

Layout tag; creates a container for items laid out horizontally. All layout objects defined within <hbox> tags are arranged horizontally with respect to one another. By default, each layout object is evenly spaced, but this setting can be altered with the <space> tag.

Example

The following example is excerpted from a Behaviors definition file, Web_Goto_Webpage.xml, and defines a dialog box with a textbox control and a drop-down menu control:

<dialog id="GotoWebPage-dialog" title="Go to URL" buttons="accept, cancel">

<vbox>

<hbox>

<label value="URL:" control="URL"/>

<textbox literal="true" required="true" width="40" id="URL"/>

</hbox>

<hbox>

<label value="Open in:" control="targetWindow"/>

<menulist literal="true" id="targetWindow">

<menupopup>

<menuitem label='"_self"'/>

<menuitem label='"_parent"'/>

<menuitem label='"_blank"'/>

<menuitem label='"_top"'/>

</menupopup>

</menulist>

</hbox>

</vbox>

</dialog>

The following graphic shows the Go to URL dialog box. Red and blue outlines of the VBox and HBox containers have been added to show how these container tags are used to define the layout:

 

<row>

TOP

Availability

Flash MX 2004.

Usage

<row>
...
child tags
...

</row>

Attributes

None.

Child tags

Control tags.

Parent tag

<rows>

Description

Layout tag; creates one row in a tabular grid layout. The row tag must be within a <rows> tag, which must be within a <grid> tag.

Example

The following example uses the <row> tag to help define a dialog box. To see how this dialog box works with a JavaScript API command, see the example for <menulist>.

<dialog id="scale-dialog" title="Scale Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="center">

<label value="Scale x: " control="xScale"/>

<textbox id="xScale"/>

</row>

<row align="center">

<label value="Scale y:" control="yScale"/>

<textbox id="yScale" />

</row>

</rows>

</grid>.

</dialog>

 

<rows>

TOP

Availability

Flash MX 2004.

Usage

<rows>
...
child tags
...

</rows>

Attributes

None.

Child tags

<row>

Parent tag

<grid>

Description

Layout tag; creates a container tag for the row tags in a tabular grid layout. The columns tag must be within a <grid> tag.

Example

The following example uses the <grid>, <columns> and <rows> tags to define a dialog box. To see how this dialog box works with a JavaScript API command, see the example for

<menulist>.

<dialog id="scale-dialog" title="Scale Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="center">

<label value="Scale x: " control="xScale"/>

<textbox id="xScale"/>

</row>

<row align="center">

<label value="Scale y:" control="yScale"/>

<textbox id="yScale" />

</row>

</rows>

</grid>

</dialog>

 

<separator>

TOP

Availability

Flash MX 2004.

Usage

<separator/>

Attributes

None.

Child tags

None.

Parent tag

<hbox>,<vbox>

Description

Layout tag; creates a separator bar that displays vertically in an <hbox> and horizontally in a <vbox>.

Example

The following example adds a separator bar to the Labeled Frame Cuepoint Navigation behavior dialog box. The current dialog box, which comes with Flash MX 2004, is defined in the file CuePointNamedFrame.xml.

<dialog id="NamedFrameCuePointDialog" title="Labeled Frame CuePoint Navigation" buttons="accept, cancel">

<vbox>

<hbox>

<label value="Select clip with labeled frames:" control="target" required="true" />

<targetlist id="target" class="movieclip" />

</hbox>

<hbox>

<checkbox id="stop" label="gotoAndStop? (vs gotoAndPlay)" checked="false" />

</hbox>

</vbox>

</dialog>

These tags produce the following dialog box:

The following example adds a separator bar and removes the <hbox> tags:

<dialog id="NamedFrameCuePointDialog" title="Labeled Frame CuePoint Navigation" buttons="accept, cancel">

<vbox>

<label value="Select clip with labeled frames:" control="target" required="true" />

<targetlist id="target" class="movieclip" />

<separator/>

<checkbox id="stop" label="gotoAndStop? (vs gotoAndPlay)" checked="false" />

</vbox>

</dialog>

The modified tags produce the following dialog box:

 

<spacer>

TOP

Availability

Flash MX 2004.

Usage

<spacer/>

Attributes

None.

Child tags

None.

Parent tag

<column>,<hbox>,<row>,<vbox>

Description

Layout tag; creates a transparent fill space used to arrange controls.

Example

The following example uses the JavaScript API to create a simple command that sends selected values to the Output Panel. Create the files, as described in this section, and place them in the Commands folder in your user-level configuration folder.

Create a file named Trace Selections.jsfl. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition in the

// Trace Selections.xml file

var traceSelectionsDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/Trace Selections.xml" );

if (traceSelectionsDlg.dismiss == "accept") {

fl.trace("Checkbox 1: " + traceSelectionsDlg.checkbox1);

fl.trace("Checkbox 2: " + traceSelectionsDlg.checkbox2);

fl.trace("Checkbox 3: " + traceSelectionsDlg.checkbox3);

fl.trace("Checkbox 4: " + traceSelectionsDlg.checkbox4);

fl.trace("Checkbox 5: " + traceSelectionsDlg.checkbox5);

}

Next, create a file named Trace Selections.xml (this example does not use the <spacer/> tag, so the second row of check box controls are aligned on the left). Place the following code into the file and save the file:

<dialog id="traceSelections" title="Trace Selections" buttons="accept, cancel">

<vbox>

<hbox>

<checkbox id="checkbox1" label="checkbox1"/>

<checkbox id="checkbox2" label="checkbox2"/>

<checkbox id="checkbox3" label="checkbox3"/>

</hbox>

<hbox>

<checkbox id="checkbox4" label="checkbox4"/>

<checkbox id="checkbox5" label="checkbox5"/>

</hbox>

</vbox>

</dialog>

The Trace Selections command now appears on the Commands menu. If you select the Trace Selections command from the Commands menu, the dialog box defined by Trace Selections.xml appears, as shown in the following figure:



Finally, add the <spacer/> tag to the Trace Selections.xml file:

<dialog id="traceSelections" title="Trace Selections" buttons="accept, cancel">

<vbox>

<hbox>

<checkbox id="checkbox1" label="checkbox1"/>

<checkbox id="checkbox2" label="checkbox2"/>

<checkbox id="checkbox3" label="checkbox3"/>

</hbox>

<hbox>

<spacer/>

<checkbox id="checkbox4" label="checkbox4"/>

<checkbox id="checkbox5" label="checkbox5"/>

</hbox>

</vbox>

</dialog>

Adding the <spacer/> tag to the second row of check boxes pushes checkbox4 and checkbox5 to the right:

 

<vbox>

TOP

Availability

Flash MX 2004.

Usage

<vbox>

...
child tags
...

</vbox>

Attributes

None.

Child tags

<hbox>, <vbox>, control tags

Parent tag

<grid>

Description

Layout tag; creates a container for items laid out vertically.

Example

The following example redefines the <grid>-based dialog box used in the <popupslider> example with <vbox> and <hbox> tags instead:

<dialog id="skew-dialog" title="Skew Selection" buttons="accept, cancel">

<vbox>

<hbox>

<label value="Skew x: " control="xSkew" align="left"/>

<popupslider id="xSkew" minvalue="-180" maxvalue="180"/>

</hbox>

<hbox>

<label value="Skew y:" control="ySkew" align="left"/>

<popupslider id="ySkew" minvalue="-180" maxvalue="180"/>

</hbox>

<hbox>

<label value="Edge:" control="edge" align="left"/>

<menulist id="edge">

<menupop>

<menuitem label="top center"/>

<menuitem label="right center"/>

<menuitem label="bottom center"/>

<menuitem label="left center"/>

</menupop>

</menulist>

</hbox>

</vbox>

</dialog>

The following figure shows the Skew Selection dialog box defined using <vbox> and <hbox> tags instead of the <grid> tag. Red and blue outlines of the VBox and HBox containers have been added to show how these container tags are used to define the layout:

 

<button>

TOP

Availability

Flash MX 2004.

Usage

<button

id="myID"

label="myLabel"

tabindex="myIdx"

accesskey="myChar"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

label String; text that appears on the button.

tabindex Number; an integer used to set the control's position in the tab order (available only on Windows).

accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows).

oncommand A JavaScript command that executes when the button is clicked.

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a button control.

Example

The following example uses the JavaScript API to create a new command that appears in Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder. For more information, see Configuration folders installed with Flash in Getting Started with Flash.

First, create a file named button.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition

// in the button.xml file

var buttonDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/button.xml" );

Second, create a file named button.xml and place it in your Commands folder. Place the following code into the file and save the file:

<?xml version="1.0"?>

<dialog id="button-dialog" title="Button Example" buttons="accept, cancel">

<grid>

<columns>

<column/>

</columns>

<rows>

<row>

<label width="150" value="The following buttons will send text to the Output Panel"/>

</row>

<row>

<button id="helloBtn" label="Hello" oncommand="fl.trace('Hello')"/>

</row>

<row>

<button id="worldBtn" label="world" oncommand="fl.trace('world')"/>

</row>

</rows>

</grid>

</dialog>

The button command now appears on the Commands menu. If you have a Flash document open, you can select the button command from the Commands menu and the dialog box defined by button.xml appears.

 

<checkbox>

TOP

Availability

Flash MX 2004.

Usage

<checkbox

id="myID"

label="myLabel"

tabindex="myIdx"

checked="true|false"

accesskey="myChar"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

label String; text that appears next to the check box.

tabindex Number; an integer used to set the control's position in the tab order (available only on Windows).

checked Boolean value; set the default value. If true, the box is checked when the dialog box first appears; false otherwise.

accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows).

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a check box control.

Example

The following example is excerpted from the Labeled Frame CuePoint Navigation behavior definition file:

<dialog id="NamedFrameCuePointDialog" title="Labeled Frame CuePoint Navigation" buttons="accept, cancel">

<vbox>

<hbox>

<label value="Select clip with labeled frames:" control="target"/>

<targetlist id="target" class="movieclip" />

</hbox>

<hbox>

<checkbox id="stop" label="gotoAndStop? (vs gotoAndPlay)" checked="false" />

</hbox>

</vbox>

</dialog>

 

<choosefile>

TOP

Availability

Flash MX 2004.

Usage

<choosefile

id="myID"

literal="true|false"

pathtype="relative|absolute"

required="true|false"

size="mySize"

tabindex="myIdx"

type="open|save"

value="myValue"

width="myWidth"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

literal Boolean value; if true then the value returned from this control is enclosed by quotation marks (""). If false, which is the default setting, the returned value does not have quotation marks.("").

pathtype String; the two possible values are relative and absolute.

required Boolean value: if true, then the OK button cannot function until a value is entered for this control; if false, the control has no effect on the OK button.

size Number; an integer that sets the width of the input field using the average character width.

tabindex Number; an integer used to set the control's position in the tab order (available only on Windows).

type String; can be either "open" or "save".

value String; default text that appears in the text input area.

width Number; sets the width of the text input area measured in pixels.

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a file chooser control (this is not part of the XUL standard). This control provides users with access to the operating system's file selection dialog box.

Example

The following example uses the JavaScript API to create a new command that appears in Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder.

First, create a file named choosefile.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition

// in the choosefile.xml file

var chooseFileDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/choosefile.xml" );

if (chooseFileDlg.dismiss == "accept") {

var path = chooseFileDlg.choosefileControl;

fl.trace(path);
}

Second, create a file named choosefile.xml and place it in your Commands folder. Place the following code into the file and save the file:

<?xml version="1.0"?>

<dialog id="choosefile-dialog" title="Choose File Example" buttons="accept, cancel">

<vbox>

<label value="Please select a file: "/>

<choosefile id="choosefileControl" type="open" pathtype="relative"/>

</vbox>

</dialog>

The choosefile command now appears on the Commands menu. If you have a Flash document open, you can select the choosefile command from the Commands menu and the dialog box defined by choosefile.xml appears, as shown in the following figure:

 

<colorchip>

TOP

Availability

Flash MX 2004.

Usage

<colorchip

id="myID"

color="myColor"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

color Number; hex number representing a color used as default value.

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; Creates a color picker control (this is not part of the XUL standard). This tag is specific to Flash and is not a part of the XUL tag set.

Example

The following example uses the JavaScript API to create a new command that appears on the Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder.

First, create a file named setcolor.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition

// in the setcolor.xml file

var setcolorDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/setcolor.xml" );

if (setcolorDlg.dismiss == "accept") {

fl.getDocumentDOM().setFillColor(setcolorDlg.fillColor);

fl.getDocumentDOM().setStrokeColor(setcolorDlg.strokeColor);

}
Second, create a file named setcolor.xml and place it in your Commands folder. Place the following code into the file and save the file:

<dialog id="setcolor-dialog" title="Set Color" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="left">

<label value="Set fill color: " control="fillColor" align="left"/>

<colorchip id="fillColor" color="#000000"/>

</row>

<row align="left">

<label value="Set stroke color:" control="strokeColor" align="left"/>

<colorchip id="strokeColor" color="#000000"/>

</row>

</rows>

</grid>

</dialog>

The setcolor command now appears on the Commands menu. If you have a Flash document open, draw a shape on the Stage and select the setcolor command from the Commands menu. The dialog box defined by setcolor.xml appears, as shown in the following figure:

 

<flash>

TOP

Availability

Flash MX 2004.

Usage

<flash

id="myID"

width="x"

height="y"

src="SWF file">

...
child tags
...

</flash>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

width Number; sets the width of the <flash> control measured in pixels.

height Number; sets the height of the <flash> control measured in pixels.

src String; path to the SWF file to be embedded in the dialog box.

Child tags

<property>

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a container for an embedded SWF file (this is not part of the XUL standard). The xmlui object in the JavaScript API allows getting and setting of parameter values in the embedded SWF file.

Example

The following example is excerpted from the blur.xml file, which defines the dialog box for the Blur Timeline Effect.

<dialog id="blur-dialog" title="Blur">

<flash id="blur_ui" src="blur.swf" width="772" height="456">

<property id="first" />

<property id="dur" />

<property id="hor" />

<property id="vert" />

<property id="regPoint" />

<property id="blur_amount" />

<property id="baseScale" />

</flash>

</dialog>

 

<label>

TOP

Availability

Flash MX 2004.

Usage

<label

control="myControlID"

accesskey="char"

value="myText"

align="left|center|right"/>

Attributes

control String; the string identifier that matches the ID value of an associated control.

accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows).

align String; left, center, or right determines whether the text is aligned on the left, center or right, respectively.

value String; the text that appears in the dialog box.

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a text label that can be associated with another control.

Example

The following example is excerpted from the HideScreen.xml file, which defines the Hide Screen Behavior.

<dialog id="SelectScreenDialog" title="Select Screen" buttons="accept, cancel">

<vbox>

<hbox>

<label value="Select Screen:" control="TARGET"/>

<targetlist id="TARGET" class="screen" />

</hbox>

</vbox>

</dialog>

 

<listbox>

TOP

Availability

Flash MX 2004.

Usagez

<listbox

id="myID"

tabindex="myIdx"

rows="numRows">

...
child tags
...

</listbox>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

rows Number; an integer representing the number of rows to display in the listbox.

tabindex Number; an integer used to set the control's position in the tab order (available only on Windows).

Child tags

<listitem>.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a listbox control to contain <listitem> tags.

Example

The following example modifies the skew command example from <popupslider> so that it uses a <listbox> control instead of a <menulist> control for the edge parameter to the JavaScript skewSelection() method.

The example uses the JavaScript API to create a new command that appears on the Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder. For more information, see Configuration folders installed with Flash in Getting Started with Flash.

First, create a file named skewlist.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition in the skew.xml file

var skewlistDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/skewlist.xml" );

// Place the values of xskew and yskew from the dialog box into local variables.

// Note that we cast (convert) the return value of skewlistDlg["xSkew"] to a number before assigning

// it to xSkew because the skewSelection method takes numbers as parameters.

var xSkew = Number(skewlistDlg.xSkew);

var ySkew = Number(skewlistDlg.ySkew);

var edge = skewlistDlg.edge;

if (skewlistDlg.dismiss == "accept") {

// Place the values of xSkew and ySkew from the dialog box

// into local variables. The code casts (converts) the values from the

// dialog box to a number before assigning them to the local variables

// because the skewSelection() method takes numbers for

// the xSkew and ySkew parameters.

var xSkew = Number(skewlistDlg.xSkew);

var ySkew = Number(skewlistDlg.ySkew);

var edge = skewlistDlg.edge;

// check for valid input because sending 0 or undefined to

// skewSelection() will cause the object to disappear.

var inputIsValid = true;

if (xSkew == 0 || isNaN(xSkew)) {

inputIsValid = false;

}

if (ySkew == 0 || isNaN(ySkew)) {

inputIsValid = false;

}

// Call skewSelection() to carry out the resizing command.

if (inputIsValid ) {

fl.getDocumentDOM().skewSelection(xSkew, ySkew, edge);

}

}

Second, create a file named skewlist.xml and place it in your Commands folder. Place the following code into the file and save the file:

<dialog id="skewlist-dialog" title="Skew Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="left">

<label value="Skew x: " control="xSkew" align="left"/>

<popupslider id="xSkew" minvalue="-180" maxvalue="180"/>

</row>

<row align="left">

<label value="Skew y:" control="ySkew" align="left"/>

<popupslider id="ySkew" minvalue="-180" maxvalue="180"/>

</row>

<row align="left">

<label value="Edge:" control="edge" align="left"/>

<listbox id="edge" rows="5">

<listitem label="top center"/>

<listitem label="right center"/>

<listitem label="bottom center"/>

<listitem label="left center"/>

</listbox>

</row>

</rows>

</grid>

</dialog>

The skewlist command now appears on the Commands menu. Draw a shape on the Stage, and select it with the pointer tool. If you select the skewlist command from the Commands menu, the dialog box defined by skewlist.xml appears, as shown in the following figure:
 

 

<listitem>

TOP

Availability

Flash MX 2004.

Usage

<listitem

label="mylabel"

value="myValue"/>

Attributes

label String; text that appears in the listbox for that item.

value String; text that is returned if the user selects the item. If not set, the value of the label attribute is returned.

Child tags

None.

Parent tag

<listbox>

Description
Control tag; creates an individual item in a list box control. This tag must be used within a <listbox> tag.

 

<menulist>

TOP

Availability

Flash MX 2004.

Usage

<menulist

id="myID"

tabindex="myIdx">

<menupop>

<menuitem/>

...

<menuitem/>

</menupop>

</menulist>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

tabindex Number; an integer used to set the control's position in the tab order (available only on Windows).

Child tags

<menupop>

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a pop-up menu control that contains <menupop> and <menuitem> tags.

Example

The following example uses the JavaScript API to create a new Convert to Symbol command that appears on the Commands menu. This command is a simple version of the Convert to Symbol dialog box that is on the Modify menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder.

First, create a file named Convert to Symbol.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition in the

// Convert to Symbol.xml file

var convertToSymbolDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/Convert to Symbol.xml" );

if (convertToSymbolDlg.dismiss == "accept") {

var type = new String(convertToSymbolDlg.type);

fl.getDocumentDOM().convertToSymbol(type.toLowerCase(), convertToSymbolDlg.name, convertToSymbolDlg.registration);

}

Second, create a file named Convert to Symbol.xml and place it in your Commands folder. Place the following code into the file and save the file:

<dialog id="convertToSymbolDlg" title="Convert to Symbol" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="right">

<label value="Name: " control="name" align="right"/>

<textbox id="name" value="Symbol 1"/>

</row>

<row><spacer/></row>

<row align="right">

<label value="Behavior:" control="type" align="right"/>

<radiogroup id="type">

<radio label="Movie clip"/>

<radio label="Button"/>

<radio label="Graphic"/>

</radiogroup>

</row>

<row align="right">

<label value="Registration:" control="registration"/>

<menulist id="registration">

<menupop>

<menuitem label="top left"/>

<menuitem label="top center"/>

<menuitem label="top right"/>

<menuitem label="center left"/>

<menuitem label="center"/>

<menuitem label="center right"/>

<menuitem label="bottom left"/>

<menuitem label="bottom center"/>

<menuitem label="bottom right"/>

</menupop>

</menulist>

</row>

</rows>

</grid>

</dialog>

The Convert to Symbol command now appears on the Commands menu. Draw a shape on the Stage, and select it with the pointer tool. If you then select the Convert to Symbol command from the Commands menu, the dialog box defined by Convert to Symbol.xml appears, as shown in the following figure:

 

<menupop>

TOP

Availability

Flash MX 2004.

Usage

<menulist>

<menupop>

<menuitem/>

...

<menuitem/>

</menupop>

</menulist>

Attributes

None.

Child tags

<menuitem>

Parent tag

<menulist>

Description

Control tag; creates the pop-up menu of a pop-up menu control, and must contain at least one <menuitem> tag.

Example

The following example creates a pop-up menu control with eight elements. To see the XML definition of the entire dialog box, see the example for <menulist>.

<menulist id="registration">

<menupop>

<menuitem label="top left"/>

<menuitem label="top center"/>

<menuitem label="top right"/>

<menuitem label="center left"/>

<menuitem label="center"/>

<menuitem label="center right"/>

<menuitem label="bottom left"/>

<menuitem label="bottom center"/>

<menuitem label="bottom right"/>

</menupop>

</menulist>

 

<menuitem>

TOP

Availability

Flash MX 2004.

Usage

<menulist>

<menupop>

<menuitem

label="displayText"

value="itemValue"/>

...

<menuitem

label="displayText"

value="itemValue"/>

</menupop>

Attributes

label String; text that appears in the pop-up menu for that item.

value String; text that is returned if the user selects the item. If not set, the value of the label attribute is returned.

Child tags

None.

Parent tag

<menupop>

Description

Control tag; creates the pop-up aspect of a pop-up menu control, and must contain at least one <menuitem> tag.

Example

The following example creates a drop-down menu with eight elements. To see the XML definition of the entire dialog box, see the example for <menulist>.

<menulist id="registration">

<menupop>

<menuitem label="top left"/>

<menuitem label="top center"/>

<menuitem label="top right"/>

<menuitem label="center left"/>

<menuitem label="center"/>

<menuitem label="center right"/>

<menuitem label="bottom left"/>

<menuitem label="bottom center"/>

<menuitem label="bottom right"/>

</menupop>

</menulist>

 

<popupslider>

TOP

Availability

Flash MX 2004.

Usage

<popupslider

id="myLabel"

tabindex=""

minvalue=""

maxvalue=""/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

tabindex Number; an integer that represents the control's position in the tab order (available only on Windows).

minvalue Number; an integer that represents the minimum value.

maxvalue Number; an integer that represents the maximum value.

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a pop-up slider control (this is not part of the XUL standard).

Example

The following example uses the JavaScript API to create a new command that appears on the Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder. For more information, see Configuration folders installed with Flash in Getting Started with Flash.

First, create a file named skew.jsfl and place it in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition in the skew.xml file

var skewDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/skew.xml" );

// Place the values of xskew and yskew from the dialog box into local variables.

// Note that we cast (convert) the return value of skewDlg["xSkew"] to a number before assigning

// it to xSkew because the skewSelection method takes numbers as parameters.

var xSkew = Number(skewDlg.xSkew);

var ySkew = Number(skewDlg.ySkew);

var edge = skewDlg.edge;

if (skewDlg.dismiss == "accept") {

// Place the values of xSkew and ySkew from the dialog box

// into local variables. The code casts (converts) the values from the

// dialog box to a number before assigning them to the local variables

// because the skewSelection() method takes numbers for

// the xSkew and ySkew parameters.

var xSkew = Number(skewDlg.xSkew);

var ySkew = Number(skewDlg.ySkew);

var edge = skewDlg.edge;

// check for valid input because sending 0 or undefined to

// skewSelection() will cause the object to disappear.

var inputIsValid = true;

if (xSkew == 0 || isNaN(xSkew)) {

inputIsValid = false;

}

if (ySkew == 0 || isNaN(ySkew)) {

inputIsValid = false;

}

// Call skewSelection() to carry out the resizing command.

if (inputIsValid ) {

fl.getDocumentDOM().skewSelection(xSkew, ySkew, edge);

}

}

Second, create a file named skew.xml and place it in your Commands folder. Place the following code into the file and save the file:

<dialog id="skew-dialog" title="Skew Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="left">

<label value="Skew x: " control="xSkew" align="left"/>

<popupslider id="xSkew" minvalue="-180" maxvalue="180"/>

</row>

<row align="left">

<label value="Skew y:" control="ySkew" align="left"/>

<popupslider id="ySkew" minvalue="-180" maxvalue="180"/>

</row>

<row align="left">

<label value="Edge:" control="edge" align="left"/>

<menulist id="edge">

<menupop>

<menuitem label="top center"/>

<menuitem label="right center"/>

<menuitem label="bottom center"/>

<menuitem label="left center"/>

</menupop>

</menulist>

</row>

</rows>

</grid>

</dialog>

The skew command now appears on the Commands menu. Draw a shape on the Stage, then select it with the pointer tool. If you then select the skew command from the Commands menu, the dialog box defined by skew.xml appears, as shown in the following figure:

 

<property>

TOP

Category

Flash MX 2004.

Usage

<property

id="myID"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

Child tags

None.

Parent tag

<flash>

Description

Control tag; creates a custom property in an embedded SWF file; used with the <flash> tag. This tag is used to declare properties that are specific to a SWF file that is embedded in an XML to UI dialog box.

 

<radiogroup>

TOP

Availability

Flash MX 2004.

Usage

<radiogroup

id = "myID"

label = "myLabel"

groupbox = "true|false">

<radio/>

...

<radio/>

</radiogroup>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

label String; defines a string that appears above the group of radio buttons.

groupbox Boolean value; if true, the entire group of radio buttons have a border around them.

Child tags

<radio>

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; Creates a container for a group of radio button controls. This tag allows grouping of radio buttons and must contain at least one <radio> tag.

Example

The following example defines a group of <radio> controls that are included in the example for <menulist>.

<radiogroup id="type">

<radio label="Movie clip"/>

<radio label="Button"/>

<radio label="Graphic"/>

</radiogroup>

 

<radio>

TOP

Category

Flash MX 2004.

Usage

<radiogroup>

<radio label="myLabel" selected="" accesskey=""/>

...

</radiogroup>

Attributes

label Text that appears next to the radio button.

selected Boolean value; if true, it makes the radio button the default selection in the radio group.

accesskey String; a character to be used for the keyboard shortcut for this control (available only on Windows).

Child tags

None.

Parent tag

<radiogroup>

Description

Control tag; creates a single radio button control. This tag must be used within a <radiogroup> tag.

Example

The following example defines a group of <radio> controls that are included in the example for <menulist>. For the complete example, see <menulist>.

<radiogroup id="type">

<radio label="Movie clip"/>

<radio label="Button"/>

<radio label="Graphic"/>

</radiogroup>

 

<targetlist>

TOP

Category

Flash MX 2004.

Usage

<targetlist

id="myLabel"

class="myClass1[, myClass2][, ..., myClassN]"

required="true|false"

pathtype="relative|absolute"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

class The class or classes for which to list instances.

required Boolean value; if true, the OK button cannot function until a value is entered for this control; if false, the control has no effect on the OK button.

pathtype String; the two possible values are relative and absolute.

Child tags

None.

Description

Control tag; creates a control that lists all instances of a class and lets the user select an instance.

Example

The following example is excepted from the Load Graphic behavior definition file. The tags define a targetlist control that lets users select a movie clip into which a graphic will be loaded.

 For the complete dialog box definition, see the Graphic_load_graphic.xml file in the Behaviors folder.

<vbox>

<label value=""/>

<label value="Select the movie clip into which to load the graphic:"/>

<targetlist id="target" class="movieclip"/>

</vbox>

The control created by the <targetlist> tag is shown in the following figure:

 

<textbox>

TOP

Availability

Flash MX 2004.

Usage

<textbox

id = "myID"

literal = "true|false"

maxlength = "myLength"

multiline = "true|false"

size = "mySize"

tabindex = "myIdx"

value = "myValue"/>

Attributes

id String; represents a unique identification string that is used by the extensibility features to identify the control and access the value it returns.

literal Boolean value; if true, the value that is returned from this control is enclosed by quotation marks (""). If false, which is the default setting, the returned value does not have quotation marks.("").

maxlength Number; sets the maximum number of characters that can be entered.

multiline Boolean value; if true, more than one line of input is allowed. If false, which is the default setting, only one line of input is allowed.

size Number; an integer that sets the width of the input field using the average character width.

tabindex Number; an integer that represents the control's position in the tab order (available only on Windows).

value String; default text that appears in the textbox.

Child tags

None.

Parent tag

<dialog>, <hbox>, <row>, <vbox>

Description

Control tag; creates a control that allows input of text.

Example

The following example uses the JavaScript API to create a new command that appears on the Commands menu. Create two files, as described in this section, and place them in your Commands folder in your user-level configuration folder.

First, create a file named scale.jsfl in your Commands folder. Place the following code into the file and save the file:

// Create an XML to UI dialog box using the XML definition

// in the scale.xml file

var scaleDlg = fl.getDocumentDOM().xmlPanel( fl.configURI + "Commands/scale.xml" );

if (scaleDlg.dismiss == "accept") {

// Place the values of xScale and yScale from the dialog box

// into local variables. The code casts (converts) the values from the

// dialog box to a number before assigning them to the local variables

// because the scaleSelection() method takes numbers as parameters.

var xScale = Number(scaleDlg.xScale);

var yScale = Number(scaleDlg.yScale);

// check for valid input because sending 0 or undefined to

// scaleSelection() will cause the object to disappear.

var inputIsValid = true;

if (xScale == 0 || isNaN(xScale)) {

inputIsValid = false;

}

if (yScale == 0 || isNaN(yScale)) {

inputIsValid = false;

}

// Call scaleSelection to carry out the resizing command.

if (inputIsValid ) {

fl.getDocumentDOM().scaleSelection(xScale, yScale);

}

}

Second, create a file named scale.xml and place it in your Commands folder. Place the following code into the file and save the file:

<?xml version="1.0"?>

<dialog id="scale-dialog" title="Scale Selection" buttons="accept, cancel">

<grid>

<columns>

<column/>

<column/>

</columns>

<rows>

<row align="center">

<label value="Scale x: " control="xScale"/>

<textbox id="xScale"/>

</row>

<row align="center">

<label value="Scale y:" control="yScale"/>

<textbox id="yScale" />

</row>

</rows>

</grid>

</dialog>

The scale command now appears on the Commands menu. Draw a shape on the Stage and select it with the pointer tool. If you select the scale command from the Commands menu, the dialog box defined by scale.xml appears, as shown in the following figure:

 

About the Configuration Folders

TOP

The Configuration folders contain elements of the Flash 8 application that you can customize. If you customize or extend Flash 8, you modify these files or add your source files to one or more of these folders. By familiarizing yourself with these folders, you can learn about the interface for extensibility provided in Flash 8.

WARNING The files in the Configuration folders make up much of the Flash 8 interface. Do not modify, delete, or add to these files unless you know how to customize and extend Flash 8.

The Configuration folders exists in three separate locations depending on your operating system. The first location, Application configuration, is relative to the application. The second, User configuration, is stored in a location that is writable for the person who is currently the active user of the computer. Depending on your operating system this will be in one of the following folder locations:

User Configuration:

Windows:

  • 98 Second Edition: C:\Windows Directory\Application Data\Macromedia\Flash 8

  • 2000 and XP: C:\Documents and Settings\user name\Local Settings\Application Data\Macromedia\Flash 8

Mac OS:

  • Mac OS X: Hard Disk/Users/user name/Library/Application Support/Macromedia/Flash 8

  • The third folder, All Users configuration, is where the HelpPanel is located. Depending on your operating system this will be in one of the following locations:

All Users Configuration:

Windows:

  • 98 Second Edition: C:\Windows Directory\All Users\Application Data\Macromedia\Flash 8

  • 2000 and XP: C:\Documents and Settings\All Users\Local Settings\Application Data\Macromedia\Flash 8

Mac OS:

  • Mac OS X: Hard Disk/Users/Shared/Library/Application Support/Macromedia/Flash 8

 

Application Level Configuration Directories

TOP

The Application configuration folders are:

 

File/folder name

Contents

authplay.dll/authplaylib

External Macromedia Flash Player for use within the authoring tool (test movie, debug movie)

Components*

Location of compiled component SWC files that drive the Component panel.

Components FLA

Sample Components source file.

Configuration.xml

Provide the ability to configure Flash 8 to delete the aso folder on exit.

Dictionaries

Dictionary files used by the Spell Checker.

HelpSWF

Macromedia Flash content used within the Help menu.

Importers*

Files used to extend the importers available within Flash.

Libraries*

Location of FLA source files that drive the Window > Common Libraries menu.

Templates*

Location of FLA source files that drive the File > New from Template... dialog.

 

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash