Monday, December 27, 2010

Free Flex Components

Flex Builder 4

1. FlexLib

- Open Source Flex Component Library

The FlexLib project is a community effort to create open source user interface components for Adobe Flex 2, 3 and 4.

Current components: AdvancedForm, Base64Image, EnhancedButtonSkin, CanvasButton, ConvertibleTreeList, Draggable Slider, Fire, Highlighter, HorizontalAxisDataSelector IconLoader, ImageMap, PromptingTextArea, PromptingTextInput, Scrollable Menu Controls, SuperTabNavigator, Alternative Scrolling Canvases, Horizontal Accordion, TreeGrid, FlowBox, Docking ToolBar, Flex Scheduling Framework

2. reusable-fx

The reusable-fx is a library of reusable flex components.

* ChartScroller adds scrolling and zooming functionality to CartesianChart
* DataGrid2CSV enables export of data displayed in DataGrid to CSV format
* MDataGrid is an extendible DataGrid with client-side filtering and searching
* SlideDown, SlideLeft, SlideRight and SlideUp defines slide effects

3. The ActionScript Data Provider Controls library (ASDPC)

Provides a set of standard user interface components written in ActionScript.

  • Easy and extensive customization (functionality, appearance)
  • Platform, framework and project neutrality (out of the box usage)
  • Generic data intergration (data provider interface architecture)
  • High-performance
  • Unit tested and well documented
  • Open-source licence MIT

ADOBE Resources

Monday, December 20, 2010

Tour de Mobile Flex

Flex Builder 4

Tour de Mobile Flex is an Android application for exploring the new Flex mobile capabilities. You can start building Flex applications for mobile devices with the Flex Hero prerelease.

Download the Tour de Mobile Flex Flash Builder Project (FXP) or get the code from github.


Monday, November 29, 2010

ActionScript 3 Objects, Properties and Methods

Actionscript 3


ActionScript objects provide a means of moving graphic elements dynamically, building applications, organizing data, and more. You accomplish these tasks by using or setting object property values and invoking object methods.

Global objects

In your Flash application there are some objects that are classified asglobal, or unique to the movie as a whole. The mouse, for example, is defined as a global object, like a Mouse object. The mouse is global because you can only have one mouse in your application and can not create an instance of it. Objects like movie clips, text fields, and sounds must be created with components and instances to be used.

Flash Global Objects:

  • Math
  • Accessibility
  • Key
  • Mouse
  • Selection
  • Stage
  • System

Object classes

A class of objects represents a group of object instances within your project that share the same basic structure and functionality. For example, all movie clip instances belong to the MovieClip class of objects

import flash.display.MovieClip;
var myMovie:MovieClip = new MovieClip();


Certain objects, such as MovieClips for example, have properties and attributes which can be configured via ActionScript. Properties are simple attributes of the object, such as its width, its height, its horizontal position and its vertical position. In order for a property to be configured you need to use the dot (.) operator to access the property and the assignment (=) operator to set a new value for it.

var myMovie:MovieClip = new MovieClip();
myMovie.x = 300;
myMovie.y = 100;

myMovie is the object, x is the property, 300 is the value


Objects also have methods, or functionality actions that the object can perform. If your object is a video object, you can tell this object to play the video. Any action that the object can perform is called a method.


var myVideo:Video = new Video();;

Some methods require additional information to execute the action. The Loader Class is responsible for loading external graphical elements into your movie, in order for it to perform the .load() method you must specify the URL of the file to be loaded:

import flash.display.Loader;

var myLoader:Loader = new Loader();
myLoader.load(new URLRequest("MyPic.png"));

Saturday, November 20, 2010

Create A Basic Contact Form With PHP and ActionScript

Creating the Form

  1. A TextInput Component for the email address of the sender named email_txt.
  2. A TextInput Component for the email address of the sender named name_txt.
  3. A TextField Component for the email address of the sender named message_txt.
  4. A Button Component named submit_btn, and Labeled Submit Message.


flash email form

The PHP Code (mail.php)

$to = "";
$subject = ($_POST['senderName']);
$message = ($_POST['senderMsg']);
$message .= "\n\n---------------------------\n";
$message .= "E-mail Sent From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
$headers = "From: " . $_POST['senderName'] . " <" . $_POST['senderEmail'] . ">\n";
if(@mail($to, $subject, $message, $headers))
echo "answer=ok";
echo "answer=error";


The Button Event Handler


submit_btn.addEventListener(MouseEvent.CLICK, sendMessage);
function sendMessage(e:MouseEvent):void
var my_vars:URLVariables = new URLVariables();
my_vars.senderName = name_txt.text;
my_vars.senderEmail = email_txt.text;
my_vars.senderMsg = message_txt.text;

var my_url:URLRequest = new URLRequest("mail.php");
my_url.method = URLRequestMethod.POST; = my_vars;

var my_loader:URLLoader = new URLLoader();
my_loader.dataFormat = URLLoaderDataFormat.VARIABLES;

name_txt.text = "";
email_txt.text = "";
message_txt.text = "You have created a contact form with ActionScript 3.0 & PHP";



Adding Form Validation

Hide the submit button until the user types the word validate

var valid:String = "validate";
submit_btn.visible = false;
validate_txt.addEventListener(TextEvent.TEXT_INPUT, textInputHandler);

function textInputHandler(event:TextEvent):void
if (validate_txt.text = valid)
submit_btn.visible = true;

The contact tab has better form controls, this just shows the basics.

Wednesday, November 17, 2010

Loading An External Video With The ComboBox Component

Flex Builder 4 Flash Video Actionscript 3


vidPicker.addEventListener(Event.CHANGE, nextVid);
function nextVid(event:Event):void
myVideo.source =;
vidTxt.text = vidPicker.selectedItem.label;
var vidSmooth:Video =;
vidSmooth.smoothing = true;

Monday, November 15, 2010

Saturday, November 13, 2010

Bezier Tween in ActionScript 3

Flex Builder 4 Flash Video Flash Video

TweenMax also introduces an innovative feature called "bezierThrough" that allows you to define points through which you want the bezier curve to travel. Use the code below and alter the bezierThrough values, adding more or less values.

import gs.TweenMax;
import fl.motion.easing.*, 3, {x:344, y:351, bezierThrough:[{x:78.2, y:198.15}, {x:260.05, y:93.75}, {x:348.8, y:123.3}], ease:Bounce.easeOut});

Click on the ball to start the tween

  • x:344, y:351 (The tween x & y values)
  • x:78.2, y:198.15 (1st Bezier point)
  • x:260.05, y:93.75 (2nd Bezier point)
  • x:348.8, y:123.3 (3rd Bezier point)

Wednesday, November 10, 2010

Get Adobe Flash Media Development Server For Free

Flex Builder 4 Flash Video

Flash Media Server 4Adobe Flash Media Server is software that focuses on being a streaming server and data to the Flash Platform helps by providing a better and richer experience for the user. Adobe today announced a new family Flash Media Server 4, with innovations such as Dynamic IP multicast, HTTP Streaming and of course, RTMFP(Real Time Media Flow Protocol)

Adobe Flash Media Server 4 Family

Adobe Flash Media Server 4 Family

The family Flash Media Server 4 now includes the following members:

Adobe Flash Media Development Server software contains all the features in Adobe Flash Media Enterprise Server 4 software, but with a limit of 10 simultaneous RTMP connections and 50 simultaneous RTMFP connections, and time limits for IP multicast and live HTTP Dynamic Streaming.

Flash Media Server Developer Center

Wednesday, November 3, 2010

Timing Animation With ActionScript 3

Flex Builder 4 Flash Video Flash Video

Tween 2 Movie Clips without using the Timeline

Start a tween, and while it is playing start another one using the Timer Class and TimerEvent. First you have to import the classes, then create the timer. the Timer() constructor takes two parameters. The first parameter controls how frequently the TimerEvent.TIMER event gets dispatched (in milliseconds). The second parameter is the number of times that the TimerEvent.TIMER event will be dispatched before stopping.

import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.utils.Timer;
var timer:Timer = new Timer(1500, 1);//Creating the timer
timer.addEventListener(TimerEvent.TIMER, nextTween);

var myTweenX:Tween = new Tween(movieClip, "alpha", None.easeOut, 0, 1, 3, true);

function nextTween(e:TimerEvent):void{
var myTweenAlpha:Tween = new Tween(movieClip, "x", Strong.easeOut, 0, 300, 3, true);
timer.removeEventListener(TimerEvent.TIMER, nextTween);

ActionScript 3.0 Language Reference

Tuesday, November 2, 2010

Customizing The Right Click Context Menu With ActionScript 3

Flex Builder 4 Actionscript Tutorials

Right Click The SWF

Context Menu With Hyperlink

The code will make a context menu when users right click on the SWF. Clicking on the site link will open the web page of whatever link you use in the mySiteLink. This is good for blog posts and allows users to see the author of the content.

import flash.ui.ContextMenu;
var myMenu:ContextMenu = new ContextMenu();
var copyright:ContextMenuItem = new ContextMenuItem( "Copyright©" );
var credit:ContextMenuItem = new ContextMenuItem( "Your Name Here" );
copyright.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visitMySite );
credit.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, visitMySite );
credit.separatorBefore = false;
myMenu.customItems.push(copyright, credit);
this.contextMenu = myMenu;
function visitMySite(e:Event)
var mySiteLink:URLRequest = new URLRequest( "" );
navigateToURL( mySiteLink, "_parent" );


Removing Specific Menu Items

var my_menu:ContextMenu = new ContextMenu();
my_menu.builtInItems.forwardAndBack = false;
my_menu.builtInItems.loop = false; = false;
my_menu.builtInItems.print = false;
my_menu.builtInItems.quality = false;
my_menu.builtInItems.rewind = false; = false;
my_menu.builtInItems.zoom = false;
contextMenu = my_menu;

Monday, November 1, 2010

Free Flash Extension: MotionSketch

Flex Builder 4 Flash Video Flex Builder 4

MotionBrush: Free Actionscript Class

motion sketch

Here's a comprehensive, sortable list of more Flash Extensions from ajarproductions

Merapi Bridges AIR with and Java

AIR Flash Builder Flash Video
The Merapi Project

Merapi is a framework that bridges an AIR application with a Java application, both running on the desktop. This communication is accomplished through a class that exists in Java and ActionScript called merapi.Bridge. The simplest way to interact from AIR to Java is by sending and receiving messages though the bridge.

Get Merapi from Google Code

Wednesday, October 27, 2010

Bitmap Smoothing with ActionScript 3

Bitmaps Actionscript 3

Controls whether or not the bitmap is smoothed when scaled. The above images were scaled at 300%. When you load an image using a loader and would like to increase the size of the image, use the smoothing property. If true, the bitmap is smoothed when scaled. If false, the bitmap is not smoothed when scaled.

The Code

import flash.display.Loader;
import flash.display.Bitmap;

var myPicLoader:Loader = new Loader();
myPicLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
myPicLoader.load(new URLRequest(""));

var myPicLoader2:Loader = new Loader();
myPicLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete2);
myPicLoader2.load(new URLRequest(""));

function onComplete(event:Event):void {
var bitmapImage:Bitmap =;
bitmapImage.smoothing = true; // APPLY SMOOTHING
myPicLoader.x = 52; // X Placement
myPicLoader.y = 25; // Y Placement
myPicLoader.height = 200;
myPicLoader.width = 168;

function onComplete2(event:Event):void {
var bitmapImage2:Bitmap =;
bitmapImage2.smoothing = false; // APPLY SMOOTHING
myPicLoader2.x = 307; // X Placement
myPicLoader2.y = 25; // Y Placement
myPicLoader2.height = 200;
myPicLoader2.width = 168;


Using Video Smoothing Blog Post

Video Smoothing with ActionScript 3

Flash Video Actionscript 3

Originally posted on

Video Smoothing

Smoothing specifies whether the video should be smoothed (interpolated) when it is scaled. For smoothing to work, the player must be in high-quality mode. The default value is false (no smoothing).

When you use the Flash Only Full Screen and high quality publish setting with a low resolution video, the smoothing comes in handy.

video Settings

If you want to allow any zoom effects on the video, allow the user to resize it, or maybe create a low-res version for use on the web, you’ll need to enable smoothing on the video.

The NetStream Class

var video:Video = new Video();
var nc:NetConnection = new NetConnection();
var ns:NetStream;
//Call the function below
//This function adds the video elements
function startVideo(){
//Add the video to the stage
//connect the netStream/netConnection with the video
ns = new NetStream(nc);
ns.client = {onMetaData:ns_onMetaData, NetStatusEvent:ns_onPlayStatus};
//Start with video being smoothed
video.smoothing = true;
function ns_onMetaData(_data:Object){
//put stuff here if you want.
function ns_onPlayStatus(e:NetStatusEvent){
//put other stuff here if you want.
//See the difference between video being smoothed and not smoothed by
//pressing "s"
stage.addEventListener(KeyboardEvent.KEY_DOWN, checkKey);
function checkKey(e:KeyboardEvent):void{
if (e.keyCode == 83){
video.smoothing = !video.smoothing

The FLVPlayback class

Use the FLVPlayback component and set its parameters in the properties Inspector, then add the code:

function smoothVideo(){
var myVideo = FLVPlayback_Instance.getVideoPlayer(0);
myVideo.smoothing = true;

Tuesday, October 26, 2010

Using the Microphone with the Flash Player to View Activity Levels

Flash Player Actionscript 3 Images
  1. Choose a microphone
  2. Click the close button.
  3. Allow access to activate microphone

Use the Microphone class to capture audio from a microphone attached to a computer running Adobe AIR. Use the Microphone class to monitor the audio locally. Use the NetConnection and NetStream classes to transmit the audio to Flash Media Server. Flash Media Server can send the audio to other servers and broadcast it to other clients running Adobe AIR.

A system might not have a microphone or other sound input device attached to it. You can use the Microphone.names property or the Microphone.getMicrophone() method to check whether the user has a sound input device installed. If the user doesn't have a sound input device installed, the names array has a length of zero, and the getMicrophone() method returns a value of null.

Calling the Microphone.getMicrophone() method without a parameter returns the first sound input device discovered on the user's system.

The Sound Player

  1. Create a dynamic text field with instance the name of activity_txt
  2. Create a dynamic text field with instance the name of width_txt.
  3. Create a dynamic text field with instance the name of status_txt
  4. Draw a line with instance the name of line_mc.

The Code


var myMic:Microphone = Microphone.getMicrophone();
myMic.addEventListener(StatusEvent.STATUS, this.onMicStatus);

function onMicStatus(event:StatusEvent):void
if (event.code == "Microphone.Unmuted")
status_txt.text = "Microphone access was allowed.";
else if (event.code == "Microphone.Muted")
status_txt.text = "Microphone access was denied.";

stage.addEventListener(Event.ENTER_FRAME, stage_EnterFrame);
function stage_EnterFrame(e:Event)
line_mc.width = myMic.activityLevel*5;
activity_txt.text = "Activity: " + String(myMic.activityLevel) + "%";
width_txt.text = "Line_mc Width: " + String(line_mc.width) + "px";

  1. Calling the Microphone.setUseEchoSuppression() method with a parameter value of true reduces, but does not completely eliminate, the risk that audio feedback will occur.
  2. The activity level is an integer (whole number) from 0 – 100 (no volume/full volume).
  3. Test the SWF and if you have a microphone you will see the levels on the bar and text fields change.

ActionScript 3.0 Language and Components Reference Using the Microphone class

Adobe Releases Air 2.5 with Smartphone, Tablet and Television Support

AIR Flash Builder ActionScript 3
Adobe Releases Air 2.5 with Smartphone, Tablet Support

"With the release of Air 2.5, more than three million Flash developers can now build a single game or application and easily deploy it across multiple application stores and devices," said David Wadhwani, Adobe's senior vice president of Creative and Interactive Solutions. "This is a huge step forward for developers looking to build rich, engaging applications but who have historically had to incur the cost of building them separately for each device and platform."

Adobe Air technology is supported on a range of devices, including smartphones and tablets which are running on platforms like iOS, Android and Blackberry, as well as PC-based operating systems like Windows, Macintosh and Linux.

Adobe AIR for Android

AIR developers will be able to upload AIR applications to the Android Market to be distributed for free or sold to users. These users will be able to download AIR applications just like any native Android application. If the AIR runtime is not already installed on the Android device, users will automatically be directed to download the AIR runtime from the Android Market. We are currently working with Android device OEMs to preinstall AIR to further improve the user experience.

Adobe AIR for TV

To make the optimizations in AIR 2.5 for TV available to developers, we added new APIs and enhanced others, including enhancements to the Keyboard APIs, the new StageVideo API, new Native Extension capabilities for hardware manufactures, and our new content protection solution called Flash Access 2.0. Flash Access enables content creators to deliver high value content right to the living room by having a protected delivery path from source to playback, including hardware security on the device using the device's hardware accelerated AES and RSA cores and secure key stores. By providing this high level of security, content creators and studios can have the comfort they need to delivery the highest-value Hollywood content directly over the Internet to a living room device.

With the introduction of AIR 2.5 for TV, Adobe is super excited to have Samsung as a launch partner, bringing the best platform for building rich content together with the largest TV and Blu-ray maker. Samsung is a leader in opening up the TV, starting with their Free the TV Developer Day in August 2010. Adobe has been working with Samsung throughout the year, porting and optimizing AIR for TV to run exceptionally well on their platform to allow developers to create best-in-breed applications. For developers to distribute their content, Samsung Apps is a platform that enables consumers to download and purchase applications on their TVs and Blu-ray players that come from many sources and use many technologies. Note that Samsung Apps is also connected to the Adobe InMarket service, which gives Flash and AIR developers a one-stop-shop to distribute their content to all the different platforms and devices that are enabled by Adobe AIR.

ADC article Optimizing Video and Content for Flash Platform on TV.

The impact of the new Air platform will be felt, especially as more and more devices begin to enable Flash. Already one of the top free apps on Android Market, Flash for Android brings rich Flash based content to mobile devices inside the browser.

New Adobe AIR Desktop Features

  1. CSS @font-face support
  2. CSS shadow support.
  3. StageWebView
  4. H.264 video hardware decoding for Windows.

Adobe Edge, a prototype for creating animation and transitions with HTML5

Adobe Fellow Mark Anders provides a sneak peek of a tool codenamed "Edge," a prototype of a tool for creating animation and transitions using the capabilities of HTML5.

Flash Catalyst Panini Preview

Flex 4 Flash Catalyst

With Flash Catalyst "Panini," Adobe is continuing to evolve the integration and collaboration of designers and developers, while providing additional capabilities to enable greater designer productivity when creating application user interface designs.


  1. Resizable applications and components
  2. Extensive workflow enhancements
  3. Designer productivity enhancements
Adobe Flash Catalyst Panini

More from AdobeTV

Adobe AIR Launchpad 2.0 with Mobile Support

AIR Flash Builder Flash Video
Version 2.0 of Adobe AIR Launchpad Beta

Version 2.0 of Adobe AIR Launchpad Beta is now available and supports the creation of AIR Mobile projects as well as some other important updates (start a new project or switch back and forth between mobile or desktop AIR projects without restarting the app)!

Version 2.0 allows you to create mobile projects based on the AIR for Android APIs and the Flex Hero SDK's. You can now choose Desktop or Mobile for your application and have a zip file and directory folder containing all of your options with samples that can be imported into Flash Builder. The Desktop option targets the Flash Builder 4 IDE and the Mobile option targetes the Flash Builder Burrito IDE which is still in development.

  1. Download Adobe AIR Launchpad 2.0
  2. Install Adobe AIR Launchpad.
  3. Run Adobe AIR Launchpad and select the capabilities your application needs from the dialog boxes. Launchpad will generate the Flex or Burrito project.
  4. Import the resulting project and build your application.
  5. Ask questions or share your feedback in the Adobe AIR Launchpad forum

More from Adobe Labs

Related Posts Plugin for WordPress, Blogger...