{"id":140,"date":"2011-02-02T08:00:50","date_gmt":"2011-02-02T08:00:50","guid":{"rendered":"http:\/\/xiveterritory.com\/blog\/?p=140"},"modified":"2011-07-26T19:28:34","modified_gmt":"2011-07-26T19:28:34","slug":"hello-dynamic-sprite","status":"publish","type":"post","link":"https:\/\/khalifahterritory.com\/blog\/?p=140","title":{"rendered":"Hello Dynamic Sprite"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fkhalifahterritory.com%2Fblog%2F%3Fp%3D140&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p>Code : Utility Class For Easy Runtime Asset Management<br \/>\n<a href=\"http:\/\/xiveterritory.com\/blog\/wp-content\/uploads\/2011\/02\/dynamic-sprite-demo.jpg\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-141\" title=\"dynamic-sprite-demo\" src=\"http:\/\/xiveterritory.com\/blog\/wp-content\/uploads\/2011\/02\/dynamic-sprite-demo.jpg\" alt=\"\" width=\"710px\" height=\"360px\" srcset=\"https:\/\/khalifahterritory.com\/blog\/wp-content\/uploads\/2011\/02\/dynamic-sprite-demo.jpg 710w, https:\/\/khalifahterritory.com\/blog\/wp-content\/uploads\/2011\/02\/dynamic-sprite-demo-300x152.jpg 300w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><br \/>\nIf you are building a multilingual application (or any application that requires dynamic, runtime loaded assets), swapping and managing assets can easily become tedious and messy.<\/p>\n<p>Recently, for projects requiring special characters (such as Chinese, Arabic, Japanese and Hindi) and where dynamic or input text is not required, we have been creating library SWFs for each language and using static textfields to populate content. This saves file size, as unnecessary characters are not embedded, and it eases the process of including different character sets (and even fonts) for each language. It also means that we can include text in the same runtime loaded library as general display assets.<\/p>\n<p><strong>Introducing DynamicSprite<\/strong><\/p>\n<p>Using this process, a language specific library SWF is loaded at startup, or at runtime when the users selects a language, and once complete all dynamic assets are updated accordingly. This can get very messy for two reasons. Firstly, it means that each individual asset has to be destroyed and tidied up to release memory before it is replaced. Secondly, if you have a complex application architecture, you will end up dispatching a ton of events and implementing countless methods within every view or component, in order to rollout the update to each desired DisplayObject.<\/p>\n<p>This is where DynamicSprite comes in handy. Using DynamicSprite you can effortlessly update any amount of DisplayObjects from any amount of library SWFs at runtime, whilst keeping the SWF loading logic centralised in your proxy or loader class. No events, no asset update APIs in your views and no cleaning up after yourself.<\/p>\n<p>Bored? Skip straight to the examples and <a href=\"http:\/\/xiveterritory.com\/blog\/archives\/DynamicSprite.zip\">download<\/a><\/p>\n<p><strong>How It Works<\/strong><\/p>\n<p>The concept is very simple. Each instance of DynamicSprite is registered globally at a class level, you need only call a static update method once and all DynamicSprite instances will update themselves automatically. Each instance of DynamicSprite is given a class definition, which can be set or changed at runtime if desired. When a new library is loaded, it will look inside the SWFs applicationDomain and if it finds a matching asset, update itself and destroy any existing instances of that asset it might own. You can also create DynamicSprite instances at runtime anytime after an asset library has been loaded \u2013 they will check previously loaded libraries for their class definition when created. This works with any display asset, Sprites, MovieClips, Bitmaps (etc) \u2013 BitmapDatas are also detected and destroyed during the cleanup process.<\/p>\n<p>Furthermore, you can load any amount of libraries per language, at different times if necessary \u2013 DynamicSprites will only update themselves when applicable, making it easy to manage your language specific libraries and even individual libraries per language if you choose to (each type of library has it\u2019s own ID).<\/p>\n<p>A DynamicSprite instance will also dispatch an event (named DynamicSprite.INSTANCE_UPDATED) when it has changed it\u2019s asset. You can listen for this event if you need to respond to new asset dimensions. You can also listen for two events on the class itself (through a static, encapsulated EventDispatcher) which are dispatched when a library is added or updated but before all instances have changed (DynamicSprite.LIBRARY_UPDATE_START) and when all instances have finished updating themselves (if necessary) from the added \/ updated library SWF (DynamicSprite.LIBRARY_UPDATE_COMPLETE).<\/p>\n<p>Example Implementation<br \/>\nHere is a simple example of how to use DynamicSprite. Although this example only loads one SWF (the code for the multi SWF example is included in the download), it demonstrates how DynamicSprite can also be useful for single language applications where you still choose to load your assets at runtime.<\/p>\n<div style=\"display: block;\"><span style=\"font-size: 9px !important;\"><br \/>\npublic function SimpleExample()<br \/>\n{<br \/>\n\/\/ Create a DynamicSprite instance and provide a class definition for it&#8217;s asset<br \/>\nvar example : DynamicSprite = new DynamicSprite(&#8220;assets.example.HelloWorld&#8221;);<br \/>\naddChild(example);<br \/>\n<\/span><span style=\"font-size: 9px !important;\"><br \/>\n\/\/ Load a library SWF<br \/>\nvar loader : Loader = new Loader();<br \/>\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);<br \/>\nloader.load(new URLRequest(&#8220;assets_en.swf&#8221;));<br \/>\n}<br \/>\n<\/span><span style=\"font-size: 9px !important;\">private function onLoadComplete(event : Event) : void<br \/>\n{<br \/>\n\/\/ Call the static update method once to update all DynamicSprites<br \/>\nDynamicSprite.update(&#8220;example&#8221;, LoaderInfo(event.target).content);<br \/>\n}<br \/>\n<\/span><\/p>\n<\/div>\n<p>Another advantage of DynamicSprite is that you need not worry about synchronising loading with the update process. Any existing DynamicSprite instance will be updated if required when a library is loaded, however you can also create new instances after a required library has been loaded (useful for highly dynamic content) and any loaded libraries will be searched for matching assets upon creation. This snippet demonstrates this feature.<\/p>\n<div style=\"display: block !important;\"><span style=\"font-size: 9px !important;\"><br \/>\npublic function SimpleExample()<br \/>\n{<br \/>\n\/\/ Load a library SWF<br \/>\nvar loader : Loader = new Loader();<br \/>\nloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);<br \/>\nloader.load(new URLRequest(&#8220;assets_en.swf&#8221;));<br \/>\n}<br \/>\n<\/span><span style=\"font-size: 9px !important;\"><br \/>\nprivate function onLoadComplete(event : Event) : void<br \/>\n{<br \/>\n\/\/ Register this library<br \/>\nDynamicSprite.update(&#8220;example&#8221;, LoaderInfo(event.target).content);<\/p>\n<p><\/span><span style=\"font-size: 9px !important;\">\/\/ Creating a DynamicSprite after a library is loaded still works fine<br \/>\nvar example : DynamicSprite = new DynamicSprite(&#8220;assets.example.HelloWorld&#8221;);<br \/>\naddChild(example);<br \/>\n}<\/span><\/p>\n<\/div>\n<table>\n<tr>\n<td>\n<a href=\"http:\/\/xiveterritory.com\/blog\/archives\/DynamicSprite.zip\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-151\" title=\"icon-simple-download2\" src=\"http:\/\/xiveterritory.com\/blog\/wp-content\/uploads\/2011\/02\/icon-simple-download2.png\" alt=\"\" width=\"40\" height=\"40\" border=\"0\" \/><\/a><\/td>\n<td style=\"vertical-align:middle;\"><strong><a href=\"http:\/\/xiveterritory.com\/blog\/archives\/DynamicSprite.zip\">Download | DynamicSprite<\/a><\/strong>\n<\/td>\n<\/tr>\n<\/table>\n<p>You can download the DynamicSprite class and the demo below. Also check my code repository for updates. If you find any bugs or have any suggestions please leave them in the comments.<\/p>\n<p><font style=\"font-size:10px;color:#9e9e9e;\">Special credit thanks to http:\/\/blog.soulwire.co.uk\/<\/font><\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=https%3A%2F%2Fkhalifahterritory.com%2Fblog%2F%3Fp%3D140&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>Code : Utility Class For Easy Runtime Asset Management If you are building a multilingual application (or any application that&#8230;<\/p>\n","protected":false},"author":1,"featured_media":141,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-140","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-experiment","end"],"_links":{"self":[{"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=140"}],"version-history":[{"count":19,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/140\/revisions\/224"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=\/wp\/v2\/media\/141"}],"wp:attachment":[{"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=140"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=140"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/khalifahterritory.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}