Dots är en sån där sak som bara blir. Det började med lite slökodning som går vidare i en ”det ska jag testa”-tanke som, i detta fall, slutade med i ”det här borde fungera bra på en iPhone”.

Det ligger inte speciellt mycket arbeta bakom Dots. Några timmar på sin höjd. Den största delen av arbetet låg egentligen inte i att koda själva spelet utan att komma fram till hur jag ville göra. Koden i sig är inget speciellt. Det är egentligen bara ett antal Event.ENTER_FRAME, några MouseEvent.CLICK och lite saker som håller ordning på poäng, liv samt level.

Med tanke på hur Dots växte fram är det inte heller särskilt optimerat, vilket märks speciellt i ”Game over”-sekvensen. Några av de saker jag dock tänkt på är att använda så få vektorobjekt som möjligt, att rensa upp objekt som inte används och att sätta cacheAsBitmap och cacheAsBitmapMatrix på så mycket av grafiken som möjligt. Dots innehåller trots allt otroliga mängder grafik. Hur som helst, ett litet tidfördriv med andra ord.

Som en jämförelse finns en ”webbvariant” av Dots att spela här. Dom svarta prickarna ska man klicka på, dom röda ska man låta passera. Så går det till.

Maby not so fun fact. The picture, depicting the Brighton pier, was shot during Flash on the beach´10.

Ett: Småskratta och säga att den dag HTML5 faktiskt går att använda så kanske det kommer hända.
Två: Ifrågasätta deras kunskap om både HTML5 och Flash följt av en kapning vid fotknölarna
Tre: Den långa varianten där jag lägger fram varför jag tycker som jag gör.

Och det är den jag tänker köra nu.

För det första, HTML5 är bra. Jag tycker det är en grymt spännande plattform och HTML kan göra saker som Flash inte ens borde försöka sig på. De som försöker och framförallt tror att de kan bygga informationssiter i Flash borde skämmas, bli av med jobbet, alternativt säga upp sig, för att gå om Webbkunskap A.

Problemet jag ser med HTML5 är att det förlitar sig för mycket på ett antikt kodspråk, JavaScript. Det är både långsamt och omständligt att arbeta med. För att HTML5 skall bli en allvarlig utmanare till Flash måste vi ha en ny, snabbare version av JavaScript. Bara att kunna typa variabler vore ett stort steg framåt.

Nu ska jag inte bara sitta här och säga att HTML5 och framförallt JavaScript är långsamt. Webbläsare som Google Chrome börjar få sina JavaScript-motorer att prestera riktigt bra, det är egentligen bara en tidsfråga innan vi kan producera grafik och funktionsintensiva applikationer med HTML5. Men i nuläget är det och faktumet att många sitter på gamla webbläsare (Ja, jag tittar på dig IE6) ett problem.

”Men Flash fungerar ju inte på iPhone/iPad/iWhatever?”

Nej, det gör det inte, men då ska man inte heller glömma att det är väldigt få som faktiskt äger och använder en sådan enhet om man jämför med hur många som inte gör det. Att döma ut en teknik enbart på grund av en enhet är väldigt trångsynt och framförallt korkat. Om man vänder på steken går Flash, och då främst Air-applikationer, att köra i datorer, mobiltelefoner, TV-apparater, BluRay-spelare och en mängd tablet-pc’s. Även om den stora marknaden just nu är mobilapplikationer kommer inte detta vara för evigt. Inom en inte allt för avlägsen framtid kommer det handla om applikationer som fungerar över en mängd enheter, oavsett om det är en mobiltelefon, en tv eller en hemdator. Mindre utvecklingstid, större spridning. Ingen förlorar på detta, förutom de företag som låser in utvecklare i sina avtal om hur applikationer får utvecklas och distribueras.

Sedan måste man skilja äpplen och päron. Jag tycker att det mesta av webben faktiskt passar bäst i HTML. Många av de appar som går att ladda ner i Apples AppStore skulle fungera minst lika bra som webbappar och det är här HTML5, CSS3 och JavaScript kommer in i bilden igen. Det går att göra väldigt mycket med HTML5, speciellt om de får ordning på standarden för video- och audio-taggarna. Men det är ungefär här som användningsområdet för HTML5 slutar. Vill vi som utvecklare och kreatörer bygga något som innefattar 3D, ge besökaren större möjligheter till interaktivitet, ljud genererade i realtid eller möjlighet att manipulera bilder, video och ljud så räcker helt enkelt inte HTML till, oavsett version. Gör vi en version av Flashsiten för datorer är det enkelt att känna av om samma site körs på en Android-mobil eller en tablet-pc och där efter anpassa gränssnitten för varje enhet. Det fungerar lite på samma sätt som HTML5 kan välja olika CSS-filer beroende på skärmstorlek och media men med Air kan vi bygga program som inte bara kan hårdvaruaccelereras utan även installeras på väldigt många enheter.

Men… Du pratar bara teknik. Jag pratar ju om ditt jobb!

Jag vet. Och det är lite det jag menar. Jag känner inte att mitt jobb är hotat enbart på grund av HTML5. Jag bryr mig egentligen inte om i vilket språk jag bygger saker och ting. Jag vill bygga saker som de vi idag gör i Flash. Om det visar sig att HTML5 är det bättre alternativet om fem år kommer jag gladeligen byta. Så över tid tror jag absolut att HTML5 kommer döda Flash som webbformat. Men jag tror att den dagen det händer har Flash fått fäste på andra plattformar och på så sätt kommer det inte påverka oss som utvecklare speciellt mycket. Vi kommer fortsätta bygga Flash och angående webben har vi vid det laget lärt oss att göra samma saker vi gör i dag, fast med andra verktyg.

Så, för att sammanfatta, jag tror inte HTML5 kommer döda Flash, där emot bör vi utvecklare inte utesluta HTML5 helt och hållet, för mycket intressant kommer hända på den fronten. Även om det har en väg kvar att gå.

Det är det långa svaret jag brukar ge, tyvärr brukar jag inte alltid hinna till slutet innan den jag pratar med avbryter med ”jaja, jag förstår, du gillar Flash”. Och ja, jag gillar Flash, men jag gillar att jobba med webben mer. Tekniken jag gör det med är sekundär.

The thing (and the solution in my case) was that I had the Bandwidth profiler open. Once I closed the profiler Flash returned the correct value. I tried the same thing on a few other FLA:s with the same result so I guess it’s a bug in the IDE. And I hope it’s gone in CS5.

goSquare är, som ni kanske listat ut, en rippoff / parodi på GoWalla och FourSquare. I all enkelthet fungerar det så att den utnyttjar iPhonens GPS för att skicka koordinater till en databas. Dessa koordinater skickas även en sväng genom Google Maps API för att hämta ut den adress man befinner sig på. Detta returneras som ett JSON-objekt. Den insamlade datan presenterar jag sedan här i en enkel flashfil byggd med Google Maps API:n.

Från början var det tänk att bygga in Google Maps kartor i appen men tyvärr tillåter inte iPhonen att man laddar in den swc som innehåller API:n, men det löser sig nog när man fått pilla lite mer. Detta är trots allt ett experiment.

Hur som helst, ett första försiktigt steg in i världen av appar kodade med AS3.

Tack för mig.

I ”borrowed” the PixelBender kernels from PixelBender Exchange over at Adobe.com.

Sample code

If you want to try it out for yourself you can copy my sample code below and use it with your own kernels. I wrote this thing in FDT 4 so if you use the Flash IDE you need to change a few things, like [SWF(width=640,height=480,frameRate=30)].

PhotoBooth.as

package {
    import flash.events.MouseEvent;
    import flash.events.KeyboardEvent;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.media.Camera;
    import flash.media.Video;
    import flash.events.Event;
    import flash.display.StageAlign;
    import flash.display.StageScaleMode;
    import flash.text.TextField;

    [SWF(width=640,height=480,frameRate=30)]

    public class FlashBooth extends MovieClip {
        public var camfeed : Video = new Video(640, 480);
        private var camFrameRate : int = 15;
        private var camWidth : int = 640;
        private var camHeight : int = 480;
        private var cam : Camera;
        private var cameraBitmap : BitmapData;
        private var bmp : Bitmap;

       // Location of the kernels.
        private var siteUrl:String = "";
        private var filterHolder : Sprite = new Sprite();
        private var pbFilters : Array = [siteUrl+"zoomBlur.pbj", siteUrl+"SmartNormalMap.pbj", siteUrl+"RippleBlocks.pbj"];

        public function FlashBooth():void {
            if (stage)
                init();
            else
                addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init(e : Event = null):void {
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            removeEventListener(Event.ADDED_TO_STAGE, init);

            // We start by settings up the camera
            cam = Camera.getCamera();

            // If no camera is found...
            if (!cam) {
                // ...we tell the user that is the case...
                var camError : TextField = new TextField();
                camError.text = "I search'd the internetz and haz not found camera. I haz no luck. *sigh*";
                addChild(camError);
            } else {
                // ...or we move on to set the height, width and framerate.
                cam.setMode(camWidth, camHeight, camFrameRate);

                // Then we tell the video-object to use the camera as its source.
                camfeed.attachCamera(cam);

                // Set the bitmap to match the size of the video.
                cameraBitmap = new BitmapData(camfeed.width, camfeed.height);

                bmp = new Bitmap(cameraBitmap);
                bmp.x = 0;
                bmp.y = 0;
                addChild(bmp);

                // Load all the filters in the pbFilters-array thru a for-loop.
                // All settings are defined in the FilterClass.as as get/setters.
                for(var i : uint = 0;i < pbFilters.length;++i) {
                    var f : FilterClass = new FilterClass();
                    f.url = pbFilters[i];
                    f.source = camfeed;
                    f.framerate = camFrameRate;
                    f.start();
                    f.x = (80 * i) + 10;
                    f.y = 10;

                    // Since we want the "big" picture to use the filter loaded
                    // in the class we tell our swf to listen for when the user
                    // click on the previewimage generated within the filterclass.
                    f.addEventListener(MouseEvent.CLICK, addFilter)
                    filterHolder.addChild(f);
                }

                // Some positioning and graphics stuff.
                filterHolder.x = (stage.stageWidth - filterHolder.width) / 2;
                filterHolder.y = stage.stageHeight - (filterHolder.height + 30);

                filterHolder.graphics.beginFill(0x000000, .5);
                filterHolder.graphics.drawRoundRect(0, 0, filterHolder.width + 20, filterHolder.height + 20, 10);
                filterHolder.graphics.endFill();
                addChild(filterHolder);

                // Set up a listener since we want to remove the filter when the
                // user press the spacebar.
                stage.addEventListener(KeyboardEvent.KEY_DOWN, keyboardInput);

                 // Update the big picture everytime a frame is loaded.
                stage.addEventListener(Event.ENTER_FRAME, updateViewport);
            }
        }

        private function addFilter(e : MouseEvent):void {
            // Fetch the filter from within the filterclass.
            bmp.filters = [e.currentTarget.getFilter()];
        }

        private function updateViewport(e : Event):void {
            // Update the big picture.
            cameraBitmap.lock();
            cameraBitmap.draw(camfeed);
            cameraBitmap.unlock();
        }

        private function keyboardInput(e : KeyboardEvent):void {
            // Detect what key the user pressed and if it is the
            // spacebar (keycode 32) remove the filter.
            if(e.keyCode == 32) {
                bmp.filters = [];
            }
        }
    }
}

FilterClass.as

package {
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.TimerEvent;
    import flash.net.URLRequest;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.display.Shader;
    import flash.filters.ShaderFilter;
    import flash.display.BitmapData;
    import flash.display.Bitmap;
    import flash.media.Video;
    import flash.utils.Timer;

    public class FilterClass extends Sprite {
        private var shader : Shader;
        private var shaderFilter : ShaderFilter;
        private var filterBmp : Bitmap;
        private var filterBmpData : BitmapData;
        private var frameRateTimer : Timer;

        // Get and set-vars
        private var _camFeed : Video;
        private var _filterUrl : String;
        private var _frameRate : int;

        public function FilterClass() {
            // We set useHandCursor and buttonMode to true since we want the
            // class to act as a button.
            this.useHandCursor = true;
            this.buttonMode = true;
        }

        public function start():void {

            // We start to load the PixelBender kernel.
            var urlRequest : URLRequest = new URLRequest(_filterUrl);
            var urlLoader : URLLoader = new URLLoader();

            // We need to sett the LoaderDataFormat to binary since the kernel
            // is a compiled file.
            urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
            urlLoader.addEventListener(Event.COMPLETE, applyFilter);
            urlLoader.load(urlRequest);

            // Set up the bitmap that will act as the preview.
            filterBmpData = new BitmapData(640, 480);
            filterBmp = new Bitmap(filterBmpData);
            filterBmp.width = 64;
            filterBmp.height = 48;
            addChild(filterBmp);
        }

        private function applyFilter(e : Event):void {
            // Always remove listeners you have no use for.
            e.currentTarget.removeEventListener(Event.COMPLETE, applyFilter);

            // Tell the Flash Player that we want to use the loaded data
            // as a filter.
            shader = new Shader(URLLoader(e.target).data);
            shaderFilter = new ShaderFilter(shader);

            // Since we want the to act as a button with graphics updated in
            // realtime we need to set the filters-parameter to the shaderFilter.
            filterBmp.filters = [shaderFilter];

            // We could use Event.ENTER_FRAME, but since we want to control the
            // framerate we use a timer so that the preview bitmap will update
            // when we want and not everytime a new frame is loaded.
            frameRateTimer = new Timer(1000 / _frameRate);
            frameRateTimer.addEventListener(TimerEvent.TIMER, update);
            frameRateTimer.start();
        }

        private function update(e : TimerEvent = null):void {
            // We lock the bitmapdata before we draw and then unlock it.
            // Performance my friends, performance.
            filterBmpData.lock();
            filterBmpData.draw(_camFeed);
            filterBmpData.unlock();
        }

        public function getFilter():ShaderFilter{
            // With this function we can pass the filter to objects outside the class.
            return shaderFilter;
        }

        /* GETTERS AND SETTERS */
        public function set source(val : Video):void {
            _camFeed = val;
        }

        public function set url(val : String):void {
            _filterUrl = val;
        }

        public function set framerate(val : int):void {
            _frameRate = val;
        }
    }
}

Main.as

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import net.hires.debug.Stats;
	import flash.display.BitmapData;
	import flash.display.Bitmap;
	import flash.media.Camera;
	import flash.media.Video;

	[SWF(width=640,height=400,frameRate=30)]

	public class Main extends Sprite {
		private var holder : Sprite = new Sprite();
		private var childCound : uint = 240;
		private var a : Number = 0;
		private var wcfeed : Video = new Video(80, 60);
		private var wc : Camera;
		private var wcbmp : BitmapData;

		public function Main():void {
			if (stage)
				init();
			else
				addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e : Event = null):void {
			removeEventListener(Event.ADDED_TO_STAGE, init);

			this.graphics.beginFill(0x666666);
			this.graphics.drawRoundRect(0, 0, stage.stageWidth, stage.stageHeight,15);
			this.graphics.beginFill(0xcccccc);
			this.graphics.drawRoundRect(10, 10, stage.stageWidth - 20, stage.stageHeight - 20,10);
			this.graphics.endFill();

			wc = Camera.getCamera();
			wc.setMode(80, 60, 15);
			wcfeed.attachCamera(wc);
			wcbmp = new BitmapData(wcfeed.width, wcfeed.height);

			for (var i : uint = 0; i < childCound;++i) {
				var dot : Dot = new Dot();
				dot.x = (stage.stageWidth - dot.width) / 2;
				dot.y = (stage.stageHeight - dot.height) / 2;
				holder.addChild(dot);
			}

			addChild(holder);

			var bmp : Bitmap = new Bitmap(wcbmp);
			bmp.x = (stage.stageWidth - wcfeed.width) / 2;
			bmp.y = stage.stageHeight - (wcfeed.height + 20);
			addChild(bmp);

			var stat : Stats = new Stats();
			stat.x = 20;
			stat.y = 20;
			addChild(stat);

			stage.addEventListener(Event.ENTER_FRAME, move);
		}

		private function move(e : Event):void {
			wcbmp.draw(wcfeed);

			for (var i : uint = 0; i < childCound;++i) {
				var dot : Dot = holder.getChildAt(i) as Dot;
				var l : Number = i & 15;
				var t : Number = Math.floor(i / 16);
				var colorX : Number = (l / 16) * 80;
				var colorY : Number = (t / 15) * 60;
				dot.changeColor(wcbmp.getPixel(colorX, colorY));

				dot.x = dot.width * (l + 8.5 + Math.sin(a + t * .3));
				dot.y = dot.height * (t + 3 + Math.sin(270 + a + l * .3));
			}
			a -= .05;
		}
	}
}

Dot.as

package
{
	import flash.display.Sprite;
	public class Dot extends Sprite
	{
		public function Dot(){}
		public function changeColor(color:uint):void{
			graphics.clear();
			graphics.beginFill(color, 1);
			graphics.drawCircle(0, 0, 10);
			graphics.endFill();
		}
	}
}

I flera år har jag velat åka. I år åker jag. Ni som vet vad ”Flash on the beach” är vet att jag  inte behöver skriva en lång text för att förklara hur nöjd jag är över det. Det här kommer bli grymt. Grymt!

Grymt!

Då mitt intag av det tryckta ordet det senaste halvår har bestått av fackliteratur, och då främst böckerna ovan, tänker jag i sommar inte läsa en rad som kan göra mig mer allmänbildad, utbildad eller på något sätt utvecklad. Jag skall läsa påhittade saker. Historier som inte behöver följa någon syntax. Berättelser som inte slutar med en kompilering. Saker med fantasi som inte framställs genom kod. I sommar tänkte jag sätta i mig slutet på John Ajvide Lindqvists ”Pappersväggar” och ”Lilla stjärna”. En gång för alla läsa klart ”Aldrig fucka upp”. Göra upp med ”Processen”. Och någon stans på vägen byta en av pelarna på farstukvisten.

Trevlig sommar på er fackböcker, vi ses i höst.

1. This is a work in progress. As of now it only lets you display one image, no text or navigation and so on. I plan to rewrite most of the plugin sometime in the future to make it more like ”the real lightbox”.

2. This jQuery plugin was inspired and based on jQuery lightBox by Leandro Vieira Pinho – http://leandrovieira.com. In other words, I stole pretty much everything and rewrote some of the code.

Demo can be found here.
And a developmentversion of the plugin here. (You need to copy/paste right now, sorry.)

Include the following in your html-file:
ALWAYS add ”id” as an attribute in your embedcode if you want IE7 to do what you want.

<link rel="stylesheet" type="text/css" href="JavaScript/flashlightbox/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript" src="JavaScript/flashlightbox/jquery.flashlightbox-0.1.js"></script>

<script type="text/javascript">

$(document).ready(function() {
$('body').append('<div id="flashLightbox"></div>');
});

function flashLightbox(val) {
$('#flashLightbox').flashLightBox({
image: val,
imageLoading:'lightbox-ico-loading.gif',
imageBlank:'lightbox-blank.gif'});
}

</script>

The code for the demoswf (I use FlashDevelop, FlexSDK 3.5 and Flash Player 9):

package
{

// Import stuff
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.external.ExternalInterface;
import flash.events.IOErrorEvent;
import flash.display.Loader;
import flash.net.URLLoader;
import flash.net.URLRequest;

/**
* ...
* @author Mano
*/

public class Main extends Sprite
{

// Setup vars used later on
private var imgUrl:String;
private var imgLoader:Loader = new Loader;

public function Main():void
{

// It's hammertime!
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}

private function init(e:Event = null):void
{
// Always remove eventlisteners you dont use
removeEventListener(Event.ADDED_TO_STAGE, init);

//
stage.align=StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

// Set the var image Url.
if (this.loaderInfo.parameters.imgUrl) {
imgUrl = this.loaderInfo.parameters.imgUrl;
}else {
imgUrl = '2648636603_c65d0ecc9c_b.jpg';
}

// Load the image
imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete,false,0,true);
imgLoader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,onError,false,0,true);

var request:URLRequest = new URLRequest(imgUrl);
imgLoader.load(request);
}

private function zoom(e:MouseEvent):void {
// If the swf is allowed to use ExternalInterface we call the javascript-function 'flashLightbox'.
// Remeber to always test ExternalInterface on a server and not localy.
if (ExternalInterface.available) {
ExternalInterface.call("flashLightbox", imgUrl);
}else {
trace("ExternalInterface not available");
}
}

private function onComplete(e:Event):void {
/*
Next we resize the image so that we can load a huge image, which we probably will since we want to zoom it and it might not fit.
We create a bitmap and load the loadercontent into the bitmap.
*/

var image:Bitmap = Bitmap(imgLoader.content);
var imageHeigth:int = 200;

var newWidth:int = image.width/image.height * imageHeigth;
image.height = imageHeigth;
image.width = newWidth;
image.smoothing = true;

imgLoader.unload();

/*
* Since we are going to add a MouseEvent we need to create a holder in which we place the bitmap
* because bitmaps are not InteractiveObjects and don't have a clue how to fire events.
*/

var holder:Sprite = new Sprite();

// Some graphic mumbojumbo.
holder.graphics.beginFill(0xcccccc, 1);
holder.graphics.drawRoundRect(0, 0, image.width+40, image.height+40, 20);
holder.graphics.endFill();

// Add eventlistener
holder.addEventListener(MouseEvent.CLICK, zoom);

image.x = 20;
image.y = 20;

holder.addChild(image);

// Position the sprite in the center of the stage
holder.x = (stage.stageWidth - holder.width) / 2;
holder.y = (stage.stageHeight - holder.height) / 2;

addChild(holder);

trace('Image loaded. URL: ' + imgUrl);
}

private function onError(e:IOErrorEvent):void {
trace('Image not found. URL: ' + imgUrl);
}

}
}