Posts filed under 'flash'
Alright, this example is very similar to the other examples I have done. But with this one I am scaling all pixels at the same rate. Just click on it the image in the example Source | Example
[as] import flash.display.*;
import caurina.transitions.Tweener;
import flash.sampler.*;
var pixHolder:Sprite = new Sprite();
var img:Img = new Img();
//pixHolder.opaqueBackground = true;
addChild(pixHolder);
var coords_array:Array = [];
var pixels_array:Array = [];
var bmd:BitmapData = new BitmapData(img.width, img.height, false);
bmd.draw(img, new Matrix());
bmd.lock();
startSampling();
for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
var coords:Object = {};
//var pixData:BitmapData = new BitmapData(1, 1, false, bmd.getPixel(i, j));
//var pixBit:Bitmap = new Bitmap(pixData, PixelSnapping.ALWAYS, true);
var pixSprite:Sprite = new Sprite();
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);
pixSprite.graphics.drawRect(0, 0, 1, 1);
pixSprite.graphics.endFill();
pixSprite.x = i;
pixSprite.y = j;
//pixSprite.filters = [new BlurFilter(5, 5, 3)];
//pixSprite.addChild(pixBit);
pixHolder.addChild(pixSprite);
coords.sprite = pixSprite;
coords.x = i;
coords.y = j;
coords_array.push(coords);
}
}
trace(”what: ” +getSampleCount() )
bmd.unlock();
bmd.dispose();
stage.addEventListener(MouseEvent.CLICK, updating, false, 0, true);
function updating(evt:MouseEvent):void
{
removeEventListener(MouseEvent.CLICK, updating);
trace(”over”);
for(var k:int = 0; k < coords_array.length; k++)
{
Tweener.addTween(coords_array[k].sprite, {x:coords_array[k].sprite.x * 2, scaleX:coords_array[k].sprite.scaleX * 2, scaleY:coords_array[k].sprite.scaleY * 2, delay:.5, y:coords_array[k].sprite.y * 2, transition:”linear”, time:.5});
}
trace(getSampleCount() )
}
[/as]
April 29th, 2008
Alright, in this example, I am cutting each pixel in an image and piecing it back together again. Only this time I animating the pixel to a new location, piecing back the image at 200%. I think this can open a lot doors in what you can do with a bitmap.
Here is the Bitmap test 2 example
bitmaptest2.fla
Here is the code
[as]import flash.display.*;
import caurina.transitions.Tweener;
//holds all the pixels
var pixHolder:Sprite = new Sprite();
//linkage to img in library
var img:Img = new Img();
addChild(pixHolder);
//array that will hold info of each pixel
var pixels_array:Array = [];
//bitmapdata of the img
var bmd:BitmapData = new BitmapData(img.width, img.height, false);
//put the img bitmapdata in the new bitmapdata object
bmd.draw(img, new Matrix());
//I heard this helps performance
bmd.lock();
//loop thru each pixel
//i.e. i= 0; j = 0 then i=1; j = 0 then i = 2; j = 0 you get it right?
for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
//create an obj to hold each pixels info
var coords:Object = {};
//in this example I decided to use a rect graphic instead of a single bitmap
//for fun
var pixSprite:Sprite = new Sprite();
//make a pixSprite for each pixel
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);
pixSprite.graphics.drawRect(0, 0, 1, 1);
pixSprite.graphics.endFill();
// add an event listener to each pixel to animate
pixSprite.addEventListener(MouseEvent.MOUSE_OVER, updating, false, 0, true);
//put pixels in their right place
pixSprite.x = i;
pixSprite.y = j;
pixHolder.addChild(pixSprite);
}
}
bmd.unlock();
//you don’t need the data in memory any more
bmd.dispose();
function updating(evt:MouseEvent):void
{
//the moused over pixel removes listener, scales 200% and moves down to make a img at 200%
evt.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, updating);
trace(”over”);
Tweener.addTween(evt.currentTarget, {scaleX:2, scaleY:2, x: img.width + evt.currentTarget.x * 2, y: img.height + evt.currentTarget.y * 2, transition:”linear”, time:.5});
}
[/as]
April 23rd, 2008
So the last couple of weeks I have been jacking around w/ Bitmaps and BitmapData. I’ve always wanted to try it but never had the courage. Now that I have, I wish I’d have done it sooner.
In this first example I’m just copying each pixel throwing it to the wind and using Tweener to animate it to a spot. I don’t think Tweener is the best option course as you can see it runs slow. I’m also using Grant Skinner’s Memory Gauge to illustrate how slow it is. This is just a proof of concept anyway.
Here is the Bitmap and BitmapData src v1
Here is the code
[as]
// code written by Josh Weatherspoon of http://swfitgood.com
import flash.display.*;
import caurina.transitions.Tweener;
//holds all the “pixels”
var pixHolder:Sprite = new Sprite();
//image of me in the library thru linkage
var img:Img = new Img();
//pixHolder.opaqueBackground = true;
addChild(pixHolder);
//array that will hold info of each pixel
var coords_array:Array = [];
//bitmapdata of the img
var bmd:BitmapData = new BitmapData(img.width, img.height, false);
//put the img bitmapdata in the new bitmapdata object
bmd.draw(img, new Matrix());
//I heard this helps performance
bmd.lock();
//loop thru each pixel
//i.e. i= 0; j = 0 then i=1; j = 0 then i = 2; j = 0 you get it right?
for (var i:int = 0; i < img.width; i++)
{
for (var j:int = 0; j < img.height; j++)
{
//create an obj to hold each pixels info
var coords:Object = {};
//var pixData:BitmapData = new BitmapData(1, 1, false, bmd.getPixel(i, j));
//var pixBit:Bitmap = new Bitmap(pixData, PixelSnapping.ALWAYS, true);
//in this example I decided to use a circlular graphic instead of a single bitmap
//for fun
var pixSprite:Sprite = new Sprite();
//make a pixSprite for each pixel
pixSprite.graphics.beginFill(bmd.getPixel(i, j), 1);
pixSprite.graphics.drawCircle(0, 0, 1);
//set the pixel to a random location on the stage
pixSprite.x = Math.random() * stage.stageWidth;
pixSprite.y = Math.random() * stage.stageHeight;
//pixSprite.filters = [new BlurFilter(5, 5, 3)];
//pixSprite.addChild(pixBit);
pixHolder.addChild(pixSprite);
//gather info to access each pixel individually
coords.sprite = pixSprite;
coords.x = i;
coords.y = j;
coords_array.push(coords);
}
}
bmd.unlock();
// on mouse over start animating
stage.addEventListener(MouseEvent.MOUSE_OVER, updating, false, 0, true);
function updating(evt:MouseEvent):void
{
// loop thru each pixel and move it to the original location
stage.removeEventListener(MouseEvent.MOUSE_OVER, updating);
for(var k:int = 0; k < coords_array.length; k++)
{
Tweener.addTween(coords_array[k].sprite, {x:coords_array[k].x, scaleX:1, scaleY:1, delay: .3, y:coords_array[k].y, transition:”linear”, time:10});
}
}
[/as]
April 21st, 2008
So today Daniel Dura, an Adobe Evangelist, came by Travelocity to talk about Flash, Flex and AIR. It was interesting to here him speak and his hair was redder then pictures led on. But I won’t hold that against him.
History and Examples
If you have ever seen anyone from Adobe speak, you know they have to go over the History of the Flash Player, AVM, JIT and all that. Luckily he didn’t have to talk about the history of the web as some Adobe eseminars do.
Once he got past that some people asked questions about some of Adobe’s technologies. I’m not quoting Daniel, but he compared Flash to Silverlight and AIR to WPF. One thing I didn’t know is that the debugger and even the compiler are open source. Though I will never want to rewrite the compiler. Nice Adobe 
Oh and they showed this killer travel app that they cooked up.
Examples
I don’t know what the rest of the audience’s background is but I though it was good he went over using AS3 in FlexBuilder. Some examples were using E4X, Arrays and DisplayObjects. Afterwards he created a simple Flex rss reader for his blog. Then converted to an AIR app which is quite simple if you didn’t know.
What was not easy was him showing us how to compile it only using the command line. Thankfully after that he showed how to do that in FlexBuilder (cake).
Next was an HTML example, I forgot what the example was. Though he remined me that you can call flash packages in JavaScript. The way it works is their is the flash engine and the JavaScript engine. The JavaScript engine says, “Hey, I can’t find this DropShadowFilter thing…Oh, I’ll look in the Flash engine. There it is.” That is really exciting to me. See my post on calling Flash class in Javascript.
After that he talked about the other AIR specific packages.
- Drag and Drop
- Service Monitor
- SqlLite
(An aside) One thing I saw that was awesome cause I love the in operator and for each but I didn’t know you could do this
[as]var array:Array = ["butter", "eggs", "sugar"];
trace((2 in array));[/as]
Good Job Daniel. You reawakened my want to use AIR.
Oh see his Air Code
April 15th, 2008
So since PureMVC has updated twice and also I never talked about garbage collection of the app, I have refactored PurelyKuler to work with PureMVC 2.3. Thate are quite a few changes, some being:
- the framework is being ported to many languages like PHP, Ruby, Python, Coldfusion, C# and many others.
[as]import org.puremvc.as3.interfaces.IFacade;
import org.puremvc.as3.patterns.facade.Facade;[/as]
as oppose to
[as]import org.puremvc.interfaces.IFacade;
import org.puremvc.patterns.facade.Facade;[/as]
- there is a new way to notify observers:
[as]facade.sendNotification(PurelyKulerConstants.STARTUP, app);[/as]
as oppose to
[as]facade.notifyObserver(new Notification(PurelyKulerConstants.STARTUP, app))[/as]
- also the Mediators are can be named from outside the class, so you can have many instances of the class and remove specific instances and not all.public function PurelyKulerMediator(mediatorName:String = null, viewComponent:Object=null){
_tf = new TextField();
super(NAME, viewComponent);// the colorContainer
}
Those are just a few.
Alright back to PurelyKuler.
So if you look at the last example I did, it was just about getting data from a Proxy to a Mediator.
This time I’m adding garbage collection and using the new, to ver2.3, onRemove method in IMediator to delete all the ui and variables. Like this.
[as]override public function onRemove():void
{
vo.removeEventListener(MouseEvent.CLICK, changeColor);
vo.graphics.clear();
vo.parent.removeChild(_tf);
_tf = null;
_ka = null;
cc = undefined;
trace(”_tf: ” + _tf);
}[/as]
Alright enough typing, here it is. Click on a mediator name.
Source | PurelyKuler2
March 30th, 2008
I was messing around last night with AIR and I stumbled apon this:
- start an AIR app in flash cs3
- add a list component
- name it dir_list
- drop the code below in the actions panel
- And Viola!
- PS – PC people, I put a test to see if My Documents in in that Directory.
[as]
import flash.filesystem.*;
var userDirFiles:Array = File.userDirectory.getDirectoryListing();
for (var i:uint = 0; i < userDirFiles.length; i++) {
if (userDirFiles[i].isDirectory) {
//this.display_txt.text = String(userDirFiles[i].nativePath);
dir_list.addItem({label:userDirFiles[i].nativePath })
var tmpString:String = userDirFiles[i].nativePath;
if(tmpString.search(/My Documents/) != -1)
{
dir_list.addItem({label:”working”});
break;
}
}
} [/as]
March 1st, 2008
So I have been working alot w/ PureMVC, well everyday for the last month to be exact. I’m going to try to explain PureMVC the best way I know how. It may not be the best, but I hope it can get you started. And when you learn something let me know.
So the example I am doing is a simple one using Lee Brimelow’s code from the ActionScript 3 Advanced XML example. The only difference between his and what I changed is some method name changes and putting it in PureMVC.
So if you don’t know what PureMVC is or you are quite confused on how to use it…well so am I . I’m still learned and hopefully can teach some stuff. I’m not going to go into the specifics of this framework but think of it as a way to introduce a lot separation of code using the Model, View, Controller. I’ll explain what I see as the benefits after I explain the example.
Look at lee’s example:
[as]var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, onLoaded);
stage.addEventListener(MouseEvent.CLICK, changeColor);
var xml:XML;
var kuler:Namespace = new Namespace(”http://kuler.adobe.com/kuler/API/rss/”);
var ka:Array = new Array();
var cc:int = 0;
function onLoaded(e:Event):void
{
xml = new XML(e.target.data);
var il:XMLList = xml.channel.item;
for(var i:uint=0; i<il.length(); i++)
{
var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
var co:Object = new Object();
co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
ka.push(co);
}
drawColors(ka[0]);
}
function drawColors(c:Object):void
{
graphics.beginFill(parseInt(”0x” + c.c1));
graphics.drawRect(0, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c2));
graphics.drawRect(200, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c3));
graphics.drawRect(400, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c4));
graphics.drawRect(600, 0, 200, 200);
graphics.beginFill(parseInt(”0x” + c.c5));
graphics.drawRect(800, 0, 200, 200);
}
function changeColor(e:Event):void
{
if(cc == ka.length – 1)
cc = 0;
else
cc++;
drawColors(ka[cc]);
}
loader.load(new URLRequest(”http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
[/as]
most everything but the drawColors() function are going into the dataProxy.
What’s a dataProxy…hold on.
Make sure you download the swc or classes.
Here is what we are working with:
- PurelyKuler (Main Class)
- call the facade
- pass the DisplayObject to the app (a PureMVC method)
[as]package {
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
//your main class file. you know that!
public class PurelyKuler extends Sprite
{
public function PurelyKuler()
{
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//get facade instance
var facade:PurelyKulerFacade = PurelyKulerFacade.getInstance();
// make sprite that will be the viewcomponent to the mediator
var colorContainer:Sprite = new Sprite();
addChild(colorContainer);
//start it up and pass the sprite to the app.
facade.startup(colorContainer);
}
}
}
[/as]
- facade (PurelyKulerFacade)
- create singleton
- starts the app
- registers the command (StartUpCommand) I haven’t explained that yet
- notify – PurelyKulerConstants.STARTUP and pass the DisplayObject
[as]package
{
import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
import com.joshspoon.etc.purelyKuler.controller.*;
import org.puremvc.interfaces.IFacade;
import org.puremvc.patterns.facade.Facade;
import org.puremvc.patterns.observer.Notification;
public class PurelyKulerFacade extends Facade implements IFacade
{
// Singleton Method
public static function getInstance(): PurelyKulerFacade {
if (instance == null) {
instance = new PurelyKulerFacade( );
}
return instance as PurelyKulerFacade;
}
// Broadcast the STARTUP Notification
public function startup(app:Object):void {
notifyObservers(new Notification(PurelyKulerConstants.STARTUP, app));
}
// Register Commands with the Controller
// like EVENT this is listening for STARTUP to excute the StartUpCommand
override protected function initializeController():void {
super.initializeController();
registerCommand(PurelyKulerConstants.STARTUP, StartUpCommand);
}
}
}[/as]
- SimpleCommand (StartUpCommand) – similar to your event handler
- registerProxy (KulerDataProxy) not spoke about yet
- registerMediator(PurelyKulerMediator) – not spoken of yet
[as]package com.joshspoon.etc.purelyKuler.controller
{
import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;
import com.joshspoon.etc.purelyKuler.view.PurelyKulerMediator;
import flash.display.*;
import org.puremvc.interfaces.ICommand;
import org.puremvc.interfaces.INotification;
import org.puremvc.patterns.command.SimpleCommand;
public class StartUpCommand extends SimpleCommand implements ICommand
{
override public function execute(notification:INotification):void
{
// Create and register proxy
facade.registerProxy(new KulerDataProxy());
// Create and register the mediator, colorContainer passed as the viewcomponent of the Mediator
facade.registerMediator(new PurelyKulerMediator(notification.getBody() as Sprite));
}
}
}[/as]
- Proxy (KulerDataProxy) – connects to databases/REST/and the like
- setup connection for xml
- expose a loadInfo method for request of data
- onKulerLoad method just like lee’s except it notifies DATA_LOADED and passes the array of colors
[as]package com.joshspoon.etc.purelyKuler.model
{
import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
import flash.events.Event;
import flash.net.*;
import org.puremvc.interfaces.IProxy;
import org.puremvc.patterns.observer.Notification;
import org.puremvc.patterns.proxy.Proxy;
public class KulerDataProxy extends Proxy implements IProxy
{
public static const NAME:String = “KulerDataProxy”;
private var _loader:URLLoader;
private var _xml:XML;
private var kuler:Namespace;
private var _ka:Array;
public function KulerDataProxy( data:Object = null )
{
super ( NAME, data );
setupNetwork();
trace(NAME + ” ready”);
}
// has everything to prepare the data request to Kuler.
private function setupNetwork():void
{
kuler = new Namespace(”http://kuler.adobe.com/kuler/API/rss/”);
_ka = new Array();
_loader = new URLLoader();
_loader.addEventListener(Event.COMPLETE, onKulerLoad);
}
// function called to start action of dataProxy
public function loadInfo():void
{
_loader.load(new URLRequest(”http://kuler.adobe.com/kuler/API/rss/get.cfm?listtype=rating&itemsperpage=20″));
}
// this is an overriden inherited function from PureMVC
override public function getProxyName():String
{
return NAME;
}
//when data is loaded
private function onKulerLoad(e:Event):void
{
//for more info see: http://www.gotoandlearn.com/player.php?id=65
_xml = new XML(e.target.data);
var il:XMLList = _xml.channel.item;
for(var i:uint=0; i<il.length(); i++)
{
var sl:XML = il.kuler::themeItem.kuler::themeSwatches[i];
var co:Object = new Object();
co.c1 = sl.kuler::swatch.kuler::swatchHexColor.text()[0];
co.c2 = sl.kuler::swatch.kuler::swatchHexColor.text()[1];
co.c3 = sl.kuler::swatch.kuler::swatchHexColor.text()[2];
co.c4 = sl.kuler::swatch.kuler::swatchHexColor.text()[3];
co.c5 = sl.kuler::swatch.kuler::swatchHexColor.text()[4];
_ka.push(co);
}
trace(”co.c1: ” + _ka[0].c1);
//once all the color data is pushed in to the array
//send notifications
facade.notifyObservers(new Notification(PurelyKulerConstants.DATA_LOADED, _ka));
}
}
}
[/as]
- Mediator (PurelyKulerMediator) -the view of the application
- create loading textField and add it to viewComponent(colorComponent)
- when data returns allow click
- draw colors.
[as]// code created by Lee Brimelow http://www.gotoandlearn.com/player.php?id=65
// modified by Josh Weatherspoon: http://etc.joshspoon.com/wp-content/uploads/2008/02/purelykuler_puremvc_example.zip
package com.joshspoon.etc.purelyKuler.view
{
import com.joshspoon.etc.purelyKuler.PurelyKulerConstants;
import com.joshspoon.etc.purelyKuler.model.KulerDataProxy;
import flash.display.*;
import flash.events.*;
import flash.text.*;
import org.puremvc.interfaces.IMediator;
import org.puremvc.interfaces.INotification;
import org.puremvc.patterns.mediator.Mediator;
public class PurelyKulerMediator extends Mediator implements IMediator
{
public static const NAME:String = “PurelyKulerMediator”;
private var _tf:TextField; // will display loading…
private var _ka:Array = []; //array to hold color data from the Proxy
private var cc:int = 0; // index in th _ka array
public function PurelyKulerMediator(viewComponent:Object=null)
{
_tf = new TextField();
super(viewComponent);// the colorContainer
DisplayObjectContainer(viewComponent).addChild(_tf);
loading();
trace(NAME + ” started”);
}
// a PureMVC override
override public function getMediatorName():String
{
return NAME;// passes name to access this in the app
}
// a PureMVC override
override public function getViewComponent():Object
{
return viewComponent;
}
// what this mediator is listening for
override public function listNotificationInterests():Array
{
return [PurelyKulerConstants.DATA_LOADED]
}
override public function handleNotification(notification:INotification):void
{
switch (notification.getName())// like Event.CHANGE
{
case PurelyKulerConstants.DATA_LOADED:
_ka = (notification.getBody() as Array) // like evt.data
changeColor();
DisplayObjectContainer(viewComponent).addEventListener(MouseEvent.CLICK, changeColor, false, 0, true); //real events should only be in mediator and call change through notifications
break;
}
}
// calling the load method for the xml in teh proxy
private function loading():void
{
_tf.text = “Loading…”;
KulerDataProxy(facade.retrieveProxy(KulerDataProxy.NAME)).loadInfo();
}
//see lee’s example
private function changeColor(e:MouseEvent = null):void
{
if(cc == _ka.length – 1)
cc = 0;
else
cc++;
drawColors(_ka[cc]);
}
//see lee’s example
private function drawColors(c:Object):void
{
_tf.text = “”;
viewComponent.graphics.clear();
viewComponent.graphics.beginFill(parseInt(”0x” + c.c1));
viewComponent.graphics.drawRect(0, 0, 200, 200);
viewComponent.graphics.beginFill(parseInt(”0x” + c.c2));
viewComponent.graphics.drawRect(200, 0, 200, 200);
viewComponent.graphics.beginFill(parseInt(”0x” + c.c3));
viewComponent.graphics.drawRect(400, 0, 200, 200);
viewComponent.graphics.beginFill(parseInt(”0x” + c.c4));
viewComponent.graphics.drawRect(600, 0, 200, 200);
viewComponent.graphics.beginFill(parseInt(”0x” + c.c5));
viewComponent.graphics.drawRect(800, 0, 200, 200);
}
}
}
[/as]
- Lastly the constants I use in PurelyKulerConstants
[as]package com.joshspoon.etc.purelyKuler
{
// a little excess for this example but I like having a global place to store contants
public class PurelyKulerConstants
{
public static const DATA_LOADED:String = “DataLoaded”;
public static const STARTUP:String = “Startup”;
}
}[/as]
You can expand this and make another proxy or mediator and plug and play pieces, since you code is not tightly coupled. That is what I see as benefit.
That should be it. I hope that helps
Enjoy!
source
February 13th, 2008
I didn’t think this was going to happen with Yahoo Maps going Ajax and the maps hack they released last year (Yahoo! Maps API Flex 2 Communication Kit).
Check it out: http://developer.yahoo.com/flash/maps/
February 11th, 2008
Someone asked me to give an example of the alpha masking in flash. So here is an example.
Source
January 8th, 2008
My wife’s parents gave me the annual gift certificate to Barnes and Noble, so this year I got Actionscript 3.0 Design Patterns. I am excited about it. Last Christmas I got Advanced AS3 Design Patterns but I was just learning AS3 so I couldn’t figure out Design Patterns also.
I have since understood a good deal of the book but I think this one is a little more basic and has more examples. I hope I can apply these new ideas in to my new job as I am coding in a low-level manner so that the work can be used in either Flash or Flex.
December 26th, 2007
Next Posts
Previous Posts