Free Flex Components

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

• UI Controls
• The spark.components package
• UIComponent class

Tour de Mobile Flex

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.

• To install on your Android device, search the Android Market for "Tour de Mobile Flex"
• Download the Flash Builder project with all samples from http://flex.org/TourDeMobileFlex.fxp
• You must use the preview release of Flash Builder (Hero) to compile the source

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

!

ActionScript 3 Objects, Properties and Methods

Objects

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();

Properties

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

Methods

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.

import flash.media.Video;

var myVideo:Video = new Video();
myVideo.play();

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"));

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.

 

The PHP Code (mail.php)

<?php
$to = "myAddress@mySite.com";
$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";
}
else
{
echo "answer=error";
}
?>

 

The Button Event Handler

import flash.net.URLLoader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.net.URLVariables;

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_url.data = my_vars;

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

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.

Loading An External Video With The ComboBox Component

import flash.events.Event;

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

Motion Tweens and ActionScript Tweens

The SWF files below are interactive

Bezier Tween in ActionScript 3

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.*
TweenMax.to(mc, 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)

Get Adobe Flash Media Development Server For Free

Adobe 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

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

• Adobe Flash Media Streaming Server 4 – For streaming live or on demand, with the possibility of using encrypted content with RTMP (RTMPE) and check SWF.
• Adobe Flash Media Interactive Server 4 – Same features as the FMSS with adding new features as IP multicast and HTTP Dynamic Streaming
• Adobe Flash Media Enterprise Server 4 – to provide content on a large scale with little network usage and maximum performance.

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

http://www.adobe.com/products/flashmediaserver/
http://blogs.adobe.com/ktowes/2010/09/announcing-flash-media-server-4.html
http://blogs.adobe.com/conversations/2010/09/adobe-debuts-new-technologies-and-improved-video-workflows-at-ibc-flash-media-server-4-announced.html

Timing Animation With ActionScript 3

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;
import flash.events.TimerEvent;
var timer:Timer = new Timer(1500, 1);//Creating the timer
timer.addEventListener(TimerEvent.TIMER, nextTween);
timer.start();

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

• The Timer Class
• TimerEvent Class

Customizing The Right Click Context Menu With ActionScript 3

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.net.URLRequest;
import flash.ui.ContextMenu;
var myMenu:ContextMenu = new ContextMenu();
var copyright:ContextMenuItem = new ContextMenuItem( "Copyright© yoursite.com" );
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.hideBuiltInItems();
myMenu.customItems.push(copyright, credit);
this.contextMenu = myMenu;
function visitMySite(e:Event)
{
var mySiteLink:URLRequest = new URLRequest( "http://www.yoursite.com" );
navigateToURL( mySiteLink, "_parent" );
}

 

Removing Specific Menu Items

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

Free Flash Extension: MotionSketch

MotionBrush: Free Actionscript Class

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

Merapi Bridges AIR with and Java

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

Bitmap Smoothing with 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("http://www.theflashstudio.net/images/flashstudioSmooth.jpg"));

var myPicLoader2:Loader = new Loader();
myPicLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete2);
myPicLoader2.load(new URLRequest("http://www.theflashstudio.net/images/flashstudioSmooth.jpg"));

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

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

 

Using Video Smoothing Blog Post

Video Smoothing with ActionScript 3

Originally posted on backroom.bostonproductions.com

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.

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
startVideo();
//
//This function adds the video elements
function startVideo(){
//Add the video to the stage
addChild(video);
//
//connect the netStream/netConnection with the video
nc.connect(null);
ns = new NetStream(nc);
ns.client = {onMetaData:ns_onMetaData, NetStatusEvent:ns_onPlayStatus};
video.attachNetStream(ns);
ns.play("http://yoursite.com/movie.flv");
//
//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;
}

Using the Microphone with the Flash Player to View Activity Levels

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

import flash.media.Microphone;

var myMic:Microphone = Microphone.getMicrophone();
Security.showSettings(SecurityPanel.MICROPHONE);
myMic.setLoopBack(true);
myMic.setUseEchoSuppression(true);
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

"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

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.

Features

1. Resizable applications and components
2. Extensive workflow enhancements
3. Designer productivity enhancements

More from AdobeTV

• A Preview of Flash Catalyst "Panini"
• Resizable Applications and Components
• Skinning Custom Skinnable Components
• Interaction Design Enhancements
• New Wireframe Components
• Hidden Gems in Flash Catalyst "Panini"

Adobe AIR Launchpad 2.0 with Mobile Support

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

• Blueprint
  A plugin that allows users to query for Flex code examples from within Adobe Flex Builder 3 and Adobe Flash Builder 4.
• Adobe Flash Builder "Burrito"
  Next generation Flash Builder adds mobile application development support, plus coding improvements to accelerate development of Flex and ActionScript projects. Includes Flex SDK "Hero".
• Adobe Flash Catalyst "Panini"
  Next generation Flash Catalyst adds many new features and enhancements, and offers new integration with the Adobe Flash Builder "Burrito" preview release.
• Adobe Flex SDK "Hero"
  Next generation Flex SDK adds support for mobile application development, expands and refines Spark components, and includes some great improvements for large application development.
• Adobe LIveCycle® Mosaic ES2 Plugin for Adobe Flash Builder 4
  Quickly and easily build and debug Mosaic tiles for LiveCycle Mosaic 9.5.
• Mobile Application Development with Flex and Flash Builder
  Learn about how to build mobile applications using the preview releases of Flex and Flash Builder.
• Squiggly
  The Squiggly library allows you to easily add spell checking functionality in any Adobe Flex 3 or Flex 4 based text control.