Posts Tagged “flex”
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!
 1 Comment »
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:
Actionscript:
-
package {
-
import caurina.transitions.Tweener;
-
-
import flash.display.Bitmap;
-
import flash.display.BitmapData;
-
import flash.display.BitmapDataChannel;
-
import flash.display.PixelSnapping;
-
import flash.display.Sprite;
-
import flash.display.StageAlign;
-
import flash.display.StageScaleMode;
-
import flash.events.Event;
-
import flash.filters.DisplacementMapFilter;
-
import flash.filters.DisplacementMapFilterMode;
-
import flash.geom.Point;
-
import flash.geom.Rectangle;
-
-
/**
-
* <b>Author:</b> Romuald Quantin - <a href="http://www.soundstep.com/" target="_blank">www.soundstep.com</a><br />
-
* <b>Company:</b> Less Rain - <a href="http://www.lessrain.com/" target="_blank">www.lessrain.com</a><br />
-
* <b>Class version:</b> 1.0<br />
-
* <b>Actionscript version:</b> 3.0<br />
-
* <b>Copyright:</b>
-
* <br />
-
* <b>Date:</b> Aug 16, 2010<br />
-
* <b>Usage:</b>
-
* @example
-
* <listing version="3.0"></listing>
-
*/
-
-
public class Main extends Sprite {
-
-
[Embed(source="../assets/photo.jpg")]
-
private var Photo:Class;
-
[Embed(source="../assets/map.jpg")]
-
private var Map:Class;
-
-
private var _photo:Bitmap;
-
private var _map:Bitmap;
-
private var _point:Point;
-
private var _photoDisplaced:Bitmap;
-
private var _photoDisplacedData:BitmapData;
-
private var _filter:DisplacementMapFilter;
-
-
private var _range:Number = 17;
-
-
//------------------------------------
-
// private, protected properties
-
//------------------------------------
-
-
-
-
//------------------------------------
-
// public properties
-
//------------------------------------
-
-
-
-
//------------------------------------
-
// constructor
-
//------------------------------------
-
-
public function Main() {
-
initialize();
-
}
-
-
//
-
// PRIVATE, PROTECTED
-
//________________________________________________________________________________________________
-
-
private function initialize():void {
-
// stage
-
stage.frameRate = 41;
-
stage.align = StageAlign.TOP_LEFT;
-
stage.scaleMode = StageScaleMode.NO_SCALE;
-
// photo
-
_photo = new Photo();
-
// photoDisplaced
-
_photoDisplacedData = new BitmapData(_photo.width, _photo.height);
-
_photoDisplaced = new Bitmap(_photoDisplacedData, PixelSnapping.AUTO, true);
-
_photoDisplaced.scaleX = 1.05;
-
_photoDisplaced.scaleY = 1.05;
-
_photoDisplaced.x = (stage.stageWidth - _photo.width)>> 1;
-
_photoDisplaced.y = (stage.stageHeight - _photo.height)>> 1;
-
addChild(_photoDisplaced);
-
// map
-
_map = new Map();
-
// point
-
_point = new Point(-(_range), 0);
-
// enterframe
-
addEventListener(Event.ENTER_FRAME, loop);
-
// scroll motion
-
move(_range);
-
}
-
-
private function move(target:Number):void {
-
Tweener.addTween(_point, {time:2, x:target, transition:"linear", onComplete:move, onCompleteParams:[target*-1]});
-
}
-
-
private function loop(event:Event):void {
-
_filter = new DisplacementMapFilter(
-
_map.bitmapData,
-
_point,
-
BitmapDataChannel.RED,
-
BitmapDataChannel.RED,
-
_point.x,
-
_point.y,
-
DisplacementMapFilterMode.WRAP);
-
_photoDisplacedData.applyFilter(_photo.bitmapData, _photoDisplacedData.rect, new Point(0,0), _filter);
-
_photoDisplaced.bitmapData.draw(_photoDisplacedData, null, null, null, new Rectangle( _point.x, _point.y, _photo.width, _photo.height), true);
-
}
-
-
// PUBLIC
-
//________________________________________________________________________________________________
-
-
-
-
}
-
}
3 Comments »
Posted by: Romuald in experiments, talking, tags: as3, class, experiment, flash, flex, framework, soma, SomaCore, SomaUI
Hi everyone,
In case you didn't notice that I released an new minimal AS3 MVC Framework some time ago, SomaCore is available on this page.
I call it minimal because it is very lightweight, yet powerful and non-intrusive. You don't have much to learn if you're used to MVC framework of any sort.
I made an update today, the second one in months because it won't change a lot, the structure is there. All the sources and demo have been updated.
You can also replace any kind of previous use of the framework, the only feature added is a dispose method that will remove everything that has been created in the framework. Mostly useful in case you're creating several instance of the framework, it will now be correctly garbage collected.
Once you've created a instance of the framework:
Actionscript:
-
var app:ISoma = new Application(stage);
The only things you need to do is
Actionscript:
-
app.dispose();
-
app = null;
Here is what it is doing to the components that have been added to the frameworks:
- all wires will be removed. On each wire, the dispose method will be called. You can overwrite this dispose method in your wires subclasses.
- all models will be removed. On each model, the dispose method will be called. You can overwrite this dispose method in your models subclasses.
- all commands will be removed
- all views will be removed but not removed from the display list, that's your job. On each view, a dispose method will be called if it exists. You can create this dispose method in your views:
Actionscript:
-
public function dispose():void {
-
// dispose objects, graphics and events listeners
-
}
It important to say that all the components will be removed from the framework, but that's your matter to properly destroyed what you're creating in order to be garbage collected.
A quick info for my plans because I've silent lately (busy).
I'll make a BaseUI release in the next weeks, a completely rebuilt and optimized version 4. It is ready but I need to finish the documentation.
After that I plan to make more examples and screen cast about the SomaCore Framework.
I just wanted to say that I'm rarely happy about what I'm producing, because I like things to be... perfect. Of course, perfection can't be reached, but that is pushing me to create the better code I can, at my level.
I'm now using SomaCore in some projects. One is a relatively complicated AIR Modular Application for children. And for once, I'm very happy with what I've done with SomaCore. It has been a great help really, I should say that it saves me a lot of troubles when changes happened because I built the application how I wanted it, without "framework-fight" and as much flexible as I could. It just made me more responsive to any kind of changes in the project.
For this reason, I'll try to push SomaCore further by making more demos, videos, examples, documentation, wires concept and so on.
I still have plans to create a new version of the first automated framework Soma MVC, and its source generator, based on SomaCore.
Happy development!
3 Comments »
I needed to watch objects to know if they were properly garbage collected or not, so I've added a GC Monitor in the SomaCore Debugger. It is pretty easy to use and I think very useful if you start to care about the memory that the Flash Player is using and global performance.
Demo Flash (garbage collection monitor)
View Demo
View Source
Download Source
The concept to use it is to "register" an object, such as a Sprite or anything, with a name.
The first step is to create the debugger. If you're using the framework SomaCore, you'll find some demo by clicking here.
And if you want to use the debugger without using SomaCore, here is a snippet to create the application and debugger:
Actionscript:
-
package {
-
import flash.display.Sprite;
-
import com.soma.core.Soma;
-
import com.soma.core.interfaces.ISoma;
-
import com.soma.debugger.SomaDebugger;
-
import com.soma.debugger.vo.SomaDebuggerVO;
-
import com.soma.debugger.events.SomaDebuggerEvent;
-
public class Main extends Sprite {
-
function Main() {
-
// create soma application
-
var app:ISoma = new Soma(stage);
-
// create debugger options
-
var vo:SomaDebuggerVO = new SomaDebuggerVO(app, SomaDebugger.NAME_DEFAULT, [], true, false);
-
// create debugger
-
var debugger:SomaDebugger = app.createPlugin(SomaDebugger, vo) as SomaDebugger;
-
// use debugger
-
debug("Hello Debugger");
-
debug(this);
-
debug(app);
-
}
-
private function debug(obj:Object):void {
-
// use app.dispatchEvent() from a class that is not in the display list
-
dispatchEvent(new SomaDebuggerEvent(SomaDebuggerEvent.PRINT, obj));
-
// events available:
-
// SomaDebuggerEvent.SHOW_DEBUGGER;
-
// SomaDebuggerEvent.CLEAR;
-
// SomaDebuggerEvent.PRINT;
-
// SomaDebuggerEvent.HIDE_DEBUGGER;
-
// SomaDebuggerEvent.MOVE_TO_TOP;
-
}
-
}
-
}
Register an object to watch it:
Actionscript:
-
dispatchEvent(new SomaDebuggerGCEvent(SomaDebuggerGCEvent.ADD_WATCHER, "my sprite", mySprite));
You can dispatch this event from anywhere in an DisplayObject in the display list (Sprite, MovieClip, etc), from the document class, the stage or the SomaCore instance.
In the debugger window, there is a "garbage collection bar" where you can click to see the registered objects, they can be either "retained" or "released". A released object means it has been garbage collected and doesn't exist anymore. The memory used by this object will be free to use.
A "force" button will trigger the garbage collection, it will call System.gc() twice with a small interval. This should only works in a Flash Player Debugger version, but useful for debugging.
Here is a list of events you can use for the garbage collection monitor:
Actionscript:
-
SomaDebuggerGCEvent.REMOVE_ALL_WATCHERS
-
SomaDebuggerGCEvent.REMOVE_WATCHER // pass the name of he object as parameter
-
SomaDebuggerGCEvent.ADD_WATCHER // pass the name of the objects and the object itself as parameter
-
SomaDebuggerGCEvent.FORCE_GC
Note: by default SomaDebugger is now using a weak reference to the objects that you want to inspect. You can turn off this option to inspect everything in the debugger, but the objects will never be released, making the garbage collection monitor useless.
Here is how to force the inspection of any objects:
Actionscript:
-
SomaDebugger.WEAK_REFERENCE = false;
Any feedback appreciated!
Romu
3 Comments »
I've updated the debugger used in SomaCore. You can know click on everything to parse the objects and I've added a FPS + Memory meter. I'll continue to improve the debugger with my needs, next step might be a Garbage Collection monitor.
Click here to see the debugger in action.
Tips: if you close the debugger, type "debug" to get it back.
Here is a little bit of code in case you want to want to use the debugger without using the SomaCore Framework.
Actionscript:
-
package {
-
-
import flash.display.Sprite;
-
import com.soma.core.Soma;
-
import com.soma.core.interfaces.ISoma;
-
import com.soma.debugger.SomaDebugger;
-
import com.soma.debugger.vo.SomaDebuggerVO;
-
import com.soma.debugger.events.SomaDebuggerEvent;
-
-
public class Main extends Sprite {
-
-
function Main() {
-
// create soma application
-
var app:ISoma = new Soma(stage);
-
// create debugger options
-
var vo:SomaDebuggerVO = new SomaDebuggerVO(app, SomaDebugger.NAME_DEFAULT, [], true, false);
-
// create debugger
-
var debugger:SomaDebugger = app.createPlugin(SomaDebugger, vo) as SomaDebugger;
-
// use debugger
-
debug("Hello Debugger");
-
debug(this);
-
debug(app);
-
}
-
-
private function debug(obj:Object):void {
-
// use app.dispatchEvent() from a class that is not in the display list
-
dispatchEvent(new SomaDebuggerEvent(SomaDebuggerEvent.PRINT, obj));
-
// events available:
-
// SomaDebuggerEvent.SHOW_DEBUGGER;
-
// SomaDebuggerEvent.CLEAR;
-
// SomaDebuggerEvent.PRINT;
-
// SomaDebuggerEvent.HIDE_DEBUGGER;
-
// SomaDebuggerEvent.MOVE_TO_TOP;
-
}
-
-
}
-
-
}
No Comments »
|
Entries (RSS)