July 5, 2008

Flash CS3 Open Source “Liquid Components” by Byte Array

Filed under: as3, component, cool, flash, note — michaelangela @ 8:37 pm

I am just about to wrap up a project using Flash CS3 and… I wish I saw this earlier… 🙂

Liquid Components for Flash CS3 [ by Didier Brun ] < ByteArray.org

The “Liquid Components” have been created for the Flash people, freelance coders and designers who wish to integrate fully skinnable components in their website, games or little RIA applications.

April 5, 2008

Building Flexlib from SVN source to get openEnd and closeEnd events for WindowShade

Filed under: component, cool, dev, eclipse, education, flex, mac, subclipse, svn, tip, tool — michaelangela @ 12:20 am

Short version: You must provide a path to the manifest.xml file in order for ant to find it! For example:

&amp;amp;amp;lt;arg line="-namespace http://code.google.com/p/flexlib/ /path/to/manifest.xml" /&amp;amp;amp;gt;

Long version: I didn’t know that… thought it makes total sense in hindsight.

I am using the very nifty WindowShade from the life-saving (OK that’s a bit melodramatic…) FlexLib library. However, I wanted to be notified of open and close events. I heard somewhere (can’t find where now) that those events have been added into the SVN for FlexLib. I didn’t want to have to do a checkout and copy those files over and update it everytime the FlexLib SVN code updated… not fun. Fortunately there is a note in the FlexLib Wiki about creating a FlexBuildProject from the svn tree. This got interesting. I never build a SWC before and it certainly makes it a lot easier.

I decided to take the plunge.

I previously installed ant and all the other goodies (like subclipse) from previous project development, including my still-not-quite successful compilation of the Cairngen project for Cairngorm. (On a mac. That’s another story.)

Anyway, after fiddling with the build.xml file and the build.&amp;amp;amp;lt;your platform here&amp;amp;amp;gt;.properties file, it wouldn’t compile. compc complained about not being able to open the manifest.xml file. So very close. Then after a bit of digging, this note popped up.

Talk:Flex Ant Tasks – Adobe Labs

&amp;amp;amp;lt;namespace uri="http://www.company.com/2007/mxml" manifest="${CustomFlexLibrarySource.dir}/customFlexLibrary-manifest.xml"/&amp;amp;amp;gt;

That actually still provided that user with an error which is unfortunate. It’s also unfortunate I don’t know how to help in that situation. 😦 However the bit about providing a full path to the manifest.xml file was the tip I needed. And so, the flexlib.swc file has been created. A quick hit with the SVN update command followed by another build will keep it current. Gotta like that. Of course I need to test it and make sure I built it right, i.e. it works… 🙂

There is an option for running tests for the build as well. Well… let’s see…Run as &amp;amp;amp;gt; Ant Build… add compile tests… test… OK… trying…working…working… doh! Gotta uncomment the the flashPlayerDebug.exe line. Doh! It can’t execute Flash Player.app. Gotta set the path to /path/to/Adobe Flex Builder 3 Plug-in/Player/mac/Flash Player.app/Contents/MacOS/Flash Player instead.

What ho! It worked! Other than some deprecation warnings it worked. Cool.

update…Building the examples and everything else works without a hitch now as well. And yes I have the new openEnd, closeEnd and other properties I was looking for in WindowShade. However I got the “unable to export SWC oem”. I haven’t found a solution for it yet. I saw this:

I think I’ll start using this set up for many other libraries…

[flexcoders] Re: Compiling problems

First of all, I rebuild the workspace using the instructions (I did 
not see it before:( ) like FlexBuilder -clean -vmargs -Xmx512m.

Furthermore, it remained the problem of the connection for my swc.
After reading all debug instructions, I saw that the cause was the
history management. I disable it and it works.

But why the history management caused an error during execution (no
modification made to the swc) ?????

But that’s about actual Flex projects and not just a library project. More study on this later. (Hey, it’s Friday night after all! Time for a break! :-p ) But it’s working as needed so far… *finger’s crossed* Oh yes, the compile tests did pass so that’s a good sign.

April 3, 2008

Using Degrafa for customizable data visualization

Filed under: component, cool, dev, education, flex — michaelangela @ 3:58 am

You have to see it to appreciate it. I especially like the capacity indicator “distribution ala itunes/ipod”, and the shape renderer. So sweet!

Degrafa &amp; Data Visualization

While syncing in iTunes I was looking at the indication
of how my media was distributed across my iPhone and realized that same
visualization could be duplicated using Degrafa. I used a series of
different colored RegularRectangles, some VerticalLineRepeaters for the
inset markings that dynamically change count depending on the size,
some other Rectangles for highlights and shadows, and a
RoundedRectangle to mask the area. I also through in a ComplexFill
composed of a Solid, Bitmap and Blend fill to create the colored plaid
effect. This was really easy to do with binding to change the width,
capacity bars, inset marks and colors.

April 2, 2008

Sweet example of WindowShade + Degrafa

Filed under: component, dev, education, flex — michaelangela @ 1:18 am

What I hope to be able to do sometime in the (near) future… 🙂 Gotta like that Degrafa.

Doug McCune » Blog Archive » Examples from my 360|Flex session – Using Open Source Community Projects

WindowShade + Degrafa example
In this example I used the newly added WindowShade component in FlexLib, combined with the CanvasButton control (also from FlexLib), combined with Degrafa for some custom graphics drawing and CSS skinning. It’s a simple example of creating a “drawer” type of component that docks to the top of the screen and drops down when the user clicks the handle.

One of the things I like about the example is how it

  • uses Degrafa to draw the icons
  • uses the headerRenderer and component right in the WindowShade declaration
  • determines the shape based on the parent’s position (it’s not in a separate class file so this is pretty clean too since the parent is right there)
  • Uses the EllipticalArc to make the “button” for the header
  • has nice graphics to complete the whole feel 🙂

A lot of learning in this one for me.

The example is here.

I like WindowShade

Filed under: component, cool, education, flex — michaelangela @ 1:16 am

I like the WindowShade component from FlexLib. It’s going in a project now. 🙂 The example on this page uses LinkButtons for the header bit.

One of the reasons I like it though is that it’s light. One poster mentioned it should extend Panel and I have seen implementations of this. But because they extend Panel they pick up a lot of extra overhead… at least I imagine they do. Panel is incredibly useful. It does a lot. It’s got a lot of code to that “lot”. But in this case, WindowShade seems to work with something lighter weight which won’t slow the app down too much. Well we’ll see. I am no Flex guru and am always learning. I should put that in a disclaimer somewhere in this site. “I don’t know what I am doing! I am always figuring it out!” 🙂 Fortunately folks like those participating with FlexLib help us out. 🙂 It is much appreciated!

Doug McCune » Blog Archive » WindowShade component added to FlexLib

Here’s an example that uses LinkButtons for the headers. You can use any Button control (ie Button, LinkButton, CanvasButton).


Filed under: component, cool, dev, education, flex — michaelangela @ 1:14 am

It has resurfaced from the depths of my memory… and I finally found it again. The CanvasButton. Put what you want in a button, much like the example on this page. Great stuff from the FlexLib crew.

Doug McCune » Blog Archive » Using complex headers with the Flex Accordion

The CanvasButton component in FlexLib
is an extension of Button that acts like Canvas, which means that it
subclasses Button but allows you to easily add children via MXML.

March 31, 2008

Yahoo maps released an AS3 version!

Filed under: as3, component, dev, flash, flex, map — michaelangela @ 6:52 pm

There once was an app that wanted a map, but alas there was no map for the app. The app was content to use AS2, but it was too slow, too slow it was. Then there was a hack, of modest maps. It was not quite released for use but it was there nonetheless so used it was. It was hacked until it and AS3 and Flex were friends and friends they were for a long time. Now comes Yahoo Maps AS3 so dearly wanted so long ago.

OK, ok enough of that. I couldn’t keep it up myself any longer (bad influence of Monty Python on me… the “Silly Police” should be here momentarily).

Yahoo announced Yahoo Maps AS3 which would have been great a long time ago… maybe for a future rev of an app I would like to do. 🙂

Yahoo! Developer Network – Flash Developer Center – Yahoo! Maps AS3 Component

The new Yahoo! Maps API is now entirely built in ActionScript 3.0. The Maps API now gives you an incredibly powerful map engine and the ability to create custom components, overlays and markers while consuming different webservices provided by Yahoo!, or your own. The YahooMap component is distributed as a SWC, to get started you need to include it into your build path using Flex Builder.

The Maps API contains a core set of widgets, markers, overlays and web services to enable you to interact with the map in every way.

Blog at WordPress.com.