1

IMD 2002Week 10 – Useful Tidbits Part 2

Jon Keon | Winter 2012

2

Agenda• Stage Properties• Parsing XML• Liquid GUI• Communication• Passing Variables in Custom Events• Variable Framerates• Loading Strategies• Optimization

Jon Keon | Winter 2012

3

Stage Properties• Adobe Docs

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#align

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#scaleMode

• Up until now we’ve kept the Stage properties to be the default. This will cause your flash content to be resized to whatever the browser size is.

• You’ve seen this with SquareJumper, the game is as big as the Browser.

Jon Keon | Winter 2012

4

Stage Properties• This is 100% completely fine so long as all of your

graphics are VECTOR.• If you ever have bitmaps though... You can expect some

serious pixelization.

• Most sites and games set the following two properties for every project.• stage.align = StageAlign.TOP_LEFT;• stage.scaleMode = StageScaleMode.NO_SCALE;

Jon Keon | Winter 2012

5

Stage Properties• This will set the alignment to be the top left corner of the

stage (which is what you expect) and for the dimensions of the swf to stay a static size that you can specify.

• [SWF(width=200,height=120)]public class Main extends Sprite {

• This tag allows you to set the width and height of your stage.

Jon Keon | Winter 2012

6

XML/JSON Parsing• Adobe Docs

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/XML.html

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/XMLList.html

• http://help.adobe.com/en_US/FlashPlatform/beta/reference/actionscript/3/JSON.html

• XML and JSON are good ways of externalizing data to you applications. This prevents recompiles of your program and allows for non-coders to easily modify how your program behaves.

Jon Keon | Winter 2012

7

XML Parsing• XML Parsing is commonly used to provide Text and

Blueprints for how to construct something in AS3. • Ex: Translations

• <welcomeLabel>Bonjour!</welcomeLabel>• Ex: Maps

• <cell>• <tile>Grass</tile>• <movementCost>15</movementCost>

• </cell>

• Use the classes XML and XMLList

Jon Keon | Winter 2012

8

XML Parsing• XML parsing can be tedious, might be a good idea to create

your own classes that wrap the E4X syntax of accessing elements. (http://en.wikipedia.org/wiki/ECMAScript_for_XML)

• Writing XML in AS3 can be even more tedious.

• Useful Static properties though:• //Strips comments out when parsing

XML.ignoreComments = true;• //Strips whitespace out when parsing

XML.ignoreWhitespace = true;• //Makes sure everything is indented nicely when tracing out or writing to

a String• XML.prettyPrinting = true;

XML.prettyIndent = 4;

Jon Keon | Winter 2012

9

XML Parsing• Good Tutorial on XML Parsing

• http://www.senocular.com/flash/tutorials/as3withflashcs3/?page=4

Jon Keon | Winter 2012

10

JSON Parsing• JSON is a bit easier to work with but less intuitive for non-

programmers to work with.• JSON represents objects which can make it very nice for

reading/writing state in your application.

• Ex:• Var o:Object = new Object();• O.x = 30;• O.y = 20;• O.alpha = 1.0;• //Resulting JSON equivalent is:• {x:30, y:30, alpha:1.0}

Jon Keon | Winter 2012

11

JSON Parsing• JSON allows you to serialize your objects in their current

state to a string, save that string to a Database and then load it back in as a String later and convert back to your object.

• This is especially useful for things like Save Files in a Game.

Jon Keon | Winter 2012

12

Liquid GUI• Adobe Docs:

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Stage.html#event:resize

• Liquid GUI is a term given to sites or applications that resize according to how large the screen is. Very useful for those fullscreen immersive websites.

• Generally you want to target your websites to 1024 by 768 to make sure you get the widest market possible. • This gives you a lot of sites with a really small box in the middle of

the screen and some generic background for the rest of your 2560 by 1600 screen.

Jon Keon | Winter 2012

13

Liquid GUI• Enter Liquid GUIs. These sites will scale from your

smallest resolution up to the highest resolution possible.

• Works by anchoring elements to 9 areas of the stage and resizing them with respect to the stage resize.

• Must set stage.scaleMode = StageScaleMode.NO_SCALE

• Then listen on the stage for the Event.RESIZE event.• When you get this event you can then tell all the children to resize

themselves.

Jon Keon | Winter 2012

14

Liquid GUI• You don’t get it for free!• You’ll have to write the custom logic to control where

things get anchored and how they will grow accordingly.

• Ex: • private function onResize(e:Event) {

• //Example Scaling• myTitleBar.width = stage.stageWidth;• myTitleBar.x = 0;• //Example Anchoring• myTopRightIcon.x = stage.stageWidth – myTopRightIcon.width;

• }

Jon Keon | Winter 2012

15

Communication• AS3 has three main ways to communicate with the “outside” world.

• Socket Connections• Web Services• External Interface

• There are a few others but they are used very infrequently.• Shared Objects

• Think cookies for Flash. You can open and read/write to these files. Used to be used for Save Games or Highscores. Not used as often anymore because the user can set their security settings so that Shared Objects are not allowed.

• Local Connections• Allows you to talk between two swfs that are running at the same time. This is

actually how the Debugger and Profiler work. They are swfs that Flash Builder launches which use Local Connection to connect to your swf at Runtime in order to talk to it.

• It’s also the only way AS3 swfs can talk to AS2/1 swfs. • Again a very infrequent case.

Jon Keon | Winter 2012

16

Communication• Sockets

• Used mostly for live, multi-user interactions. • Ex. Chat rooms, MMO’s etc.• http://

help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/Socket.html

• This is pretty low-level but also quite powerful. Several 3rd party engines exist that take advantage of it such as Red5, Photon and SmartFox.

• Web Services• If you’ve ever done PHP coding this is somewhat familiar.

• You write some HTML which has PHP code that talks to your Server side PHP code and gets a response.

• In AS3 you create a URLLoader which sends a request to a URL (which can be PHP code, ASP .NET code etc)

Jon Keon | Winter 2012

17

Communication• Web Services Continued

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/URLLoader.html

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/net/URLRequest.html

• This should be pretty familiar as it follows the same convention as Loaders which we’ve seen before.

• Web Services are transactional just like loaders. You must make a REQUEST and you will get a RESPONSE (or an error).

• Sockets on the other hand can PUSH notifications or data to you without your input.

Jon Keon | Winter 2012

18

Communication• External Interface

• AS3 can talk to the webpage it is embedded in via External Interface

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

• This is slightly slow and not often used, but will probably be more prevalent due to the increasing popularity of HTML5 which uses…. JavaScript! • Which is what External Interface is all about.

Jon Keon | Winter 2012

19

Communication• External Interface Continued

• Two functions to allow for two way communication with JavaScript/ActionScript

• addCallback• Ex. ExternalInterface.addCallback(“talkToMe”, onTalkToMe);• “talkToMe” is what JavaScript calls on the SWF object.• onTalkToMe is what function gets actually called in ActionScript when JavaScript calls on

the SWF object.

• call• Ex. ExternalInterface.call(“talkToYou”, “Some Message”, 3);• “talkToYou” is a function in JavaScript that ActionScript will call.• “Some Message” and 3 are parameters passed to that JavaScript function.

• Obviously you need to coordinate so that JavaScript knows what is available in ActionScript and vice versa. No way to find out at Runtime or Compile time. (Unless you write something custom).

Jon Keon | Winter 2012

20

Passing Variables in Custom Events• We’ve seen this before in Square Jumper but the

essential concept is that Events are simply classes. And since they are classes you can make them do anything.

• public class CustomEvent extends Event {• public var newX:int;• public var newY:int;• etc

• }

• So long as your class extends Event you can dispatch and listen for it.

Jon Keon | Winter 2012

21

Variable Framerates• Sometimes you will want to play animations at a different

rate that the default Flash Frame Rate.

• To do this you will need to tie into a Timer or ENTER_FRAME event and manually set the frame on your movieclips via gotoAndStop.

• In this manner you can speed up or slow down the framerate of your animations as you please.

• Of course, there are limits, you can’t get sub-frame times.• Ex. Can’t move the play head by half a frame etc.

Jon Keon | Winter 2012

22

Loading Strategies• Loading Strategies are very important for online sites.

• Which means for all of your final projects!

• Ideally you want to load as little as possible and only what your user needs.

• Take an Artists portfolio site. What would a site like that have on it?• Probably a main page featuring a few works and then links to a

gallery, an about/contact page and maybe some blog posts.

Jon Keon | Winter 2012

23

Loading Strategies• All of that content can easily be in the 50mb to 200mb

range.• Would you wait while that downloads?• Probably not.

• What is the most important part of the site?• Probably the Contact page because that’s how the artist can get

new business. • But it’s a bit awkward to start on a Contact page.

Jon Keon | Winter 2012

24

Loading Strategies• So how can we get the user to stay on the site long

enough to be interested for the content to load and ultimately get to the Contact page?

• A Naïve approach would be to have a preloader that loads the whole site. • While this conceptually a good idea, we only have to wait for

approx 100k to load before seeing a graphic of a preloader loading the other 49.9mb.

• We might get some users to stay interested for a bit. But when they see how slow that bar is moving, they’ll probably give up.

Jon Keon | Winter 2012

25

Loading Strategies• A better approach might be to have a very light weight

preloader (<100k) that loads just the very first landing page.

• Once the landing page is loaded, we can show that to the user immediately. Stuff like the featured works can load in after that as we need to display it. • You’ll see this a lot on sites where images fade in over time.

• Then while the user is on this landing page we can load the other pages in the background in case the user decides to go there. (If we’re more concerned about a fast experience).

Jon Keon | Winter 2012

26

Loading Strategies• If we’re more concerned with saving $$ and bandwidth,

we only load content that the user explicitly requests.• User never clicks on the Gallery? Never load the gallery page.• This is a double edge sword because whatever the user clicks on

they’re going to have to wait while it loads which can get annoying if the experience is:• Click• Wait• Click• Wait• Click• Wait• …

Jon Keon | Winter 2012

27

Loading Strategies• Having all of this work seamlessly is a big undertaking

and can be complex if you decide to work in queue’s, cancelling, and priority handling.

• So the Main skeleton you’ll want to achieve is:• Initial Load < 100k• Each subsequent “page” load < 2 or 3 MB• Each Image (bitmap) greater than 100k, load independantly.

• Never use the Embed tag in online projects, your swfs will become bloated very quickly.

Jon Keon | Winter 2012

28

Optimization• Making things run fast!

• There are many ways to make Actionscript run fast and run slow.• These are fairly general but more in depth info can be found here:

• http://www.richnetapps.com/as3-performance-optimization/• http://osflash.org/as3_speed_optimizations• http://drawlogic.com/2009/05/22/as3-flash-efficient-code-techniques-vec

tors-in-flash-10-faster-jpeg-encoding-other-optimization-notes/

• http://help.adobe.com/en_US/as3/mobile/flashplatform_optimizing_content.pdf

• http://gskinner.com/talks/quick/

Jon Keon | Winter 2012

29

Optimization• Pitfalls

• Rendering will *Always be the slowest part of your program.• Calculations can slow things down but it’s very rare that these take more time that

in takes to render to the screen.• As a result, Vector graphics are low filesize but slow to render.• Bitmaps are large but fast to render.

• You have to balance between the two!

• Sometimes you’ll want both though and this is where cacheAsBitmap comes into play (and cacheAsBitmapMatrix for Mobile GPU)

* Unless you aren’t rendering anything

Jon Keon | Winter 2012

30

Optimizations• CacheAsBitmap

• Any Sprite can have the property cacheAsBitmap or cacheAsBitmapMatrix applied to it.

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#cacheAsBitmap

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#cacheAsBitmapMatrix

• When setting this to true, Flash will internally take a picture of the object and use that picture (bitmap) to render instead of the vector image.

• This will significantly speed up the render time for any animations involving Vector drawings.

• This will have no effect except greater memory consumption if you do it to a PNG or something that is already a bitmap.

Jon Keon | Winter 2012

31

Optimizations• Function Calls

• Function calls can be slow. If you can inline the math or access a public property directly it will be faster.

• How much faster?• Lots faster! But only if you’re calling the function multiple times a frame. • Just setting the value once? Don’t worry about it.• Setting the value thousands of times per frame? Might want to worry

about it.

• You only need to optimize your functions, math etc if you’re calling them thousands of times per frame. Otherwise you’re better off with clean easy to understand code.

Jon Keon | Winter 2012

32

Optimizations• Filters are evil!

• While you can programmatically (and in the Flash IDE) add Glow’s and drop shadows etc… DON’T!

• Filters get rendered just like Vector objects and they slow things down a lot.

• If you want to have a glow or drop shadow on an asset, do it in Photoshop and export as a PNG.

Jon Keon | Winter 2012