Flex

Flex 4 States

Monday, June 22nd, 2009 | flex, tutorials, videos | Comments

I’m going on a bit of a Flex 4 kick this week so I decided to put out a few video tutorials on the new features of Flex 4 and FlashBuilder. Tonight’s video covers the changes to Flex 4 states.

Click to view the video in a pop-up. Right-click and “save as” to download the video to your hard drive.

Watch Flex 4 States Video Tutorial

After watching the video, try out the new states markup on the Application backgroundColor style

Tags: flex, state

There’s more than one way to skin a ScrollBar

Tuesday, April 14th, 2009 | examples | Comments

This is a little off-topic from my usual Papervision3D posts, but it’s my blog and I’ll post what I want to

If you’ve ever tried skinning a scrollbar in Flex, you’ve probably learned it can be quite the pain in the rear. Using Degrafa (probably my favorite open-source Flex project), I put together a little package to help make the process a little easier. This example is still pretty advanced if you’re new to skinning (especially if you’re new to Degrafa), but don’t be afraid to start playing with the code to see what happens when you make your own changes.

View Source
Download Source

Tags: degrafa, flex, scrollbar

Papervision3D in MXML

Wednesday, March 18th, 2009 | snippets | Comments

This falls under the “just because I can” category

Just copy and paste this code into any Flex project with the Papervision3D.swc in the libs and you’re good to go!

<?xml version="1.0" encoding="utf-8"?>
<view:BasicView 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:view="org.papervision3d.view.*" 
	xmlns:scenes="org.papervision3d.scenes.*" 
	xmlns:primitives="org.papervision3d.objects.primitives.*" 
	xmlns:materials="org.papervision3d.materials.*" 
	opaqueBackground="#ffffff"
	added="startRendering();"
	>
	<view:scene>
		<scenes:Scene3D>
			<scenes:objects>
				<primitives:Sphere x="300">
					<primitives:material>
						<materials:ColorMaterial fillColor="0xcc0000"/>
					</primitives:material>
				</primitives:Sphere>
			</scenes:objects>
		</scenes:Scene3D>
	</view:scene>
</view:BasicView>

Tags: flex, MXML

MXML without the Flex framework

Tuesday, March 17th, 2009 | examples | Comments

This post might be a bit on the advanced side…

I was talking with Tyler earlier today and he brought up a neat little trick I hadn’t really thought of before: You can write MXML without the Flex framework. Of course you won’t get all the benefits of the Flex framework, but you’ll still be able to build out neat little MXML components with a little bit of work and, more importantly, you won’t have the ~130K of the Flex framework weighing down your app.

You’ll notice the size of the swf below is around 1K. Maybe if I get bored later this week I’ll write a demo Papervision3D app solely in MXML.

View .swf
source

<?xml version="1.0" encoding="utf-8"?>
<root:ThisIsNotAUIComponent xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:root="*">
	<mx:Metadata>
		[SWF(width="900", height="480", backgroundColor="#ffffff")]
	</mx:Metadata>
 
	<!-- you won't have to do this children node garbage in Flex 4 -->
	<root:children>
		<root:RandomShape/>
		<root:RandomShape>
			<root:RandomShape/>
			<root:RandomShape>
				<root:RandomShape/>
				<root:RandomShape/>
				<root:RandomShape/>
			</root:RandomShape>
		</root:RandomShape>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
		<root:RandomShape/>
	</root:children>
</root:ThisIsNotAUIComponent>

package
{
	import flash.display.DisplayObject;
	import flash.display.Sprite;
 
	[DefaultProperty("children")]
	public class ThisIsNotAUIComponent extends Sprite
	{
		[ArrayElementType("ThisIsNotAUIComponent")]
		public function get children():Array
		{
			return null;
		}
 
		public function set children(value:Array):void
		{
			for each(var child:ThisIsNotAUIComponent in value)
			{
				addChild(child);
			}			
		}		
	}
}

package
{
	import flash.filters.DropShadowFilter;
 
	public class RandomShape extends ThisIsNotAUIComponent
	{
		public function RandomShape()
		{
			var randomColor:Number = Math.random() * 0xffffff;
			var randomX:Number = Math.random() * 900;
			var randomY:Number = Math.random() * 480;
			graphics.beginFill(randomColor);
			graphics.drawRect(randomX - 150, randomY - 150, 150, 150);
			graphics.endFill();
 
			filters = [new DropShadowFilter()];
		}
	}
}