Browsing articles tagged with " flow"

New Flow Framework examples

Jun 10, 2011 // by Tuomas Artman // 13 Comments

Some more Flow Framework examples. This time with 100% more scrollbars and scroll containers.

A few points of interest on this one: Try the text input on page two to see how layout is validated. Try and hold down the vertical scrollbar thumb on page 5. Scroll containers validate their context correctly even though the whole container is resizing.

13 Comments

Austin June 10, 2011 at 19:10

This is amazing… WELL DONE!!!!!!!!!!!!

Reply
- jpeter06 June 13, 2011 at 10:51
  
  very very nice, beautifull style, it is a promising framework. I’ll try to play with it
  
  Reply
Tuomas Artman June 13, 2011 at 21:01

Thanks for the kind comments.

Reply
faun June 14, 2011 at 13:23

There is a chance that you will make it as3-signals based? It would be a neat feature

Reply
- Tuomas Artman June 19, 2011 at 21:16
  
  There’s not a lot of eventing going around to start with, but that might change once I finalize the API. I’ll look into signals and whether they would be a good fit. For the Binding part I still have to rely on Events, as these are compiled in by MXMLC.
  
  Reply
  - opus_3 June 23, 2011 at 13:44
    
    You can use data binding with as3-signals:
    
    http://www.ericfeminella.com/blog/2010/03/22/as3-signals-simulated-data-binding/
    
    Signals are a little bit faster that native events, have lower memory footprint, adds useful helper methods, allows to create interfaces for event oriented components and works well with elements that only support native events like mouse clicks. Main drawback is that it isn’t native so it adds a dependency and few KB into app/framework but… its worth it
    
    I think that there is currently no ui framework that implements as3 signals so it might be a strong point of Flow if this will be incorporated.
    
    Anyway, I hope that you will not stop working on this project since flash world need a good, skinable, lightweight flex-like alternative. Good luck
    
    Reply
    - Tuomas Artman June 24, 2011 at 13:59
      
      Sure thing that you can use Binding with AS3-Signals, but it’s still requires some labour, as it’s not as easy as just to say [Bindable] on a property and then use curly braces to bind to that property.
      
      Anyways, I’ll look if and how Flow could benefit from AS3 Signals. Stay tuned.
      
      Reply
Choi Sung Jo June 17, 2011 at 14:22

Good !!!

Reply
Thomas Burleson July 22, 2011 at 15:44

Take a look at the Flight Framework which as a package for AS3 data binding without mxml.
Could radically enhance your framework.

Reply
Vivek Gupta July 22, 2011 at 16:11

Don’t mind repeating this in twitter and here too.
I fetched “Flow” from github, compilation error with Flow Example, seems “avmplus” is not commited in GIT?

Reply
- Tuomas Artman August 4, 2011 at 05:57
  
  Flow only compiles when you target the Flex Framework 4.5. FF 4.5.1 will give you that error. Will fix
  
  Reply
adrian s November 30, 2011 at 23:15

I have deployed the test you have above on iPhone 4S, using a Flex Mobile project.
The problem I’ve got, is that all content is smaller than normal to about 30-40%

All UI shrinks down for some reason when deployed as an app.

Any ideas ?

Thanks,

Reply
- Tuomas Artman December 5, 2011 at 13:23
  
  Interesting. Care to open a ticket on Github and share your project so that I could debug?
  
  Reply

Leave a comment

First examples of Flow

Jun 6, 2011 // by Tuomas Artman // 7 Comments

Tags: as3, flow

Straight from the workbench, here are a few examples what the Flow Framework will enable developers to do. Nothing spectacular and very much work in progress, but I wanted to share this as early on as possible. Jump right in and check out the source on Github.

Also, check out Sofanatics, the first app that has been built with Flow. To get timely updates on the progress of the framework, follow me on Twitter.

7 Comments

Tuomas Artman June 9, 2011 at 20:52

Not a single comment? Well, I’ll better stop developing this sh*t then

Reply
meerant June 10, 2011 at 18:37

Looks promising. Maybe you’ll team up with guy that creates as-ui-commons* and use some parts of it. Framework dev will be faster

* https://github.com/as3commons/as3commons-ui

Reply
- Tuomas Artman June 24, 2011 at 14:02
  
  Sure thing, I’ll look into AS3Commons. Thanks for the tip.
  
  Reply
Absulit June 13, 2011 at 22:21

This is really nice, I think is pretty useful at the time to develop in iPhone, what do you think?

Reply
- Tuomas Artman June 24, 2011 at 14:00
  
  Yeah, Flow will be excellent for iPhone dev due to it’s speed!
  
  Reply
adrian sule November 30, 2011 at 14:38

Is there a mobile example of using Flow ?

Which are the steps to setup a mobile project with Flow, and publish to .apk ?

Thanks,

Reply
- Tuomas Artman December 20, 2011 at 05:58
  
  Haven’t made an example, but setting one up should be pretty straight forward. Just create a mobile project in Flex and copy the source code from the example over and add the Flow src to your source paths.
  
  Reply

Leave a comment

Flow Framework status

May 22, 2011 // by Tuomas Artman // 2 Comments

Tags: as3, Flash, flow

Flow (the fast and lightweight layout-, effects-, graphics-, data-binding-framework) is now up on GitHub. There’s no documentation, no examples, even no readme file, so it’s probably only interesting if you… hmm… no, there probably is no reason why you would want to dig through the source. Just wanted to let you know, though. Stay tuned.

2 Comments

Karl May 23, 2011 at 20:35

Sounds really interesting. Hope there will be some examples soon..
What exactly didn’t you like about ReFlex?

Reply
- Tuomas Artman May 24, 2011 at 08:43
  
  ReFlex was interesting and all, but going through the code I realized that it heavily relied on interfaces, dynamic types and arrays, so it’s bound to be non-optimal performance-wise. Also, it did have problems with it’s layout (e.g. rendering a frame too late, making constrained objects lag behind).
  
  Reply

Leave a comment

Creating a lite Flex framework from scratch

Apr 10, 2011 // by Tuomas Artman // 14 Comments

Tags: as3, Flash, flex, flow

A while ago, we at Sofanatics started to put together our new real-time sports event client for the Flash Player. We knew from the beginning that we didn’t want to go with Flex. While it’s a great framework for building RIA’s, it’s too monolithic and too slow for our needs, as we knew that we would need every CPU cycle to create a visually stunning application with lots of data flying around.

However, I still wanted to use many of the features that make developing with Flex so much faster than building out an app in pure ActionScript. In no particular order, these features are:

MXML. Declarative programming is one big time-saver.
Contraint-based layout. Our interface scales with the browser. Without a good layout-framework, putting the interface together would require a lot of extra effort.
Data-binding. Once you hook up your data via data-binding, you swear never to go back again.
States. Coupled with declarative layout, states provide a fast way of putting together the visual representation layer of the app.
Transitions & Effects. I’m a sucker for smooth transitions in UI’s
Declarative graphics. Declaring shapes, fills and borders in MXML is just cool.

In addition to these Flex-based features we had the following requirements

Be fast. That’s a no-brainer.
Be small. The Flex framework takes around 300kb without any components. I’ll target 30kb.
Mix&match. You should be able to use any assets in your display list, not only instances derived from UIComponent, as is the case with Flex.

Searching the Internets, I did not find that many frameworks that supported these requirements. The best that I found was ReFlex, but I had some issues with it. While it provides most of the features I was looking for, I still found it to be a bit too slow. Most of the core code relies on anonymous objects, arrays and interfaces instead of using strongly typed parameters and vectors. I did not measure performance, but I’m sure its performance is not optimal. And although developing against interfaces makes your code more manageable, I opted for making my core code as fast as possible, even if it meant making it harder to read or modify (though creating components based on the framework should of course be easy and have a clean API).

So I decided to write my own. It currently powers all of the Sofanatics client’s UI, so check it out to see some of it’s features. Otherwise it’s still very much in the making. Once done, I’ll release it under the MIT license and put it up on Github. But even in its infancy, I do like it very much. It gives you a tenfold increase in productivity against building a UI via ActionScript, but gives the speed of a pure AS implementation.

Now all I need a great name for this cool little framework. Got any ideas?

14 Comments

Mansour April 10, 2011 at 22:42

Looking forward to see what u have implemented – tried something in the past – but did not get very far – have a GIT URL ?

Reply
- Tuomas Artman April 11, 2011 at 10:05
  
  Nothing on GIT yet. Probably gonna take me a while to get the first version out. Stay tuned.
  
  Reply
Mansour April 10, 2011 at 22:48

FlexLite ? Looking forward to src/swc !

Reply
James April 11, 2011 at 03:00

Called it µframework or µinterface. We feel it fit quite nicely to your project.

Reply
- Tuomas Artman April 11, 2011 at 09:56
  
  James, cool idea. Thanks. Altough that would make the package name a bit hard to write
  
  Reply
Vivek Gupta April 11, 2011 at 09:25

Great point Tuomas. I think its the need of time, Flex empowers rapid development, but at the same time it’s too slow and heavy.

Also I think the post title itself can be a good name for this framework. “Flexlite”.

All the Best for further development, looking forward for it’s release

Reply
Vladimir Tsvetkov April 20, 2011 at 16:08

Tuomas, I guess you’ve already check out the project we did almost 2 years ago – FLit:

http://code.google.com/p/flit/

A brief introduction to FLit: http://npacemo.com/wordpress/2009/06/30/flit-a-light-weight-flex-for-flash-apps/

It does almost everything you target in your framework wish list, except for the declarative graphics. I see the value in having the ability to use graphic primitives in MXML – especially when you want to test a component without having to create its skin in Creative Suite.

Check it out. You might pick up some cool ideas. The overall size of the framework is 27K from Flex + approx. 40K from us.

Good luck and keep me updated on your progress,
Vladimir

Reply
- Tuomas Artman April 27, 2011 at 08:23
  
  Hey Vladimir. Yeah, I’ve had a look at FLit years back. When I started developing “Flow” (that’s the official name now), I didn’t recall FLit. If I had, I probably wouldn’t have gone through all the trouble to create my own framework, cause FLit looks pretty good
  
  Reply
  - Vladimir Tsvetkov July 1, 2011 at 16:48
    
    Check this out:
    
    http://obecto.com/
    
    Obecto’s new web site developed with FLit!
    
    Reply
Flow Framework status « Artman&Co – Flash, the Internet & All Else that Matters May 22, 2011 at 16:57

[...] Creating a lite Flex framework from scratch [...]

Reply
Flow Framework – first examples « Artman&Co – Flash, the Internet & All Else that Matters June 6, 2011 at 14:36

[...] from the workbench, here are a few examples what the Flow Framework will enable developers to do. Nothing spectacular and very much work in progress, but I wanted to [...]

Reply
Alex November 4, 2011 at 22:04

Brilliant work in regards to Flow framework. Just curious, how long would it take to develop something like this?

Thanks again for the effort.

Reply
- Tuomas Artman November 13, 2011 at 14:18
  
  Thanks Alex. Hard to count hours as the whole development of the framework has been a on and off project. Maybe a few months of dev so far?
  
  Reply
flex developer December 3, 2011 at 10:39

It’s great effort by you….

Reply