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);
}

}
}

And I use FlashDevelop and the FlexSDK, so if you use the Flash IDE you need to remove the embedcode on row 24-25 and import the image from the library.

Demo

package
{
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.Event;
	import com.greensock.TweenLite;

	/**
	 * ...
	 * @author Mano
	 */
	public class Main extends Sprite
	{

		// Setup a few variables
		private var background:Sprite = new Sprite();
		private var ballHolder:Sprite = new Sprite();
		private var ball:Sprite = new Sprite();
		private var maskBPD:BitmapData;
		private var maskBMP:Bitmap = new Bitmap();

		// Embed the image "the Flex SDK"-way
		[Embed(source="key.jpg")]
		public var imgCls:Class;

		public function Main():void
		{
			// Makesure the stage is ready
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}

		private function init(e:Event = null):void
		{
			// Remove the eventlistener. ALWAYS remove unnecessary listeners.
			removeEventListener(Event.ADDED_TO_STAGE, init);

			// Create the BitmapData. Use tranceparancy or it will mask everything.
			maskBPD = new BitmapData(stage.stageWidth, stage.stageHeight, true,0xffffff);

			// And a ball to play with
			ball.graphics.beginFill(0xFF00FF, 1);
			ball.graphics.drawCircle(0, 0, 30);
			ball.graphics.endFill();

			// Add the background image to the stage
			background.addChild(new imgCls());
			addChild(background);

			// ...somthing to hold our ball
			addChild(ballHolder);
			ballHolder.addChild(ball);

			// ...and the mask
			addChild(maskBMP);

			// ...and set the the bitmap as a mask for "background".
			background.mask = maskBMP;

			// Add a listener that will call the function updateBallPosition everytime the event EnterFrame is fired.
			stage.addEventListener(Event.ENTER_FRAME, updateBallPosition);
		}

		private function updateBallPosition(e:Event):void {
			// To make stuff a little easier we use the excellent TweenLite
			// First we kill all of our balltweens
			TweenLite.killTweensOf(ball, false);
			// ...and tell our ball to move to the same position as the mousepointer.
			TweenLite.to(ball, 1, { x:mouseX, y:mouseY } );

			// Draw the clip "ballHolder" to the bitmapdata
			maskBPD.draw(ballHolder);
			// And update the Bitmapimage
			maskBMP.bitmapData = maskBPD;

			// This is really important, we need to cache both the background and the mask as bitmaps otherwise the mask won't work.
			background.cacheAsBitmap = true;
			maskBMP.cacheAsBitmap = true;
		}
	}
}

We could add a lot of balls or what ever object we want to play around with and change the way the move but you get the idea. So, run along now kids and play with you own balls, or what ever object you want.

Vill man kan man hämta sina appar genom AppStore, appar som gått igenom Apples kontroller och är 100% Applefierade. Sedan skulle det finnas ett alternativt sätt att installera appar, antingen liknande sättet Adobe Air-program installeras eller en alternativ AppStore där en del i användaravtalet talar om att man hämtar och kör appar på egen risk. Sköter vi som utvecklare oss, för det finns ändå en stor del Flashutvecklare som är duktiga programmerare till skillnad mot vad en del tror, så blir risken minimal att dåliga appar slinker igen. Användarna blir nöjda, kunderna blir nöjda, vi blir nöjda. Win-win helt enkelt.

Men chansen för att detta skulle hända är tyvärr obefintlig. Kanske är dags för Adobe att sätta ner foten och öppna en egen repository så att vi som jailbreakat kan hämta appar genom Cydia? Även om Apple skulle se det som en krigsförklaring skulle det vara en grym markering från Adobes sida. ”Vi gör inte produkter för er Apple, vi gör dem för användarna. Både för våra OCH era.”

Men det var då.

Alla med ett uns intresse för flash, iPhones och så vidare vet att så är inte längre fallet. Apple ändrade sitt utvecklaravtal på så sätt att endast program och metoder från Apple får användas för utveckling av appar. Detta har det skrivits spaltmeter om så det tänker jag inte göra utan tänker ge en helt personlig syn på de senaste månaderna och varför jag helt plötsligt hellre skulle flytta hem till Adobe om min kära Apple/Adobe-familj skulle skilja sig.

Det finns just nu två läger, vi som tycker Apple gjort fel och de som tycker Apple gjort rätt. På ”felsidan” står primärt flash- och liknande utvecklare. På ”rättsidan” står de som kan Objective-C och tycker att Apple har en väldigt bra poäng. Några av dem har till och med gått så långt att kalla oss ”icke Obj-C kunniga” lata.

Att kalla oss just det, lata som inte vill eller orkar lära oss ett nytt språk, tycker jag är orättvist. Jag jobbar professionellt med ActionScript, Flex, ASP och ASP.NET (C#). Det är ändå tre olika språk och minst två olika ramverk att hålla sig uppdaterad med. Det tar tid. Att lägga till ytterligare ett språk, som dessutom i stort sett är begränsat till Apples enheter, skulle göra att jag fick prioritera vad jag vill lära mig, hur bra jag vill bli och riskera att tappa den spetskompetens man ändå eftersträvar. Därför tyckte jag att det var en utmärkt ide att vi som flashutvecklare skulle kunna bygga iPhoneappar utan att behöva lära oss objectiv-c.

Jag förstår att Apple är oroliga för prestandaproblem och på så sätt vill att alla ska göra på samma sätt. Men slutanvändaren bryr sig inte det minsta om programmen är byggda i Obj-C, AS3, Unity eller vad det nu kan vara. Alla vill att enheten och programmen ska flyta utan problem, där är vi alla överens och inga protester från min sida.

Och det är inte bara vi nördar som tycker iPhonen är intressant, vi har kunder som också tycker att ”den där iPhonen är allt en häftig liten sak” och som vill skapa appar, i många fall kampanjbaserade och med relativt kort livslängd. Nu ska jag vara ärlig och säga att jag inte har speciellt bra koll på hur långt tid det tar för en duktig iPhoneutvecklare att bygga en app och vilka pengar det handlar om men utifrån vad jag sett från Adobes sida skulle enklare appar inte ta speciellt lång tid i Flash. Detta skulle resultera i att kunder som kanske inte vill lägga en allt för stor påse pengar på ett relativt osäkert kort som en iPhoneapp ändå är kommer bli mer intresserade. Inte för att de bryr sig hur vi gör det, utan för att många tycker det känns tryggt att ha en och samma leverantör. Och det ger oss som producent en fjäder i hatten när vi kan säga ”ja, vi kan göra iPhoneappar”.

Med andra ord är det Apple gjort genom att begränsa möjligheterna för oss utvecklare att de också begränsat möjligheterna för våra kunder, vilket är väldigt tråkigt. Varför inte låta oss utveckla som vi vill och sedan sortera bort de appar som är mindre bra och inte platsar i AppStore? Detta tvingar Adobe till att alltid förbättra cross-compilern och oss utvecklare att optimera vår kod men det verkar inte räcka för Apple som stänger ut oss helt med meddelandet ”Ja ni kan ju skicka in dem, men inga garantier att något kommer igenom. Men förmodligen inte”.

Som det är nu känns det väldigt otryggt och jag skulle tänka till mer än tio gånger innan jag ens tänkte tanken att föreslå detta för en kund. Vi förlorar alltså ett kul projekt, kunden förlorar en bra produkt och Apple förlorar sina intäkter från AppStore. För mig känns det här som ett, för att använda ett passande ord, #fail.

Så jag förstår hur ni tänker Apple, men jag håller inte med.

Detta inlägg finns också publicerat på bloggen ”Business by web”.

This is just the code cut from the project and exported as a single fla-file but you get the idea.

Demo of the ”movieclip mirror thingy” and the mirror.fla.

holder.addEventListener(MouseEvent.CLICK,mirror);

function mirror(e:MouseEvent):void{

// Set up the matrix that will transform the bitmap later on. This one will flip horizontal...
var matrix : Matrix = new Matrix( -1, 0, 0, 1, holder.width, 0 );

// ...and this one vertical...
//	var matrix : Matrix = new Matrix( 1, 0, 0, -1, 0, holder.height );

// ...and this one will do both.
//	var matrix : Matrix = new Matrix( -1, 0, 0, -1, holder.width, holder.width );

// Create a new BitmapData with the same size as "holder".
var mirror : BitmapData = new BitmapData( holder.width,holder.height );

// Copy the visual content of "holder" and let the matrix do its magic.
mirror.draw( holder, matrix );

// We create a new bitmap and tell it to use the BitmapData "mirror" as source.
var image:Bitmap = new Bitmap(mirror);

// Unless we remove the child at level 0 the holderclip will eat ram if we mirror the holderclip alot since we use bitmaps.
holder.removeChildAt(0);

// Add the new bitmap to "holder".
holder.addChild(image);
}

Men jag tänkte inte skriva ännu ett ”varför HTML5 och Flash ska gå hand i hand”-inlägg utan en tanke slog mig när jag stod och lagade mat idag. Tänk om Adobe skulle kunna göra något liknande som de gjort för iPhone-utvecklingen. Koda dina applikationer med AS3, sedan tar kompilatorn över och gör om den exporterade SWF-filen till ett program som går att installera på en iPhone. Att de tillförde ännu ett val, exportera ett actionscript-projekt inte bara som en SWF utan också som en HTML5-sida. Som det ser ut idag med tanke på vilka experiment som gjorts till Google Chrome verkar man kunna göra ganska mycket med bland annat canvas-, video- och ljudtaggen samt en del JavaScript.

Mycket av det Flash kan göra idag skulle såklart vara svårt att åstadkomma men efter som vi redan sett riktigt bra exempel på till exempel fysikmotorer och liknande i JavaScript känns inte detta helt omöjligt. Men i ett rent fallbacksyfte tror jag att detta skulle lösa många av de problem som det pågående formatkriget verkar handla om. Och jag tror att både kunder och utvecklare är villiga att lägga både tid och pengar på att skapa HTML5-versioner av sina Flashsidor om det ”ändå görs automatiskt”.

Adobe nämner att man kan ha flera versioner av Flash Player installerad och byta mellan dessa vilket får mig att dra slutsatsen om att det inte borde vara helt omöjligt att bygga ett gränsnitt som tar hand om att ändra vilken version som är den primära. Det är kanske en riktigt dum idé som drar med sig massor med problem, men om dessa problem skulle gå att undvika skulle jag gladeligen köra ett sådant program. Kanske inte är så användbart under utvecklingsfasen men när man börjar testa och framförallt letar  buggar skulle det vara riktigt bra. För mig behöver det inte vara mer avancerat än skissen nedan.

Så finns det något sådant här program redan?