Infinite Array
  • experiments
  • tutorials
  • projects
  • resources
  • all posts

November 2007 Archives

The best actionscript libraries for flash / flex development

By ryan on November 15, 2007 1:53 PM | Permalink | Comments (0) | digg this | del.icio.us | reddit
This is my complete listing of valuable resources for flash developers.  These projects have been undertaken by talented people who have invented the wheel that people like you and I don't have to.  Please consider donating / supporting these projects, especially if you intend to use them commercially.

3D engines:
Papervision3D -  The most popular 3D engine. Easy to implement, amazingly powerful.
http://blog.papervision3d.org/

Away3d - branch of Papervision3D focusing on advanced rendering and materials
http://www.away3d.com/

Sandy - Great engine for small games. Sandy was the original 3D engine, and is still quite an ambitious project.
http://osflash.org/sandy

Physics:
APE (Actionscript Physics Engine) - While still in early development, this is a great framework for simulating 2D physics in flash. 
http://www.cove.org/ape/index.htm

Animation:
Tweener - This is the AS3 port of mcTween, and it is fantastic.  It has excellent event handling, and support for a lot more parameters than typically necessary.
http://code.google.com/p/tweener/

Audio:
Popforge - This is a library built for controlling audio playback in AS3.
http://code.google.com/p/popforge/

Image Editing:
Imageprocessing Library (Flex Only at the moment) - Great library for doing advanced image transformations and adjustments.
http://blog.je2050.de/imageprocessing-library/

Data / Remoting:
Amfphp -  An extremely fast way to work with external data by communicating with PHP files through ActionScript Message Format.  It is a fast versatile way to provide mySQL data interaction for your flash / flex apps.
http://www.amfphp.org/

Mashup Libraries
These are libraries that allow integration of data from various web sites with flash applications
Flickr - http://code.google.com/p/as3flickrlib/
YouTube - http://code.google.com/p/as3youtubelib/
Mappr - http://code.google.com/p/as3mapprlib/
Facebook - http://code.google.com/p/facebook-actionscript-api/
Yahoo -
http://developer.yahoo.com/flash/astra-webapis/
Ebay
- http://code.google.com/p/as3ebaylib/
Amazon Web Services -
http://code.google.com/p/as3awss3lib/
Odeo -
http://code.google.com/p/as3odeolib/
LastFM -
http://code.google.com/p/lastfm-as3/
Atom / RSS Syndication
- http://code.google.com/p/as3syndicationlib/

For more open source projects, visit these sites:
http://osflash.org/projects
http://code.google.com/#q=actionscript




[Flex Labs] Overlaying a tiled PNG on an application background gradient in flex.

By ryan on November 12, 2007 3:38 PM | Permalink | Comments (0) | digg this | del.icio.us | reddit

This is quite a simple tutorial.  It is more about design than programming.  It will cover adding an application gradient background, and then overlaying a tiled PNG pattern on top.  With a little creativity, this effect can make a nice application or website background that is not easily reproducible with html / css.

First, begin by setting up your application.  First we’ll add a background gradient, and set up a few other parameters:

<?xml version=”1.0” encoding=”utf-8”?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
        width=”100%” height=”100%” fontAntiAliasType=”advanced” layout=”absolute”
        backgroundGradientColors=”[#535353,  #2f2f2f]” horizontalScrollPolicy=”off”>


Next, we add a VBox that will take up the whole application background.  The CSS class dottedBG will contain the location for the tile image:

<mx:VBox width=”100%” height=”100%”
            verticalAlign=”top” horizontalAlign=”center” verticalGap=”0”
            paddingLeft=”0” paddingRight=”0” paddingTop=”30” paddingBottom=”20”
            styleName=”dottedBG”
horizontalCenter=”0”>


Finally, add the CSS class:

.dottedBG{
    background-image:  Embed(“dottedtile.png”);
}


I will post the source for this example soon.  Feel free to post links to your own examples.



Continue reading [Flex Labs] Overlaying a tiled PNG on an application background gradient in flex..

[Flex Labs] Customizing the flex datagrid

By ryan on November 8, 2007 1:46 PM | Permalink | Comments (2) | digg this | del.icio.us | reddit
This is a slightly advanced tutorial covering a more in depth way to customize the datagrid.  Many of the style properties of the datagrid are protected, or not otherwise accessible.  In order to really customize it, you will need to override specific methods related to the drawing of the component.  Without knowing specifically which ones need to be adjusted, the implementation can be buggy.  I have managed to go through all of the methods in the component line by line to verify which ones need to be modified. Here is a list of key methods, along with their parameters:

drawHeaderBackground(headerBG:UIComponent):void
drawRowBackgrounds():void
drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void

Next, comes the actual override code. I have created an AS file named DrawListingsGrid.as in the pkg/controls/ directory of the project. I have added comments as place holders in the areas where adjustments are made.

package pkg.controls
{

import flash.display.DisplayObject;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.Shape;
import flash.geom.*;

import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.EdgeMetrics;
import mx.core.mx_internal;
import mx.core.FlexSprite;
import mx.core.FlexShape;
import mx.core.UIComponent;
import flash.display.BitmapData;
import mx.core.BitmapAsset;
import mx.controls.Image;
import mx.styles.StyleManager;

use namespace mx_internal;

public class DrawListingsGrid extends DataGrid
{

// embedding an image for the row background
[Embed(source="../assets/datagrid_row_bg.jpg")]
[Bindable]
public var rowbgCls:Class;

// embedding an image for the header background
[Embed(source="../assets/datagrid_header_bg.jpg")]
[Bindable]
public var imgCls:Class;

private var displayWidth:Number;

override protected function drawHeaderBackground(headerBG:UIComponent):void
{
var g:Graphics = headerBG.graphics;
var imgObj:BitmapAsset = new imgCls() as BitmapAsset;
g.clear();

var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);
maskShape.width = adjustedWidth;

var hh:Number = rowInfo.length ? rowInfo[0].height : headerHeight;

var vdistance:int;
var vstart:int;
var vstartOffset:int;
var vdistanceOffset:int;

// filling in header with embedded background image
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(adjustedWidth, 0);
g.lineTo(adjustedWidth, hh);
g.lineTo(0, hh);
g.lineStyle(0, 0x000000, 0);
g.endFill();
}

override protected function drawRowBackgrounds():void
{
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
var rowBGs:Sprite = Sprite(listContent.getChildByName("rowBGs"));
if (!rowBGs)
{
rowBGs = new FlexSprite();
rowBGs.mouseEnabled = false;
rowBGs.name = "rowBGs";
listContent.addChildAt(rowBGs, 0);
}

var colors:Array;

colors = getStyle("alternatingItemColors");

if (!colors || colors.length == 0)
return;

var curRow:int = 0;
curRow++;

var i:int = 0;
var actualRow:int = verticalScrollPosition;
var n:int = listItems.length;

while (curRow < n)
{
drawRowBackground(rowBGs, i++, rowInfo[curRow].y, rowInfo[curRow].height, colors[actualRow % colors.length], actualRow);
curRow++;
actualRow++;
}

while (rowBGs.numChildren > i)
{
rowBGs.removeChildAt(rowBGs.numChildren - 1);
}
}


override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void {

var background:Shape;
if (rowIndex < s.numChildren)
{
background = Shape(s.getChildAt(rowIndex));
}
else
{
background = new FlexShape();
background.name = "background";
s.addChild(background);
}

background.y = y;

var height:Number = Math.min(height, listContent.height - y);
var bm:EdgeMetrics = borderMetrics;
var adjustedWidth:Number = unscaledWidth - (bm.left + bm.right);

//fill the row background with the embedded image
var imgObj:BitmapAsset = new rowbgCls() as BitmapAsset;

var g:Graphics = background.graphics;
g.lineStyle(0, 0x000000, 0);
g.beginBitmapFill(imgObj.bitmapData);
g.moveTo(0, 0);
g.lineTo(displayWidth, 0);
g.lineTo(displayWidth, height);
g.lineTo(0, height);
g.lineStyle(0, 0x000000, 0);
g.endFill();

}

override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if (displayWidth != unscaledWidth - viewMetrics.right - viewMetrics.left)
{
displayWidth = unscaledWidth - viewMetrics.right - viewMetrics.left;
}
}

In order to use this class, you will need to embed it as a custom component in the MXML file.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:con="pkg.controls.*">

Next, you can actually add the component to the stage, by referencing the link from the header:

<con:DrawListingsGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Column1"/>
<mx:DataGridColumn headerText="Column2"/>
</mx:columns>
</con:DrawListingsGrid>


Main Index | Archives | January 2008 »

Search

Subscribe to feed Infinite Array RSS feed

About this Archive

This page is an archive of entries from November 2007 listed from newest to oldest.

January 2008 is the next archive.

Find recent content on the main index or look in the archives to find all content.

Monthly Archives

  • February 2008 (2)
  • January 2008 (2)
  • November 2007 (3)
Copyright © 2008 Ryan Robinson
portfolio  |   resume  |   contact