I know its been very quiet here of late, but I’ve been pretty active on our Google Code.

A couple of weeks go someone who’d checked out the source left a post asking what Rect was for and how it differed from the Rect found in FXG. I thought it was about time I wrote a post to cover it.

I was building a dashboard component for a client a couple of weeks back, much like the one found on the main BBC homepage, or iGoogle, where you can add/removed and rearrange the position of the items shown. Much like those I wanted to show the user where the new item would be dropped with a rectangle that had a dashed stroke, and I wanted to be able to defined this in my skin, in MXML using a dropIndicator, to keep things nice and readable.

The problem is that Flash doesn’t support different stroke types, just different weights, and Adobe’s implementation of FXG also doesn’t allow for different stroke types. It’s true I could have drawn it with a complex Path, but then it wouldn’t have scaled correctly.

So I set about getting some primitive classes together where I could specify custom stoke types the result of which are below. You can also specify custom fill types, although I’m not sure they’ll be as useful as we already have BitmapFill. Using a the lineBitmapStyle() method for the stroke just didn’t cut it as the BitmapData needs to change depending on the direction of the stroke.

I’ve covered the primitives that are included in FXG, but the code is by no means complete and still needs some work to support missing drawing methods, and to fully implement some of the methods that are included.

I’ve also added 2 types of stroke, SolidColorDash (probably the most useful), and SolidColorHatch.

The classes Dash and Hatch can also be used in pure AS if required (props to Senocular where the basis for these classes was lifted).

(right click for source).

  • ws.tink.spark.primatives.Cross
  • ws.tink.spark.primatives.Ellipse
  • ws.tink.spark.primatives.Line
  • ws.tink.spark.primatives.Path
  • ws.tink.spark.primatives.Rect
  • 13 Responses to “Primitives”

    1. JabbyPanda says:

      With implementing and applying it to your custom ws.tink.spark.primatives.Rect you’ve made building of any editing application (think of custom Picnik or SlideRocket) that uses object selection easier.

      Cudos to you!

    2. Mediamonkey says:

      Jeesh, just when I finished my own animated dashed line algorithm :P

    3. Tink says:

      hmm well these don’t animate, but that could be an interesting addition

    4. Mediamonkey says:

      Here you go:

      You’re free to edit the class and add it to your Tink library if you like.
      I haven’t tested it in a live application yet, so keep that in mind ;)

      Cheers, Bart

    5. Aaron Hardy says:

      Hey Tink, nice work. You mentioned right-clicking for the source but I’m not seeing the view source option. I can access the primitive code in your repo but I was looking forward to seeing your demo code. Thanks!

    6. Tink says:

      Hi Aaron

      I’ll try and get round to recompiling it with view src enabled, but for now you can view the src here

    7. Hieu says:

      Thanks for your work. It really helps me :-)

    8. Manuel says:

      Hi Tink,

      I need the Hatch stroke but as a fill, i tried to override some methods but i’m missing the Hatch class on your repository. can you help me?

      Thanks in advance

    9. Sanjay says:

      Hi Tink,

      I find this very usefull, but just want to know if i want to use this in my project do i need create a seprate Library Project of this files.
      And where can i find Tink.SWC file, It is throughing error “Could not resolve to a component implementation”

      • Tink says:

        Hey Sanjay

        Maybe the SWC isn’t the up to date. Best to just download the source into a new project and create a SWC yourself.

    10. Leo says:

      So i am trying to create an itemrenderer for a list with a solid color and a dashed border inside it. However i want the border to be padded like 10px in the solidcolor but i cant figure out how to work it out with your library. any help?thanx :D

      • Tink says:

        Hi Leo

        You’d need to give your renderer the required background color, then use a st:Rect primitive inside it that uses a st:SolidColorDash, and set its left, right, top and bottom values to 10.

    Leave a Reply