ASC 2.0 vs Falcon

ActionScript (Photo credit: Wikipedia)

Falcon, the next-generation MXML and ActionScript compiler that is currently under development 

Following are the key differences between Falcon and ASC 2.0
- ASC 2.0 is essentially a fork of Falcon. 
- Falcon was branched off from ASC 2.0 in summer 2012 and the packages were renamed from com.adobe.flash to org.apache.flex.
-  Falcon supports Flex (MXML)
- ASC 2.0 is mainly focused on gaming.

the new ActionScript Compiler (ASC 2.0) is part of the AIR 3.4/FP 11.4 SDK. The complete release notes are available here. It things like Concurrency (ActionScript Workers) support for debugging and more.

Related articles

• Flash Builder 4.7 and Adobe Scout 1.0 Released(inflagrantedelicto.memoryspiral.com)

  ---

• A new Flash Builder(randytroppmann.com)

  ---

• Adobe Delivers New Game Developer Tools in Creative Cloud(blogs.adobe.com)

  ---

• 10 Things A Good Flex Developer Should Know(flexdevelopers.com)

  ---

• Adobe launches new cloud-based game development tools(venturebeat.com)

  ---

• BlackBerry SDK for Adobe AIR support for Flash Builder 4.7(devblog.blackberry.com)

  ---

• Beginning to Flex!(dashoftech.wordpress.com)

  ---

Flash XML Graphics (FXG)

Illustrator fxg experiment (Photo credit: everyplace)

Flash XML Graphics (FXG), is  a graphics interchange file format based on XML that lets you define low-level vector graphics. FXG is an XML based declarative format.

Starting Flex 4.0, FXG graphics can be declared as part of an MXML file or in a separate text file with FXG extension.

Related articles

• Working with XML data in Flex(practicalflex.blogspot.com)

  ---

PowerFlasher FDT 5 - Yet Another IDE for Flash/Flex/Air

FDT 5 supports development with ActionScript and MXML The IDE meets the needs of Flash/Flex developers by increasing their coding comfort while at the same time working more efficiently and time-saving on highly creative projects.

Skining Flex Components

A  Flex component is made up of visual elements which are set of images, SWF files, or class files that contain drawing API methods.

Skinning: the process of changing the appearance of a component by modifying or replacing its visual elements.

You can define a skins for a component using the following methods:
1. Using the setStyle() method
2. Cascading Style Sheets (CSS).

• External Styles - You can reference a CSS file in any MXML file using  the tag
• Embedded Style - You can define embedded styles in an MXML file. Embedded styles can used only in the file in which it is defined.
• Inline Styles - they are defined in MXML tag and can be used in that tag. 

Application skins can be defined in separate MXML file.

SparkSkin - class is used for skinning an flex application

 <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"   
   xmlns:s="library://ns.adobe.com/flex/spark">  

All skins requires a states property with at least one state called normal state.

   <s:states>  
     <s:State name="normal" />  
     <s:State name="disabled" />  
     ....  
   </s:states>  

Metadata block contians the HostComponent directive, declare to which components the skin will be applied.

    <fx:Metadata>   
     [HostComponent("spark.components.Application")]  
   </fx:Metadata>  

Skin also defines the background shape and colors

Skin defines the container display layout and properties for the Application container's content children.

Introduction Flex UI Framework

English: A vector version of Overview_of_a_three-tier_application.png (Photo credit: Wikipedia)

the open source Flex 4.5 Framework provides

1. Rich & extended set of controls / component library 
2. Complete set of layout mechanisms.
3. Mobile-optimized components
4. Containers
5. MXML declarative language for layouting UI components & ActionScript an ECMA compliant scripting languages for writing business logic.
6. Rich class library based on ActionScript 3.0

Layout Mechanism functions
- controls look and feel
- helps in management of display area during window resizing.

Containers hold other containers and components, container lays out its children

Related articles

• 5 Steps to Develop a Basic AngularJS Application with Example(thegeekstuff.com)

  ---

How to create custom MXML components with Flex Builder 3.0

Image by Geoff S. via Flickr

Watch the video below to learn How to creating an MXML custom component:

More DIY videos at 5min.com

How to add properties and methods to a MXML custom component.

More DIY videos at 5min.com

Building Simple Application with Flex

EBA AJAX Grid + Flex Charting Component (Photo credit: Andre Charland)

Working with Containers

Lets now learn about the most important MXML tag in Flex.

Applicaiton
Description: root container for an Flex application

Properties:

layout, define lay out for its child components, possible values for this property are:

1. vertical - automatic top to bottom in order layout
2. horizontal - automatic left to right in order layout
3. absolute - no automatic layout, (x,y) location based layout

Note: The default layout, BasicLayout renderer doesn't respect the transformations that occur in the object's width/height/position during rotation. It still tries to layout the objects as if they were not rotated. However, if you use any other layout, like VerticalLayout or HorizontalLayout, the objects new dimensions after rotation is used.

style, defines formatting for the child components

1. backgroundGradientColors
2. verticalGap

How to Use Absolute Layout in Flex

More DIY videos at 5min.com

How to Use the appropriate Layout Type in your Flex Applicatoin

More DIY videos at 5min.com

Also visit blog to learn about adding inline ActionScript in MXML code

• Using Inline ActionScript in Flex

Related articles

• 10 Things A Good Flex Developer Should Know(flexdevelopers.com)

  ---

• Presenting Apache Flex(forta.com)

  ---

• Dive into Flexbox - Bocoup(weblog.bocoup.com)

  ---

• How can I add MXML objects from a Flex Library into my ActionScript Project?(stackoverflow.com)

  ---

• Using Flex 4 Skins & States to Disable a Component(flexdevelopers.com)

  ---

• Creating a Custom Visual Component(flexdevelopers.com)

  ---

• MXML + ANT + ASDOC = And then some(173.254.32.67)

  ---

• Applying the Presentation Model in Flex (blogs.adobe.com)