Posts Tagged “as3”
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!
 4 Comments »
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
-
//________________________________________________________________________________________________
-
-
-
-
}
-
}
4 Comments »
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 »
Posted by: Romuald in talking, tags: air, as3
I found out that there's a bug with the badge used to install an AIR application with Firefox from version 3.6.4 until today's version (3.6.6).
If you don't have the AIR runtime installed a Adobe UI should pop up to show a progress bar and install the runtime. The trouble is that nothing happened at all after clicking on the YES button.
To test the bug, uninstall your AIR runtime and test the badge in this page.
The problems is very inconsistent, sometimes it works and sometimes it doesn't.
I haven't been able to find out what's going on, so I reported the bug in this page.
Romu
1 Comment »
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 »
|
Entries (RSS)