Lyraspace

Apr 15

Custom Preloader class for Flex apps

I’ve blogged on this before but here’s an updated version of a custom preloader class that extends Sprite and loads in a MovieClip from a SWC to use as the animation and display the load progress.

Custom preloader for Flex

package com.cravens.nr.preloader
{
import com.cravens.nr.model.Config;
import flash.display.GradientType;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.events.TimerEvent;
import flash.geom.Matrix;
import flash.utils.Timer;
import mx.events.FlexEvent;
import mx.preloaders.IPreloaderDisplay;
public class NRPreloader extends Sprite implements IPreloaderDisplay
{
protected var loadingPanel:BusyPanel;
protected var timer:Timer;
public function NRPreloader()
{
super();
}
//------------------------------------------------------------------------------
public function set preloader(preloader:Sprite):void
{
preloader.addEventListener(ProgressEvent.PROGRESS, handleProgress);
preloader.addEventListener(Event.COMPLETE, handleComplete);
preloader.addEventListener(FlexEvent.INIT_PROGRESS, handleInitProgress);
preloader.addEventListener(FlexEvent.INIT_COMPLETE, handleInitComplete);
}
//------------------------------------------------------------------------------
public function initialize():void
{
var matrix:Matrix = new Matrix(0,1,1,0,0,0);
graphics.beginGradientFill(GradientType.LINEAR,[0x000000,0x89265a],[1,1],[125,205],matrix);
graphics.drawRect(0,0,Config.VIEWPORT_WIDTH,Config.VIEWPORT_HEIGHT);
loadingPanel = new BusyPanel();
try
{
loadingPanel.heading_txt.text = "LOADING ... PLEASE WAIT";
loadingPanel.message_txt.text = "0/100%";
}
catch(e:Error)
{
throw new Error("Asset does not contain the relevant textField objects");
}
finally
{
loadingPanel.x = Config.VIEWPORT_CENTER_X-150;
loadingPanel.y = Config.VIEWPORT_CENTER_Y;
addChild(loadingPanel);
}
}
//------------------------------------------------------------------------------
// Define empty event listeners.
private function handleProgress(event:ProgressEvent):void
{
var prog:Number = Math.ceil((event.bytesLoaded/event.bytesTotal)*100);
loadingPanel.message_txt.text = prog+"/100%";
}
//------------------------------------------------------------------------------
private function handleComplete(event:Event):void
{
loadingPanel.message_txt.text = "LAUNCHING";
}
//------------------------------------------------------------------------------
private function handleInitProgress(event:FlexEvent):void
{
}
//------------------------------------------------------------------------------
private function handleInitComplete(event:Event):void
{
timer = new Timer(500,1);
timer.addEventListener(TimerEvent.TIMER, dispatchComplete);
timer.start();
}
//------------------------------------------------------------------------------
private function dispatchComplete(event:TimerEvent):void
{
timer.removeEventListener(TimerEvent.TIMER, dispatchComplete);
timer = null;
dispatchEvent(new Event(Event.COMPLETE));
}
//------------------------------------------------------------------------------
// Implement IPreloaderDisplay interface
public function get backgroundColor():uint
{
return 0;
}
//------------------------------------------------------------------------------
public function set backgroundColor(value:uint):void
{
}
//------------------------------------------------------------------------------
public function get backgroundAlpha():Number
{
return 0;
}
//------------------------------------------------------------------------------
public function set backgroundAlpha(value:Number):void
{
}
//------------------------------------------------------------------------------
public function get backgroundImage():Object
{
return undefined;
}
//------------------------------------------------------------------------------
public function set backgroundImage(value:Object):void {
}
//------------------------------------------------------------------------------
public function get backgroundSize():String {
return "";
}
//------------------------------------------------------------------------------
public function set backgroundSize(value:String):void {
}
//------------------------------------------------------------------------------
public function get stageWidth():Number
{
return Config.VIEWPORT_WIDTH;
}
//------------------------------------------------------------------------------
public function set stageWidth(value:Number):void
{
}
//------------------------------------------------------------------------------
public function get stageHeight():Number
{
return Config.VIEWPORT_HEIGHT;
}
//------------------------------------------------------------------------------
public function set stageHeight(value:Number):void
{
}
}
}

Also, notice I’ve created a simple grad background using the Sprite graphics …

var matrix:Matrix = new Matrix(0,1,1,0,0,0);
graphics.beginGradientFill(GradientType.LINEAR,[0x000000,0x89265a],[1,1],[125,205],matrix);
graphics.drawRect(0,0,Config.VIEWPORT_WIDTH,Config.VIEWPORT_HEIGHT);

This is the best way to do things because remember, the framework has not loaded while the preloader is displayed so you need to keep things lightweight and simple.

Also, the Matrix object rotates the grad so it runs vertically.

Have fun.

Apr 15

Detecting when text has run into the end of a container in a TextFlow object

Actionscript, Flex 3 Comments »

More fun and games with the Text Layout Framework. So, I have a load of links being flowed one by one through a bunch of linked containers. I need to detect when a link reaches the end and has ‘overflowed’ so to speak.

To do this you need to make sure your ContainerController objects have their ScrollPolicy set to OFF so the flowComposer recognises that the text is not in the container anymore. This will not halt the flow however so you need to add a nice bit of code that will detect if the FlowElement is no longer within a container.

Here’s the code …

Detecting when text has run into the end of the ContainerController in a TextFlow object

/*
A good idea to set a config object to pass into the TextFlow object when you create it
*/
config = Configuration(TextFlow.defaultConfiguration).clone();
/*
And add this overflowPolicy to it as well as your formatting defaults
*/
config.overflowPolicy = OverflowPolicy.FIT_DESCENDERS;
textFlow = new TextFlow(config);
/*
Create your containers from sprites and make sure the scrollPolicy is OFF
*/
var controller:ContainerController = new ContainerController(containerSprite,width,height);
controller.verticalScrollPolicy = controller.horizontalScrollPolicy = ScrollPolicy.OFF;
textFlow.flowComposer.addController(controller);
/*
Now imagine we are in a loop which adds a paragraph of lorem ipsum to the textflow and updates the controllers and checks if the flow is now out of the bounds of the container
*/
while(LOOP)
{
textFlow.addChild(myParagraphElement); // you've created the paragraph
textFlow.flowComposer.updateAllControllers(); // you've created the controllers
var containerIndex:int = textFlow.flowComposer.findControllerIndexAtPosition(textFlow.textLength-1);
if(containerIndex==-1) textFlowCompleteHandler();
}

It’s these two lines that do the detection …

var containerIndex:int = textFlow.flowComposer.findControllerIndexAtPosition(textFlow.textLength-1);
if(containerIndex==-1) textFlowCompleteHandler();

The findControllerIndexAtPosition method will return -1 if the character index passed in is not within a container. Remember to use textFlow.textLength-1 to get the last character. The textFlow variable is an instance of the TextFlow object.

The textFlowCompleteHandler can be any method that stops the insertion of FlowElement objects happening.

Apr 12

Adobe vs Apple? Sod the developers … what does the user want?

Apple, Flash, iPhone, rant, Web tools No Comments »

There’s been all kinds of heated debate and colorful invective surrounding the latest events in the Adobe vs Apple altercation. It’s hard for me to take sides because as a Flash developer for over ten years now and as a loyal Mac user for nearly 20 I’m finding that I do sympathise with both sides.

I find it distasteful that Apple should introduce section 3.3.1 merely days before the release of CS5 and Adobe’s new ‘compile Flash to iPhone app’ feature. It’s really quite underhand and will effect a lot of people’s livelihoods and damage business. Let’s not forget it’s not just Adobe that will be affected by this change. Unity3D and other 3rd party tools will not be able to release apps on the store. Some great apps like the ‘Star Wars Trench Run’ may need to be removed and as I understand it with my limited knowledge of these things some of the larger publishers like EA may also be affected as their games use 3rd party interpreters and tools that will be outlawed by Apple’s new rules.

On the other side though, Adobe should never have introduced this feature without the approval of Apple. They rushed this thing out and in the process have gambled with the livelihoods of hundreds of developers who have put their stake in iPhone app development with Flash.

Basically I think both parties have been very arrogant and have damaged a lot of reputations in the industry … mainly developers. We’ve got decent, honest people at each others throats when all they want to do is work together to make amazing, engaging content.

But the biggest victim in all this is the user. People buy iPhones and wonder why they can’t see the rich content they’ve come to expect. They struggle trying to view Flash content in the browser that hasn’t been built properly or they haven’t got the correct plug-in installed. What does the user want? Why is it all going wrong?

Fifteen years ago I was building CD-Rom titles in Director 3 which at the time was owned by Macromedia. We started using Flash 2 when it was released so we could include animated SWF content in our Director titles. We then started building Flash content for the web. At the time there was no such thing as ‘web standards’ … HTML was pretty basic and browsers were packed full of plug-in’s developed so you get the most out of your browsing experience. You had the ‘Real’ or ‘Quicktime’ plugin to watch video, ‘Shockwave’ allowed you to play amazing games online and ‘Flash’ exploded all over the web because it brought the browser to life and allowed us to build truly engaging rich content without loading new pages to update content.

In the present day we have a completely different type of internet. Web standards have evolved to the point that we now have a perfectly reasonable alternative to Flash integrated into the browser. HTML5 and WebGL allows us to build rich engaging content without a plug-in. In fact Flash is probably one of the few plugins people are still required to install into their browser to view a vast majority of content. And this is where Adobe have failed the user. Director died a death because people didn’t need to publish CD-Roms anymore and Flash should have evolved so the user didn’t need to use a plug-in in their browser.

Adobe should have adapted Flash so it output HTML5 and WebGL 3D content. The AIR runtime is fine on the desktop (although I will always choose a native Mac OS app) and will be just fine on the Android platform, hell they might even integrate it into their OS. But it’s in the browser they’ve failed and if they want to see Flash content on the iPhone they need to improve their tools (like Flash or Dreamweaver) so they produce standards compliant, rich, interactive content in the browser natively. This, after all, is what the user wants.

And Steve, stop being so evil. You’re forgetting what Apple was supposed to stand for. You should watch your 1984 Keynote speech every morning to remind yourself.

Some links on the subject …

http://www.smashingmagazine.com/2010/04/12/the-gradual-disappearance-of-flash-websites/

http://www.devwhy.com/blog/2010/4/12/its-all-about-the-framework.html?lastPage=true#comment8034519

http://mashable.com/2010/04/10/steve-jobs-adobe/

http://theflashblog.com/?p=1888

http://blog.codecomputerlove.com/2010/04/09/have-apple-crushed-cs5-flash-to-iphone-opportunity/

UPDATE: Apparently Flash to HTML5 was showcased during a ‘sneak peek’ session at MAX 2009 but has not made it into the new CS5 release. This is a real shame … Adobe could have made some real progress there.

UPDATE UPDATE: Apple have already started pulling apps. Scratch is an education tool built by MIT … it’s now not educating children in computer science.

Apple also banned this app for being too satirical!

Apr 07

Crazy code

Actionscript, Flex No Comments »

Sometimes you have to write a method for something crazy complicated. In this snippet I had a container with a load of TextFlow text in it and I needed to zoom into a specific link within the flow while also scaling the container and positioning it within a Scroller viewport without the container going out of the bounds of the Viewport when the link is centered within it.

This is meaningless to anyone but me but sometimes you just have to share the pain.

Zoom in to a link in a TextFlow within a scaled container in a Scroller viewport

private function moveAndZoomToLink(link:LinkElement,p:Person):void
{
var linkStart:int = link.getAbsoluteStart();
var textFlowLine:TextFlowLine = textFlow.flowComposer.findLineAtPosition(linkStart);
var linkPositionOnLine:int = linkStart-textFlowLine.absoluteStart;
var controllerIndex:int = textFlow.flowComposer.findControllerIndexAtPosition(linkStart);
var controller:ContainerController = textFlow.flowComposer.getControllerAt(controllerIndex);
var containerSprite:Sprite = controller.container;
var rect:Rectangle = textFlowLine.getBounds();
var atomRect:Rectangle = textFlowLine.getTextLine().getAtomBounds(linkPositionOnLine+1);
var nameWidth:Number = p.firstName.length*atomRect.width;
var globalAtomRect:Rectangle = new Rectangle(rect.x+(atomRect.x-atomRect.width),rect.y,nameWidth,rect.height);
var box:Shape = new Shape();
box.graphics.beginFill(0xff0000,0.3);
box.graphics.drawRect(globalAtomRect.x,globalAtomRect.y,globalAtomRect.width,globalAtomRect.height);
containerSprite.addChild(box);
var localPosition:Point = new Point();
localPosition.x = containerSprite.x+rect.x+globalAtomRect.x;
localPosition.y = containerSprite.y+rect.y;
/*
We're zooming in so scale the local position
*/
var scaledX:Number = localPosition.x*Config.SHIRT_ZOOM_SCALE;
var scaledY:Number = localPosition.y*Config.SHIRT_ZOOM_SCALE;
/*
We don't want the shirt to move so it is out of the viewport so calculate what this range is ...
*/
var maxMoveX:Number = (Config.SHIRT_WIDTH*Config.SHIRT_ZOOM_SCALE)-Config.VIEWPORT_WIDTH;
var maxMoveY:Number = (Config.SHIRT_HEIGHT*Config.SHIRT_ZOOM_SCALE)-Config.VIEWPORT_HEIGHT;
var newX:Number = 0-scaledX;
var newY:Number = 0-scaledY;
var centeredX:Number = newX+Config.VIEWPORT_CENTER_X;
var centeredY:Number = newY+Config.VIEWPORT_CENTER_Y;
/*
Check the shirt hasn't moved out of bounds
*/
var offsetX:Number = centeredX>0? centeredX*-1 : centeredX<0-maxMoveX? (centeredX*-1)-maxMoveX : 0;
var offsetY:Number = centeredY>0? centeredY*-1 : centeredY<0-maxMoveY? (centeredY*-1)-maxMoveY : 0;
/*
Finally, the new position is nudged so it is at the centre of the viewport space or as near as can be.
*/
moveToPointX = centeredX>0? 0 : centeredX<0-maxMoveX? centeredX+((centeredX*-1)-maxMoveX) : centeredX;
moveToPointY = centeredY>0? 0 : centeredY<0-maxMoveY? centeredY+((centeredY*-1)-maxMoveY) : centeredY;
var viewportX:Number = Config.VIEWPORT_CENTER_X+offsetX;
var viewportY:Number = Config.VIEWPORT_CENTER_Y+offsetY;
shirtMoveTo.play();
var evt:PersonSelectionEvent = new PersonSelectionEvent(PersonSelectionEvent.PERSON_SELECTION,true);
evt.viewportPoint = new Point(viewportX,viewportY);
evt.person = p;
dispatchEvent(evt);
}

Apr 07

Snippety Snipplr snip!

Actionscript No Comments »

So I’ve been using Snipplr recently for storing little code snippets. Looks like a pretty good service but after I tested its embedding features recently in a couple of posts I got sad and started to cry. This is because it didn’t embed very well. Not very well at all. You couldn’t scroll the code horizontally to read it.

Well, I’ve now installed the Snipplr wordpress plugin so hopefully the next bunch of stuff you see will be a couple of Snipplr snippets nicely embedded with some lovely scrolly-pollys scrollbars. Ok, I’ll stop talking like a baby now.

Get the server/domain name that your SWF is running on

/*
In Flex the Application needs to be complete so run this code within your applicationComplete event handler and pass a Boolean into a Data model somewhere so you can use it elsewhere.
*/
var Flex3Application:String = URLUtil.getServerName(Application.application.loaderInfo.url);
var Flex4Application:String = URLUtil.getServerName(FlexGlobals.topLevelApplication.loaderInfo.url);

Detecting if your SWF is running over HTTP or locally

/*
In Flex the Application needs to be complete so run this code within your applicationComplete event handler and pass a Boolean into a Data model somewhere so you can use it elsewhere.
*/
var isLocal:Boolean = loaderInfo.url.indexOf("file") == 0;

There’s a TextMate bundle too.

Exciting ay? The fun never stops here!