Flash Tutorials - Herong's Tutorial Examples - v3.03, by Dr. Herong Yang
MXML Example Using Spark Components
This section provides a tutorial example on how to use MXML language to write a Flash application, sqft_converter.mxml, for square feet to square meter conversion, using Spark components.
There are some basic things you need to know to write a simple application in MXML format using Spark component architecture:
1. The root element should be Spark "Application" element with two namespace prefixes:
2. UI components should have "id" attributes to provide reference names. For example, <s:TextInput id="sqft" ...> defines a TextInput component with a reference name of "sqft".
3. "VGroup" component can be used to a component container with a vertical layout.
4. "Button" components can have a script statement assigned to the "click" attribute to trigger actions when they are clicked.
Here is a more interesting Flash example written in MXML format using Spark components:
<?xml version="1.0"?> <!-- sqft_converter.mxml - Copyright (c) 2010, HerongYang.com, All Rights Reserved. --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Panel title="Square Feet Converter"> <s:VGroup left="10" right="10" top="10" bottom="10"> <s:Label text="Enter square feet #:"/> <s:TextInput id="sqft" text="1000.0"/> <s:Button label="Convert" click="sqmt.text=(0.0929*int(sqft.text)).toString()"/> <s:Label text="Result in square meters:"/> <s:TextInput id="sqmt"/> </s:VGroup> </s:Panel> </s:Application>
Compile sqft_converter.mxml with Flex compiler, mxmlc:
C:\herong>\local\flex\bin\mxmlc sqft_converter.mxml Loading configuration file C:\local\flex\frameworks\flex-config.xml C:\herong\sqft_converter.swf (39792 bytes)
Now open sqft_converter.swf in Firefox, you should see the application running. You can enter different values in square feet and get them converted to square meters.
If you are reading the Web version of this book,
you will see the application running here.
Otherwise, you will see a static image.
Cool. I know how to write an interactive Flash application now!
Table of Contents
Adobe Flash Player Plugin for Firefox
Adobe Flash Player Plugin for Chrome
Adobe Flash Player Plugin for Safari
Adobe Flash Player ActiveX for IE
Using "object" Elements for Flash Files
Using "embed" Elements for Flash Files
"mp3player" - MP3 Music Player
SWFObject - Hidding "object" behind JavaScript
SWFTools - SWF File Manipulation Tools
SWFC Script to Generate Flash SWF Files
ActionScript Embedded in SWFC Script
AS3Compile - ActionScript 3 Compiler
Downloading and Installing Flex SDK 4.1
►MXML Example Using Spark Components
Compiling ActionScript 3 Scripts with 'mxmlc'
Dumping SWF Files Containing ActionScript 3 Statements
Dumping SWF Files Generated from ActionScript 3 Classes
Dumping SWF Files Generated from MXML Applications