I've decided to put my framework SomaCore on Github.

SomaCore is a lightweight event-based MVC framework written in AS3 that provides a structure, models, views management and commands. Somacore can be used for Flash, Flex and AIR projects.

SomaCore does not use any external library and does not use dependency injection.

SomaCore is completely event-based and use a concept of wires to code in an efficient decoupled way.

Framework
http://github.com/soundstep/somacore_framework
Demos
http://github.com/soundstep/somacore_demos
Plugins
http://github.com/soundstep/somacore_plugins
Blog Page (with demos)
http://www.soundstep.com/blog/downloads/somacore/
Video tutorial
http://www.soundstep.com/blog/source/somacore/tutorials/getting-started/
Documentation
http://www.soundstep.com/blog/source/somacore/docs/

A very handy capability of the framework among others is the way you can monitor the flow of your application. SomaCore is using the the flash model to monitor commands and even intercept them in a way so that any actionscript developer will feel at home. Example in a wire class to listen and intercept a command:

Click here to see one of the demo code to get started.

Some other things to know about the framework

• Commands are normal built-in Flash events with the bubbles property set to true.
• Commands can be used in the views as they are not really framework code.
• Parallel and sequence commands are built-in.
• Wires are the glue of the frameworks elements (models, commands, views, wires) and can be used the way you wish, as proxy/mediators or managers.
• Wires can manage one class or multiple classes.
• Wires and commands access to all the framework elements (stage, framework instance, wires, models, views and commands).
• Plugins can be created for the framework (such as the SomaDebugger plugin).
• Powerful flow control using the built-in flash event model.

Here is how to get started with github:
http://help.github.com/



I've updated SomaUI, the AIR tool that generates the draft of a Flash website build with SomaMVC. Sorry for the late update but you can now use the generator with Flex 4 and target the Flash Player 10.1.

To avoid a confusion, SomaUI is an AIR tool that generates AS3 sources build with the AS3 MVC Framework SomaMVC.

SomaMVC has nothing to do with SomaCore, they are 2 different frameworks and don't share the same goal.

While SomaMVC (which would entered in the same category as the Gaia Framework) is meant to be generated and rely on an XML File to describe and build its content, SomaCore is a lightweight MVC framework that doesn't build anything for you and would entered in the same category as PureMVC.

I intend at some point to rebuild SomaMVC using SomaCore and unify these 2 projects.

You can find the new SomaUI version on this page or on the Google code project.

I've just uploaded a new video tutorial (48 min) for my lightweight AS3 MVC Framework SomaCore.

You can now get started with it. I explain how to create the framework instance, how to create a wire, create views, create commands and how to intercept them.

I hope you like it!

Here is how to bring life to an image using the filter DisplacementMapFilter.

Click here to see the demo.

I got the idea from a video made by Chad Perkins (thanks Chad, you're giving me a lot of inspiration!) where he is showing this effect in After Effects. My Flash nature pushed me to reproduced it with AS3. The result is great even if the After Effects version is slightly better, maybe the Flash version can be tweaked a bit more.

Here is how it works. I used this wonderful picture from my friend Ziemowit Maj

You also need a second picture that will describe the map of the filter using luminance. The foreground areas should be whiter than the background areas. I made this picture using Photoshop, the brush tools, and of course my proven drawing skills

I apply the DisplacementMapFilter on a BitmapData and I move the map position over time. It is not too complicated, but you can probably spend more time than me to draw the map correctly. Be careful not to make a distortion too big or it will look weird! Here is the code:

Plain Text

Actionscript:

1. package {
2.     import caurina.transitions.Tweener;
3.  
4.     import flash.display.Bitmap;
5.     import flash.display.BitmapData;
6.     import flash.display.BitmapDataChannel;
7.     import flash.display.PixelSnapping;
8.     import flash.display.Sprite;
9.     import flash.display.StageAlign;
10.     import flash.display.StageScaleMode;
11.     import flash.events.Event;
12.     import flash.filters.DisplacementMapFilter;
13.     import flash.filters.DisplacementMapFilterMode;
14.     import flash.geom.Point;
15.     import flash.geom.Rectangle;
16.  
17.     /**
18.      * <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
19.      * <b>Company:</b> Less Rain - <a href="http://www.lessrain.com/" target="_blank">www.lessrain.com</a><br />
20.      * <b>Class version:</b> 1.0<br />
21.      * <b>Actionscript version:</b> 3.0<br />
22.      * <b>Copyright:</b>
23.      * <br />
24.      * <b>Date:</b> Aug 16, 2010<br />
25.      * <b>Usage:</b>
26.      * @example
27.      * <listing version="3.0"></listing>
28.      */
29.    
30.     public class Main extends Sprite {
31.        
32.         [Embed(source="../assets/photo.jpg")]
33.         private var Photo:Class;
34.         [Embed(source="../assets/map.jpg")]
35.         private var Map:Class;
36.        
37.         private var _photo:Bitmap;
38.         private var _map:Bitmap;
39.         private var _point:Point;
40.         private var _photoDisplaced:Bitmap;
41.         private var _photoDisplacedData:BitmapData;
42.         private var _filter:DisplacementMapFilter;
43.        
44.         private var _range:Number = 17;
45.  
46.         //------------------------------------
47.         // private, protected properties
48.         //------------------------------------
49.        
50.        
51.  
52.         //------------------------------------
53.         // public properties
54.         //------------------------------------
55.        
56.        
57.        
58.         //------------------------------------
59.         // constructor
60.         //------------------------------------
61.        
62.         public function Main() {
63.             initialize();
64.         }
65.  
66.         //
67.         // PRIVATE, PROTECTED
68.         //________________________________________________________________________________________________
69.        
70.         private function initialize():void {
71.             // stage
72.             stage.frameRate = 41;
73.             stage.align = StageAlign.TOP_LEFT;
74.             stage.scaleMode = StageScaleMode.NO_SCALE;
75.             // photo
76.             _photo = new Photo();
77.             // photoDisplaced
78.             _photoDisplacedData = new BitmapData(_photo.width, _photo.height);
79.             _photoDisplaced = new Bitmap(_photoDisplacedData, PixelSnapping.AUTO, true);
80.             _photoDisplaced.scaleX = 1.05;
81.             _photoDisplaced.scaleY = 1.05;
82.             _photoDisplaced.x = (stage.stageWidth - _photo.width)>> 1;
83.             _photoDisplaced.y = (stage.stageHeight - _photo.height)>> 1;
84.             addChild(_photoDisplaced);
85.             // map
86.             _map = new Map();
87.             // point
88.             _point = new Point(-(_range), 0);
89.             // enterframe
90.             addEventListener(Event.ENTER_FRAME, loop);
91.             // scroll motion
92.             move(_range);
93.         }
94.  
95.         private function move(target:Number):void {
96.             Tweener.addTween(_point, {time:2, x:target, transition:"linear", onComplete:move, onCompleteParams:[target*-1]});
97.         }
98.  
99.         private function loop(event:Event):void {
100.             _filter = new DisplacementMapFilter(
101.                 _map.bitmapData,
102.                 _point,
103.                 BitmapDataChannel.RED,
104.                 BitmapDataChannel.RED,
105.                 _point.x,
106.                 _point.y,
107.                 DisplacementMapFilterMode.WRAP);
108.             _photoDisplacedData.applyFilter(_photo.bitmapData, _photoDisplacedData.rect, new Point(0,0), _filter);
109.             _photoDisplaced.bitmapData.draw(_photoDisplacedData, null, null, null, new Rectangle( _point.x, _point.y, _photo.width, _photo.height), true);
110.         }
111.        
112.         // PUBLIC
113.         //________________________________________________________________________________________________
114.        
115.        
116.        
117.     }
118. }

4 Comments »

13 08 2010

Super White Effect

Posted by: Romuald in experiments, talking, tags: as3, experiment, flash

Let's start by a Flash demo here and a bit of explanation below.

While training myself to get better with After Effects, I stumble on a very interesting thing about color.

I was watching a Chad Perkins video about HDRI and color depth, more precisely, 32 bits rendering.

He showed what was happening with a Fast Blur effect (which is a 32 bits effect), and a white text in a 32 bits After Effects project.

Here is the rendering in a 8 bits project, just a normal blur.

And here is the result is you set the project to be 32 bits.

So what's happening here? We can see there is some kind of halo, or glow, but there's just a blur. I found the result pretty nice, a lot of luminance, and they call that "superwhite". I didn't find a lot of information, maybe there is another term for that. I found that very intriguing.

I've started to think how to get this effect in flash. The problem is Flash is only rendering 8 bits. I quote a details I found about Pixel Bender:

Although Pixel Bender images have 32-bits per channel, graphics in Flash Player and AIR only have 8-bits per channel. When a kernel is run, the input image data is converted to 32-bits per channel and then converted back to 8-bits per channel when kernel execution is complete.

But I wanted to have a try anyway and even if I don't have the exact same effect in Flash, I found out that something is happening. Here is what I've done.

1. I put a white text on the stage (2 actually for other tests)
2. I've added a Blur effect (15 and 15)

Here is the result, again just a normal blur.

Then I've changed the alpha multiplier value (ColorTransform property) from 1 to 2.5, nothing happened obviously, alpha 1 or 2.5 is the same isn't it? But here is the effect coming, if you add a bit of color, for example by setting the blue multiplier from 1 to 0.99, you then get a (fake?) superwhite. Here is the result:

Again, there's no glow of anything, it is just a color and alpha effect. The amount of "superwhite" is changed with the value of the alpha multiplier, at least from 1 to... 20 or something.

Pretty cool huh? It is a fake superwhite because if I trust After Effect, it can happen only with 32 bits rendering, and I also don't get exactly the same result as in After Effect, the color halo around is missing. But still, I found that quite intriguing. I'm not that good with colors, but I believe that what's happening is the alpha channel that is multiplied by each color channel. Maybe someone will have a more in-depth explanation of what's happening? I would be curious.

To check out the demo, click here.

You can click the button at the bottom to applied values. You can see the difference between the "Normal Blur" and the "Super White".

2 Comments »