24

iPhone and iPad + Flash 10 and CS5 – Solutions?

UPDATE: Reader Hector found a couple of interesting videos showing some benchmark testing. One of which I found quite interesting.

And also check out the Adobe section of optimizing for mobile content. Useful information for any type of development.

UPDATE 2: Apple may change iPhone SDK to avoid legal ramifications.

Original Thoughts:

There's been a lot of buzz surrounding Apple's stance on the exclusion of Flash on the iPhone and now the iPad. For many of us designers and developers, the evolution of Apple and Adobe have been a match made in heaven. But times have changed….

Breaking Down Apple's Logic
When the average person thinks of Flash, banners and advertisements are the first things that come to mind, followed by Youtube and other video streaming applications. So it's safe to say that the public perception of Flash first starts off with a limited viewpoint before it gradually works its way to thinking it as a well designed and award winning creative technique.
Which leads me to believe that Apple's reason for excluding Flash on it's mobile platform, is to a certain extent (dare I say it) a logical choice. *gasps*

Adobefication
To fully understand the logic behind Apple's decision, we need to look at Flash and its performance issues. This has been the foundation for a number of arguments supporting the exclusion of Flash. The three major strikes against Flash include:
1. Its proprietary standard.
2. Its process intensiveness (especially on Macs)
3. Its lack of maturity (as a fully functioning non-lite platform) within the Mobile device market.

To be fair, we need to also look at the performance of the developer. Adobe's Flash engineers certainly aren't blameless, but the developer is really the first step in the chain of making something work and work well. Flash has been around for a while now and with age, comes maturity. Over the course Flash's progression, Macromedia and Adobe have steered it in the right direction. However Flash still has a long way to go and is ready for a prototype shift. Given Steve Jobs' recent comments, I think it's time for Adobe to put the cards on the table and call Apple's bluff.

Making a Mends
My solutions for Abobe (I hope you're out there listening) is to first create a robust and well designed interface system for debugging applications that is easily accessible and dependable to all levels of developer. Listening for the fan firing up is no way to determine that you've got run away processes and less then ideal code. Adobe also needs to enable adequate staging environments so that debugging and testing can be done within an applications ultimate environment. There are a number of tools and utilities to debug and test, but nothing that fully checks the performance of an application and gives the developer clear data on where bottlenecks are and what can be done to avoid them. In addition to that, Adobe should consider making the SWF format an open standard. Adobe's purchase of Macromedia was largely in part to take over the ubiquity of Flash on the web, so relinquishing that control would be a very progressive business move but in the long run pay off well for them.

HTML5 standing by
Ahhhh HTML 5… Why did you get dragged into this mess? Well the quick answer is that a certain someone has poised HTML5 to be the "Flash Killer". It's suicide to say "never" in the web development world, so I'll simply say incredibly unlikely that HTML5 would ever fully replace Flash. In fact, when this phase is over, I believe Flash and HTML5 will be good friends. HTML5 is in NO position at this point to be compared to Flash.

Here's why I'm confident in my argument:

• HTML5 hasn't been fully established yet and most importantly it hasn't come even close to the level of development maturity of Flash.
• HTML5 is a framework and a structured format (which has been pointed out in other discussions). It's method of development and implementation is totally different the Flash. Compilation of an application versus runtime execution of code.
• The development tools for creating applications with Flash have had a long time to evolve. Project management and code management, OOP based utilities and frameworks, etc.
• From a business perspective, why would a client want to pay for a developer to build an application from the ground up that rivals the best of the best with Flash?
• IF, you were able to take the time and build a fully functional experience with all the MVC, physics, and layered video goodness of a top level Flash site with HTML5, if it's developed poorly, you are going to experience the same issues that a Flash site would. And who knows, maybe it would be even worse?
• Code protection and copyright enforcement of development. (Something Flash could do better as well)

With that being said, I look at this as Oranges and Cherry Trees. Flash Developers should in now way take the defense by bashing HTML5. It's great and certainly has it's place in the developers toolbox. I just believe that it has become a scape goat in what is largely a school yard fight.

Back to Apple…
One side of my family has grown up with Apple, while the other has gown up with Microsoft and IBM compatible computers. The Apple side consists of an Architectural Scale Model Maker and Architect, a Wardrobe Stylist, an Audio Engineer, an industrial designer, and myself a Flash Developer/Web Designer. On the other side, I have a Computer Programer, and a Certified Public Accountant. Why am I sharing this? Maybe for full disclosure, but also to emphasize that I have always enjoyed their products and approach to using creative technology. Yet, I'm quick to point out when Apple isn't being pragmatic and would never consider myself a fanboy.

I was passionate about Apple products until having owned an iPhone for 2 years. Now seeing the release of the iPad, I've grown even more disenchanted with Apple. And no, it's not just because they don't have Flash on them. The exclusion of Flash on the iPhone is part of a bigger issue. It's the exclusion of Applications in general. I realize that control over Apps and the exclusion of third party layers helps Apples quality control, but at the same time the end user also suffers. Apple also criticizes mobile performance that use Flash and there is some truth to that, but that could be easily addressed with some help from Adobe.

I'm starting to feel like Apple has taken on a totalitarian dictatorship on what can be put in the device and what can't. I don't believe Apple should dictate what I do with my phone. How would the world react if they did this with our computers? It seems as though Apple has lost site of its loyal customers that have been around since the earlier days. Ask anyone that uses Macs in their day to day endeavors and see if they feel like Apple is developing and marketing new products that are geared to them. In my opinion they aren't. The 3Gs has features the first release of the iPhone should have had. And the iPad is sort of silly in my opinion. The iPhone and the iPad are for non Apple users, or is at least focused on attracting non Apple users. As far as business goes, this makes perfect sense. You can't grow a business by just catering to the people that already own the products, but at the same time you can't ignore the ones that do either. It would be nice if some of the focus was shared with products that are geared towards the people that helped them get to where they are. Don't forget about us tech savvy people that do enjoy your products and push them to the limit. It's gotten to the point where the jail-broken phone has become the developer edition. Apple has built a box outside of the box. Because of this, I'm saying good bye to my iPhone. I've downloaded the Android SDK and I'm impatiently waiting for the Sony Ericsson Xperia X10 to be released in the U.S. As a Flash developer, the Android environment makes sense with respect to the languages and the grass roots approach to development.

The silver lining in this whole situation is that both Apple and Abobe stand to better themselves. Apple has put some real issues and concerns on the table for Adobe yet I also believe that Jobs is being a bit stubborn and egotistical. Apple is flouting themselves as being the holy grail of how to funnel Applications to the end user, yet their hardware is two iterations behind what it should be.

And I'm a curious person. I don't see myself developing Flash apps forever, or at least exclusively. And to use Jobs' words, I have no problems leaving the past behind. I'm looking forward to learning more about how to develop for Android and the freedom of an Open Source environment.

I think of the Flash issue as the final straw, but I'm happy to have a device that will run Flash 10.1. If it works or not remains to be seen, but I don't need anyone telling me it doesn't work without experiencing for myself.

13

AS3 + HTML Text + tags

I discovered a few things when trying to add img tags to html content on a site I have been working on. Mabye this is common knowledge, but I thought I'd share my experience since I had a hard time getting anymore info on it.

1. Nesting an <a href> tag around an <img> tag doesn't work.

2. When you embed an image into text using the img tag the image is added to the TextField's DisplayList. For example if you embed an image in the TextField "contentfield", it's the same as doing contentfield.addChild(htmlImage); Which brings me to…
3. The TextField has a method called getImageReference(id:String):DisplayObject; Basically this method returns the DisplayObject or image that is contained within a given TextField. This is great, but I noticed it only works when there is one image in a TextField. If someone can confirm this, that would be great.

Basically I wanted to link the embedded images in my TextField so the popup a larger version of the image. Simple enough, yet when I wrapped the img tag with an href, the outside of the image would show the hand cursor, but the image wouldn't link. Now if the parent of the img is the TextField, then wouldn't it make sense to have numChildren as a TextField Method? Then I could loop through the children of the text field and create buttons. I've made this request to Adobe, and so far they have been receptive to the idea. Hopefully this will get passed through.

I did however, come up with another way to dynamically load images into a TextField. When loading a swf into a TextField using the img tag you can set the instance name of that swf using the id attribute. I use this id attribute to pass the path to the image, as well as an image id that is passed into the popup window that loads the larger image. Here's an example of the html source that is passed into the TextField.

<img src="thumb.swf" id="../flashassets/images/slideshow/2_sm.jpg,2_sm.jpg" />

I separate the two parameters using a comma which are String split in the thumb.swf. Here's the code in the thumb.swf:

if(this.parent.name != null) var results:Array = this.parent.name.split(",");
 
var imagepath:String = (this.parent.name == null) ? "../flashassets/images/slideshow/1_sm.jpg" : results[0];
var link:String = (this.parent.name == null) ? "http://www.google.com" : results[1];
 
var image:Sprite = new Sprite();
image.useHandCursor = image.buttonMode = image.mouseEnabled = true;
image.addEventListener(MouseEvent.CLICK, onClick);
 
this.addChild(image);
var loader:Loader = new Loader();
var request:URLRequest = new URLRequest(imagepath);
loader.load(request);
image.addChild(loader);
 
var border:Sprite = new Sprite();
this.addChild(border);
border.graphics.lineStyle(2, 0xCC3300, 1, true, "none");
border.graphics.drawRect(1,1,148, 148);
 
function onClick(event:MouseEvent):void{
	navigateToURL(new URLRequest("javascript:window.open('image.php?cat=slideshow&id="+link+"','atest','menubar=yes,resizable=no,width=710,height=730,left=50,top=50');"), "_self");
}

2

AS3 Javascript Call Sequencer + Omniture + Google Analytics

Here's a little utility that I did for multiple Omniture calls to a javascript in the html page. It will also accept another call, such as an iFrame refresh. It delays each call a tiny bit to make sure that events are fired off. Also has a runtime environment detection so your browser window doesnt keep popping up during publishing. Source file below as well.

Usage:

_oSendJavascript = SendJavascript.getInstance();
// Genric Javascript
function clickHandler(event:MouseEvent):void {
	_oSendJavascript.addEvent(
		"AutoReloadIFrame();"
	);
}
 
//or…
 
// Omniture call
function clickHandler(event:MouseEvent):void {
	_oSendJavascript.addEvent(
		"var x = new Object(); x.pageName = 'Primary Section - Secondary Section';trackPageView(x);"
	);
}
 
//or…
 
// Google Analytics call
function clickHandler(event:MouseEvent):void {
	_oSendJavascript.addEvent(
		"_uacct = 'YOURGOOGLEACCOUNTNUMBER-000000-1'; urchinTracker();"
	);
}
 
// And of course you can stack calls
_oSendJavascript.addEvent("AutoReloadIFrame();");
_oSendJavascript.addEvent("function1();");
_oSendJavascript.addEvent("function2();");

The class:

package com.hydrotik.utils {
 
	/**
	 * @author Donovan Adams
	 * @version September 28, 2007
	 *
	 * @description SendJavascript Tracking Utility. Queues up SendJavascript events that fire off incrementally.
	 *
	 * @usage Example:
	 	<code>
			// This should only be called once! THe SendJavascript class is a Singleton pattern
			_oSendJavascript = SendJavascript.getInstance();
 
			// Called whenever an even needs to be triggered.
			function clickHandler(event:MouseEvent):void{
				_oSendJavascript.addEvent("AutoReloadIFrame();");
			}
		</code>
	 */
 
    import flash.events.Event;
    import flash.net.URLLoader;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import flash.events.TimerEvent;
	import flash.utils.Timer;
	import flash.system.Capabilities;
 
    public class SendJavascript {
 
		private static const DELAY:Number = .1; // Time in seconds
 
		private static var _oSendJavascript : SendJavascript;
 
		private static var _queueArray:Array;
 
		private static var _queueTimer:Timer;
 
		private static var _count:int;
 
		public static function getInstance() : SendJavascript{
			if (_oSendJavascript == null) _oSendJavascript = new SendJavascript();
			return _oSendJavascript;
		}
 
		public function SendJavascript():void {
			trace('\n\n\n\n======== SendJavascript Initializing '+(new Date()).toString()+'=========\n\n');
			_queueArray = [];
			_count = 0;
			_queueTimer = new Timer(DELAY*1000, 0);
			_queueTimer.addEventListener(TimerEvent.TIMER, sendEvent);
			_queueTimer.addEventListener(TimerEvent.TIMER_COMPLETE, queueComplete);
		}
 
		public function addEvent(p:String):void{
			trace("\t>> SendJavascript :: addEvent() - _count: "+_count);
			_queueArray.push("javascript: " + p);
			_queueTimer.repeatCount++;
			if(!_queueTimer.running) sendQueue();
			trace(_count);
			_count++;
		}
 
		private function sendQueue():void{
			trace("\t>> SendJavascript :: sendQueue()");
			_queueTimer.reset();
			_queueTimer.start();
		}
 
		private function sendEvent(event:TimerEvent):void{
			trace("\t>> SendJavascript :: sendEvent() - currentCount: "+_queueTimer.currentCount, _queueTimer.repeatCount);
			/* you can add any other variables you want to track above x.sprop2, x.channel, etc; */
 
			var playerType:String = Capabilities.playerType;
			if (playerType == "External" || playerType == "StandAlone") {
				trace("\t\tnavigateToURL("+_queueArray[_queueTimer.currentCount - 1]+"),'_self');");
			} else {
				navigateToURL(new URLRequest(_queueArray[_queueTimer.currentCount - 1]),'_self');
			}
 
		}
 
		private function queueComplete(event:TimerEvent):void {
			trace("\t>> SendJavascript - queueComplete() - type: "+event.type);
			flush();
           _queueTimer.reset();
 
        }
 
		private function flush():void{
			trace("\t>> SendJavascript :: flush()");
			_queueArray = [];
			_count = _queueTimer.repeatCount = 0;
		}
 
 
	}
 
}

12

AS3 Resizing SWF + SWFObject + JavaScript Tweener

Came across this cool javascript that tweens a bunch of objects. Javascript Motion Tweener

Here's an example

In the swf:

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(Event.RESIZE, resizeHandler);
 
var openState:Boolean = true;
var closedSize:String = "200";
var openSize:String = "400";
 
var bg:Shape = new Shape();
bg.graphics.beginFill(0x454545, 1);
bg.graphics.drawRect(0, 0, 400, 400);
addChild(bg);
 
var bg2:Shape = new Shape();
bg2.graphics.beginFill(0x666666, 1);
bg2.graphics.drawRect(0, 0, 400, 20);
addChild(bg2);
 
var btn:Sprite = new Sprite();
addChild(btn);
btn.x = 10;
btn.y = 400-26;
btn.graphics.beginFill(0xCCCCCC, 1);
btn.graphics.drawRect(0, 0, 100, 16);
btn.buttonMode = true;
btn.useHandCursor = true;
btn.mouseEnabled = true;
btn.addEventListener(MouseEvent.CLICK, resizeClickHandler);
 
var label:TextField = new TextField();
label.autoSize = TextFieldAutoSize.CENTER;
label.selectable = false;
label.mouseEnabled = false;
label.defaultTextFormat = new TextFormat("Arial", 11, 0x454545);
label.x = 50;
label.htmlText = "RESIZE";
btn.addChild(label);
 
 
 
 
 
 
function resizeClickHandler(event:MouseEvent):void {
	try {
		navigateToURL(new URLRequest("javascript:setHeight("+ ((openState) ? openSize : closedSize) + "," + ((openState) ? closedSize : openSize) +");"),'_self');
		openState = !openState;
	} catch (e:SecurityError) {
		var alert:TextField = new TextField();
		alert.autoSize = TextFieldAutoSize.RIGHT;
		alert.selectable = false;
		alert.mouseEnabled = false;
		alert.defaultTextFormat = new TextFormat("Arial", 11, 0xFFFFFF);
		alert.x = 390;
		alert.htmlText = e.toString();
		addChild(alert);
	}
}
 
function resizeHandler(event:Event):void {
	bg.width = stage.stageWidth;
	bg.height = stage.stageHeight;
	btn.y = stage.stageHeight - 26;
}

And in the html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>resize test</title>
<script type="text/javascript" src="swfobject.js"></script>
<script language="javascript" src="Tween.js"></script>
<script language="javascript" src="Sequence.js"></script>
</head>
<body bgcolor="#ffffff">
 
 
 
<script type="text/javascript">
	// <![CDATA[
		function setHeight(start,end) { 
			t1 = new Sequence();
			t1.addChild(new Tween(document.getElementById('flashPulse').style, 'height', Tween.strongEaseOut, start, end, 0.5, 'px'));
			t1.start();
		} 
	// ]]>
</script>
 
<div id="flashPulse" style="width:400px; height:400px;">
 
</div>
 
<br>
Some Text
 
<script type="text/javascript">
	// <![CDATA[
	var so = new SWFObject("resize.swf", "pulseMovie", "100%", "100%", "9.0.0", "#000000");
	so.addParam("salign", "LT"); 
    so.addParam("scale", "noscale")
    so.addParam("AllowScriptAccess", "always");
	so.write("flashPulse");
	// ]]>
</script>
 
</body>
</html>

I have yet to fully test this on a windows machine so let me know if there are any problems.

0

SWFAddress

Earlier I posted a little javascript about how to deep link with the anchor variable in the url. I was surfing some design sites and found one using a similar method. Low and behold after viewing source, a complete script that sits on SWFObject called SWFAddress. I guess I am living under a rock.

Here's an example:

myButton.onRelease = function() {  
    SWFAddress.setValue('/my-deep-link/');  
}  
SWFAddress.onChange = function() {  
    myNavigationLogic();  
    SWFAddress.setTitle('My deep link');  
}

Here's the site:
http://www.asual.com/swfaddress/

Here's a direct link to getting started and good practices
http://www.asual.com/blog/swfaddress/2007/05/18/swfaddress-bad-practices.html

0

SWFObject Deeplinking

Here's a simple and easy way I was able to link to primary navigation sections in an all flash site.

Basically when you add #video to the end of your URL the blow code will push that video string to a swfobject add variable method. I haven't tried it yet but I think it would be easy to add a sub section by adding #video/2 or #video/interviews etc. and do a split in the javascript. In the example below the ",0″ is an appended index reference to a sub section within the flash. In my flash if the pageid variable equals "none" then it loads normally.