Another SomaCore demo is available on Githug or on the SomaCore page.

This demo is relatively simple. Keywords are sent to the Twitter API using a command that is dispatched straight from the view as it is something possible with SomaCore. A command is nothing more than a flash built-in event. The views are able to dispatch commands without accessing to a mediator first and stay completely free of framework code.

A TwitterService dispatch a search result event after getting the data. The wire responsible of the main view is listening to the search result event and update the view.

The SearchWire class demonstrates that both commands and events can be listened to from any wire.

The control of the flow of the application is also very flexible, the SearchWire class could have stopped the search command for any reason using event.preventDefault() as the class is listening to the command (if the event is sent with a cancelable property set to true).

Any commands in SomaCore can be listened to in any wires, and can also be “default prevented”.

Twitter Search

View Demo
View Source
Download Source

Credits: Inspired by a great Flex Robotlegs demo by John Lindquist, using the AS3 API library Tweetr.

I’ve added a very simple SomaCore Hello World demo.

The application creates a wire, a view and a model. The view dispatch a command to request a message, the command ask the data to the model, the model gets the data and dispatch an event to notify the framework, the wire catch the event and update the view with the message.

That’s all!

The demo is also available from the demo repository on Github:
http://github.com/soundstep/somacore_demos

Hello World

View Demo
View Source
Download Source

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 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 »