Bored of HTML restrictions?? Want to break-free but don’t know how to do it? Then you are at the right place….Adobe Flex is your tool!! Flex is a highly productive, free, open source framework for building expressive applications. Flex allows you to build applications using common code base, reducing time consumption and cost of that app.
Today I have compiled a list of Best Adobe Flex Tutorials….though there are not many tutorials of Adobe Flex present, but still I have picked the best for you to get tutored!!
1- Flex MP3 Player
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.
2- Create a 3D Flickr Photo Gallery with Flex and Away 3D
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.
3- 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.
View Tutorial
4- Design a Panoramio Thumbnail Viewer in Flex
Since the dawn of graphical operating systems there have been a handful of standard user interface controls like buttons, labels, text boxes and lists combo boxes. These controls have served their jobs well, but while Vista, Windows 7, MacOS, KDE and Gnome are bringing us fresh new visual designs, developers are quite often stuck designing their own applications with controls that haven’t changed their basic function in 20 years.
5- 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..
6- 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.
View Tutorial
7- 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.
8- Flex HTTP Service
There are many ways to retrieve data in Flex, one of the easiest and most used methods is utilizing the HTTPService component. Explaining how to use this object to gather photos from Flickr is exactly what this tutorial is about. Included is an explanation of how we can send requests and handle their results using simple http web requests.
View Tutorial
9- 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.
10- 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.
11- 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.
12- 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.
13- Throw Objects by Creating a Pan And Throw 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?
14- 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.
15- 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.
16- 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.
View Tutorial
17- 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.
18- 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.
19- 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.
View Tutorial
20- Create Your Own Flash Adventure Game – Path Finding
In this tutorial we add a player to the game, and implement some path finding.
21- 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”.
22- 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.
23- Browser History and the Back Button Fun
So, how many times have you and I read something on the web that says you shouldn’t use Flash/Flex because it breaks the back button? Well I for one say fooey to this. Today I am going to show you how to fix the back button in Flex 3 and add states to the browser history. Inside the Flex 3 framework there is a nice gem that can be used, it is a singleton (for more info check out our Singleton Tutorial) class called BrowserManager. This class allows us to change the url and receive notices when the user or browser changes the url.
View Tutorial
24- Flex Custom Cursor Tutorial
To start off we are going to build the simple interface that is in the application. This will not include the little button for the source. Ok so there is a panel and two buttons, very simple. Check out the code below.
View Tutorial
25- 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.
View Tutorial
26- 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.
27- Flex & PHP Tutorial Transmitting data using JSON
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.
View Tutorial
28- Building Flex Degrafa Tic Tac Toe
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.
View Tutorial
29- 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.
View Tutorial
30- 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.
View Tutorial
31- 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.
View Tutorial