Category Archives: ActionScript

Flash vs HTML vs iOS

I honestly don’t know where Flash as a technology is going to be in a few years. Yes, we’ve seen the technology roadmap provided by Adobe, but I don’t honestly get the feeling that Flash is long for this world, which is sad.

I started out with Director and moved to Flash a million years ago. Building interface elements and widgets, moving into entire sites and then serious applications. The tools got better with time, the language when graduated to AS3 made a whole lot more sense to everyone, and things were humming along. And then change blew in from the side fills and now it seems that Flash is choking on it’s own vomit in the back of the van.

The one thing remaining cool in my quick take on e landscape is notion of author once and run on iOS and Android. So you’ve got AIR for Android doing it’s thing and some magic compiler doing it’s thing for iOS. You’re not authoring to the languages yourself which always left me feeling a little weird as a developer. Always releases behind without direct access to powerful features that you might need to subclass, etc.

I haven’t touched Flash in well over a year. I’ve been straight Objective-C, iOS, with a smattering of HTML/PHP/JavaScript. If you spend a little time with iOS and Objective-C, I think you pick it up quickly and love it. Personally I love Xcode. I’ve struggled with signing things in the past, but as a tool it’s freaking amazing.

Anyway, sorry to witness the decline of Flash. Happy I was part of it’s pinnacle.

Not adding fuel to the Flash fire

Image of tree branches

I’m not going to add any flames or speculation for what the recent choices Adobe has made in regards to mobile Flash, Flex, AIR, or JavaScript/HTML5. There is already plenty of that out there and it’s hard to know what is FUD, what the Adobe FAQ answers truly mean moving forward, or if some people just like taking shots at Flash because they think it sucks. Go read that at your leisure and make of it what you will.

If you’re at all concerned with Flash falling by the wayside, you have a few options that I can think of

 

  • Hope that nothing changes for you and you can keep putting Flash-assisted cash in your bank account. Assume that nothing is changing or that it won’t affect you.
  • Start to learn some JavaScript techniques and general HTML5 approaches to make up for any Flash application drop off. Start branching your toolbox just a little bit in case a client starts harping about HTML5 because it’s in the news more lately.
  • Start jamming on AIR for Android and iOS so you can offer something up to those platforms in a round-about way without committing to hunkering down and learning totally new stuff.
  • Start jamming on Android Java and iOS Objective-C so you can offer up some native goodness to those platforms. Leave the optimization headaches and late-adopter OS-version capabilities to other developers.

I am always in favor of rounding out your capabilities as broadly as you can. Push yourself a bit more. Flash has been a mainstay technology for a great many of us for quite a long time. Some of us got our start and remain profitable (employable) being one-trick Flash ponies. Some of us have branched out and used Flash as a springboard to other languages and platforms.

Things change in this technology field, and you have to be open to that change if you want to stay on top of the game. And remain in high demand. It’s my personal belief that if you haven’t started to branch out yet because you’ve got AS3 nailed and you love it, I’d suggest you start branching now. It will only help you as a developer anyway… when you pick up bits of other languages you’ll improve all around in how you approach coding projects in any language. You’ll start to think more broadly about what you’re doing.

I’ve been tooling with Android and iOS (both natively) for some time now and I can almost pump out apps in the same amount of time that they took in AS3/Flex. So now I can offer native Android, native iOS, Mac OS X, Flex, AS3, and AIR as options. I haven’t done the AIR for mobile yet because I don’t like having some magic sauce do magic things underneath me. I do value the superior portability of platform it can bring though.

Once you branch you’ll see how similar many languages are to one another. Same ideas just different syntax and approaches – so having AS3 under your belt will get you a jump start on other languages.

Branch out… it’s a ton of fun!

Remember the promise of Saffron UML? Look to Crocus Modeler

A few years ago something pretty awesome looking was much talked about. It was an AS3 UML modeler given the name of Saffron. Many a developer drooled over this tool vaporware. I was among them.

People rumored that it was purchased by Microsoft before being released. Rumored to still be in development, etc. To be honest, I don’t know what happened to the project, but as far as I am aware, it never saw the light of day.

If you work on smaller AS3 projects, you probably didn’t care very much, but for those of use working on larger applications, it would have been a very useful tool. Well, there is now something called Crocus Modeler (I fixed the spelling). It looks to provide similar technology, it’s just not as slick in it’s UI. But guess what… this is a UI that you can actually use.

Give the tool a spin & comment on what you think of it. I have played a little bit with it and it’s pretty cool so far!!

{AS3} Solved: Distorting the bottom half of the Stage

Update: I’ve seen where the SWF encounters some invalid bitmapData. Run the code locally in your own FLA and see what happens. I’ve since updated my code quite a lot to perform some extra cool things, but the supplied code here has not been updated with it. Should still work though.

Let me first wish you all an enjoyable weekend! With that said, let’s begin.

The other day I was reflecting on ways to properly distort the bottom half (for instance) of an application’s Stage, with elements animating, etc. and how to best achieve the effect. After spending some time evaluating the problem and spending time barking up the wrong trees (yes, I also looked and tried a Matrix solution which can’t support what I was after since it’s 3×3), I thought about beginBitmapFill and how it might be used to pull such an effect off with desirable results. I spent a lot of time using Google looking for something I might use to make things work.

 

Example screenshot 

Demonstration link (new page)

Using a the combination of capturing the entire Stage, copying pixels from that into another bitmapData object, and then manipulating (the bit I was really after) that with a drawPlane method (I wish I could give props to the author of that particular code, I’ve been downloading oodles of stuff and I can’t keep them straight after a while). I am positive the genius comes from Zeh Fernando.

Here is the drawPlane method:

package {
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.geom.Point;

	public function drawPlane(graphics:Graphics, bitmap:BitmapData, p1:Point, p2:Point, p3:Point, p4:Point) : void {
		var pc:Point = getIntersection(p1, p4, p2, p3); // Central point

		// If no intersection between two diagonals, doesn't draw anything
		if (!Boolean(pc)) return;

		// Lenghts of first diagonal
		var ll1:Number = Point.distance(p1, pc);
		var ll2:Number = Point.distance(pc, p4);

		// Lengths of second diagonal
		var lr1:Number = Point.distance(p2, pc);
		var lr2:Number = Point.distance(pc, p3);

		// Ratio between diagonals
		var f:Number = (ll1 + ll2) / (lr1 + lr2);

		// Draws the triangle
		graphics.clear();
		graphics.beginBitmapFill(bitmap, null, false, true);

		graphics.drawTriangles(
			Vector.<Number>([p1.x, p1.y, p2.x, p2.y, p3.x, p3.y, p4.x, p4.y]),
			Vector.<int>([0,1,2, 1,3,2]),
			Vector.<Number>([0,0,(1/ll2)*f, 1,0,(1/lr2), 0,1,(1/lr1), 1,1,(1/ll1)*f]) // Magic
		);
	}
}

import flash.geom.Point;
function getIntersection(p1:Point, p2:Point, p3:Point, p4:Point): Point {
	// Returns a point containing the intersection between two lines
	// http://keith-hair.net/blog/2008/08/04/find-intersection-point-of-two-lines-in-as3/
	// http://www.gamedev.pastebin.com/f49a054c1

	var a1:Number = p2.y - p1.y;
	var b1:Number = p1.x - p2.x;
	var a2:Number = p4.y - p3.y;
	var b2:Number = p3.x - p4.x;

	var denom:Number = a1 * b2 - a2 * b1;
	if (denom == 0) return null;

	var c1:Number = p2.x * p1.y - p1.x * p2.y;
	var c2:Number = p4.x * p3.y - p3.x * p4.y;

	var p:Point = new Point((b1 * c2 - b2 * c1)/denom, (a2 * c1 - a1 * c2)/denom);

	if (Point.distance(p, p2) > Point.distance(p1, p2)) return null;
	if (Point.distance(p, p1) > Point.distance(p1, p2)) return null;
	if (Point.distance(p, p4) > Point.distance(p3, p4)) return null;
	if (Point.distance(p, p3) > Point.distance(p3, p4)) return null;

	return p;
}

And here is how it was implemented (I am sure it could be streamlined). If you have suggestions, please send them along. This is a document Class.

package  {
	import flash.display.*;
    import flash.geom.*;
    import flash.events.*;
	import drawPlane;
	import com.greensock.TweenMax;

	public class MyDocumentClass extends MovieClip {

		private var sprite:Sprite = new Sprite();

		public function AngledSurface_001B()
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			var bitmapdata:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight,true, 0xFF333333);
			bitmapdata.draw(stage);
			var bitmapDataA: BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight/2, true);
			bitmapDataA.copyPixels(bitmapdata, new Rectangle(0, stage.stageHeight/2, stage.stageWidth, stage.stageHeight/2), new Point(0, 0), null, null,false);
			sprite.y = 225;
			addChild(sprite);
			stage.addEventListener(Event.ENTER_FRAME, manipulateBottomStage);
			TweenMax.to(words,4,{y:380, yoyo:true, repeat:-1});
		}

		private function manipulateBottomStage(event:Event):void
		{
			var bitmapdata:BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight,true, 0xFF333333);
			sprite.visible = false;
			bitmapdata.draw(stage, null, null, null, null, true);
			var bitmapDataA: BitmapData = new BitmapData(stage.stageWidth, stage.stageHeight/2, true);
			bitmapDataA.copyPixels(bitmapdata, new Rectangle(0, stage.stageHeight/2, stage.stageWidth, stage.stageHeight/2), new Point(0, 0), null, null, true);
			var p0:Point = new Point(0,0);
			var p1:Point = new Point(845,0);
			var p2:Point = new Point(-100,225);
			var p3:Point = new Point(945,225);
			drawPlane(sprite.graphics,bitmapDataA,p0,p1,p2,p3);
			sprite.visible = true;
		}
	}
}

If you find this interesting, enjoy. A post like this would have saved me at least a day’s worth of searching.

One thing to note, the Stage is 845 x 450, so the control points are beyond the boundaries of the visual Stage. If you were to move p2 and p3 within the Stage boundaries far enough, you’ll be able to see things below the sprite showing through, since the sprite’s contents are being manipulated and you’ll end up with empty “wedges” on the left and the right. You could always add a little bit to the method to draws over those areas with the Stage color to prevent that from happening.

Question: Bitmap distorting the bottom half of the Stage?

Peart

Before I start digging into code, I pose this question out there to those in the interactive community – you may have a bit of code that I could use to save myself some time. If you look at the image above, what I would like to do is to have a Stage with a DisplayObject or perhaps several DisplayObjects – which can animate around.

When these objects pass the boundary (marked with the horizontal red line), I would like to distort all those images by applying a Bitmap transformation… but only to the portion that crosses that boundary.

The bottom half of the Stage would need to update itself constantly to properly display the effect in real time. I’ve done some Bitmap things in the past, but I am not quite sure what the correct approach for this might be.

I’ve seen plenty of stuff where you can drag the corners of a photograph around (like this good example from Edvard Toth), but I’ve not seen where this could be applied to something like what you see above. Without digging too deeply I think I just need to update the BitmapData for the bottom Bitmap every frame – but curious about the offset stuff…

I am looking for sage advice or even some code to get this rolling. If it takes a while it might be interesting to see how you landed where you did and how I approached the problem.

Thanks for any and all consideration.

Novell Vibe (Flashcoders) – let’s kick the tires

Remember Google Wave? Sorry if I brought back any bad memories, but the technology is actually kind of cool. It just wasn’t implemented in a great way (in my and other’s opinions). However it lives on because Google open-sourced the project. Novell has taken up the reigns a bit and has come out with a public beta of something they call Novell Vibe.

I joined and created a group called Flashcoders – where real-time discussions and file sharing can take place. It’s url is: https://vibe.novell.com/flashcoders .

I understand that Vibe is probably more useful for individual projects. While there is message threading, it’s really free form like Wave was so if you are looking for a specific topic (like a Forum), it won’t make you happy. It is great for discussions though.

If you join and create a specific group (say AS3 and audio) or whatever, let us know. This could be a useful resource beyond forums and mailing lists. Kick the tires with me if you’d like. If it sucks, at least we gave it a go.

I hope some public APIs are released because web-only interaction isn’t really my cup of tea. Maybe they have been and I haven’t seen them yet… it’s all still pretty new. Happy Saturday.

A reset for your SWF

Back in the AS2 days there was a handy trick in order to get a complete reloading of a SWF from within itself:

getURL(_url, "_level0");

That changed when AS3 came around. Just recently I was asked to create a reset for a fairly complex SWF that had lots of variables and data in it. It wouldn’t run in a browser, etc. but as a standalone. Instead of creating a method that would reset all those variables, etc. I found it’s just as easy in AS3. Something like this:

import flash.net.*;
//...
private function resetMe(event:MouseEvent):void {
    var url:String = stage.loaderInfo.url;
    var request:URLRequest = new URLRequest(url);
    navigateToURL(request,"_level0");
}

Works a treat. If I keep adding new variables, etc. to the SWF I won’t have to worry about adding those to a reset method, etc.

Update (February 8th, 2011 : 9:00 AM EST)

Well, it works for a SWF, but if you’re deploying a projector it doesn’t want to work correctly. It loads nothing in the projector’s viewport. It works if you launch the SWF as a standalone or in a browser. Fooey ;)

A Sports Companion App Idea

I’m a sports homer – much preferring to listen to my sports team’s local radio broadcast instead of some lame national broadcasters waxing poetic about some nonsense. So I like to watch the broadcast in HD and try to listen to a home town radio broadcast over the internet. Think WDVE. However getting the two in sync is impossible.

If the broadcast adds a delay (in case someone says something offensive) or the internet stream is a bit behind, etc. you end up listening to the play-by-play to visuals that don’t match. It’s annoying enough to just say hooey to the whole thing and resort to dealing with the national broadcasters.

It would be cool to add something to internet audio broadcasts that would allow one to dial in an amount of delay to try and match the TV broadcast. Of course if the internet stream is behind the TV there is nothing one could do. The out of sync issue may not be a huge deal for some, but for me if it’s even off a little I find it annoying.

Anyway, it’s something that I haven’t seen out in the wild yet that a few people might find useful if created.

screwing with flash developers

If you don’t mind the time it may take to gently guide a perplexed and anguished Flash developer through implementation details, SWCs can really fry lesser-developer’s minds.

It’s a bit mean, but you may have your reasons… such as turning project work over to another developer taking on the project which doesn’t please you, a client who is regularly tardy with monetized gratification, having some fun with another developer who thinks they are “all that” in your own group, etc.

So put your classes and or assets into a SWC. Link it up in the Advanced ActionScript settings, etc. In Flex embed is even better. Have developers scratching their heads wondering where the stuff in the code is coming from can be priceless.

Is it magic? Is code being pulled in somehow from another SWF? I don’t see a Loader. The Library is empty. WTF. WTF! How is this compiling? It’s working, but I wanna screw this Class up… how do I get at it? I want to make this interface element REALLY ugly… but how do I… UGH!!!

It’s not very often that people look at the linked SWCs… and lesser developers only see  strange spaghetti voodoo when they get into areas that contain file paths with wildcards for fear of destroying anything in their precious FLA file.

Of course if the stuff is local or coming from a local and shared SVN or CVS repo, it’s a lot easier to conceal this little technique.

Fun for a Tuesday afternoon.