Archive for the “experiments” Category

Hi,

I wrote 2 quick scripts for After Effects to export properties to XML. I thought it might be handy for some of you.

I mainly wrote them to export motion trackers to use in Flash afterwards, but you should be able to export other properties.

To use them, do the following:
1. In the menu: Preferences > General > and tick “Allow scripts to write files and access network”
2. open a project
3. select the properties you want to export (for example the 4 points “Feature Center” of motion trackers)
4. In the menu: File > Scripts > Run script file…
5. select one the following scripts

A file “export.txt” should have been created on your desktop (and opened), with the XML content inside.

You should be able to export other properties, such as Transform properties like “position”, and so on.

It is certainly not bug free, but it should get you started.

Export by properties
Export by time

Hope that helps!

Vote in HexoSearch

Comments 2 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 :D

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:
  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. }

Vote in HexoSearch

Comments 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".

Vote in HexoSearch

Comments 2 Comments »

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:
  1. var app:ISoma = new Application(stage);

The only things you need to do is

Actionscript:
  1. app.dispose();
  2. 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:
  1. public function dispose():void {
  2.     // dispose objects, graphics and events listeners
  3. }

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!

Vote in HexoSearch

Comments 3 Comments »

Hi Everyone,

This is not exactly a "Soma release", but I would like to share with you my last work so we can talk about: A new AS3 MVC Framework with its own design philosophy.

Why another AS3 MVC Framework?

I've been working with different Frameworks in the last years, such as PureMVC, Cairngorm and Mate for the well-known. I've always knew that I would write my own "MVC design philosophy", without taking big words, because I would have some needs that existing Frameworks wouldn't completely fill.

That's what happened. I needed a Flash lightweight framework, not DI, event based, working both for Flex or Pure AS3. The biggest inspirations have been PureMVC for the proxies and mediators, and Mate for their event system.

I'll be starting an interesting AIR Modular app and I needed something that will easily allow me to have views and models free of Framework code, without creating tons of files or use any injection. I also wanted a Framework very flexible, so I can use it even for smaller project, being sure I'll be effective in terms of development time.

Free the views and models

First problem, free the views and models of Framework code (loose-coupling). It seems there's a wave of DI Framework but... I've never really been into DI Framework, because they tend to control the way you're doing things. If you stick to it, it is fine, but I've always felt more freedom with framework like PureMVC. I might be wrong, it is just an opinion and not even entirely true as I didn't felt that problem with Mate.

So, to solve this problem, I used the events Mate concept. A basic Flash Events that has a bubble property set to true can become Commands when they are mapped to a Command class. Those events can be intercepted, stopped and processed by the Framework (execute Commands). The great thing is, views and models are free of Framework code and can use Commands because they are just Flash native events.

Wires introduction

Second problem, was to "update" data or states in the views and models. PureMVC is using proxies and mediators and I like that approach. However, you end up by creating tons of files for the sake of loose-coupling pratice. So I've created something that I call "Wire". Now software engineers or PureMVC adept might say that what I'm doing is wrong. I have no idea, I'm no computer scientist, I do what I feel and I'm sharing it with you.

Wire are classes that can contain Framework code and they will be the links between the models, the views, the Framework and... whatever you like. Wire can be proxies, they can be mediators, but they can also be both and handle more than one view or model.

Basically, they are as free as you want them to be. They can even be optional if you don't care about good practice or loose-coupling programming. Wires have easy access to all the framework, models, commands and views. They can register create models, views, register commands or create other wires.

Update from comment:

So far I saw two ways to inject/update information into views without having framework code inside:

- Dependency Injection
- Buffer classes (such as Mediators and Proxies in PureMVC for the analogy, respectively for Views and Models). I mean "buffer" by classes that act as steward of other classes.

I've chosen the second way, and I've created a "buffer" class that I called a Wire.

Wires are completely free classes. I won't tell you how to use them (because that's up to you) but I can tell what you can do with them. Wires can be used to update views and models but they are not tight to anything. They are not even only tight to one tier. To create a wire class you extend Wire and implements IWire, and here are the roles they can take:

- a wire can act as steward of a view (such as Mediator in PureMVC)
- a wire can act as steward of a model (such as Proxies in PureMVC)
- a wire can manage both a view and a model
- a wire can manage multiple views and/or multiple models
- a wire can be considered as a subdivision of the framework and create its own views, create its own models and register its own commands. Much like you would create a specific package to hold a specific matter.

When I build something, I always try to keep a good level of freedom to handle problems how I like but most importantly, how they should be. If you like to have the framework telling you (or forcing you) how to build your application, fair enough but you won't like it.

The wires are the free elements that will let you built your application the way you like or the way it is required to be. They can make your application rigid, segmented, flexible or centralized, depending of the role you are going to give them. They are so free that I believe remove (or lesser) what I call "Framework Fight".

Let's take an example, the Cafe TownSend below.

There are 2 wires: the LoginWire and the Employee Wire. They both register their own commands to control their views and models.

The Login Wire only handles a Login View.

The EmployeeWire handles 2 views: a list of employees and an employee details. But also 1 model (the employees data), all of them only related to employees matter.

SomaCore

I temporarily named this framework SomaCore and it has nothing to do with the Framework I released on this blog (Soma). However, this framework might become the core of what will be Soma v3.

I post this code hoping to get your feedback or point of view of what might be great or wrong in this framework.

Here is a diagram:

SomaCore MVC Diagram


Click here to download a zip file containing the Framework sources code (classes and SWC).

And here are some demos. I made a Flex Cafe TownSend demo and a pure AS3 demo.

SomaCore Flex Cafe TownSend SomaCore Flash AS3 Demo
View Demo
View Source
Download Source
View Demo
View Source
Download Source

This is a very early state, this Framework has not been used yet in a real project beside the demos above. Have a look and please comment what you feel is good or wrong in the core concept.

Romu

Vote in HexoSearch

Comments 11 Comments »