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!

Last update: 2010.

Table of Contents

 About This Book

 Introduction of Adobe Flash

 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

 Flash Player Projector

 SWFTools - SWF File Manipulation Tools

 SWFC Script to Generate Flash SWF Files

 ActionScript Embedded in SWFC Script

 AS3Compile - ActionScript 3 Compiler

Adobe Flex SDK 4

 Downloading and Installing Flex SDK 4.1

 "mxmlc" - Adobe Flex Compiler

 Spark Component Architecture

MXML Example Using Spark Components

 Compiling ActionScript 3 Scripts with 'mxmlc'

 SWF Disassembler in Flex SDK

 Dumping Simple SWF Files

 Dumping SWF Files Containing ActionScript 3 Statements

 Dumping SWF Files Generated from ActionScript 3 Classes

 Dumping SWF Files Generated from MXML Applications

 SWF File Structure and Tags

 SWF File Processing Rules

 SWF Files for Video and Audio Streams

 Outdated Tutorials

 References

 PDF Printing Version