Home Course Index << Prev. Next >> PDF Version of this Page

Course API Comparison
Chapter C9: A Flash Application


Copyright © by V. Miszalok, last update: 2009-07-17


For an introduction see: Flash and Flex.
Comparison JavaFX, Flex and Silverlight: Carousel.
Comparison Silverlight vs. Flex: by Jesse Ezell

Adobe offers two different ways to create RIAs for the Flash Player:

Flash

Popular old authoring tool just uses Actionscript and video-related terms as "Movieclip", "Timeline", "Frame" etc.
Flash programs are compiled to SWF-files which have to be embedded in HTML-pages.
Flash development focuses on animation and design. Main authoring tool: Adobe Flash CS4 Professional.

Flex

Is newer and bases on Actionscript and on MXML.
It offers a classic software development workflow based on the so called Flex-Framework.
Flex can import Flash-UI-components like "Styles" and "Skins" via the SWF-Format.
Main authoring tool: Flex Builder 3.

Important:
Adobe just offers client side programming.
In contrast to Microsoft Visual Studio, Flash Professional and Flex Builder strictly avoid any server programming.
All Adobe programs end where the browser hands its data to the server.
To get connected to the backend you can use XML-services, HTML-calls and RemoteObject-classes but there is no common development, testing and debugging model for client and server.
On the other hand: Whenever Flash/Flex client applications succeed to cooperate with a server, they run with any exotic hosting platform.

Preliminaries

1) Download and install Adobe Flex 3.3 SDK.
2) Create a directory C:\temp\Flex.

FlexApp.mxml

Start Notepad and insert the following code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
   xmlns:mx="http://www.adobe.com/2006/mxml"   viewSourceURL="src/LayoutAutomatic/index.html"
   horizontalAlign="center" verticalAlign="middle"
   resize="application_resize(event);">
   <mx:Panel  id="myPanel" layout="horizontal" verticalAlign="middle" left="2" right="2"
     paddingTop="2" paddingBottom="2" paddingLeft="2" paddingRight="2" width="100%">
     <mx:Button id="button1" width="10%" label="Talk!" click="myLabel.text = 'Flash Player Application. Resize!';"/>
     <mx:Label  id="myLabel" width="80%" fontWeight="bold" textAlign="center"/>
     <mx:Button id="button2" width="10%" label="Clear" click="myLabel.text = '';"/>
   </mx:Panel>
   <mx:Script>
     <![CDATA[
       import mx.events.ResizeEvent;
       private function application_resize( evt:ResizeEvent ):void 
       { if ( !myPanel ) return;
         button1.setStyle( "fontSize", myPanel.width/40 );
         myLabel.setStyle( "fontSize", myPanel.width/40 );
         button2.setStyle( "fontSize", myPanel.width/40 );
       }
       
    </mx:Script>
</mx:Application>

Store it to C:\temp\Flex\FlexApp.mxml.

 

Compile and Run

1) Open Notepad again and copy the empty file to C:\temp\Flex\compile.bat.
2) Search the installation directory of the FlexSDK on your hard disk. Let us say that you find it in C:\FlexSDKDirectory:
3) Copy the following code into the empty compile.bat but replace C:\FlexSDKDirectory by the true path of your Flex SDK installation and place the third line at the end of the second one !

cd C:\temp\Flex
C:\FlexSDKDirectory\bin\mxmlc --strict=true --file-specs C:\temp\Flex\FlexApp.mxml
-output=C:\temp\Flex\FlexApp.swf

4) Click the main Windows button in the lower left corner of the screen. Type "command" into the Start Search text field.
The black Command prompt should appear. Type cd.. (cd with 2 periods + return) in order to go up one branch in the directory tree.
Repeat this until you reach the root directory C:. Type the line "cd C:\temp\Flex\" followed by the next line "dir".
Make sure you see the file names FlexApp.mxml and compile.bat.

5) Type "compile" and the mxmlc-compiler should start and create the executable file.
Type "dir and check whether there exists the executable C:\temp\Flex\FlexApp.swf.
Type FlexApp.swf and Adobe Flex Player 9 will start as shown here:

7) Insert FlexApp.swf in a html-page by writing the following html-tag:
<object type="application/x-shockwave-flash" data="FlexApp.swf" width="100%" height="140">
  <param name="movie" value="FlexApp.swf">
</object>

as shown on this page:

Click the Talk! - button and resize !

Remaining Problems:
1. Application doesn't cover the complete width and height of Adobe Flash Player 9.
2. myPanel doesn't cover the complete width and height of Application.
3. button1, myLabel and button2 don't reduce their heights to a small fontSize.

top of page: