Posts Tagged “air”
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 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 »
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 »
I had to get an AIR application without the OS window, let's say windowless or chromeless.
I needed to be able, with my own graphics, to minimize, restore, maximize, close, close in the system tray or dock, fullscreen and resize.
You can find several tutorials on Internet (with which I got inspired) but I put all these functionalities in one small example as it is convenient.
You need to set 2 parameters out of the code, in the XML description file:
Actionscript:
-
<systemChrome>none</systemChrome>
-
<transparent>true</transparent>
I won’t explain the code, I guess it is easy enough to find out. You can comment if something is not clear for you.
Here is the code of the main mxml file:
Actionscript:
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" showFlexChrome="false" creationComplete="init()">
-
-
<mx:Script>
-
<![CDATA[
-
-
[Embed(source="assets/iconDock.png")]
-
[Bindable]
-
public var IconDock:Class;
-
-
private function init():void {
-
registerMovementHandler();
-
setDock();
-
}
-
-
public function registerMovementHandler():void {
-
appCanvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDrag);
-
btResizeBottomRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
-
btResizeBottomLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
-
btResizeTopRight.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
-
btResizeTopLeft.addEventListener(MouseEvent.MOUSE_DOWN, resizeWindow);
-
}
-
-
public function mouseDrag(e:MouseEvent):void {
-
if (e.target == e.currentTarget) stage.nativeWindow.startMove();
-
}
-
-
public function resizeWindow(e:MouseEvent = null):void {
-
if (e.target == e.currentTarget) {
-
var corner:String;
-
switch(e.currentTarget){
-
case btResizeBottomRight:
-
corner = NativeWindowResize.BOTTOM_RIGHT;
-
break;
-
case btResizeBottomLeft:
-
corner = NativeWindowResize.BOTTOM_LEFT;
-
break;
-
case btResizeTopRight:
-
corner = NativeWindowResize.TOP_RIGHT;
-
break;
-
case btResizeTopLeft:
-
corner = NativeWindowResize.TOP_LEFT;
-
break;
-
}
-
stage.nativeWindow.startResize(corner);
-
}
-
}
-
-
public function setDock():void {
-
if (NativeApplication.supportsSystemTrayIcon){
-
dockProperties();
-
SystemTrayIcon(NativeApplication.nativeApplication.icon).menu = dockMenu();
-
}
-
}
-
-
private function dockProperties():void{
-
SystemTrayIcon(NativeApplication.nativeApplication.icon).tooltip = "Soundstep | chromeless window";
-
SystemTrayIcon(NativeApplication.nativeApplication.icon).addEventListener(MouseEvent.CLICK, undock);
-
}
-
-
private function dockMenu():NativeMenu {
-
var menu:NativeMenu = new NativeMenu();
-
var open:NativeMenuItem = new NativeMenuItem("Open");
-
var close:NativeMenuItem = new NativeMenuItem("Close");
-
open.addEventListener(Event.SELECT, undock);
-
close.addEventListener(Event.SELECT, closeWindow);
-
menu.addItem(open);
-
menu.addItem(new NativeMenuItem("",true));
-
menu.addItem(close);
-
return menu;
-
}
-
-
public function dock():void {
-
stage.nativeWindow.visible = false;
-
NativeApplication.nativeApplication.icon.bitmaps = [new IconDock() as Bitmap];
-
}
-
-
public function undock(evt:Event):void {
-
stage.nativeWindow.visible = true;
-
stage.nativeWindow.orderToFront();
-
NativeApplication.nativeApplication.icon.bitmaps = [];
-
}
-
-
public function closeWindow(e:Event = null):void {
-
stage.nativeWindow.close();
-
}
-
-
public function setFullscreen():void {
-
var state:String = (stage.displayState == StageDisplayState.FULL_SCREEN) ? StageDisplayState.NORMAL : StageDisplayState.FULL_SCREEN;
-
stage.displayState = state;
-
}
-
-
]]>
-
</mx:Script>
-
-
<mx:Canvas right="0" left="0" top="0" bottom="0" backgroundColor="#CF3232" id="appCanvas">
-
-
<mx:Label buttonMode="true" mouseChildren="false" text="Min" top="10" color="#000000" id="btMin" click="minimize()" horizontalCenter="58"/>
-
<mx:Label buttonMode="true" mouseChildren="false" text="Max" top="10" color="#000000" id="btMax" click="maximize()" horizontalCenter="-45"/>
-
<mx:Label buttonMode="true" mouseChildren="false" text="Close" top="10" color="#000000" id="btClose" click="closeWindow()" horizontalCenter="96"/>
-
<mx:Label buttonMode="true" mouseChildren="false" text="Restore" color="#000000" id="btRestore" click="restore()" top="10" horizontalCenter="-91"/>
-
<mx:Label buttonMode="true" mouseChildren="false" y="10" text="Tray/Dock" color="#000000" id="btSys" click="dock()" horizontalCenter="8"/>
-
<mx:Label buttonMode="true" mouseChildren="false" text="Fullscreen" color="#000000" horizontalCenter="0" bottom="10" id="btFullscreen" click="setFullscreen()"/>
-
-
<mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomRight" themeColor="#494949" right="0" bottom="0" />
-
-
<mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopLeft" themeColor="#494949" left="0" top="0" />
-
-
<mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeBottomLeft" themeColor="#494949" bottom="0" left="0" />
-
-
<mx:Canvas width="20" height="20" backgroundColor="#7B0707" borderStyle="none" borderColor="#FFFFFF" id="btResizeTopRight" themeColor="#494949" right="0" top="0" />
-
-
</mx:Canvas>
-
-
</mx:WindowedApplication>
You can download the source or install the AIR application:
In order to view this page
You must enable Javascript
And download the Flash Player
8 Comments »
|
Entries (RSS)