1. Learn Flex in a Week video series on the Developer Connection site is being updated. These were an immense help for catching up with the latest incarnation of Flex.
2. Tour de Flex has tons of new and updated samples. Any source code you could imagine is in Tour de Flex, it’s like your personal Flex library you carry with you. You might even run across one particular sample to wow you created by yours truly. Many thanks to my colleague Holly Schinsky, who works tirelessly on Tour de Flex and a zillion other things all at once, and to Adobe Evangelist Greg Wilson for the opportunity to help out with the project!
3. Flex Test Drive on the Adobe Developer Connection is a great way to get into Flex if you’re brand new. This series walks you through the process of building a Flex 4 application in one hour, and is accompanied by video and written tutorials.
4. I built the Spark Intranet Sample app and tutorial on the Developer Connection site and just updated it for the Flex 4 release. This is another good one to learn to connect Flex 4 to data, explore the Spark framework and new MXML specification, and see more about the new Flash Builder features. I can neither confirm nor deny that there are more Flex 4 sample apps to come very soon, and they may or may not be fairly intense so as to satisfy your inner geek

If you’re a Flex 3 developer just getting into Flex 4, you’ll see there’s a slight learning curve to the new Spark architecture. A good place to start is Deepa Subramaniam’s article on the Developer Connection. That’ll give you the background you need to understand Spark versus MX components and how/when/where to use them.

With all this new material at hand, the learning curve is tiny compared to the benefits you’ll get by updating to Flex 4. With the Spark framework, you’re able to take things to a whole new level.

Technorati Tags: adobe flex 4, developer connection, flash builder, learn flex in a week, tour de flex

This is SO cool because it gives you truly granular control over every aspect of a component you want to animate. In the sample I’m upgrading, there is an extended TileGroup component that has three columns and two rows of charts for an enterprise dashboard application. When a user clicks a button to zoom in on any given chart, I wanted to make use of some of the new Spark effects to really create a 3D look and feel quickly (without delving too much into custom layouts). Actually, the layout I made is a custom TileGroup, but I wanted to point out some ways you can use the Animate class to make sweet transitions on any property of a component in your own apps for simple animation, without having to create custom layouts.

This super simple test was to find out if I could use the Animate class to move the entire TileGroup to a new X,Y and increase its horizontalGap and verticalGap at the same time. In other words, could I use the Animate class to create my whole animation in one shot, truly custom? I watched Chet Haase on Adobe TV’s Codedependent on animating properties, and it worked great, but I needed it running in ActionScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<fx:Declarations>
		<s:Parallel id="par" duration="1000" target="{t}">
			<s:Animate >
				<s:SimpleMotionPath property="horizontalGap" 
									valueFrom="15" valueTo="200" />
				<s:SimpleMotionPath property="verticalGap" 
									valueFrom="15" valueTo="200" />
			</s:Animate>
			<s:Move xTo="{t.width/2}" yTo="{t.height/2}" />
		</s:Parallel>
	</fx:Declarations>
 
	<s:TileGroup id="t" horizontalGap="15" verticalGap="15" direction="ltr" 
				 width="100%" height="100%">
		<s:Button click="par.play()" label="Button One" />
		<s:Button click="handleClick(event)" label="Button Two" />
	</s:TileGroup>

The above code is the MXML that worked great for my test, and here’s the AS3 equivalent:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<fx:Script>
		<![CDATA[
 
			import spark.effects.Scale;
			import spark.effects.Move;
			import mx.effects.Parallel;
			import spark.effects.Animate;
			import spark.effects.animation.MotionPath;
			import spark.effects.animation.SimpleMotionPath;
			import flash.events.MouseEvent;
 
			public function handleClick(event:MouseEvent):void
			{
 
				var p:Parallel = new Parallel(t);
				p.duration = 1000; 
 
				var s:SimpleMotionPath = new SimpleMotionPath();
				s.valueFrom = t.horizontalGap;
				s.valueTo = 200;
				s.property = "horizontalGap";
 
				var s2:SimpleMotionPath = new SimpleMotionPath();
				s2.valueFrom = t.verticalGap;
				s2.valueTo = 200;
				s2.property = "verticalGap"; 
 
				var v:Vector.<MotionPath> = new Vector.<MotionPath>();
				v.push( s );
				v.push( s2 );
 
				var a:Animate = new Animate();
				a.motionPaths = v;
 
				var m:Move = new Move();
				m.xTo = t.width/2;
				m.yTo = t.height/2;
 
				p.addChild( a );
				p.addChild( m );
				p.play();
 
			}
 
		]]>
	</fx:Script>

Thanks to Chet too for spotting what my tired eyes didn’t see sheesh, it’s been one of those days.

This sample is not very exciting, except for the fact that it gives you the idea how you can animate any property over time. If I wanted to (and I have for my project) animate the x, y, z, width, and height at the same time using the Animate class, you could easily create a very specific animation this way.

For my purposes, I used the SimpleMotionPath to specify certain properties to change, and since the Animate class’s Interpolator is set to NumberInterpolator by default, it worked out great to fill in the steps for the “tween” automatically for me. I’d like to get to the point where I come up with my own Flat-terpolator for some other project one day just to see what I can create, but for now, this worked out fine.

You can download the FXP for this sample and try it out yourself here. Once you see how this works, you can imagine the possibilities afforded to Flex 4 that will allow you to make some truly amazing animations. Mine’s turning out to be pretty cool, but you’ll have to wait until the ADC releases it In the meantime, you can get started on this one to catch up on Flex 4 and Flash Builder.

Technorati Tags: adobe flex 4, animate class, animate properties, gumbo

My colleague Holly Schinsky and I were invited to be part of the super early beta program before MAX, which was extremely cool. This is huge for AIR developers because we now have a fully supported means of monetizing our applications. In the early days of Apollo (AIR’s beta name) I had come up with the idea for Attest (mock exam software for Adobe’s Flex certification) while studying myself. There was nothing on the market and I had compiled heaps of data while studying, so I thought it would make for a nice side project.

Attest was originally built in Apollo, but at the time it was beta and not ready to use as a release version of a commercial app. So I ended up going with C# to build a desktop app. Of course, there were one or two voices of dissent who asked why I didn’t use AIR at the time, I would have thought it was pretty apparent. Enough rambling, the point is that now, years later Attest PRO utilizes the Shibuya licensing, and makes life a lot easier for us at PXL Designs. Holly and I are still going to support the free version of Attest going forward, but for the upgraded, beefier version you now have Attest PRO available.

For the AIR developers out there, it couldn’t be any simpler to incorporate the Shibuya framework. It is still in beta, so there’s things to tweak and work out, but overall you have creative license to build any trial version of your application that you want.

• Time-based: If you want a 10 min or 10 day trial for example
• Feature-based: Turn off any features you want during the trial period

To get the license up and running is cake, there’s really nothing to it. You’ll know from the server whether an app is licensed or trial, and be able to turn on/off features wherever you like. For example, check the license, if it’s trial, set a boolean on your model and enable/disable certain buttons, or views, etc.

Keep in mind, the number of developers for the beta program is restricted for the time being. I’m not sure how many developers they’ll take right now, but it’s definitely something to read up on. Once Shibuya is a full-fledged product, there’s going to be tons of AIR apps for sale out there. For now, you can dream about writing AIR applications that make fart noises and becoming a millionaire (ok maybe not, hopefully you’ll want to actually build something with real purpose).

Technorati Tags: adobe air, flex, licensing, shibuya, try/buy service

Besides that, I’ve just been insanely busy (what’s new) pitching gigs, winning some, losing some, running away fast from others, and working secretly on Attest in the wee hours on top of everything else. Check out the PXL Blog for more (much much more soon), even if you’re not looking to get Flex certified or not interested in Attest, you’ll be very interested in some of the Adobe MAX goodness next week – mwahahha! Shhh, say no more…say no more, wink wink, nudge nudge, does she go aye?

On top of that, I’ve been updating MezzyShredder.com with new content, many a late night. He joined a new band, formerly called LOCKJAW, currently called War Horse. I defy even Yngwie Malmsteen to play faster or better than this man

Besides his band’s demo and performances, he’s teamed up with artist Scythen Hade and released their first album on iTunes called Elements of Time.

Check out the NEW Mezzy Shredder and Scythen Hade album entitled ‘Elements of Time’ on iTunes! I know of a few people who will be happy to finally get their hands on a real album instead of eating up my bandwidth listening to songs.

War Horse is actually highly likely to go tour next year in Europe, which would be insanely cool! I’ve posted new pics, songs, videos, and there’s a ton more coming soon. They’re currently recording their demo album and Mezzy is going to send much more material, so keep an eye out (or ear open) for updates.

Technorati Tags: Attest, cf united, lockjaw, Mezzy Shredder, war horse

My thorough lack of writing on my FUN blog parallels my thorough lack of sleep. It’s tough running a company on your own, especially when it’s a teeny tiny RIA firm and you’re completely lost when keeping records in QuickBooks. So what have I been up to? For starters, I updated a bunch of stuff on MezzyShredder.com. Added tons of videos of him playing with his band Wicked Society ( signed on a B & G Music label ) and YouTube. So if you’re into Black Label Society-style music, go check out Mezzy shredding like none other!

So far this year, I’ve reconnected with some very cool clients from the past, lost some projects, won others, wrote articles on the Adobe Dev center about Flex and Ant, part II is in review right now, coming soon.

I had the chance to team up with Tour de Flex developer Holly Schinsky to get Attest 1.5 out the door. Holly’s completely awesome to work with, and we plan on teaming up on some more killer projects in the near future. There’s also a ton of things planned for new versions of Attest, and some of it will be a lot of fun. You’ll see…

Just like 2008, not one of the projects I’ve worked on so far this year were ones that I pitched for, but rather, they just keep finding me. Who needs a sales department when you’re a Flex developer? I’ve actually passed a bunch of projects off to others in the community when I can, and was thinking about creating another job site type deal purely for Flex. Everyday my inbox is filled with projects I won’t be working on, and it would be great to find a way to post them for the community, for those who are located closer, or a better match for the position in general. It seems to me that the Washington, DC – Richmond, VA area is loaded with projects for Flexers, but there are definitely larger communities out there in other states. So if you’re a Flexer around there, give me a yell. I’d like to hear from others in the area.

I often have to turn down projects and on top of that there were others I lost, like a Microsoft Silverlight project where the MS guys came inches away from going with Flex rather than Silverlight. When the big guys made the decision it had to be Silverlight, there went that project. By the way, call me when your RIA falls apart Other projects were shipped overseas, but still the fact remains that there’s always work for Flex developers – knock on wood.

Now for some reason, a Google search for the name “flatley” puts me on page two. Considering the competition with Michael Flatley, the Lord of the Dance, that’s not too shabby. So it doesn’t hurt to get your name out there. I’m coming after your title Mr. Lord of the Dance, and I’m River dancing all the way to the first results page! The point is, I’ve watched the Flex community grow from the beginning, and it’s growing fast, which is awesome! If you’re in the DC – Richmond area, I think we can eventually make this another hot spot for crazy RIA projects with a large community of developers to match. Especially the ones that pay you in government cheese, like Mr. Jones says, but Flexers will never have to worry about their kids eating all the food in the fridge

Many other awesome projects are in the works currently at PXL Designs, some I’ll keep on the down low because they’re top secret for the time being. Others are supposed to debut soon. Whenever you see the Capital One Card Lab commercials on TV, think of all the late nights and countless ramblings I had to pull to get that one out the door. I was the architect on this project, consulting through an agency, and worked with a great team, pulled countless weekends and late nights to get it finished.

I found time to add a mini shopping cart to Peekaboopaperie.com for quick orders where a customer may not want to customize their own baby announcement.

This year, I think I’m even going to have time to venture out to CF United in Leesburg, VA, so I might see you there. If you’re from the area, give me a holler if you’re going and make sure to download the Bump app for the iPhone, this is extra cool and lazy

These are a handful of the reasons I’ve been missing my blog duties, but I’m going to make a concerted effort to get back into it…even if it has to be late night ramblings

Technorati Tags: adobe, enonomy, flex, Mezzy Shredder, ria, wicked society

Sorry, I had to share my euphoria though. With this thing in the office, I’ll have a hard time getting any work done. Anyway, I’ve been working my rump off on a bunch of different things but mostly I’ve been cranking on Attest 1.5.  It’s built in Adobe AIR (see PXL blog for the full scoop). This is current being tweaked and tested, and will be available shortly. The coolest news is that it’s free for non-commerical use. If you want to get certified in Flex 3/AIR, you’ll want to download this AIR app when it’s finally released.  I’ve taken a way longer time getting it out than I had originally planned on, but with my work load, and being a one man show so far, it’s been tough.

I’ve also been working on my first Ruby on Rails app for a client, amongst heaps of other things, and I have to say I really dig RoR.  Ruby’s syntax takes some getting used to for me because I’ve always worked with C-based languages. It reminds me more of Basic, but I like the whole set up and how easy it is to get a database connected site up and running fast. There will definitely be more Rails apps created at PXL in the future. For this release of Attest 1.5 (not calling it 2.0 yet) I wanted to set up the questions and answers with a RESTful webservice built with RoR. But that’ll probably come in the future (not that it makes a difference for end users) but I’d like to create it For now though, Attest is done differently than version 1.0.

When I had originally built it, it was done in Adobe Apollo but I couldn’t monetize the app. Many things happened since the first release, and with the economy sucking turd I don’t want to charge for regular devs like myself going forward.  So I’m going to give the full version for nada, unless you happen to be a large telecom who’s spying on my transmissions as I write this blog post (I’m looking at you Comcast, and I’m not laughing) then you’re going to pay for it! I’m all for Buy American, and that’s what ocurred to me after I got the Fender…it’s a small thing but I did technically help out the economy and my greedy guitar lust by buying this fine mama jamma! Attest, however, is made in the USA and you, the every day shmoe like myself  will no longer pay for it.

Onward and upwards, if you’re a developer like me, and you want to add yet another credential to your resume, study with Attest 1.5, take the exam for $150 bucks, and get it behind you. There was a discussion on the Adobe Flex Developers group on LinkedIn yesterday about just that…should I bother to get certified in Flex 3 or not?  I’m pretty biased obviously but I added my two cents regardless.  If you’re interested in taking the cert exam, if you’re looking for study material to gauge your readiness, enjoy Attest 1.5.  It’s another contribution to the community at large and will be available before the end of March. My apologies for being so late on this release.

The plan is to finish up what I have first, then I have some great Flex/AIR developers who have enlisted to help out on some  pre-release testing, and it’s on track to be released before the end of March.  Until then, relax your mind a bit…maybe buy yourself the Fender you always wanted, or read the news

and wonder if the folks at MXC (Most Extreme Elimination Challenge)

had advance knowledge of angry pink dolphins.  And look for Attest 1.5 on the PXL blog in a few short weeks.

Technorati Tags: adobe air, attest 1.5, flex 3/air cert, flex certification, study material

Going forward, I know which api I’ll be using for online image sharing I know some other AS developers, like Quentin, who commented on the last post were searching too and we didn’t see anything up on Google code yet, so we planned on maybe starting up a project. The guys at Photobucket beat us to it. So that was an easy job for us, can’t beat that!

Updating MyStylez with the Photobucket api for drag and drop went well easier than I had planned, that’s because I thought I’d be creating a brand new library to work with the api. Ahh a pleasant surprise! Nice work again!

So I guess you can call MyStylez a true mashup now that it uses Photobucket and Flickr. It has nothing to do with the MySpace api because there’s no fun to be had there. I think the MySpace api is just for apps that run purely on MySpace. Exciting…ehem.

If you were looking, like Quentin and myself, to mash up AIR with Photobucket, now you have something to do. You’ll enjoy working with the library. I’d like to try out a bunch of other methods on the api but that would entail having a creative brain wave on some new AIR app. I’ll keep you posted

Technorati Tags: actionscript, adobe air, flex, google code, library, photobucket api

I haven’t seen any ActionScript library projects yet, but then again I’ve been sitting in the dark for two weeks writing code and staying away from the sun…very healthy indeed. You may have noticed I didn’t exactly go to town on the blogging either, pardon my absense as I’ve been wholly absorbed with so much code flying through my neurons I feel like my head could split.

Does anyone know of any plans to crank out an AS3 lib for the Photobucket API? If so, I might want to jump on that one.

Technorati Tags: actionscript, adobe air, flex 3, flickr api, open source, photobucket

Nothing massive changed, its all pretty easy, but rather than chase all the new stuff down, I figured I’d post in case someone else runs into issues.

The first issue I had, was to remove references to Shell.shell and replace with nativeWindow inside the ActionScript. At least that’s one thing the new compiler was griping about and is now fixed. Referencing the application descriptor file from within the code had a few minor changes. The first thing I did after installing Beta 3 for AIR and Flex 3, was just create a new AIR project for AirSpace. That way, I had a new descriptor file to play with and seemed easier than chasing down any artifacts in the old one.

I had the version number and appID in the OLD descriptor file (Beta 2) right at the root node:

1

<application appid="AirSpace" version="1.0.0.5" xmlns="http://ns.adobe.com/air/application/1.0.M4"></application>

In the new descriptor file, it’s laid out differently. I just put it all in together like so:

1
2
3
4
5
6

<id>com.pxldesigns.airspace </id>
<filename>AirSpace </filename>
<name>AirSpace</name>
<version>1.0.1.5</version>
<description>AirSpace is a MySpace Style Editor created with Adobe AIR </description>
<copyright>PXL Designs, LLC</copyright>

Big deal, right? So then I was no longer getting errors when trying to build the release version with my nifty self signed certificate, the one that warns people going to install it that I could have built a horrible nasty app that pops up ads 24-7 and eats up all the ram. Ha, kidding! I wouldn’t build such a thing…mental note.

Referencing the new app version from inside the MXML or ActionScript is slightly different, and I use this in a few places for AirSpace. Still no biggy, like I said, it would have saved some time if I remembered to check Rich’s code first, none the less, I figured it out quick enough.

1
2
3
4

private var appXml:XML = NativeApplication.nativeApplication.applicationDescriptor;
// use of name space from the descriptor file
private var ns:Namespace = appXml.namespace();
private var currentVersion:String = appXml.ns::version[0]; // <version></version> in the app descriptor

Next step, Shell.shell.exit(); became nativeWindow.close(); now. The compiler no longer liked references to Shell.shell, so that fixed my problem.

I thought I’d need to change some File refs because the compiler tossed up errors at first for this line:

1

var file:File = File.applicationDirectory.resolvePath("index.html");

but after running “Project –> Clean..” a few times, the compiler stopped griping. Dunno about that one yet, it works fine for me, I haven’t had time to check if there’s any massive changes with files and directories yet again, but after cleaning this wasn’t an issue for me anymore.

The only thing that gave me a headache was resigning my certificate and getting that up and running again. After “cleaning” a few zillion times, and creating the new app descriptor file, I created a new certificate by opening a command prompt, changing directories to “C:\Program Files\Adobe\Flex Builder 3\sdks\3.0.0\bin” and running the ole adt command:

1

adt -certificate -cn yourCertName 1024-RSA ../newCertName.pfx yourCertPassword

Then packaged everything right in FlexBuilder 3 “Project –> Export Release Build” and browsing for the new cert, and entering the password. Whoopie, done!

The moral of this story? First, always check Rich’s blog before making a move save yourself the trouble of porting to Beta 3 by just creating a new AIR project (complete with new descriptor file) import your files, update your new desriptor file and pop out your self signed cert to notify the world that you haven’t yet purchased a Thawte cert like me because I’m too cheap.

Technorati Tags: adobe, adobe air, airspace, beta 2, beta 3, PXL Designs

Wasn’t exactly looking forward to that as I never really bothered with MySpace before, but when I had the idea to write an Adobe AIR application with Flex that’ll let them do the styling themselves I knew I was on to something. So far, there’s been heaps upon piles of suggestions to improve on AirSpace, many of which are current in the latest version 1.0.0.5. Some cool ideas were pre-made styles, which is going to take a while to create, but there’s a layout browser built into the app now. You can edit styles, save them to your machine and reopen them for a later date, swap them out on a whim and so on. Currently, there’s also a “practice template”. When you start up AirSpace, you’ll see a generic MySpace page to the right. You can check out your style edits as you go and apply them to your actual MySpace page when you’re ready. Here’s more info on my other blog.

For example, I think the Tables styles are still a bit buggy, this is probably due to overwritting some bit of CSS in the final output. Maybe I can jump back on that today. In the meantime, a few developers were asking for details on how I got certain things working so I figured I’d share a bit of code (useful once again).

The overall app has a HDivideBox with an Accordion on the left side that holds all the custom components (basically just forms with inputs and combo boxes), and an HTML control on the right side to show the practice page and later to get you logged into your MySpace account and apply your style edits.

Throughout the app, whenever you make changes to styles, you hit the save button in each view (child of the accordion) and AirSpace is just appending all the values of the input text fields and combo boxes into a big string that’ll output the CSS later. It doesn’t do anything with it just yet other than hold that formatted string, and at the same time it’s building an XML template which is the overall data store for the app. Those same values you entered are being plopped into this XML which becomes an XMLList and ultimately all the views and their children are bound to that same XMLList. That way, any updates to the template and the whole app’s aware of what’s going on instantly. I love Flex

So a few developer friends were asking how I’m handling updating the binding of data throughout the app. Here’s the basic set up. The Accordion doesn’t instantiate it’s children when the creationComplete fires, unless you change it’s creation policy to “all” like so.

1

<mx:Accordion id="leftPane" width="40%" height="100%" change="handleChange(event)" creationPolicy="all"></mx:accordion>

Now the Accordion knows to instantiate all it’s children right away, that solved that problem. Now I know they’re all created regardless of whether the user clicked on each view or not.

Provided the user opens AirSpace and does nothing else with it besides hitting the Generate Code button, the app is going to call all those children and demand their two strings created from the components within them. It wants a string formatted for CSS, and it wants my internal use XML string to pass along to the XMLList that everything binds to.

Hitting the Generate Code button will do the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public function generateCode():void {
	// clear old code and xml
	myCode = "";
	generatedCode.text = "";
	myCodeXMLStr = "";
 
	// myCodeXML gets written here:
 
	myCode = "<style type="\"></style>\n";
	myCodeXMLStr = "\n";
	myCodeXMLStr += "<template>\n";
	myCodeXMLStr += "<templateinfo>\n";
 
	if(backgroundFormComponent != null &amp;&amp;; backgroundFormComponent.backgroundCode != ""){
		myCode += backgroundFormComponent.backgroundCode + "\n";
		myCodeXMLStr += backgroundFormComponent.myCodeXMLStr + "\n";
	}
	if(contactTableFormComponent != null &amp;&amp; contactTableFormComponent.contactTableCode != ""){
		myCode += contactTableFormComponent.contactTableCode + "\n";
		myCodeXMLStr += contactTableFormComponent.myCodeXMLStr + "\n";
	}
 
	// continues on

This is only part of the generateCode() function. It’s going to clear all the other vars with their strings, run through each child view in the Accordion (we know definitely is instantiated already) and ask for their formatted CSS string to add to myCode for the user’s final output, and their formatted XML string to add to myCodeXMLStr for later binding.

Once any changes have been made, the myCodeXMLStr, representing the internally used XML code, is updated, then cast as a bindable XMLList again and a new event is triggered. I extended flash.events.Event to let the rest of the app know it needs to update it’s views. I could have probably cut out the new event entirely and just had everything directly bind to the XMLList data, but it was the Thanksgiving and I only had so much time so I can always update it later, but for now it works great. Here’s the extended Event class that passes along the new XMLList to each view, and from that point, their components update to reflect the changes.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package events
{
	import flash.events.Event;
 
	public class LayoutEvent extends Event
	{
		public var myXMLInfo:XML;
 
		public function LayoutEvent(type:String,myXMLInfo:XML){
			super(type);
			this.myXMLInfo = myXMLInfo;
		}
		public override function clone():Event{
			return new LayoutEvent(type,myXMLInfo);
		}
	}
}

That’s basically how I’m keeping all the data and user edits bound and passing it along to the zillion form controls to accept and display changes to any other part of the app. More improvements to come in the future, but although I won’t post all the code, I figured this would be useful for the idea behind AirSpace, as people were asking for it.