Here are the slides
and there’s the video!
[vimeoย 43464711]enjoy ๐
ps: talk in italian
Category: Flash
Flash Camp Milano 2011 – the day after
Yesterday it has been a great day!
Yesterday we had the FlashCamp here in Milan, hosted by WhyMCA mobile conference (thanks guys).
Lots of fun, lots of people (450 nerds) from the most different beliefs (html5ers, javascripters, objective-Cers, androiders, whateverers :)), a great happening to spread the word about what you can do with the flash platform and how it can ease your work when deploying on mobile devices.
Thanks to Adobe we even had a welcome guest: Mihai Corlan, who presented very cool new stuff putting his hands on Flex Builder 4.5 and the Flex Hero SDK.
Moreover it has been totally the best possible way to meet other people from the community of Milan, TheFlashMind, and to spread the word about our cool AUG ๐
I really enjoyed the FlashCamp, it has been a pretty unique conference in Italy and it has been even more successful than we expected.
As the camp was in “Eataly” we had an Eatalian FlashCamp party at the end, a cool way to make developers meet each other and to make them drunk ๐
Someone even twitted that it was the best part of the FlashCamp in Milan ๐
Last but not least: my friend Luca already uploaded some pics to his flickr account.
See you at the next camp ๐
Speaking at WebTechCon Italy – 9-10 November 2010 – Milano
!!!ONE MORE UPDATE!!!
I’ll be speaking ๐
The session will be “Flash graphics unleashed”. 30 mins to dig into flash graphics capabilities.
See you there
ciao
!!!UPDATE!!!
Some work appointments came through and I’ll not be able to be back for WebTech :
But don’t worry! there’s a HUUUUGE “replacement”, Sandro Ducceschi from SFUG has took over my slots! ๐
so guys, have fun, I’ll be there with my soul ๐
—————————-
Yup, back on stage ๐
I’ll be speaker at WebTechCon Italy, it’s the first year for this German conference in Italy and there are a HUGE amount of good reasons for you to come.
First of all it’s not all about flash!! There are 5 main tracks: webtech, flash day, silverlight day, javascript day and php4 frontend day… yes, “day” is not to be intended as “whole day” but much more as “track”.
It’s a good opportunity to put an eye on what’s going on on the html5 or silverlight fields and learn something new.
On the flashy side there are a bunch of well known and surely attractive speakers:
Luca Mezzalira ,Andrea Trento ,Marco Casario …I’m sure you all know what those guys are known for… then… well…. there’s me ๐
Further, it’s a good way to meet other guys from TheFlashMind AUG ๐
I’ll be speaking twice on flash graphics and pureMVC.
Be sure you buy a ticket and come, one month’s left, then… rock n roll
Install Flash Switcher extension on unsupported versions of Firefox
Today I had to install the must-have flash switcher extension for firefox (by Alessandro Crugnola) and I found that it’s not compatible with firefox versions after 3.0 …
I trust in sephiroth’s extension going to work properly even in unsupported firefox versions, and however it’s worth the attempt, so, how to install it anyway?
First of all, download the flash switcher extension from the mozilla addons site ( https://addons.mozilla.org/en-US/firefox/addon/5044/ ) and save it on your hard drive.
Now that you have the .xpi file rename it to .zip and decompress it, you’re getting a plugin and content folders, chrome.manifest and install.rdf files.
Open install.rdf with a text editor and examine this tag
here min and max versions are defined for the extension, so just change em:maxVersion from 3.0pre to 3.8 (or whatever) and save the file.
Now select all files and folders (not the parent folder!!!) (plugin, content, chrome.manifest, install.rdf) and zip all together, then change the extension from .zip to .xpi.
Open firefox, File>Open, browse to the .xpi file, install… done and working!! w00t! ๐
My unsupported (but properly working) version of firefox is 3.6.8, the flash switcher extension version is 2.0.2.
enjoy ๐
Speaking at IGDA Switzerland 25th february 2010
I’ll be speaking at IGDA Switzerland in Bern in few weeks,
a great opportunity for me to talk about the Flash Platform as a gaming platform, to share the experience I had making the engine of Wazzamba and to meet new people I only “met” in twitter or in their blogs ๐
The meeting will take place in february 25th at “Nothing” (great name guys ;)) hq in Wabern, you can find more info here in IGDA Switzerland blog.
See you there ๐
BitmapData manipulation benchmark
Today I encountered this blog post from Zevan (which blog is REALLY a good daily reading I suggest everyone to take) about bitmapData merging and I started tweaking some code doing some benchmarks to find out which way is the most performing. Here are my tests:
First strike (Zevan’s one): copyPixels
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
w = evt.target.width;
h = evt.target.height;
var image:BitmapData = Bitmap(evt.target.content).bitmapData;
var tileWidth:Number = w / cols;
var tileHeight:Number = h / rows;
var inc:int = 0;
var pnt:Point = new Point();
var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
var startTime:Number = getTimer();
for (var i:int = 0; i<rows; i++){
for (var j:int = 0; j<cols; j ++){
var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
rect.x = j * tileWidth;
rect.y = i * tileHeight;
currTile.copyPixels(image, rect, pnt, null, null, true);
tiles[inc] = currTile;
rect.x += 25;
rect.y += 25;
sX[inc] = rect.x;
sY[inc] = rect.y;
locX[inc] = rX[inc] = -rect.width * 2
locY[inc] = rY[inc] = Math.random() * stage.stageHeight;
setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
inc++;
}
}
trace("copyPixels",getTimer()-startTime,"ms");
addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
var interval:Number;
var animate:Function = function(index:int):void{
locX[index] += (dx - locX[index]) / 4;
locY[index] += (dy - locY[index]) / 4;
if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
locX[index] = dx;
locY[index] = dy;
clearInterval(interval);
}
}
interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
function onLoop(evt:Event):void {
canvas.fillRect(canvas.rect, 0xFFFFFF);
var startTime:Number = getTimer();
for (var i:int = 0; i<tiles.length; i++){
var tile:BitmapData= tiles[i];
loc.x = locX[i];
loc.y = locY[i];
canvas.copyPixels(tile, tile.rect, loc, null, null, true);
}
trace("copyPixels",getTimer()-startTime,"ms");
}
in my machine (mbp, osx) it takes ~27 ms to extract data and ~2-3ms each iteration for setting data on the canvas bitmapData
Second strike: getVectorsetVector
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector.<vector.> = new Vector.<vector.>();
var tileRect:Rectangle;
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
w = evt.target.width;
h = evt.target.height;
var image:BitmapData = Bitmap(evt.target.content).bitmapData;
var tileWidth:Number = w / cols;
var tileHeight:Number = h / rows;
tileRect = new Rectangle(0,0,tileWidth,tileHeight);
var inc:int = 0;
var pnt:Point = new Point();
var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
var startTime:Number = getTimer();
for (var i:int = 0; i<rows; i++){
for (var j:int = 0; j<cols; j ++){
rect.x = j * tileWidth;
rect.y = i * tileHeight;
tiles[tiles.length] = image.getVector(rect);
rect.x += 25;
rect.y += 25;
sX[inc] = rect.x;
sY[inc] = rect.y;
locX[inc] = rX[inc] = -rect.width * 2
locY[inc] = rY[inc] = Math.random() * stage.stageHeight;
setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
inc++;
}
}
trace("vector push:",getTimer()-startTime,"ms");
addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
var interval:Number;
var animate:Function = function(index:int):void{
locX[index] += (dx - locX[index]) / 4;
locY[index] += (dy - locY[index]) / 4;
if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
locX[index] = dx;
locY[index] = dy;
clearInterval(interval);
}
}
interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
function onLoop(evt:Event):void {
canvas.fillRect(canvas.rect, 0xFFFFFF);
var tmpVec:Vector.;
var startTime:Number = getTimer();
for (var i:int = 0; i<tiles.length; i++){
tmpVec = tiles[i];
tileRect.x = locX[i];
tileRect.y = locY[i];
canvas.setVector(tileRect,tmpVec);
}
trace("vector push:",getTimer()-startTime,"ms");
}
on my machine it takes only ~9 ms to extract tiles slices (yes, 3 times faster!!!) and ~1ms for pushing them all in the canvas for each loop iteration
Third strike: getPixelssetPixels
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var tileRect:Rectangle;
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
w = evt.target.width;
h = evt.target.height;
var image:BitmapData = Bitmap(evt.target.content).bitmapData;
var tileWidth:Number = w / cols;
var tileHeight:Number = h / rows;
tileRect = new Rectangle(0,0,tileWidth,tileHeight);
var inc:int = 0;
var pnt:Point = new Point();
var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
var startTime:Number = getTimer();
for (var i:int = 0; i<rows; i++){
for (var j:int = 0; j<cols; j ++){
rect.x = j * tileWidth;
rect.y = i * tileHeight;
tiles[tiles.length] = image.getPixels(rect);
rect.x += 25;
rect.y += 25;
sX[inc] = rect.x;
sY[inc] = rect.y;
locX[inc] = rX[inc] = -rect.width * 2
locY[inc] = rY[inc] = Math.random() * stage.stageHeight;
setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
inc++;
}
}
trace("getPixels",getTimer()-startTime,"ms");
addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
var interval:Number;
var animate:Function = function(index:int):void{
locX[index] += (dx - locX[index]) / 4;
locY[index] += (dy - locY[index]) / 4;
if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
locX[index] = dx;
locY[index] = dy;
clearInterval(interval);
}
}
interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
function onLoop(evt:Event):void {
canvas.fillRect(canvas.rect, 0xFFFFFF);
var startTime:Number = getTimer();
for (var i:int = 0; i<tiles.length; i++){
tileRect.x = locX[i];
tileRect.y = locY[i];
canvas.setPixels(tileRect,tiles[i]);
tiles[i].position = 0;
}
trace("setPixels",getTimer()-startTime,"ms");
}
a nice one, ~ 17 ms to extract and ~2ms to loop on my mac, faster than copyPixels but vectors are still leading…
Fourth strike: merge
[SWF(width=650, height=650)]
var loader:Loader = new Loader();
loader.load(new URLRequest("http://actionsnippet.com/wp-content/chair.jpg"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoaded);
var w:Number;
var h:Number;
var rows:Number = 20;
var cols:Number = 20;
var tiles:Vector. = new Vector.();
var locX:Vector. = new Vector.();
var locY:Vector. = new Vector.();
var rX:Vector. = new Vector.();
var rY:Vector. = new Vector.();
var sX:Vector. = new Vector.();
var sY:Vector. = new Vector.();
function onLoaded(evt:Event):void{
w = evt.target.width;
h = evt.target.height;
var image:BitmapData = Bitmap(evt.target.content).bitmapData;
var tileWidth:Number = w / cols;
var tileHeight:Number = h / rows;
var inc:int = 0;
var pnt:Point = new Point();
var rect:Rectangle = new Rectangle(0,0,tileWidth,tileHeight);
var startTime:Number = getTimer();
for (var i:int = 0; i<rows; i++){
for (var j:int = 0; j<cols; j ++){
var currTile:BitmapData= new BitmapData(tileWidth, tileHeight, true, 0x00000000);
rect.x = j * tileWidth;
rect.y = i * tileHeight;
currTile.merge(image,rect,pnt,0xFF,0xFF,0xFF,0xFF);
tiles[inc] = currTile;
rect.x += 25;
rect.y += 25;
sX[inc] = rect.x;
sY[inc] = rect.y;
locX[inc] = rX[inc] = -rect.width * 2
locY[inc] = rY[inc] = Math.random() * stage.stageHeight;
setTimeout(startAnimation, inc *4 + 100, inc, rect.x, rect.y);
inc++;
}
}
trace("merge",getTimer()-startTime,"ms");
addEventListener(Event.ENTER_FRAME, onLoop);
}
function startAnimation(index:int, dx:Number, dy:Number):void{
var interval:Number;
var animate:Function = function(index:int):void{
locX[index] += (dx - locX[index]) / 4;
locY[index] += (dy - locY[index]) / 4;
if (Math.abs(locX[index] - dx) <1 && Math.abs(locY[index] - dy)<1){
locX[index] = dx;
locY[index] = dy;
clearInterval(interval);
}
}
interval = setInterval(animate, 32, index);
}
var canvas:BitmapData = new BitmapData(stage.stageWidth,stage.stageHeight,false, 0xFFFFFF);
addChild(new Bitmap(canvas));
var loc:Point = new Point();
function onLoop(evt:Event):void {
canvas.fillRect(canvas.rect, 0xFFFFFF);
var startTime:Number = getTimer();
for (var i:int = 0; i<tiles.length; i++){
var tile:BitmapData= tiles[i];
loc.x = locX[i];
loc.y = locY[i];
canvas.merge(tile, tile.rect, loc, 0xFF,0xFF,0xFF,0xFF);
}
trace("merge",getTimer()-startTime,"ms");
}
~36 ms to extract and ~12ms to merge tiles on the canvas!!!…too slow all the way…:
There are still some methods left such as getPixelsetPixel, getPixel32setPixel32, and copyChannel but they’re a too much restrictive choice because they’re handling one pixel, or channel at time therefore a further loop would be required to get them doing this task.
Summary:
getVectorsetVector : ~9ms~1ms
getPixelssetPixels: ~17ms~2ms
copyPixels: ~27ms~2-3ms
merge: ~36ms~12ms
make your choice ๐
NOTE: these benchmarks are valid from flash player 10 because we (both me and Zevan) used the Vector native type to store lists of typed data. To make them valid for previous version of the player make sure to replace vectors with arrays and check other types are already supported by the target player.
stay tuned ๐
My entry to Bit-101s 25 Lines competition
Yep, i made my submission to 25lines contest just few days ago (right in time ๐ ), so (as Sakri did some days before me) I’m publishing my code. It’s an easy terrain generator…
Actually, I think it can be somehow improved both in lines of code and actual performances, so feel free to edit or tell me “you’d better to do that this other way…” ๐
What’s going on is:
- generate a shape filled with a gradient to create a reference color for differents “height”
- generate a perlinNoise everyframe for dataprovider use
- detect each perlinNoise pixel depth according with its main channel value (blue in this case..)
- generating a vector of Bitmaps to be employed in the view
/**
* 25-Line ActionScript Contest Entry
*
* Project: Random Terrain 3D Generator
* Author: Piergiorgio Niero (aka pigiuz) piergiorgio.niero[at]gmail.com
* Date: 11/24/08
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
// 3 free lines! Alter the parameters of the following lines or remove them.
// Do not substitute other code for the three lines in this section
[SWF(width=800, height=800, backgroundColor=0xffffff, frameRate=24)]
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
// 25 lines begins here!
var _bd:BitmapData = new BitmapData(50,50,false,0x0000FF);
var _points:Array = new Array(new Point());
var _vxCont:Sprite = Sprite(addChild(new Sprite));
_vxCont.x = _vxCont.y = 400;
var _vexels:Vector. = new Vector.((2500),true);
var _hMap:BitmapData = new BitmapData(255,1,false);
var _gradient:Shape = new Shape();
_gradient.graphics.beginGradientFill( GradientType.LINEAR,new Array( 0x4267F9, 0xF9EAB0, 0x9EF07D, 0x8DF273, 0x9D5E1E, 0xFFFFFF ),new Array( 1, 1, 1, 1, 1, 1 ),new Array( 90, 105, 110, 120, 145, 185 ),new Matrix(0.2456396484375,0,0,0.0006103524625,127.5,.5));
_gradient.graphics.drawRect(0,0,255,1);
_hMap.draw(_gradient);
addEventListener(Event.ENTER_FRAME,generatePerlinNoise);
function generatePerlinNoise(e:Event=null):void{
_bd.perlinNoise(25,25,1,0,false,true,4,false,_points);
Point(_points[0]).y+=1;
for(var v:uint=0;v<(2500);v++){
_vexels[v] = (_vexels[v]==null)?generateVoxel(v):_vexels[v];
_vexels[v].y = Math.pow((_bd.getPixel(v%50,Math.floor((v/50))) & 0xFF)/255*6,3)*24*.24;
_vxCont.rotationX = mouseY*.1;
_vxCont.rotationY = (_vxCont.rotationY-(90/stage.stageWidth*(mouseX-stage.stageWidth)+45))*.5;
_vexels[v].bitmapData.floodFill(0,0,_hMap.getPixel(255-(_bd.getPixel(v%50,Math.floor((v/50))) & 0xFF),0));}}
function generateVoxel(v:uint):Bitmap{
var b:Bitmap = new Bitmap(new BitmapData(24*.5,24*.5,false,0x000000),"auto",false);
b.x = v%50*24-(_bd.width*24*.5);
b.z = Math.floor((v/50))*24-(_bd.height*24*.5);
return Bitmap(_vxCont.addChild(b));}
// 25 lines ends here!
enjoy ;)
Flash Player 10 API docs ready for download
Here’s the link to download Astro’s API documentation: http://download.macromedia.com/pub/labs/flashplayer10/flashplayer10_as3langref_052008.zip
At this time it’s only available for download, not for online consultation.
Flash player 10 available on Adobe Labs
It’s time to upgrade! ๐
Astro is here!
Let’s take a look to what chefs cooked up for our taste pleasure:
- 3D support: finally adobe put some z in flash!:D on astro release notes Adobe’s claiming that they’re enabling everyone to create complex 3D effects using simple code… mmm… i’m curious about that! i’m a papervisioned guy! ๐
- hardware acceleration: flash player 9.0.115 introduced hardware acceleration… astro is becoming even friendlier with your gpu. Now flash player supports GPU compositing and blitting, both parameters must be enabled by html.
- Adobe Pixel Bender: formerly Hydra (which was a cooler name ๐ ), this system let us create our own custom filters and apply them runtime..
- New text engine! Multiple columns text, support for chinese (GB18030 )
- Speex! a free codec used to encode speech….Ribbit thanx while pacifica voip project is waiting…
- Dynamic sound generation!…Andrโยฉ Michelle’s “Adobe make some noise” petition really made some noise! ๐
- File reference runtime access! Finally we don’t have to upload our files to manipulate them inside our RIAs! Files are handled as ByteArrays so we can do quite everything ๐
- Many others…
Another impressive innovation is Astro is available for Ubuntu Linux users too…so even penguins can try new features shown in the demo on labs site.
Finally the coolest news: WE ALREADY CAN COMPILE CONTENT TARGETING ASTRO!
I’m so excited i don’t need mana to stay awake tonight!:D
Gradient Masking – La sfumatura nelle maschere
Questo โยฎ uno “microtutorial” piuttosto semplice sulle maschere (sono 2 linee di codice -.-) che perโโค ho notato non essere troppo conosciuto.
Come creare un effetto “pila” o “occhio di bue”? o piโฯ banalmente, come creare una maschera sfumata con flash8 o superiori?
- crea un movieclip da mascherare
- crea un altro movieclip contenente una forma con riempimento a gradiente nel quale almeno un colore abbia alpha minore di 100
- posiziona nello stage (fisicamente o via actionscript) i due clip: il mascherato e la maschera
- via actionscript imposta a true la proprietโโ “cacheAsBitmap” di ciascun movieclip
- sempre via actionscript imposta la maschera del movieclip da mascherare (setMask in AS2 o mask in AS3)
ecco il risultato:
[flash http://www.flashfuck.it/wp-content/uploads/2008/01/maschere_sfumate1.swf w=400 h=200]
questo il fla dell’esempio (CS3) Download Source
strongly typed 
