Liquid Components for Flash CS3 by Didier Brun

I am happy to introduce you the "Liquid Components", a brand new component set for Adobe Flash CS3.

Presentation

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.

Full skinning

The skinning mechanism is built on top of a simple thing :

One component = One PNG file (or any other bitmap)

Most of the skins characteristics can be provided from a single PNG file :

  • Component states
  • Skin size
  • Grid behavior
  • Text color for each state


Runtime Skinning

Liquid components make runtime skinning easy as it is made of bitmaps. :

  • Load and apply new skins at runtime
  • Modify skins at runtime


Liquid Component Inspector

The component inspector is a powerful tool especially designed for designers who don't want to code anything related to the components. Here is a list of some of the features provided by the Liquid Components inspector :

  • Liquid Components dedicated tab
  • Copy and paste parameters
  • Recursive objects preview
  • ComboBox showing linked assets from the library


Other features

  • CS3 components like API
  • Multi-state bitmap icons
  • Double styling capabilities : setStyle({}) & getter/setter
  • Bitmap font support
  • Composition based architecture : myScroller.getScollerButton()
  • Adobe Flash cS3 Live Preview support


Licence, Price & Availability

Liquid Components won't be open-source, and the licence will only cost you 1$.
Liquid Components won’t be open-source but freely distributed.

The "Liquid Components" will be available early 2008.

Private alpha is open, drop an email to didier at bytearray.org if you want to start testing them :)
Private alpha is closed now, I've a lot of motivated beta-tester on my list, thanks to all.

Download the Liquid Components here.

Post a comment | Trackback URI

Comments (80)

  1. felix wrote::

    These components seem responsive. How are these better than the Flash CS3 UI components? Also – what’s up with the 1$ license? I don’t get it.

    Friday, October 26, 2007 at 2:53 am #
  2. Keith Peters wrote::

    They look nice. You could get a heck of a lot more than a dollar for them!

    Friday, October 26, 2007 at 3:47 am #
  3. sascha/hdrs wrote::

    They look great! I’m thinking to roll my own components for use in the GUI design for games and using bitmap based skins is a plus there. However I’m missing some important components in every set: TabNavigator and TitleWindow … can’t live without them so I guess I really have to write my own.

    Friday, October 26, 2007 at 5:40 am #
  4. Tek wrote::

    Good and probably hard work !

    The custom component seems really impressive. I hope you let me be on the beta. ;)

    The only things I note that is missing on the existing components is the mouse drag on the scrollbar track.

    Friday, October 26, 2007 at 10:31 am #
  5. nicoptere wrote::

    once again a kick ass job, congratulations.

    Friday, October 26, 2007 at 11:00 am #
  6. LAlex wrote::

    At least you talk about it! ;)

    You already know all the good I think about this set: the designers really needed a such tool to be able to use very smart designs on Flash RIAs… :)

    Friday, October 26, 2007 at 11:13 am #
  7. Didier Brun wrote::

    Thanks for your comments !

    This set is the Liquid Basic Set (which is FREE now !)

    I’ll probably distribute (for a low cost) a Professional one with extra components like : TabBar, TabNavigator, Window, etc.

    Friday, October 26, 2007 at 11:48 am #
  8. Quentin wrote::

    Really nice and slick!
    But 1 buck is not enough! Pump up the price!

    Watch out, though, the of the page has some tags in it… Just my 2 cents.

    Friday, October 26, 2007 at 11:55 am #
  9. Quentin wrote::

    Damn! It has just been updated as I sent my comment!
    Freely distributed? Hell!
    You must be crazy…

    Congrats guys.

    Friday, October 26, 2007 at 11:57 am #
  10. Constantiner wrote::

    Just one bug found. All the list components set their selection on mouse up. Just press mouse outside list component then drag mouse to list component and release mouse button. List row will be selected :(

    Friday, October 26, 2007 at 2:38 pm #
  11. Didier Brun wrote::

    Constantiner > Added to my very long todo list, thanks :)

    Friday, October 26, 2007 at 3:10 pm #
  12. John Nagle wrote::

    GREAT job on the components! I’m very interested in helping with the Alpha (e-mail sent).

    Really, really cool. Very exciting. You guys are doing a great job with this site.

    -John

    Friday, October 26, 2007 at 4:06 pm #
  13. Constantiner wrote::

    By the way the same thing with checkboxes and radiobuttons (changing on release from outside issue).

    Friday, October 26, 2007 at 5:03 pm #
  14. nicoptere wrote::

    Hi, again. Here’s what I came up with after some tests:
    http://www.nicoptere.net/foxy/liquid/miniSkin.png
    probably the smallest possible skin : 19*5 pixels ! :D

    Friday, October 26, 2007 at 5:45 pm #
  15. Yuri Yarovoy wrote::

    nicoptere, nice skin! =)

    Friday, October 26, 2007 at 6:43 pm #
  16. Simon Lord wrote::

    I would LOVE to test out this component set. :)

    Friday, October 26, 2007 at 9:10 pm #
  17. AIR wrote::

    I would LOVE to test out this component set.

    Monday, October 29, 2007 at 12:15 pm #
  18. Derek Vadneau wrote::

    Nice components!

    Some comments:
    - The list components don’t de-select on Ctrl+click. Not sure if that’s simply an option – it would be a handy option, actually.
    - Click and drag on a list item should scroll if you move beyond the top/bottom.

    Monday, October 29, 2007 at 4:17 pm #
  19. Didier Brun wrote::

    nicoptere > very nice tinny skin !

    Derek > Yes, you’re right, I have done nothing about the focus & the keyboard, it’s a part of my todo list.

    Monday, October 29, 2007 at 5:51 pm #
  20. Pleh wrote::

    Sweet components so far, I have been working on a png based suite of components for a while too, have you considered loading an entire suite of png skin files from a zip file then extracting them on the fly using aszip?

    I have done this using fzip, but i am going to try aszip soon as you dont need to inject alder32 checksums.

    loading the entire skin as 1 file should be faster too if there are alot of files :)

    Keep up the good work

    Tuesday, October 30, 2007 at 11:32 am #
  21. Didier Brun wrote::

    Pleh> Yes it’s a good idea !

    Tuesday, October 30, 2007 at 5:10 pm #
  22. arrow wrote::

    I want to start testing them.

    Thursday, November 1, 2007 at 4:10 am #
  23. riCko wrote::

    Très Joli travail Didier depuis le temps qu’on attendait ce genre de concepts avec les composants. L’idée de la grilles liquide est trés bonne :) . Je vais faire mon relou mais une version as 2.0 tout public serait bienvenue si jamais un jour tu t’ennuies :D En tout cas j’ai hâte de les tester. Merci aussi pour la distrib gratuite.

    Friday, November 2, 2007 at 11:25 am #
  24. ngchenghow wrote::

    I would like to start testing them too.

    Saturday, November 3, 2007 at 10:27 am #
  25. Didier Brun wrote::

    riCKo, merci, la version initiale était en AS2 mais elle n’a pas vraiment abouti.
    Pour être vraiment sincère (ah moins qu’un investisseur me propose un million de $), il y a peu de chance pour que je me repenche sur cette version AS2, le peu de temps que j’ai sera consacré à cette mouture AS3 :)

    Saturday, November 3, 2007 at 11:27 pm #
  26. Cris wrote::

    Please, let me know when the final release is ready to download. Thanks for this amazing work.

    Tuesday, November 6, 2007 at 10:47 am #
  27. panpan wrote::

    salut, bien joué tout ça.
    j’ai vu un bug un peu con :
    sur le textArea Icon ;
    sur la largeur, il ne prend pas en compte la largeur de l’icone. du coup la justification déborde à droite. avec le scroll c’est pire.

    Wednesday, November 7, 2007 at 4:43 pm #
  28. Didier Brun wrote::

    Bien vu panpan , c’est noté !

    Wednesday, November 7, 2007 at 5:59 pm #
  29. kiko wrote::

    Can I have an Alpha component to test?

    Wednesday, November 14, 2007 at 6:20 pm #
  30. gabriel wrote::

    i want to do a beta tester

    Sunday, November 18, 2007 at 4:33 am #
  31. Gerry Fontaine wrote::

    I am a developer for high volume sites. I would like to contribute to the source. Let know how I can help.

    Tuesday, November 27, 2007 at 3:57 am #
  32. Didier Brun wrote::

    Hi,
    Kiko, Gabriel, Gerry, ngchenghow, arrow, I’ve just added you to the beta list.
    Thank’s for helping :)

    Tuesday, November 27, 2007 at 11:56 am #
  33. theklue wrote::

    Hi Didier,

    I’d like to start testing these components.

    Thank you very much.

    Friday, November 30, 2007 at 7:04 pm #
  34. Pleh wrote::

    I am writing a pure AS3 game at the moment and would love to be a beta tester and use these components for my GUI.

    :D

    Friday, December 7, 2007 at 6:34 pm #
  35. netdust wrote::

    really nice, it could be just what i was looking for. can i still help testing? Or maybe help develop?

    Tuesday, December 11, 2007 at 3:09 pm #
  36. Sakana wrote::

    Bonjour,

    Via un post sur FXP j’ai appris l’existence de ces composants, Je voulais savoir si je pouvais faire partie de la beta test privé ?

    S. (xav de fxp)

    Thursday, December 13, 2007 at 2:44 pm #
  37. erwan wrote::

    C’est de toute beauté.

    Saturday, December 15, 2007 at 5:27 pm #
  38. zhengzhong wrote::

    I want to test Liquid Components

    Saturday, December 29, 2007 at 8:05 am #
  39. zhengzhong wrote::

    I want to test LiquidComponents

    Saturday, December 29, 2007 at 8:11 am #
  40. mikco95 wrote::

    When viewing your live demos, the text inside the icon text box was off a bit.

    OS: Windows XP
    Using Firefox 2.0
    Adobe Flash Player 9 (latest release)
    Bug Link: http://www.foxaweb.com/projects/liquid/demo/demoComponents.html

    Friday, January 11, 2008 at 2:10 am #
  41. Didier Brun wrote::

    Hi mikco95, on which component : Label / Button / TextInput ?

    Saturday, January 12, 2008 at 2:08 pm #
  42. Rudra wrote::

    Si c’est tjrs possible j’aimerais bien tester les composants.

    Merci et bon courage les gars !

    Wednesday, January 16, 2008 at 3:16 pm #
  43. Ralph wrote::

    I would *REALLY* appreciate getting into the alpha/test program. I totally need some skinnable UI components as soon as humanly possible!!!!!

    Thursday, January 17, 2008 at 2:43 am #
  44. Didier Brun wrote::

    Hi guys,

    I’m very very sorry but the alpha/beta is closed since I’m rewriting a major part of the LC framework.

    The new LC will be very nice, more stable, and with a lot of new feature like CellRendering, DataProvider, FocusManager …

    So, please be patient, I will inform you as soon as possible !

    Thursday, January 17, 2008 at 4:29 am #
  45. Ralph wrote::

    Guess I’ll go buy one of the commercial component sets. Thanks for the update.

    Thursday, January 17, 2008 at 8:36 pm #
  46. Joe wrote::

    These are very beautiful components . I would definitely be interested in the professional set if they had a multi-level drop down menu which worked in flash CS3.

    Best wishes

    Joe

    Friday, January 18, 2008 at 1:26 pm #
  47. Tomelloso wrote::

    Please, I use bit components for AS2, now with AS3 I want to do a beta tester. Thanks.

    Sunday, January 20, 2008 at 2:11 am #
  48. Keith Peters wrote::

    Just ran across these again after a few months, and the beginnings of my own component set. These look very nice. If I weren’t so addicted to component development myself, I’d be all over them!

    Monday, January 21, 2008 at 8:15 am #
  49. Didier Brun wrote::

    Joe > Yes, it would be a good component for a premium pack.

    Tomelosso > Still rewriting, stay tuned for the beta.

    Keith > Thanks for your comment & track-back, you are a source of inspiration for components developers !

    Monday, January 21, 2008 at 3:18 pm #
  50. Marcos wrote::

    Hi. Plese end for me, for i test.

    Monday, January 21, 2008 at 4:57 pm #
  51. Cedric wrote::

    OK, when I develop a set a buttons for an application, basicaly I allow these to have rollOver/out animations, highlight animations and tooltip. I’m boring, but does have your skinnable button these features ? If no, is there a way to add ?

    Tuesday, January 22, 2008 at 2:00 am #
  52. iiley wrote::

    Nice component set, the bitmap skin function and the TreeTable component are impressive. Great works.

    Tuesday, January 22, 2008 at 4:09 am #
  53. Didier Brun wrote::

    Marcos > send me an email
    iiley > thanks !
    Cedric > I will implement (probably in the premium set) two features :
    1) state filter API (add some filters for each state
    2) fade state transition (allow to fade from one state to another)

    Tuesday, January 22, 2008 at 4:51 pm #
  54. M.S. Babaei wrote::

    that’s good
    thanks

    Friday, February 1, 2008 at 3:55 am #
  55. Julius wrote::

    N1ce work guys. But it would be more amazing if u added autoFill option to the inputText, like the browser address bar.
    The idea is to store typed data on local machine or only to use pre-defined words array.

    Monday, February 4, 2008 at 5:59 pm #
  56. Julius wrote::

    When it will be available to download ?

    Monday, February 11, 2008 at 11:30 am #
  57. Julius wrote::

    Guys, when it will be finished?
    Mb i could get u some help on finishing if u want?

    Tuesday, February 12, 2008 at 12:13 pm #
  58. Julius wrote::

    subj

    Thursday, February 14, 2008 at 11:59 am #
  59. Julius wrote::

    Hey, guys… When is the release date?

    Tuesday, February 19, 2008 at 10:33 am #
  60. Didier Brun wrote::

    Hi Julius, no release date is fixed now (probably around June) Stay tuned !

    Tuesday, February 19, 2008 at 12:31 pm #
  61. Julius wrote::

    Didier, and can i by any chance get an alpha version of it?

    Thursday, February 21, 2008 at 2:09 pm #
  62. Julius wrote::

    Hm… Awaiting authorization acc: {login: julius}

    Sunday, February 24, 2008 at 1:24 pm #
  63. netdust wrote::

    i’m getting very curious… :)

    Sunday, March 30, 2008 at 5:12 pm #
  64. najier wrote::

    I would like to try these slick components out. I wonder if u can make be a beta tester.
    Also I am interested in a spreadsheet so maybe I can contribute here.

    Thursday, April 10, 2008 at 2:00 am #
  65. upwilnow01@gmail.com wrote::

    seria espectacular si se llegan a realizar estos componentes liquidos

    Monday, April 14, 2008 at 11:50 pm #
  66. Markuz wrote::

    They look great!!! Can i try them? PLEASE!!!!

    Thursday, April 17, 2008 at 4:12 am #
  67. Gerry wrote::

    Where can I get a copy, thanks

    Wednesday, May 21, 2008 at 10:14 pm #
  68. mobstar wrote::

    Hi Didier,

    Can u please keep us informed on the progress of this project?
    What’s the current status?

    Looking forward to work with this component set…

    Thank you!

    Thursday, May 22, 2008 at 2:38 pm #
  69. bogdan wrote::

    Hy, Didier,

    now is June; is there any chance for beta; i will try your lib with Haxe…
    thanks for die hard working!

    Wednesday, June 4, 2008 at 12:46 pm #
  70. Evan wrote::

    Didier,

    You are famous in the flash community and rightfully so. Pouvez-vous m’aidez ci vous plait?

    I have a CS3 app using the flash radio buttons with dynamic modification of radio button group names. For some odd reason, an occasional radio button group won’t work like its supposed to (selecting/deselecting based on other radiobuttons in with the same groupname). I know this is not my fault because this bug seems to hit in a very weird fashion like nothing I have ever seen before. Also, someone else on the web complained about this same problem.

    Pouvez-vous partagez votre component bouton radio liquide?

    Thanks so much,

    Evan from Canada

    Friday, June 6, 2008 at 8:47 pm #
  71. Didier Brun wrote::

    Hi People,
    The liquid components are now Open Source !
    http://www.bytearray.org/?p=82

    Wednesday, June 11, 2008 at 8:13 pm #
  72. Evan wrote::

    Thank you so much Didier, such a wonderful gift to the community.

    How do I install the components exactly for drag and drop functionality from within the Flash IDE? The install folder doesn’t seem to have any swcs.
    thanks again,
    Evan

    Thursday, June 12, 2008 at 3:52 pm #
  73. Didier Brun wrote::

    Hi Evan,
    you’re welcome :)
    It’s fla based components. So You have just to copy/paste the fla in the right folder.
    I’ve added Install Instruction to the project Page.

    Thursday, June 12, 2008 at 6:52 pm #
  74. Anil Mathew wrote::

    Great componentes i Like it!

    Sunday, October 26, 2008 at 7:11 am #
  75. charlie wrote::

    Help!

    J’utilise les liquids components, et j’ai des problèmes de skin ( une ligne traverse le composant et ce de façon aléatoire a chaque compilation). J’aimerais poser ma question dans le forum dédié mais impossible d’ ouvrir un compte: J’ attend la validation…

    J’espère que didier j’espere que je pose ma question au bon endroit…

    merci

    Wednesday, November 12, 2008 at 2:13 pm #
  76. FlashEng1 wrote::

    I would like to actually comment on these components; which typically I just download and run…. Thank you VERY much for them, and whether they were a dollar or $20, I would have bought them for the sheer ability to customize them easily alone!

    Wednesday, December 3, 2008 at 7:07 pm #
  77. jean-michel wrote::

    i dont think that is the good link for the demo
    it leads to a commercial site

    Thursday, October 22, 2009 at 9:43 am #
  78. Thibault Imbert wrote::

    Hi Jean-Michel,

    Check the following link fore more infos : http://www.bytearray.org/?p=137

    Sorry for the broken links.

    Thibault

    Thursday, October 22, 2009 at 12:24 pm #
  79. what is this wrote::

    is there a guide on how to use this fla? am i forced to use with adobe components? are these components independent that it does not depend on adobe component? what is it actually?

    is there any code example on how to use this?

    Thursday, April 8, 2010 at 3:45 pm #
  80. peet wrote::

    hello, i want to istanciate per script, but nothing appears….
    button = new LiquidButton();
    addChild(button);

    whats also needed?

    Thursday, June 17, 2010 at 1:11 pm #

Trackbacks/Pingbacks (19)

  1. Liquid Components: nuevo set de componentes para Flash CS3 » Joan | Garnet Flex:Flash:PHP:MySQL:JS on Friday, October 26, 2007 at 11:03 am

    [...] Didier Brun, uno de los colaboradores de ByteArray, está desarrollando un nuevo set de componentes para Flash CS3. Según se lee en la página del anúncio, la diferencia principal con respecto al set que viene con Flash CS3 es que el set de componentes Liquid Components promete ser muy fácil de skinear mediante imágenes ( 1 estado == 1 imágen ) y que lleva un inspector que permite parametrizar muchas de sus propiedades para apenas tener que escribir código. El set está en fase alpha privada, si te interesa ser tester puedes contactar con Didier. Más info en el post del anuncio. [...]

     
  2. LAlex devblog v6 on Friday, October 26, 2007 at 12:33 pm

    Composants Flash CS3 : le meilleur set sera gratuit?…

    Trouver un set de composants de base pour Flash CS3, à part celui développé par Grant Skinner dont tout le monde se plaint, c’est pas facile. Trouver un set de composants faciles à personnaliser, c’est encore moins facile. Alors quand un…

     
  3. GiuseppeSorce » Blog Archive » Liquid Components on Friday, October 26, 2007 at 1:20 pm

    [...] Potete dare un’ occhiata su Liquid Components  [...]

     
  4. Набор компонентов «Liquid Components» | Garbage Collector on Friday, October 26, 2007 at 6:35 pm

    [...] ByteArray.org вниманию сообщества был представлен новый набор UI компонентов для Flash CS3 под названием «Liquid [...]

     
  5. jonnymac blog » Flash CS3 Alternative Component Set: Liquid Components on Monday, October 29, 2007 at 12:54 am

    [...] Brun of ByteArray.org fame has released a free set of Flash CS3/AS3 UI components, offered as an alternative to those [...]

     
  6. Bryngfors.com » Blog Archive » Komponenter för Flash CS3 on Tuesday, November 6, 2007 at 12:35 am

    [...] är det kul att se andra initiativ. Liquid Components strävar efter att förenkla arbetet som krävs för att förändra en komponents utseende. [...]

     
  7. Liquid Components » BIT-101 Blog on Monday, January 21, 2008 at 8:21 am

    [...] Check out Liquid Components. This entry was posted on Monday, January 21st, 2008 at 1:16 am and is filed under Flash. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

     
  8. Jour de pluie | Yahoo! : Composants Flash et rachat… on Monday, February 4, 2008 at 8:25 pm

    [...] être à la mode en ce moment et on en trouve de plus en plus sur le net, à l’image de Liquid Component développé par des [...]

     
  9. 如何选择开源项目进行Flash项目开发? < Wersling’s Bolg on Monday, May 12, 2008 at 9:50 am

    [...] Liquid Components : 这个组件还没有发布，但是我很期待它，看看demo吧，所有组件的Skin只需是一张图片，有了这个组件，你只需要designer按照文档给你图片就可以了，哈哈～当然，请确保你不是designer。 [...]

     
  10. LiquidComponents Has Gone Open Source! | Flash Speaks Actionscript on Wednesday, June 11, 2008 at 3:38 pm

    [...] Liquid Components are a brand new component set for Adobe Flash CS3 crated by Didier Brun. [...]

     
  11. iTamt.cn » Blog Archive » Liquid Component开源 on Wednesday, June 11, 2008 at 3:39 pm

    [...] Liquid Component是扩展Flash CS3组件的组件，看这里 [...]

     
  12. The Flash Art of War » Blog Archive » Check Out Liquid Components! on Friday, June 13, 2008 at 4:27 pm

    [...] on the look out for other people and how they have achieved similar results. I had bookmarked Liquid Components a while ago and Myles pointed out to me the other day that Didier Brun (The Developer) has open [...]

     
  13. Flash CS3 Open Source “Liquid Components” by Byte Array « Ramblings on Saturday, July 5, 2008 at 10:52 pm

    [...] 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. [...]

     
  14. 104 Free Opensource APIs, Libraries, and tools for the Flash Platform | The Flashchemist on Tuesday, January 6, 2009 at 12:39 am

    [...] Liquid Components for Flash [...]

     
  15. Flex & Flash Facil - 100+ API's AS3 para facilitar a vida. | TSW - That Should Work on Tuesday, January 13, 2009 at 11:43 pm

    [...] Liquid Components for Flash [...]

     
  16. Spot Geek - Tecnologia , Programação , web , internet, php » Blog Archive » 104 Free Opensource APIs, Libraries, and tools for the Flash Platform on Wednesday, January 14, 2009 at 4:56 am

    [...] Liquid Components for Flash [...]

     
  17. Liquid Components, now Open Source ! - ByteArray.org on Monday, June 20, 2011 at 6:57 pm

    [...] I have just joined DDB Paris as a Technical Director, it is a great news for me (and DDB I hope). Unfortunately, this new job gives me very little time to work on my personal projects like the "Liquid Components". [...]

     
  18. Download Free Premium Wordpress Themes on Thursday, October 13, 2011 at 3:24 am

    Download Free Premium WordPress Themes…

    [...]Liquid Components for Flash CS3 – ByteArray.org[...]…

     
  19. review on Thursday, December 1, 2011 at 1:33 am

    review…

    [...]Liquid Components for Flash CS3 – ByteArray.org[...]…