Professional Adobe Flex 3: Creating an ActionScript Application
Reader Level:

In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by  Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This a landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.

In a Community MX exclusive, the following is an excerpt from Chapter 6: Using Flex Builder 3. In this tutorial you will build a simple ActionScript application, and learn all about the undocumented [SWF] metadata tag to configure the Flash Player publishing properties.

Flex Power Tools: Using Markers In Flex Builder 3 - Part 1
Reader Level:

In this instalment of the Flex Power Tools series, we'll take a look at using markers in Flex Builder 3, to increase coding efficiency and manage your project development. In the following tutorials, you will learn to build a simple RSS reader using blog feeds from all of my fellow authors on the upcoming book Professional Flex 3 by Wrox publishing. In doing so you will learn navigate the project code, annotate the code with to do actions, and abstract part of the code into a Flex component.

In this first part, you'll learn how to navigate through the code using the Marked Occurrences and Bookmarks tools in Flex Builder. In Part 2, you'll mark to do items on the project using the Tasks tool, and complete the RSS component for the project.



The Flex Power Tools Series:
Flex Power Tools: Explorers
Flex Power Tools: Word Wrap for Flex Builder (and Eclipse)
Flex Power Tools: Using Markers in Flex Builder 3 - Part 1

Creating a Flex Application with Source View
Reader Level:

Creating a Flex application with Source View is simple, but may not be entirely obvious for the beginner. This Flex 3 tutorial will show you how to create a simple RSS reader in Flex using feeds from all of my fellow authors on the upcoming book Professional Flex 3 by Wrox Publishing, compiled with a source view page accessible through the Flash Player right-click menu. As a bonus, you'll even learn how to substitute a custom URL for the default view source location.

Flex Builder 3 Tip: Migrating a Workspace
Reader Level:

Every once and a while there comes a situation where you need to migrate a whole workspace full of Flex projects over to another drive, or another directory. Flex Builder only supports importing projects, not workspaces, so this is not as easy as it sounds. This brief tutorial shows you how to do it simply and headache-free. We'll also cover some gotchas and best practices for managing Flex Builder projects.

Developing a Flex-free AS3 Project for Flash Player 10 in Flex Builder 3
Reader Level:

So you're developing an ActionScript 3.0 project, without using Flash components or the Flex framework, aimed at Flash Player 10. You could do it in Flash authoring, or you could do it in a third party code editor. But did you know you can also do this in Flex Builder?

This tutorial aims to show you that Flex Builder is not just for Flex projects: it can be used for pure ActionScript 3.0 projects, without accidentally using any classes or features of the Flex framework, compiled and deployed for Flash Player 10.

Developing for Flash Player 10 in Flex Builder 3
Reader Level:

As a Flex developer, keeping up with new advances in Flash Player 10 is essential. Thus, it's nice to be able to build to the latest Flash Player, without waiting for the next major release of Flex Builder. This article will show you how to get Flex Builder 3's code assist to recognize Flash Player 10 classes, and to compile for and check for the presence of the Flash 10 Player, without a lot of mucking about with configuration files.

Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Reader Level:

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

In this article, we will delve into Flash-Flex integration on a more intimate level, using both Flash and Flex in a completely integrated development workflow. Using David Stiller's Click-and-Paint tutorial as a basis for our enhanced application, we will convert a timeline-based Flash project into a class-based project, but using Flex Builder as the code editor. Essentially using the Flash IDE as the assets editor and SWF compiler, and Flex Builder as the ActionScript 3 editor (without using the Flex compiler).

In this article, you will learn how to set up a Flex project workspace to enable the editing of Flash IDE-compiled ActionScript 3 class files. In doing so, you will no doubt discover why Flex Builder is a much more powerful tool for ActionScript class editing than the Flash Actions panel. As one of my Flash colleagues is fond of saying, "Once you go Flex, you never go back." :) But this isn't about making converts to either Flash or Flex development. Whatever your specialty, this series is here to show you that with a little ingenuity, you can have your cake and eat it too.


Flash Actions panel or Flex Builder: for code editing, there is no contest.

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Reader Level:

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

Flex presents developers with a suite of tools which makes coding applications for the Flash Player a real treat. However, there are times you want to create a skin in Flash, and port it into a Flex application. Not merely embedding static images into your Flex application, but utilizing flexible, responsive skin assets.

In this first article, we will design a skin in Flash CS3 for a Flex component, which is able stretch intelligently using a concept known as scale-9. We will look at several techniques for designing assets in Flash using scale-9 effectively, avoiding certain important gotchas along the way. We will also demonstrate how one Flash skin file may be applicable to multiple Flex components. In the following article we will implement this skin for a Flex custom panel component with drag and resize handles.


The completed Flash-Flex component skin.

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Flash-Flex Integration - Part 1: Workflows
Reader Level:

Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.

In this first article, we will introduce the topic by looking at where certain Flash and Flex development scenarios might need to converge into an integrated Flash-Flex workflow. We'll also look some typical strategies to meet the needs of certain Flash Platform development methodologies.

A bird's eye view of the Flash-Flex Workflow.

The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex

Flex 101: Part 15 - Simple Controls
Reader Level:

Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.

In this article, we will depart from the event system and look at building applications by examining the use of various components in the Flex Framework. We will build an application using a grouping of components that might be called simple controls: Label, Button, CheckBox and Image. Along the way we will take a look at a few best practices for building Flex applications.



The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon

Designing Look and Feel with the Flex 2 Skins Template
Reader Level:

Flex Builder 2 has many powerful ways of customizing the appearance of its components. Each component has many style attributes that can be tweaked to drastically change the look-and-feel of your application. Sometimes, however, you may find that these attributes are insufficient in giving you the complete look you are going for. In addition to styling with attributes, you can also define skins. Skins are treated as concrete assets that represent the entire appearance of a component. They're usually the easiest and most controlled solution for maximum visual control. In this lesson, we will look into skins and skin templates for our Flex 2 components.

This lesson adds to the discussion of component styling as started from the previous article, Designing Look and Feel with the Flex 2 Style Explorer.

Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Reader Level:

When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the sixth lesson of this series, we will define custom effect triggers to our component for applying animated effects.

The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers

Flex 101: Part 8 - AS3 in MXML
Reader Level:

Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.

In this article, we take a look at combining ActionScript 3 and MXML together in the same document. We will examine how to define methods and properties in the MXML, and how to make bindable custom properties. And finally, we'll look at how to include external ActionScript code into an MXML document.

The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon

Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Reader Level:

When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the fifrth lesson of this series, we will add styles to our component for customizing its look and feel.

The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers

Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Reader Level:

When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the fourth lesson of this series, we will look into the steps involved in exposing properties for manipulating our component.

The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers

Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Reader Level:

When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the third lesson of this series, we will use event dispatching to allow our component to talk to others.

The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers

Flex Community MX RSS Reader - Part 2
Reader Level:

XML (eXtensible Markup Language) has been around for quite awhile and is used from anything as common as RSS feeds to sharing data with web services. Working with XML is actually not that difficult. Consuming XML within Flex is even easier with the use of the HTTPService object.

Building upon our last article, we will add some interactivity to our Flex CommunityMX RSS Reader by actually looking at how to retrieve an use an XML feed with a DataGrid, as well as explore using bindings to bind a TextArea to the columns of the DataGrid so that we can display all the results from our XML DataSet and filter on a selection to preview the contents of an article.

The Flex Community MX RSS Reader Series:
Flex Community MX RSS Reader - Part 1
Flex Community MX RSS Reader - Part 2

Flex Community MX RSS Reader - Part 1
Reader Level:

If you have an RSS Reader then you might already know that Community MX provides a RSS feed located here, which you can subscribe to. Also, whenever you perform a search on a particular topic with the Community MX site you have an option to view the results as a RSS feed at the bottom of your search results.

We are going to take this RSS feed and build a RSS Reader in Flex that, by default, will return the last 30 days of content. We will provide the user with a search capability to filter the results from Community MX which will display in a data grid the Title, Category and Publish Date. The data grid will give the user the ability to sort the columns headers as well as rearrange the column orders. Once the user highlights and selects an article, we will display the description of that article along with the link to where the full article can be found.

We will be doing this in a series of steps. So let's get started by creating our Flex project, which we will call "CMXRss". If you are unfamiliar with how to create a Flex project please refer to the following articles:

Flex 2.0 - Part 1: Exploring the IDE
Flex 2.0 - Part 2: Building a Simple Application

The Flex Community MX RSS Reader Series:
Flex Community MX RSS Reader - Part 1
Flex Community MX RSS Reader - Part 2

Flex 2 - Part 2: Building a Simple Application
Reader Level:

In our last article we took a look at the Adobe Flex Builder 2.0 IDE. In our last article we took a look at the Adobe Flex Builder 2.0 IDE. We discovered that, built upon the Eclipse platform, most Open Source, Actionscript and ColdFusion developers can now take advantage of using the same integrated development environment to develop most any application. Yet just how easy is it to develop a Flex application within the IDE? We will look at just that as we develop our very first Flex application. You may be pleasantly surprised at just how easy it is.

Flex 2.0 - Part 1: Exploring the IDE
Reader Level:

If you have been doing ColdFusion development for awhile then you have probably experimented with or created ColdFusion Flash Forms. That being the case then you have been working with Flex Lite. However, as you have probably discovered, Flash Forms can be difficult to work with, even harder to debug and all around not fun. Until now. The buzz around Adobe Flex 2.0 has caused ColdFusion developers to stand up and take notice. The Interface itself is built on the Eclipse platform and makes developing Flex applications and components very easy and fun. This article is the first in a series that will take you thru the Flex interface, developing Flex applications and components, tips and tricks, and best practices for using Adobe Flex 2.0. Part 1 starts with a guided tour thru the Flex interface and how you setup your first Flex Application.