Explore the Premium Content

Flex 2 and ActionScript 3.0 classes

In the article, Loading an RSS feed into Flex using ActionScript 3.0, I introduced you to ActionScript 3.0 and we worked through an application that displayed the content from an RSS 2 feed. We created a simple interface and configured it using ActionScript in a script block at the top of the page. You learned how to add ActionScript to a Flex application and we explored some of the new features in ActionScript 3.0.

Loading an RSS feed into Flex using ActionScript 3.0

ActionScript 3.0 is the latest version of the ActionScript scripting language which goes with Flex 2. You can only run SWF files containing ActionScript 3.0 in Flash Player 9. ActionScript 3.0 makes some major changes to the language and introduces a number of new features. If you're used writing ActionScript 2.0, you probably won't find the latest version too difficult to master.

Charting with Flex – part 2

In the previous article, I showed you the power of creating charts using the Flex charting components. We created a simple pie chart and added some styling as well as looking at some of the variations that are possible.

In this article, I want to take things one step further. This time, we'll create a column chart and display data that we've loaded from an external XML file. You'll see how to:

• structure an XML file with the chart data
• load the XML content into the application
• set the dataProvider from the loaded content
• add data series from the loaded content
• add a legend to the chart
• change the column and axis colours
• add a line to create a mixed chart type

Charting with Flex – part 1

One of the great features of Flex Builder and the Flex framework is the charting components. These components allow you to create several different types of charts using either tags or ActionScript including line, column, bar, pie and area charts. You can change the chart options and add styling.

In this tutorial, I'll walk you through the general process of creating a chart and we'll create a simple pie chart. You'll learn how to

• add and display data on the chart
• add labels and a title
• add a legend
• change the colours for each slice of pie
• create a doughnut and exploded pie chart

Displaying news items from external files using Flex

If you've built applications in Flash, you'll probably have created at least one that loaded content from an external file. Maybe a text or XML file, or even a PHP or ASP .NET file that grabs information from a database. External files are useful because you don't need to update the application each time the content changes.

You'll be glad to know that you can also load external files into Flex applications, although things have changed quite a bit since earlier versions of Flash. You can load information from text files, XML documents and even from web services.

Reading an RSS feed with Flex 2

RSS feeds are a common way for Web site owners to provide information to the public, usually as a series of news items. Each news item is provided using a standard XML language so it can be read with an RSS reader or aggregator. In this article, I want to show you how to create a Flex 2 application that consumes an RSS feed.

We'll grab the feed from the Adobe xml news aggregator at http://weblogs.macromedia.com/mxna/. This aggregator displays news items from several different sources. We'll display a list of headlines from the news feed in a List control. When we click a headline, we'll see further details about that news item. We'll also be able to open the item in a Web browser to see the full details.

Creating a Flex image gallery – part 2

Welcome to the second article in our two part series on creating an image gallery using Flex Builder 2. You need to complete the first part of this series before you start this article. In part 1, we created a simple photo gallery application that loaded external photos and displayed their title. In this article, we'll add styling to the application and load the details of each photo from an XML document.

I want to cover

• Styling the interface
• Adding a fade in effect to the images
• Creating the XML for the image list
• Loading the XML document
• Finding information in the XML document

Creating a Flex image gallery – part 1

Welcome to part 1 of this tutorial series on creating an image gallery using Flex Builder 2. In this two part series, we'll build an image gallery application that loads external images. In part 1, we'll create the application and I'll show you how to load external photos and display a title. You'll be able to use buttons to navigate through the images in the gallery. In part 2, we'll add styling to the application and load photo details from an XML document.

In this article, I want to cover the following topics:

• Setting up the project
• Creating the application interface
• Creating the list of images to load
• Showing the first image
• Creating the navigation buttons

In the second article in the series, I'll cover

• Styling the interface
• Adding a fade in effect to the images
• Creating the XML for the image list
• Loading the XML document
• Finding information in the XML document

Styling Flex components

One common requirement for developers is to be able to change the appearance of the components in their applications. In Flex, there are lots of ways that you can do this including working with CSS, ActionScript and adding skins or themes.

In this article, I'm going to explore the first two methods. I'll show you how CSS styles work in Flex and how to write ActionScript to create, modify and remove style declarations.

Even though you could use any text editor, I've assumed that you're working with Flex Builder for this article. I've also assumed that you're familiar with Flex Builder and that you've already built some simple applications. If not, you may want to go back and read some earlier articles in this series.

Using effects in Flex

For developers used to working with Flash, Flex provides some new approaches to adding visual effects to SWF files. In this article, I want to look at the effects that are available within Flex and see how you might apply them to components in your application. We'll finish up by building a simple application that allows you to apply some of the effects to an image. The application will allow you to select an effect and apply it to an image and it looks like the following screenshot.

Creating a metric conversion calculator with Flex

In this article, I want to show you how to create a metric conversion calculator in Flex Builder 2. We’ll be able to use this calculator to convert from miles to kilometres, feet to metres, pounds to kilograms and back again. You’ll see how to create a simple application in Flex and I’ll show you how to use different types of layout controls. We’ll even add a validator and a small ActionScript 3.0 function to the file.

We’ll work through the following steps:

• Creating the project
• Creating the interface
• Populating the ComboBox
• Adding a validator
• Calculating the result

Creating a basic application with Flex Builder 2

Welcome back to Flex Builder 2. If you read the first article in the series, I hope I’ve excited you about what Flex can do and that you can’t wait to create your first Flex application. So here it is!

In this article, I’ll create a very simple “Hello World” style of application. The application will display a message and a button. When the user clicks the button, the message will change. We’ll also add an image to the interface with a fade in effect. It’s a very simple application but it will introduce you to some important concepts for working with Flex Builder 2. Hopefully, it will also show you how powerful Flex is as an approach for building applications.

I’ll work through the following steps in the article.

• Creating the project
• Creating the user interface
• Compiling the SWF file
• Adding an image
• Adding a fade in effect

You don’t need to have any experience with Flex Builder at all to complete the tutorial. However, you will need to download and install the software from the Adobe site. If you haven’t done this already, you may want to refer to the article, Introduction to Flex Builder 2 for instructions about how to do this.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the completed files for the article as well as the image that we’ll add to the interface.