Introduction to Flex Builder 2

Welcome to the world of Flex! In this series of articles, I want to introduce you to Flex and the Flex Builder 2 software tool. Flex is an alternative way to using Flash to create SWF files suitable. It targets Flash Player 9 and works with ActionScript 3.0, which is a revision of the ActionScript language.

For developers who are used to creating applications with Flash, Flex provides a different approach – one that takes a bit of getting used to but one that provides great benefits. In fact, Flex Builder is the equivalent of Visual Studio for .NET developers so if you’ve seen or used that approach, you’ll feel right at home with Flex Builder.

In the relatively short time that I’ve been working with Flex Builder (well compared with Flash at any rate), I’ve found it to be a great way to create applications. It speeds up my development process and provides me with lots of built in controls that are easy to configure with ActionScript 3.0. It took a little bit of time to get my head around the changes but now that I have, I am excited by the possibilities that Flex offers.

In this article, I want to start by introducing you to Flex. I’ll show you how to work with Flex Builder 2 and explore the differences between Flex and Flash. In the articles that follow, I’ll show you how to achieve some common tasks in Flex Builder and we’ll create a number of different types of Flex applications.

There is no code download for this article. Rather, it’s going to step you through the process of installing and getting started with Flex Builder. Just a word of warning, if you’ve used earlier versions of Flex, it’s probably best to treat this version as a brand new approach, rather than an extension of those versions.

Read More

Captcha with Flash Forms

If you are using Internet for your daily needs you have probably seen Captcha many times, you might just not know it. If you are familiar with the term you can skip the explanation below, otherwise read on.

Ultimately, Captcha can be very useful on your HTML form, whether it’s a trivial “Contact us” page or a log-in screen to a web application processing sensitive data.

Flash forms are not as easy of a prey for the bad guys as they can’t be detected by crawlers or parsed as text.

Nevertheless, you can still benefit great deal from utilizing Captcha on your Flash forms. Why?

The answer, although simple, might not be obvious:

Any form whether it’s been designed in Flash or HTML needs a server-side script to process the submitted data. It is that script – not the form itself, of course, that requires protection from the automated submissions.

Read More

Free - Dynamic Animation with Fuse Kit

At some point, most Flash developers get a project where you have to do motion animation in code instead of tweens in the timeline.  Video games, simulations or custom UI components are obvious places where code based animation may become necessary.  But animating with code can require a lot of lines of code.

The Tween class

When Macromedia made the v2 UI Components in Flash MX 2004, they included a class used in the component infrastructure called "Tween".  The Tween class allows you to change a property (such as _x, _y, _rotation, _alpha, etc.) of a MovieClip over time, with various built in easing effects.

There are a few problems with using the Tween class.  The first is that a single instance of a Tween class can only animate one property of a MovieClip.  So, if you want to adjust _x, _y, _rotation and _alpha, you need four Tween instances (one for each property).  The second draw back of Tween, is that there are a large number of parameters needed to create an instance, so it's a long line of code.  This compounds the first problem of needing to create multiple Tween instances, but making each instance a painfully long line of code.

The last major drawback with Tween is that if you don't manage it well and clear out completed or unnecessary Tweens, you can end up in a situation where Tweens just keep on animating uncontrollably, similar to having a setInterval call run off on you when you don't clear the interval religiously.

Fuse Kit

An open-source alternative to the Tween class called Fuse Kit, written by Moses Gunesch, combines a number of previous people's work into a single and very powerful ActionScript Animation kit.  It's a kit because you can choose which assets you want to use and only those assets will be compiled into the SWF.  So if you are only going to use limited assets in the Fuse Kit, you can choose to create very light SWFs.  But if you are going to use some of the higher-end features, you'll end up with a larger SWF file, but you'll have some great code based animations.

We'll take a look at each of the classes that make up Fuse Kit and how you can use them to create some very robust code driven animation.

Read More

Consuming RSS feeds with Flash 8

So far in this series of articles about Web 2.0, we’ve looked at several ways to create Ajax-style applications. In this article, we’ll look at Flash and use it to consume RSS feeds. Like Ajax, Flash allows you to refresh one part of the interface in a Web page without reloading the entire page.

Due to security restrictions, Flash can’t consume data from an external source in another domain. So we’ll need to use a server-side file to proxy the RSS feed locally. That way, Flash will think that the data is located in the same domain as the SWF file. I’ll proxy the data using an ASP .NET file but you could also use PHP, ASP or ColdFusion for this task. If you want to find out more, you can read the TechNote at the Adobe Web site - http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=tn_16520.

Because we’ll be using a server-side file, you’ll need to run this example through a Web server. I’ll be using IIS (Internet Information Systems) on a PC but you could use other Web servers. You’d just need a different proxy file. In IIS, all Web sites exist as a folder in C:\Inetpub\wwwroot and I’ll be using the folder DMXZone at that location. I have to use http://localhost/DMXZone in the address to load the Flash file correctly.

The tutorial is written using ActionScript 2 and Flash 8. It doesn’t use a class-based approach. Rather, it uses a series of functions located within the Flash file. I’ve done this for simplicity as many people starting with Flash don’t come from a programming background and find it tricky to work with classes.

You can download the files for the article 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.

Getting started

Download the resource files and copy them to a folder called DMXZone within your Web server. Open the starter file FlashRSS_starter.fla in Flash 8. You can see that the interface consists of a ComboBox component that we’ll use to display a list of feeds. It also includes a TextArea component with the html property set to true in the Parameters panel. That will allow us to include simple HTML tags in the items.

When you publish this file, it should look something like the following screen shot – not pretty but very functional!

Read More

How to make a crystal spheres menu in Flash

In this easy Flash 8 pro lesson I will explain you how to design a simple but very pleasing to the eye menu for your Flash website. It is very easy to do it! Amongst other things, you will learn the following:

• How to use some simple color gradient fills together with blending filters to create nice crystal spheres,
• How to easily duplicate those spheres to save time,
• How to make buttons out of these spheres and add labels to them and
• How to create a 3-D rotation effect using simple motion tween animation techniques, without having to resort to any 3-D programs, and more.

You can see three examples of the crystal sphere menu on the screenshot below. The first one shows just how cool these objects look:), while the second and the third one are interactive – open the file crystal_spheres_menu.swf and try rolling your mouse over them and also clicking on them.

You are going to create buttons like these in this lesson.

For more great tutorials check out:

Read More

Introduction to Flash and Flex

Introduction to Flash and Flex

One of the key features of Web 2.0 applications is that they provide a separation between the data within an application and the interface. In some cases, these applications can consume data from a different domain entirely. This is possible because of web standards and standard approaches like RSS and Atom.

When consuming an RSS feed, the specification details how the information will be delivered. Developers can use this knowledge to construct the application interface. Information provided through Web services is available through a publicized API. You can see examples of this in Google and Amazon.

Read More

Building a bar chart in Flash part 2

In the second part of this tutorial, we’ll complete the bar chart class that we started in part 1. This bar chart uses the drawing API to create a chart from a set of values and labels. In part 1, we worked with default values and labels but in this part, we’ll modify the code so that you can add your own values, labels, title and bar colour.

At the end of the last tutorial, we’d created the axes for the chart and calculated the scaling for the y axis. We’d also added the chart title. In this tutorial, we’ll add the bars to the chart. First we’ll graph the default values but we’ll then modify the code so that the class accepts user input. You need to have completed the first part of the tutorial before starting this one.

This tutorial assumes that you have at least Flash MX 2004 and that you’re familiar with writing ActionScript. You won’t be able to complete the tutorial with an earlier version of Flash. If you’ve had some exposure to classes that would help, but it isn’t absolutely necessary.

You can download the 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 that includes the starter and completed files.

Read More

Creating a line chart component – part 2

In part 1 of this tutorial, we started to create the line chart component. We created a movie clip containing the assets that we need as well as the class file. We added some private variables and created a constructor function as well as an init function to set up the component.

In part 2, we’ll finish off the line chart by adding the public parameters. We’ll do this using setter methods and the createChildren function. You’ll see how to use the drawing API to create the axes and the line.

This tutorial uses Flash 8 and ActionScript 2 with the version 2 component architecture, so you’ll need Flash 8 to view my completed files. You can still create the component using Flash MX 2004.

The tutorial assumes that you understand the general process of creating a component. If not, you might want to go back and look at the first article in this series. I have also assumed that you know how to write AS2.0 class files.

You don’t have to have completed part 1 of the tutorial first before starting on this article, but it will help. If you haven’t done so, the resource files included with the tutorial contain the files as we left them after the first tutorial. In that case, you’ll need to unzip the resources and rename the files LineChart.as and LineChart.fla.

You can download the starter files from part 1 as well as the completed component files 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.

Read More

Developing Flash/Database interaction using Dreamweaver. Pt I: User Authentication (updated)

Have you ever wanted to build a database-driven Flash application but felt confused by the "database-driven" part?

Are you easily scared by the terms "Databinding", "Flash Remoting", "Web Services" and "Delta Packets"?

If your answer is "Yes" to both questions then you've come to the right place.

In this short series of articles we'll show you how easy it is to develop Flash / Database interactivity using the visual tools of our favorite web editor. Using Dreamweaver, we'll make Flash "talk" to a database in order to create, view, update and delete records.  You'll also learn a few useful tricks to help you manage your Flash application projects in a more secure and efficient way.

In this first article on the subject we're going to look at building a generic authentication mechanism, which is simple and efficient enough to be quickly integrated into almost any type of small web application.

Read More

Creating a line chart component – part 1

Creating a line chart component – part 1

Welcome to the last topic in our series of tutorials about creating components. In this tutorial, we’ll create a more complicated component compared with the previous examples. We’ll make a simple line chart component that allows the user to add titles, change the line colour and plot values and labels. We’ll draw the line and chart axes dynamically using the Flash drawing API.

Specifically, I’ll show you how to:

• Plan the component so we determine what parameters the user will be able to set
• Create the line chart movie clip
• Create the line chart class file including the drawing methods
• Generate and use the component

You can download the completed files for part 1from 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. Read More

Building Components with ActionScript 2.0 – part 2

Welcome to the second article in this series on building custom components. In part 1, I showed you the steps required to create a custom component. In this tutorial, we’ll create our first simple component from scratch. The component will generate a simple shape – circle, oval, square, rectangle or triangle – and allow us to set the colour. You’ll also be able to size the component from the Properties panel. We’ll call this the Shape component.

In this tutorial, we’ll cover:

• Planning the component
• Creating the movie clip for the component
• Creating the class file for the component
• Associating the class file with the movie clip
• Generating the component
• Using the component in another Flash file

I’ve assumed that you understand the general process of creating a component. If not, you might want to go back and look at the first article in this series. I have also assumed that you know how to write AS2.0 class files.

Before you can complete the tutorial, you’ll need to have a good understanding of creating class files in ActionScript 2.0. I’ve used Flash 8 for the sample files so you’ll need this version if you want to explore to completed example. You can also recreate the example in Flash MX 2004.

You can download the files referred to in this 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.

Read More

Building Components with ActionScript 2.0 – part 1

Building Components with ActionScript 2.0 – part 1

This is the first in a series of tutorials about building components with ActionScript 2.0. In the first article, I’ll introduce you to the theory behind creating components and demonstrate a very simple example. Instead of building something from the ground up, we’ll learn about what you need in order to create a component. In the next article, we’ll create a component from scratch and I’ll walk you through the process in a little more detail so you have a chance to get your hands dirty.

In this tutorial, I’ll explain:

• What makes up a component
• How to create parameters for your component
• Structuring your component’s movie clip
• Creating an SWC file
• Creating an extension from your component

Before you can complete the tutorial, you’ll need to have a good understanding of creating class files in ActionScript 2.0. I’ve used Flash 8 for the sample files so you’ll need this version if you want to explore to completed example.

You can download the files referred to in this 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.

Read More