Looking for Adobe Flex tutorials? I know it’s hard to find them but fortunately I’m searching in every corner of the internet (ok, ok, maybe not in every corner) to find these tips and techniques so that you can save up some time and use it on actually learning a program, like Flex. I wish there would have been more Flex tutorials but not so many people write them. For now, 45 is a convenient amount of tutorials. Enjoy!
Flex MP3 Player tutorial
For this tutorial we’re going to use the audioManager actionscript class from dhtmlnirvana to play all the sounds.
There are several ways you can do this, but this is probably the simplest.
What we are going to do is create a drop down box which is the song list. The data for the song list is got from an external XML file using an HTTP service.
When the user selects a new song from the dropdown box, the song that is currently playings stops and the new one begins. Our actionscript class knows which song to play using an internal array of songs.
XML Basics with Flex 3
If you’re still using arrays and text files to load content, it’s time to upgrade.
With XML, you can condense a whole mess of seemingly unrelated information into a well organized and easy to read file. Today we’ll be looking at how to take advantage of this with Flex 3. This tutorial will teach how to load an external XML file into Flex and then filter the results into labels.
Create a 3D Flickr Photo Gallery with Flex and Away3D
In this tut I’ll demonstrate how to build a dynamic photo gallery using the Flickr API. To add a little extra flair, we’ll harness the power of Away3D and display the photos in a 3D environment.
Flex Snippet Tutorial – Using The TextRange Class
The guys over at Adobe have provided us with a lot of classes that simply make our job as developers very easy. Today I am going to go over one of these classes, TextRange. This class allows us to bind to one of several components and get/set properties about the text in that selection. The properties that can be modified include the text itself and the styles for the text. The namespace for this class is mx.controls.textClasses and the Adobe documentation page can be found here for further info.
Using AS3 to Build an ItemRenderer for a TileList in Flex 2
I recently had to create a custom ItemRenderer for use with a TileList using AS3. I’ll tell you, it wasn’t overly easy with the lack of documentation on the subject. Even searching several sites, I couldn’t find anything specific, but fortunately I pooled enough to figure it out and actually understand how it works.
Flex – Rotating Cube ViewStack Component
Today I am going to show and give out a cool component I have built. The component is built to make it easy to use Alex Uhlmann’s Distortion Effects in a ViewStack based component to rotate to the sides. I will show an example application and how to use the component, CubeEffect. Hopefully someone out there will find a good use for the component or at least some use of the source provided here.
Simple Flex Drag and Drop
Today I am going to run through a smallish tutorial on creating and using drag and drop in Flex using the DragManager class, which is a utility provided to make drag and drop easy. I should also mention, right off the bat, that some things like lists already have various drag and drop features built in. I however will be showing an example that is useful for any custom drag jobs you might need to do.
Flex Custom Cursor Tutorial
On our site here we are kinda obsessed with showing how to use your own cursors in everything – and so now its time for a tutorial on how to do the basic cursor manipulation in flex. In this tutorial you will learn how to replace the cursor with your own custom image. There are some more complex techniques that can be used for cursor management in Flex but I am going to hold these off for a later tutorial, as most people probably won’t need them.
How to Make Charts with Flex 3
Flex makes actionscript less of a chore and more of a design asset. One of the best demonstrations of this is the simplicity of charting with MXML.
In this tutorial we’ll take test scores from XML files and make a dynamic bar graph out of the results in no time at all. You’ll have impressed yourself by the end.
Design a Panoramio Thumbnail Viewer in Flex
During this tutorial I’ll take you through the ways in which Flex customizes interface controls. Specifically, we’ll be looking at the TileList element, styling it with Flex’s GUI toolkit.
Building Flex Degrafa Tic Tac Toe – Part 1
This is the first of a several part tutorial that is going to explain how the Tic Tac Toe application was built using Flex and Degrafa. If you haven’t checked out the introduction to the game we are going to build check out the Introduction to Tic Tac Toe using Degrafa and Flex. In this first part I am going to go over how to do some basic drawing using Degrafa and creating the game grid.
Design a Flex Form Part 1
Create a Login System with Flex and PHP
In this tutorial you will learn how to create a login system with Adobe Flex and PHP. It’s quite basic, but you should have a general knowledge of both Flex and PHP to begin with.
How to use Flex to get Music Info from Amazon Web Services
So I got bored one afternoon and made a cool little application that uses Amazon Web Services to get information about music. This tutorial will show how to connect to Amazon Web Services and use the information returned from it. This tutorial uses Flex 3.0, so in order to use this code you need to be writing a Flex 3.0 application. Most of the code should be able to be used in Flex 2.0, but no guarantees. You can go grab Flex 3.0 here.
Installing and Using Google Maps in Flex
Google has just released a Flash edition of the Google Maps API. In this tutorial you will how to install the necessary components and build a very basic map.
This tutorial will be done using Adobe Flex Builder, but you are also able to use the Flex SDK if you prefer. Google has information regarding that process on their site.
Build a XML Driven Accordion Image Gallery
The following Flex tutorial will show you how to build an accordion image gallery populated using XML datas.
Flex and Javascript – Simple Interaction
This tutorial will show you how to call javascript functions from flex and flex functions from javascript. There is a really nice example of the use of this on Google Finance, as well as a number of other google sites.
The application below gives you a little taste of what can be done between javascript and flex. You can add people to the flex application using the small form on the bottom right through javascript, and if you select a person in the flex app and click the “Javascript Display” button you will get the info back out to the small form on the top right.
Multiple uploads with jQuery and Flex or Flash
As you might know I’m currently working on a custom cms/community project and the specs state that each user should have a simple gallery. However, I’m really, really tired of uploading files the traditional way through file inputs. There is for instance no way of telling how the upload is going or preventing too big files before they are already on the server, just to name two problems. To make a long story short, it’s kinda primitive.
Throw Objects by Creating a PanAndThrow Class
In this tutorial we will be mocking up and finishing a pan and throw class that will allow us to add this effect to any element we want. To accomplish this, we will create a image viewer – but not your average viewer. Here we’ll have zooming, throwing, panning.. Almost sounds like a ninja app, huh?
Developing Flash Windows for Photoshop Using Flex
Are you a Flex or Flash developer? Have you ever wished you could develop projects to run inside Photoshop? If you answered “yes” to both questions, we want you to come play in our playground. We’ll even help you get started.
During the CS3 development cycle, the Adobe and Macromedia teams melded together. One of the initial questions was how could one capture the synergy of both company’s flagship products, Flash CS3 and Photoshop CS3. There were lots of visible ways the teams worked to make the products works well together for the end user. However, there’s a hidden integration feature for developers that many people are just discovering: Flash runs inside Photoshop CS3 and can drive the Photoshop scripting engine.
Creating a Digg client with Adobe Flex in 10 steps
Digg is one of the more popular examples of the trend towards social browsing. It provides a database of news and video links, ranked by the community, and is a good way to find some of the gems hidden out there on the web.
The Digg database can be queried via it’s API. At the moment there is no facility for submitting links programmatically (although this is said to be in the works), but you can certainly get access to those links already submitted.
Digg does not have an official ActionScript API, but a 3rd party API is available. This tutorial will step you through the process of using this 3rd party API to create a simple Digg news display.
Control a Flex Video Application Using Mouse Gestures
Almost all PC user interfaces are designed around the notion of moving a cursor and clicking on objects. Buttons, menus, combo boxes, lists and every other standard UI control work in this way. The mouse is used to position the cursor, and the position of the cursor is used to perform an action.
It’s a design paradigm that has worked well, but lately new technologies like touch screens and motion sensors (think the Wii) have challenged the notion of using a mouse, or even having a cursor on the screen at all..
Flex 3 Basics – Introduction to Data Binding
It sounds a lot like a buzzword for developers, but what is data binding exactly? Is it even useful? In short, absolutely. Chances are you’ll be working with some sort of data in Flex. With data bindings, a developer can link data automatically between sources and targets. Still confused? Imagine a label set to automatically display the value of a selected button. It’s a simple concept that has an incredible amount of usefulness when building RIA’s. On second thought, let’s just build it.
Build a Photo Viewer Using Flex and the Flickr API
In this tutorial you will learn how to use the as3flickrlib library to create a Flash Flickr photo viewer.
Flex 3 Basics – Data Grids with XML
The data grid component is one of the best examples how the Flex framework makes ActionScript more accessible. It is surprisingly simple to arrange large amounts of data without miles and miles of code.
It has plenty of usefulness in debugging projects which require extensive loaded data. The simplicity of inserting this component makes it a great way to display the raw information in most external files without having to go back and forth in debug mode.
Working with the Flex DataGrid and Nested Data Structures
It often happens that the data which needs to be viewed/presented in a Flex DataGrid comes from an XML file or JSON with more than one level of nesting. Unfortunately, by default, the Flex DataGrid allows you to display only single level nested object arrays.
This tutorial shows how you can extend the Flex DataGrid class to accomodate more complicated data structures. It will also show you how to make all the columns sortable, even when using nested data structures.
Using Flex, PHP, and JSON to Modify a MySQL Database
To follow-up on the Flex and PHP tutorial we did earlier I thought it would be nice to do a complete tutorial on php, mysql, flex, and json. This tutorial should show a decent way to send data in a database to and from flex to php using json. I will explain this in more detail in just a moment.
First lets take a look at what will be the result of this tutorial and see what it does. Below we have a simple flex app with a datagrid component and a button. The datagrid is filled with some sample data, which, in this case, is some information about a few of the tutorials on this site. The info includes the title, the author, and a rating for the tutorial, and all of this information is pulled from a database on the webserver when the app loads.
Working with the Debugger in Adobe Flex Builder
Many Flash developers use either the Alert class for debugging, or trace statements due to associations with Flash. Flex does have a true debugger and it’s a great tool. I’m going to demonstrate how to get to grips with it in this tutorial.
Creating a countdown clock with Timer
Are you trying to find a quick and easy way of creating a countdown clock in Adobe Flex. Don’t look any further
Flex & PHP Tutorial – Transmitting data using JSON
To make sure we don’t get too stuck in a rut with our tutorial posts I decided to branch out a little bit and talk about Adobe Flex 2.0. I recently spent a lot of time figuring out how to do this. Basically what I am going to go over here is how to use php and json to send data to your flex application, and then how to use that data in Flex.
This is actually a lot easier than it seems because PHP and Flex both have functions to handle json data transmissions. For Flex, the one thing you need to make sure is that you have the corelib from Adobe in order to use the JSON functions – this can be found at Adobe Flex coreLib. This can be added to a project in Flex builder by going into the properties of a project then to “Flex Build Path” and adding the .swc to the library path. For PHP, if you have a version greater than 5.2, you are all set. If not, you can either upgrade, or install the php-json extension.
Creating a Feed Reader Widget with Adobe Flex 3
In this tutorial you’ll learn how to create your own Flex feed reader application. In this case, the final result will be a simple feed reader which can be used in your blog or site to display your favorite feeds.
How to Create a Bubble Chart in Flex
Flash components have always been the most visually gratifying components on the web. With Flex, Flash has reached a whole new level of interface design, and have made it considerably easier. However, Flex lacks the array of customization options, styles, and animations that are provided by several 3rd party components. Notable among them is FusionCharts, who provide a module just for Flex. For this example, we will use this suite to create a bubble chart in Flex.
Flex – Using Item Renderers
One of the coolest and most useful features I use in Flex are item renderers. They allow us to customize how lists and datagrids display information. This tutorial is going to show how to use three different types of item renderers, drop-in, inline, and custom components. I actually used item renderers in an earlier tutorial on using Advanced Datagrid Topics to get song information. But this tutorial is going to go a bit more in depth on the topic.
Create an email form in flex with php
The following code demonstrates how to build an email form that supports some validation and that send the email by using a php script.
Dynamic Advanced Long Lists with Flex
This tutorial demonstrates how a developer can easily extend the prepackaged Flex library classes to achieve superior user interface results.
In this case, we’ll be creating an advanced datagrid which can make insanely long lists into manageable chunks and display them as paged lists. This tutorial deals with primarily AS3, but has a dose of php and mySQL to support back end functionality. The application will be able to store and recall the list’s shown columns, current page, sort orders and sort fields
Flex Tutorial – An Asynchronous JPEG Encoder
This weekend I needed to encode a rather large image as a jpeg using flex. And you know what I found? It was slow. And cpu hungry. While this was not entirely unexpected, it was disappointing. I could have dealt with the program being slow and unresponsive during the time it took to encode the image, except for one problem – after about 15 seconds, the flex app would run up against the script timeout error. You know, the error that goes along the lines of “A script has executed for longer than the default timeout period of 15 seconds.” And because of this, the jpeg encode never actually finished.
Create Your Own Flash Adventure Game – Path Finding
In the last tutorial we loaded and displayed the map that we created in the TaT map editor. In this tutorial we will add a controllable player character, and add some path finding functionality so the player can move around the map.
But before we go into any of this, we need to cover one of the classes that was briefly mentioned in the last article: the GameObjectManager.
Build a Multi-Purpose Contact Form With Flex
In this tutorial we’ll be creating a custom Flex-built contact form. We’ll be implementing many of the fantastic built-in features of the Flex framework, such as the validation methods, the alert box and datefield components to give our contact form added functionality. We’ll also look into adjusting the CSS properties to give our application a unique look and style.
Flex Tutorial – Change the List Selection Indicator
Recently we were using a TileList to show a group of images and we wanted to completely change how the selection indicator looked. We wrote the item renderer to handle all of the selection code and the only thing left to do was remove the selection indicator from Flex’s TileList control. To our surprise, however, Flex doesn’t expose a style or property to do this.
The roll-over indicator can easily be removed by setting the useRollOver style to false. The best Flex offers, style wise, for the selection indicator is the color. I guess a cheap way out would be to set the selection color to the same color as your background. This, however, doesn’t work when the background is a gradient or image that is not a solid color.
Making a custom YouTube player with Flex
YouTube has a number of official API platforms available for querying it’s video database. Flash/Flex is not one of those platforms, but that hasn’t stopped a number of 3rd party API’s being developed to fill the gap.
At first glance you might be tempted to use the as3youtube library, created by Adobe and then given to the open source community. Unfortunately this library uses the old YouTube interface, and YouTube are no longer giving out API keys for the old system. If you try to use as3youtube with one of the new keys then you’ll get the cryptic message “Bad, unknown, or disabled dev_id specified”.
Fortunately there are replacements. The as3youtubelib (the names are very similar, but it is a different from as3youtube) library works with the new YouTube interface. Using as3youtubelib we can search the YouTube video database and get the details of an individual video required to play it.
Actually playing a YouTube video requires another 3rd part library called TubeLoc. TubeLoc provides a Flex component that we can add to the GUI, and will play a YouTube video when supplied with the video id.
Build an XML Driven Contact List Using Flex 3
The goal in this tutorial is to built a contact list which loads dynamically from an external XML file. When the user selects a different contact, the data will automatically update to display properly. We’ll also be applying some basic stylesheet changes to the results and give the project a more customized touch.
Creating a Facebook photo album with Adobe Flex
This free tutorial shows you how to create a simple application that displays you Facebook photos
Flex DataGrid Selected Row Styling
This tutorial is going to to show a good method for changing just about anything on a selected row in any list based component.
In the demo application below you can see the functionality that we are building today. Really, we could have done just about anything with the selected row that we wanted. The basic idea is that we are going to build a custom item renderer to handle updating styles when the row is selected. For more info on item renderers you can read my post on Using Item Renderers. You can also grab the source for this example if you would like.
Add drag and drop support manually
This tutorial teaches how to manually add drag-and-drop interactions to your Flex application. We illustrate this by creating an application that let the user dragging and dropping gift into a cart.
Flex, PHP, JSON, MySQL – Advanced Updating
I am going to build off of the last tutorial for this so if you haven’t looked at it I would advise it. Along with only updating the data that changes we are also going to differentiate between an update and delete.
Below we have our example program which has some extra capabilities compared to the last one. The first thing you might notice is the check box at the bottom right. This will enable auto updating, meaning that the data is sent back to the server every time it is changed. Another feature that was added is the ability to delete the currently selected item. I will show the server side code for this feature but items can’t be deleted from the database in this example for obvious reasons.
If you want to receive news about articles like this one don’t forget to subscribe to the RSS Feed, become a fan on FaceBook or follow me on Twitter. Google Buzz user? You can follow me there also.
