Flash Rich Experience Blog

I am very excited for the release of Flex 4.0, code name Gumbo, sometime next year. Flex is finally moving in the right direction and changing the project cycle.

Flex 4 code is going to be more declarative than in any other versions and what that means is that component behaviors such as states are going to be separated from visual and can be created in Thermo as well as other Adobe suite CS4 tools such as Photoshop, Firework or Illustrator, allowing developers to take advantage of the components built on FXG and working directly with Flash player version 10. This major advance will change the Flex development cycle paradigm.

Flex 4 is being integrated with the Halo (Flex) architecture and additionally, Flex 4 will have a new MXML language namespace with backward-compatibility with the older namespace, a new file format called Flash XML Graphic (FXG).

FXG format is a vector-based XML used for graphical elements and similar to SVG. FXG works very similar to Degrafa but better integrated into Flex and the Flash Player 10. In fact, Adobe has added the FXG file format export capability to the products tools such as PhotoShop, Illustrator, Firework and later on Flash (hopefully J).

Let’s look at the HTML/CSS and server side programming paradigm; there are programmers and designers.

• Front end developers (and sometimes designers) - are responsible for the graphic, HTML, CSS
• Back end developers - building the server side scripts and using the skins the designer created in HTML and CSS to give the application a “face”.

Flex will allow designers/front end developers to own the design and skins while the programmers can build the functionality of the application. This is a hugh step adobe is taking and is very consistent with other projects such as the adobe open screen project where eventually flex application can be built cross platform for Web (Flex), mobile (Flash Lite) and desktop (AIR).

I created this tutorial to help you explore Flex 4 SDK before it’s out and to see some of the new features Flex has to offer. I am sure you will be impressed!

Installing Flex 4.0 SDK in Eclipse IDE

Download Flex 4 SDK

1. Download the SDK - Navigate to the following URL: http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and unzip the SDK to here: C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\4.0.0
2. Add a new Flex SDK – Window -> Preference -> Flex -> Installed Flex SDKs -> Add

   Fill in the following information:
   
   Flex SDK Location: C:\Program Files\Adobe\Flex Builder 3 Plug-in\sdks\4.0.0

   Flex SDK name: Flex 4.0
   

Install Subversion:

1. Download subversion - http://subversion.tigris.org/, I used the eclipse plug-in.

   Download the plug-in zip folder: http://subclipse.tigris.org/

2. Add the plug-in - Help -> Software Updates -> Find and Install -> Search for new features to install -> New Archive Site -> site-1.0.6.zip -> Ok -> Finish. Restart Eclipse (see figure below).

1. Window -> Open prospective -> Other -> CVS Repository -> ok
   
2. Once view is open select the Add new CVS Repository icon.
3. Url: http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/flex4/
4. Right click the project and select Checkout.
   

1. Next we need to download the source code of the project so we can map the Flex 4 swc to the location of the source so we will be able to “step into” the code and see the actual code. Select: Check out as a project configured using the New Project Wizard. Next set it as Flex builder, Flex project name the project Flex4Src and complete the project. From now on you can always reference the swc to the src folder and you can step into the code and see the source code.

1. Right click the project -> Properties -> Library path -> Flex 4.0 -> flex4.swc -> Source attachment -> project path/Flex4Src/src click ok and you are all done!
   

Install Flash version 10.0

Flex 4 needs Flash player installed, navigate to the following URL:

http://www.adobe.com/support/flashplayer/downloads.html. Next choose the debugger version for Flash player 10 based on your platform (Mac, PC) and browser (Active X or Mozilla).

Creating your first Flex 4 project

Create a new project, just as any project: File -> New -> Flex Project after project is created right click the project and set the SDK to Flex 4.0 and change the flash player version to 10.0 and you are done.

Now that the Flex 4 SDK is installed create a test application to ensure that the SWC and source folder are mapped correctly. To test that the Flex 4 is working correctly run the following script:

<Application xmlns="http://ns.adobe.com/mxml/2009" xmlns:mx="http://ns.adobe.com/mxml/2009">

    <Group>
        <Rect width="100" height="100">
            <fill>
                <SolidColor color="white" />
            </fill>
        </Rect>
	</Group>

</Application>

Install Fireworks CS4 Beta

Download the beta version from here:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_fireworkscs4. Install Firework CS4 using the default setting.

I will be using the iPhone GUI provided from this post: http://www.teehanlax.com/blog/?p=447
Open the iPhone_GUI.psd in Firework and choose the elements you want to use and do the following: Command -> Export to FXG

That command will create the FXG file to be used in Flex 4 and the images associated with the FXG file. We can now start building the component.

Fireworks CS4 generated the FXG code automatically sliced all the layers and placed them in an assests folder, see the code generated below:

<Graphic version="1.0" xmlns="http://ns.adobe.com/fxg/2008" xmlns:fw="http://ns.adobe.com/fxg/2008/fireworks"  viewHeight= "1141" viewWidth= "1790">
	<Library>
	</Library>

	<Group id="Page 1" fw:type="page">
		<Group id="State 1" fw:type="state">
			<Group id="Layer 1" fw:type="layer">
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_0.png')" x="781" y="694" width="450" height="27">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_1.png')" x="810" y="-15" width="389" height="719">
				</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_2.png')" x="846" y="105">
						</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_3.png')" x="809" y="698" width="394" height="94">
						</BitmapGraphic>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_4.png')" x="846" y="106" width="320" height="480">
						</BitmapGraphic>
						<Group maskType='alpha'>
							<mask>
								<Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_5.png')" x="-553" y="-343" width="1866" height="1364">
						</BitmapGraphic>
								</Group>
							</mask>
							<BitmapGraphic source="@Embed('/Fwks.assests/Image_6.png')" x="745" y="107" width="483" height="483">
							</BitmapGraphic>
						</Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_7.png')" x="846" y="125" width="320" height="461">
						</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_8.png')" x="955" y="140">
								</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_9.png')" x="944" y="191">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_10.png')" x="867" y="512" width="279" height="51">
				</BitmapGraphic>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_11.png')" x="866" y="511" width="281" height="53">
				</BitmapGraphic>
				<Group maskType='alpha'>
					<mask>
						<Group>
				<BitmapGraphic source="@Embed('/Fwks.assests/Image_12.png')" x="-553" y="-343" width="1866" height="1364">
				</BitmapGraphic>
						</Group>
					</mask>
					<TextGraphic x="967" y="524.124267578125" width="143" height="30" kerning="false" blendMode="normal" alpha="1" visible="true">
						<content>
							<p fontFamily="ArialMT" fontSize="22" fontStyle="normal" fontWeight="normal" lineHeight="100%" tracking="0" textIndent="0" marginLeft="0" marginRight="0" textDecoration ="none" color="#ffffff" textAlign="left" direction="ltr">slide to unlock
							</p>
						</content>
					</TextGraphic>
				</Group>
						<BitmapGraphic source="@Embed('/Fwks.assests/Image_13.png')" x="869.5" y="515.25">
						</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_14.png')" x="886.9998779296875" y="526.7500610351562">
								</BitmapGraphic>
								<BitmapGraphic source="@Embed('/Fwks.assests/Image_15.png')" x="947" y="105" width="219" height="188">
								</BitmapGraphic>
							</Group>
						</Group>
					</Group>
</Graphic>

Creating the iPhone Component

Once you have to FXG code you can start building the components, states and code to make your GUI work.

Basic example can be seen here:
http://elromdesign.com/blog/Flex/iphone/iphonegui.html