|
Control Tag Summary of XML to UI in Flash
|
|
|
|
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.
|
|
|
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.
|
|
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.
|
|
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.
|
|
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>
|
|
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:

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

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

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

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

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

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

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

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

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

|
|
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:
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:
Mac OS:
|
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.
|
|
|