SimplicIT . Simple IT Solutions . LAB

Simple Introduction: Flash Builder & Flex 4

trace — Sat, 07 Aug 2010 09:41:10 +0000

As a first step I want to get something to run and have a basic idea of the environment I’ll be working in.

Here’s a quick summary of the steps I followed:

Create a new project and inspect the resulting project / package / class files
Play around with the new versus old Flex components
Try different skin templates

Create a new project

Open FlashBuilder and create a new Flex project (File > New > Flex Project)
In the configuration popup give your project a name and change and change the default settings if you wish

In the package explorer panel have a look at the project tree, the main folders / files you are interested in is

src – contains the source / class files
bin – contains the compiled .swf file + a generated .html file that displays your swf

Play around with the new versus old Flex components

First, lets start with layout components. In the new Spark component set, layout logic has been decoupled from the component. One can set the layout of a component declaratively in the mxml (as a property) and can change it at runtime. Layout containers in Spark deal solely with layout and are therefore more lightweight. This does mean that one cannot set visual drawing properties such as background. They do support layout-specific properties such as padding.

Spark contains 4 predefined layout classes: BasicLayout, HorizontalLayout, VerticalLayout, TileLayout

Here are the basic layout containers for Flex 3 with their Spark equivallent:

Canvas vs. Group: Group is a simple wrapper that implements BasicLayout, which is absolute positioning and supports padding
HBox & VBox vs. HGroup & VGroup: HGroup & VGroup are extended from Group and use the HorizontalLayout & VerticalLayout

Now in our project, let’s start by setting the layout of the Application (note, a Spark Application: ‘

Now let’s create 2 buttons, an mx Button and a Spark button and run our application:

Try different skin templates

Next lets change the theme, from the default Spark to the previous Flex 3 theme, Halo (Do this by switching to Design view, then clicking ‘Spark’ to open the Theme popup, from which you can select the Halo theme:

We don’t need to run our app to see the changes since they’re visible in the design view:

This shows that Spark has a different skin set to Halo. Previously in Flex 3 skinning one can define a custom button style by setting the styleName property of the

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Button.html?allClasses=1#sparkstyleSummary

Adobe Flex4

trace — Thu, 22 Jul 2010 20:16:42 +0000

I am teaching myself Flex 4 and will be documenting a series of examples as I go through the process. If you have not yet heard of Adobe Flex, here is a quick overview:

Flex is a collection of class libraries released by Adobe for the purpose of building rich internet applications
These classes are built ontop of the existing core Flash classes, such as Event and Sprite and are referred to as the Flex SDK [1]
Flex can also be used to build desktop applications through the use of Adobe AIR [2]
Adobe’s proprietary program for creating Flex applications is Flash Builder, although there are other free open source alternatives

[1] Flex SDK (Software development kit): software framework that extends the existing Flash classes and runs in the Flash Player
[2] Adobe Integrated Runtime (AIR) is a cross-platform runtime environment for desktop applications

Flex started gaining popularity around 2005/2006 with the Flex 1.5 SDK. The new Flex 4 SDK was released in March 2010 along with Flash Builder (previously called FlexBuilder).

In my examples I will be looking at a brief introduction into the new Flash Builder IDE [3] and Flex 4 classes. Next I’ll look at migrating an application from Flex 3 to Flex 4.

[3] Integrated development environment (IDE): a program / environment consisting of a collection of tools that assist with coding and developing applications

To follow these examples I would recommend that you install a version of FlashBuilder. The full trial is valid for 60 days:
http://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder

A free alternative for a Flex development environment is to use Eclipse with the Flex plugin:
http://www.seanhsmith.com/2010/03/29/flex-for-free-setting-up-the-flex-4-sdk-with-eclipse-ide/

Another alternative is to use your favourite code editor and compile Flex with the command line compiler:
http://flanture.blogspot.com/2010/04/running-flex-4-sdk-and-flashdevelop.html
http://www.steamed-design.com/2009/07/free-flex-ide.html

Here is a comparison between FlashDevelop and FlexBuilder. Note that it compares FlexBuilder, the predecessor of the new FlashBuilder, which has a great improvement in performance:
http://cameronellis.posterous.com/flex-4-vs-flashdevelop-3

FlashBuilder is free for students and eligible educational institutions:
http://www.adobe.com/devnet/flex/free/index.html

To wet your appetite, here are some examples of what can be done with Flex:
http://flex.org/showcase
http://flex.org/tour
http://bkflex.wordpress.com/showcase/

Announcements

admin — Sat, 08 May 2010 09:10:57 +0000

Broken ZIP File Issues
Some of the zip files you have downloaded are either corrupt or broken. I am in the process of replacing files with working ones. If you need a file, please contact me and I will send it to you. Alternatively, try the download again.

Internet Explorer v8 Compatibility Issue
If you are running Internet Explorer v8, please use Compatibility View to view this site.

New Author
I would like to welcome “trace” who has taken on the role of co-author. I wish you many inspirational posts!

Please report broken links

AS3 Dynamic Object Alignment

admin — Sun, 07 Jun 2009 20:30:44 +0000

If you are running your SWF file at 100% of the browser window’s size, you can use this example to dynamically position objects on the stage based on the window size i.e. when the browser is resized, all objects will dynamically move to their allocated positions relative to the window size.

(This file will open in Flash CS3) (Preview File)
Get Source

Out of action for a bit

admin — Mon, 04 May 2009 06:05:27 +0000

I recently started a new job, which I have been dedicating all of my time to. I will resume posting soon.

Please be patient. there is more to come.

AS3 XML Random Banner Rotator

admin — Tue, 17 Feb 2009 09:22:38 +0000

Here is a useful banner ad rotator. It loads a random image or swf file via XML everytime the page loads or is refreshed.

I have included error handlers for the XML file and banners.

(This file will open in Flash CS3) (Preview File)
Get Source

AS3 XML Scrollbar Class with CSS

admin — Wed, 04 Feb 2009 21:09:35 +0000

I was asked if it is possible to apply external CSS properties to the XML instead of applying the formatting within the XML document itself.

Flash offers limited support for CSS properties, but I have used as much as I can.

I have also embedded multiple styles of the font, so you are able to apply normal, bold and italic styles to the text field via the stylesheet.

If you want to add error handlers for the XML and CSS files, please have a look at my XML News Ticker code.

(This file will open in Flash CS3)
Get Source

AS3 Simple Picture Slideshow

admin — Tue, 03 Feb 2009 10:35:21 +0000

I was thinking about the simplicity of swapDepths() in ActionScript 2.0 and thought that you might be curious as to how one swaps the depths of objects on the stage in ActionScript 3.0.

I have created a practical example which swaps the depths of images on the stage at regular intervals to create a slideshow. I have used the Tween class for the transition effect. My example makes use of:

setInterval() – Swap pictures at a specified time interval.
swapChildrenAt() – Swaps the depths of two pictures at specified index positions.
getChildAt() – Returns the picture at the specified index position.
Tween() – Used to tween the position of the top picture.

(This file will open in Flash CS3) (Preview File)
Get Source

Using trace() in FlashDevelop

admin — Fri, 09 Jan 2009 15:21:19 +0000

One thing which bugged me for a bit was not being able to trace to the output panel using trace(). However, FlashDevelop has its own method of tracing messages to the output panel.

Just add import org.flashdevelop.utils.FlashConnect;to your code and whenever you want to trace a message to the output panel, simply use FlashConnect.trace('your message');

That’s it.

Intro to FlashDevelop

admin — Fri, 09 Jan 2009 15:14:46 +0000

Although I have played with it in the past, I have started developing using FlashDevelop, which is “a free and open source (MIT license) code editor”.

It is a fantastic environment for ActionScript 3.0 coding and the compilation of SWF files. A big advantage of coding in FlashDevelop apposed to the Flash IDE is speed, code completion and code generation. FlashDevelop is an alternative to Adobe Flex which costs around US$250 and FlashDevelop uses the Flex SDK anyway.

I still use the Flash IDE and timeline based coding, however, I feel that completely dynamic projects are best compiled in FlashDevelop.

Have a look at FlashDevelop’s features or view the feature tour.