1 / 32

IMD 2002

IMD 2002. Week 10 – Useful Tidbits Part 2. Agenda. Stage Properties Parsing XML Liquid GUI Communication Passing Variables in Custom Events Variable Framerates Loading Strategies Optimization. Stage Properties. Adobe Docs

dinah
Download Presentation

IMD 2002

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Jon Keon | Winter 2012 IMD 2002 Week 10 – Useful Tidbits Part 2

  2. Jon Keon | Winter 2012 Agenda • Stage Properties • Parsing XML • Liquid GUI • Communication • Passing Variables in Custom Events • Variable Framerates • Loading Strategies • Optimization

  3. Jon Keon | Winter 2012 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.

  4. Jon Keon | Winter 2012 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;

  5. Jon Keon | Winter 2012 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.

  6. Jon Keon | Winter 2012 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.

  7. Jon Keon | Winter 2012 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

  8. Jon Keon | Winter 2012 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 parsingXML.ignoreComments = true; • //Strips whitespace out when parsingXML.ignoreWhitespace = true; • //Makes sure everything is indented nicely when tracing out or writing to a String • XML.prettyPrinting = true;XML.prettyIndent = 4;

  9. Jon Keon | Winter 2012 XML Parsing • Good Tutorial on XML Parsing • http://www.senocular.com/flash/tutorials/as3withflashcs3/?page=4

  10. Jon Keon | Winter 2012 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}

  11. Jon Keon | Winter 2012 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.

  12. Jon Keon | Winter 2012 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.

  13. Jon Keon | Winter 2012 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.

  14. Jon Keon | Winter 2012 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; • }

  15. Jon Keon | Winter 2012 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.

  16. Jon Keon | Winter 2012 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)

  17. Jon Keon | Winter 2012 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.

  18. Jon Keon | Winter 2012 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.

  19. Jon Keon | Winter 2012 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).

  20. Jon Keon | Winter 2012 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 varnewX:int; • public varnewY:int; • etc • } • So long as your class extends Event you can dispatch and listen for it.

  21. Jon Keon | Winter 2012 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 movieclipsvia 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.

  22. Jon Keon | Winter 2012 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.

  23. Jon Keon | Winter 2012 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.

  24. Jon Keon | Winter 2012 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.

  25. Jon Keon | Winter 2012 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).

  26. Jon Keon | Winter 2012 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 • …

  27. Jon Keon | Winter 2012 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.

  28. Jon Keon | Winter 2012 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-vectors-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/

  29. Jon Keon | Winter 2012 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 cacheAsBitmapMatrixfor Mobile GPU) * Unless you aren’t rendering anything 

  30. Jon Keon | Winter 2012 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.

  31. Jon Keon | Winter 2012 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.

  32. Jon Keon | Winter 2012 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.

More Related