Explore the Premium Content

No-database Flash-PHP Chat. Part I: Creating Basic Chat Functionality

Objectives

The fact that you are reading this means that you are interested in building a web-based chat application.

If you haven’t done so already I would suggest researching some of the options you have in this area: Java applets, XML socket based applications, instant messengers, Flash Communication Server (Flashcom), and others –each of them could be a solution you are looking for.

Read More

Changing the appearance of components

Flash MX introduced us to the world of components. It shipped with a number of UI components that were similar to the form controls we use in HTML pages – checkboxes, radio buttons, drop down boxes etc.

The release of Flash MX 2004 changed the way components are structured and it uses what we call Version 2 architecture. Many of the previous UI components have been upgraded for the new architecture. If you have the professional version of Flash MX 2004, you have extra UI components like the DataGrid and Tree as well as data components. It’s important that you don’t mix your version 1 and components and that you set your publish settings correctly. You can find out more about component versions and the Flash player at

http://www.macromedia.com/devnet/mx/flash/articles/v2component_migration02.html

When you use the Flash MX 2004 components, they'll appear in the standard grey colour with a green highlight. This component design is called the Halo theme. A common task for designers and developers is to change the default appearance to something a bit more interesting.

In this article, we'll look at the different ways that you can change the visual appearance of Flash MX 2004 components. We'll look at:

  • Setting styles with ActionScript – both globally and on a single component
  • Changing skins for all components
  • Changing skins for a single component

The tutorial assumes that you are using Flash MX 2004 Professional and that know how to add ActionScript to a movie.  It also assumes that you are familiar with using and configuring components with the Component Inspector.

Before you start, make sure you have downloaded the 7.2 patch for Flash (code named ellipsis) as it contains updated help documentation for component styling.

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 starter file components.fla as well as the completed file components_completed.fla.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Read More

Creating a MyLinks manager with Flash MX 2004 UI components

A component is basically a movie clip that can be reused in your Flash projects.  You can drag a component onto the Stage and quickly change its settings to create applications in Flash.  You can configure the way components work either through the Component Inspector panel or by writing ActionScript.  Flash MX 2004 ships with a number of standard User Interface (UI) components that you can use to build simple forms-based elements.  You can also buy components from third party developers or create your own.

Components were first introduced in Flash MX but they changed with the introduction of ActionScript version 2 in Flash MX 2004.  Consequently, you can't use Flash MX 2004 components with ActionScript 1.  You can find out more about which components to use with which version of the Flash Player over here.

The professional edition of Flash MX 2004 includes extra UI components such as the Accordion, DataGrid and Tree as well as a set of Data components, used specifically for working with dynamic data.

In this tutorial, we'll create a MyLinks Manager application with some of t he UI components that come with Flash MX 2004.  The application will store a list of favourite Web site links and a comment about each one. We'll be able to add and delete links as well as pop up a link in a new browser window. The information will be saved in a SharedObject so that it can be reused.

You'll learn how to add components to the Stage and customise them with the Component Inspector. You'll also learn how to set component properties within ActionScript and how to assign eventListeners to buttons. Finally, you'll learn about SharedObjects and use one to store information.

The tutorial assumes that you are using Flash MX 2004 Professional and that know how to add ActionScript to a movie.

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 starter file myLinks.fla as well as the completed file myLinks_completed.fla.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Read More

Building a Flash MP3 Player part 2

In part 1 of this tutorial series, we used Flash MX 2004 to build an MP3 Player. The player used functions to load a list of MP3s from an XML file into Flash. It allowed us to play, stop and rewind the songs as well as increasing and decreasing the volume.

In Part 2 of the tutorial, we'll build the same MP3 Player using AS2.0 classes. It'll be useful if you're looking to extend your skills in this area. If you haven't completed part 1, it might be a good idea to do so before starting this tutorial.

The tutorial assumes that you are working with Flash MX 2004 Professional and that you know how to write ActionScript. You'll learn how to create custom classes in Flash and use them to load the MP3 player with songs from an XML file.

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 starter file MP3s001.fla as well as the completed file MP3s001_completed.fla and the finished class files.  You'll need to supply your own MP3 files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Read More

Building a Flash MP3 Player part 1

Flash comes with some great features for working with sound. One useful aspect allows you to dynamically load MP3 files into a Flash movie. Flash can stop and start the song as well as controlling the volume.

In this tutorial, we'll use Flash MX 2004 to build an MP3 Player. The player will show a list of MP3s and allow you to play, stop and rewind the songs. We'll also add a volume controller. Most MP3 players require you to load the mp3 files into Flash but in this tutorial, we'll store the songs in folders and use an XML file to tell Flash where everything is located.

Advertisement

This cool Dreamweaver extension lets your users enjoy a great MP3 player on your website  within a few clicks and with no Flash knowledge at all! Just select your favourite songs and a fancy skin and the extension creates a Flash MP3 Player for your website. The song title is displayed together with all the necessary controls in a cool fully stylable interface.

Get it now read more

 

 

 

In Part 2 of the tutorial, we'll build the same MP3 Player using AS2.0 classes. The second tutorial is aimed at anyone who is looking to extend their skills in the area.

This tutorial assumes that you are working with Flash MX 2004 Professional and that know how to write ActionScript. You'll learn how to work with the Sound class in Flash and load MP3s into Flash. You'll also learn how to extract values from a simple XML file and add them to UI components. We won't go into a lot of detail about XML as that's been covered in an earlier tutorial – Creating a Photo Gallery with Flash and XML - part 1.

You can download the completed files for 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. You'll need to supply your own MP3 files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options... and clicking the Delete Cookies... button on the General tab.

Read More

Creating a Flash Date Picker for HTML pages

Working with date fields is one of the biggest frustrations for Web developers. You have to make sure that users enter a date in the correct format. For example, in Australia, we put the days first whereas in America the month is entered first. You also have to check dates for invalid entries e.g.  31st February. 

If your date field is in Flash, MX 2004 Professional includes a DateField component to help with this problem. The component is made up of a text field with a calendar icon on the right hand side. You can't enter text into the text field. Instead, you have to click the icon to bring up a date chooser.  After you have selected a date, the date chooser closes and the value is transferred to the text field. Providing you've set up the component correctly, it's impossible for the user to enter an incorrect value.

But how can you solve this problem if you're working in an HTML page? You can still use Flash to enter dates in your Web forms. In this tutorial, we'll use the DateChooser component that comes with Flash MX 2004 Professional. We'll add an icon to a Web form that pops up a Flash movie containing the DateChooser. Then we'll use some JavaScript to send the value back to the Web form. Once you've developed this movie, you can add the functionality anywhere in your Web projects with a few lines of JavaScript.

This tutorial assumes that you are working with Flash MX 2004 Professional and that know how to work with ActionScript. In this tutorial, you'll learn how to send variables into Flash with FlashVars. You'll also learn how to call a JavaScript function from within Flash as well as how to use JavaScript to add a value to a Web form.

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 datePicker_completed.fla, form.htm and datePicker.htm.

Read More

Creating a web poll in Flash MX 2004 part 4

Welcome to the last tutorial in this series on Creating a web poll in Flash MX 2004. The tutorials have worked with a simple Web poll application. We started by looking at how we could use various data sources for our application – text and XML files and a database. We used functions written in AS2.0 to populate the application, record the vote and display a chart of all responses.

In the third tutorial we created two custom classes for our Web poll application. By the end of that tutorial, we had populated the application with information from a database. This tutorial extends the classes to record the vote and display a simple chart of responses.

As with the last tutorial, you'll need some kind of web server and a server-side language like PHP, Cold Fusion, ASP or ASP.NET. The examples in this tutorial use VB.NET, as I'm an ASP.NET developer. My own computer is set up to use IIS 5 as the Web server and it has the .NET 1.1 framework installed.

You can download the files for 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. It contains the source files you'll need for the tutorial as well as the completed files.

You can either start with the class files from the previous tutorial - Poll.as and PollResponse.as – or use the files provided in the resources zip file. Open these files in Flash as well as the file pollclasses2.fla. Just make sure you don't use the files from the completed folder.

Copy all the files to your Web server – in my case, I created a folder called poll in Inetpub >wwwroot. Open and test the file pollclasses2.fla and you should see the interface populated from the database.

Read More

Creating a Web Poll in Flash MX 2004: Pt. 3

In part one of this series, we created a simple web poll application. The poll displayed a question and responses taken from an external source – either a text file, XML file or database.  In part two, we recorded the vote and displayed a simple chart. We also looked at how the results could be updated. In these two parts, we based our code on functions written in AS2.0.

In the final tutorials in this series, we are going to create the application but this time, we'll use classes in ActionScript 2.0. So, if you're looking to get started in this area, look no further than this tutorial and the one following! We'll use the same web poll application but to simplify things, we'll focus on using an Access database to provide the content.

Creating your own classes is a great approach to writing code in ActionScript. It allows you to create blocks of code that you can easily reuse throughout your work. If you work in a team, it also allows designers and developers to work separately on the same Flash project.

For this tutorial, you'll need some kind of web server and a server-side language like PHP, Cold Fusion, ASP or ASP.NET. Because I'm an ASP developer, the examples in this tutorial use VB.NET. My own computer is set up to use IIS 5 as the Web server and it has the .NET 1.1 framework installed.

You can download the files for 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. It contains the source files you'll need for the tutorial as well as the completed files.

Read More

Creating a Web Poll in Flash MX 2004: Pt. 2

In the first part of this tutorial, we looked at how you could create a simple web poll application. The poll displays a question and a list of radio buttons containing responses. The user selects a response, votes and then views a simple chart showing all responses. The content for the web poll is taken from an external source and, in part one, we looked at the different sources available to Flash - a text file, an XML file and a database.

The first part of the tutorial covered the LoadVars and XML classes and we added radio buttons to our Flash movie dynamically. I've assumed that you've completed this tutorial. If not, you might find it useful to complete it first.

In this tutorial, we'll collect the user's vote and display a simple chart. We'll also update the results in the text file, XML file and database. You'll learn techniques to add movie clips and text files dynamically as well as using the LoadVars class to update the data sources.

By the end of the last tutorial, we had created three Flash files that loaded external content, one each for a text file, XML file and database. When you have finished this tutorial, you'll be able to display a chart and update each of these data sources.

Please note if you want to work with a database or update the poll results, you'll need some kind of web server and a server-side language like PHP, Cold Fusion, ASP or ASP.NET. Because I'm an ASP.NET developer, this part of the tutorial will use ASP.NET, IIS 5 with .NET, and Access for the back-end.

All the source code is available for download.

Read More

Creating a Web Poll in Flash MX 2004: Pt. I

In this series of tutorials, we're going to create a very basic poll application in Flash MX 2004. The poll will ask a question and show a list of radio buttons containing responses. The user will select a response, vote and then view a simple chart showing all the responses received so far. This application could be useful for an Intranet or even a web site.

We'll want to ask new poll questions from time to time so we'll read in the poll details from an external source. We could use a text file, an XML file or a database to store the information. Using one of these sources means that we won't have to open the Flash file and republish it each time we change the question. We can just update the source and the Flash movie will update automatically.

This first tutorial will look at how you could load content from all three sources and is written for ActionScript 2.0. We'll build functions to read in the poll details and display them in a Flash movie. We'll add radio buttons to the stage dynamically.

Part two of the tutorial will deal with collecting the vote, displaying a simple chart and updating the results, while the third part of the tutorial will recreate the poll application using the new AS 2.0 classes and will provide a great introduction to working with classes in Flash MX 2004.

Please note if you want to work with a database or update the poll results, you'll need some kind of web server and a server-side language like PHP, Cold Fusion, ASP or ASP.NET. Because I'm an ASP.NET developer, this part of the tutorial will use ASP.NET, IIS 5 with .NET, and Access for the back-end.

All the source code is available for download.

Read More

Developing Flash/Database Interaction using Dreamweaver. Pt IV: Creating and Deleting Records

This is the last article in the series on developing Flash database-driven applications using Dreamweaver. Over the course of the articles we've been working on a simple user management application involving Flash on the front-end and PHP/MySQL on the back-end.

So far we have built a basic Flash interface (we've been concentrating mostly on the ActionScript code driving it rather than the aesthetics) and implemented some common web application functions.

In the first article we created a basic authentication mechanism, while in the second we built a protected page that extracted information from the database. Last week we expanded the functionality a bit further and added an update mechanism to the application.

All the way through the series we've been using Dreamweaver MX 2004 to do the hard coding work and have created a set of "Flash services" – web pages with server-side code which facilitate communication between our Flash interface and our database.

The subject of today's article is the enhancement of our application by adding the functionality that is obviously missing from our application – the ability to create and delete records.

All the Flash and PHP source code for the series is available for download.

 

Read More

Creating a PowerPoint Style Presentation in Flash: Pt. 2

This tutorial picks up from Creating a PowerPoint Style Presentation in Flash: Pt.I where we looked at enhancing a presentation created from a template within Flash. In that first tutorial, we started with one of the 'out-of-the-box' presentation templates that comes with Flash and enhanced it with rewind and fast forward buttons, a slide counter and a progress bar to improve the user (and viewer experience).

In this tutorial, we'll work with keyboard shortcuts and save our own presentation template.  We'll also create a kiosk-style presentation that runs automatically using the setInterval action.

This tutorial assumes you understand basic ActionScript commands and are comfortable adding them to movies. Although this tutorial follows on from the first one, this tutorial comes with a complete code download.

Read More
Newer articles Older articles