http://codeblog.studiokoi.com/share/code/index/ en info@studiokoi.com Copyright 2008 2008-08-26T01:35:01-05:00 http://codeblog.studiokoi.com/share/site/making_anonymous_functions_and_closures_work_in_actionscript_20/ http://codeblog.studiokoi.com/share/site/making_anonymous_functions_and_closures_work_in_actionscript_20/#When:01:35:01Z One of the most powerful idioms available in JavaScript is the anonymous function closure: e.g. (function(){})();. If you are unfamiliar with this, it simply creates an anonymous scope bubble that can be used to prevent automatic global variables, or trick JavaScript into allowing private variables. Unfortunately, this idiom isnt available in ActionScript 2.0. It simply doesnt work. (As of ActionScript 3.0, it works perfectly.) This means that, on the surface, the only way to prevent time line variables from being constantly created is an init function of sorts. (ActionScript 2.0 has a pseudo global object which is the main time line of a movie level, and a totally global object named _global.) This also means that private variables are restricted to the creation of object classes. I personally get annoyed at times with classes in ActionScript. One of the things that has always bugged me with ActionScript 2.0 and the introduction of classes is that they are hard to make portable. (I work on no less than 3 computers in a single week, and 4-5 when on business trips, so portability is paramount to my work.) Rather than being able to simply include the classes in the same folder as the flash working file (*.fla), you must specify where on the computer the includes are. This is just annoying if you work on the file on several different computers. There are a couple of ways to avoid naming the class include folder on each computer, but they are as much of a pain as the default method. Fortunately, there is a solution. To reiterate, while this works in JavaScript and ActionScript 3.0, it will not in ActionScript 2.0: (function(){ //statements})(); var myFunc = (function(){ var hiddenVar = "hidden"; return function() { return hiddenVar; }})();hiddenVar //undefinedmyFunc.hiddenVar; //undefinedmyFunc(); //returns "hidden" The good news about ActionScript 2.0 is that it retains the ability to pass anonymous functions as variables to another function. Like so: var myArray = [5,1,6,23,15];var sortedArray = myArray.sort(function(a, b){ return a - b;});trace(sortedArray); //returns [1, 5, 6, 15, 23] Knowing this, we can emulate anonymous function closures in ActionScipt 2.0. First we will create a global function that returns the function passed to it. _global.closure = function(f){ return f;} To use it, you treat it the same as you would the parenteses in the javascript idiom: closure(function(){ //statements})(); Changing the name to something shorter will make this more practical and the code a little cleaner. _global.$ = function(f){ return f;} $(function(){ //statements})(); Given this new ability, we can now apply anonymous closures to our script without littering the time line object with useless variables. Lets use a hypothetical situation to illustrate how we might use the anonymous closure. In this script, we want to make 5 buttons that each need to trace their respective number when you click them. We could code each button individually, but that is messy and doesn't promote good code reuse. Instead, lets make a loop that makes all the buttons work, in addition to making it easier to add more buttons. for (var i = 1; i <= 5; i++){ //for each button this["click" + i + "_btn"].onPress = $(function(n){ //return a function that has access to n via // a closure return function() { //trace the number passed to the parent closure trace(n); } })(i); //pass in current loop iteration for caching} Now when you press click3_btn, it will trace '3' and click5_btn, '5'. In this way, we avoid creating useless variables inside each button, and we didn't have to create a singular use function. Earlier I mentioned my slight distaste for how classes were implemented in ActionScript 2.0. Let me first caveat this statement by saying they are extremely useful and are wonderful for individuals or teams that have good version networks and servers. Just for myself and the smaller applications I write, I prefer portable objects. Lets see how we would write a singleton object with private variables and functions: var bob = $(function (){ //--------------------------- //private variables var secret = "you found me"; //--------------------------- //private functions function compare(a, b) { return a > b; } //--------------------------- //constructor var Bob = { //--------------------------- //public members/variables works :true, getSecret :function() { return secret; }, getCompare :function(a, b) { return compare(a, b); } }; //--------------------------- //return object return Bob;})();//testtrace(typeof bob) //returns objecttrace(bob.works); //returns truetrace(bob.getSecret()); //returns the string: you found metrace(bob.secret); //returns undefinedtrace(bob.getCompare(1, 2)); //returns falsetrace(bob.compare(1, 2)); //returns undefined function As you can see with the tests, we have a singleton object with private functions and variables as well as public methods and members. With a little work, using the prototypal inheritance method, we can make this a reusable pseudo class: var Bob = $(function (){ //--------------------------- //private variables var secret = "you found me"; //--------------------------- //private functions function compare(a, b) { return a > b; } //--------------------------- //constructor var Bob = function () { //--------------------------- //public members/variables this.works = true; }; //--------------------------- //public methods Bob.prototype.getSecret = function() { return secret; }; Bob.prototype.getCompare = function(a, b) { return compare(a, b); }; //--------------------------- //return constructor return Bob;})();//invokevar mybob = new Bob();//testtrace(typeof Bob); //returns functiontrace(typeof mybob); //returns object trace(mybob.works); //returns truetrace(mybob.getSecret()); //returns the string: you found metrace(mybob.secret); //returns undefinedtrace(mybob.getCompare(1, 2)); //returns falsetrace(mybob.compare(1, 2)); //returns undefined So, with a single global function, we can bring the magic of anonymous function closures to ActionScript 2.0. Enjoy! Flash-ActionScript 2008-08-26T01:35:01-05:00 http://codeblog.studiokoi.com/share/site/parsing_a_nested_or_name_spaced_object_from_a_string_in_ecmascript/ http://codeblog.studiokoi.com/share/site/parsing_a_nested_or_name_spaced_object_from_a_string_in_ecmascript/#When:01:37:00Z Often times when I am making dynamic scripts in Flash or JavaScript, I want to call an object method using a string. It may be a situation where I am stuck using fscommand (due to a customer request of a Flash version <8) or just writing script with script. The problem that comes with this method is the advent of ActionScript 3 with Flash CS3/Flex 2 and the rising use in namespaces by JavaScript developers (myself included). Both encour a heavy usage of object methods instead of one-off functions. Dynamically calling singleton functions is easy, you can just use subscript notation, e.g. object[’member/method’]. What you can’t do with this method is pass it any dot syntax and expect it to work e.g. object[’subobject.method’]. The subscript notation is only meant to work one level. So the previous example won’t work. In order to fix this issue and to make sending object methods/members in a single string a little easier, I wrote a function that takes a string and a base object (the default is the window object if no object reference is passed) and returns the method/member. (I know at this point that some will simply direct me to ECMAScript’s built in eval() function, but I personally avoid using it at all costs as it can have unintended, and unsecure results. I’ll let Stephen Chapmen tell you because this article is about something else.) The function is executed somewhat simply by splitting the string at the dots and adding them as subscripts to one another in order. However, there are some other pieces to it that make it a little more friendly to mistakes and general usage. function parseNameSpace(s , o){ //default to window if no object sent var w = o || window, a; //reutrn if parsing not necessary or not a method if ( s.indexOf('.') == -1 ) { return (typeof w[s] === "undefined") ? false : w[s] ; } //make array for looping through a = s.split('.'); //run though members / methods for (var i = 0,l = a.length; i < l; i++) { w = w[a[i]]; } //return object if it is valid, or return false return (typeof w === "undefined") ? false : w ;} The function takes two variables, first the string that you want to parse to an object member, and the second optional base object. The first variable w looks for the object “o” and if not found, defaults to “window” which is the default parent object of browser based JavaScript. (You could change it to “this” and it would work in ActionScript as well). Second, we check to see if the passed string has any dots in it. If not, we check to see if it is a regular function. This way you could use this function as a catch all even if you aren’t always passing nested functions. If it isnt a member of the window object, false is returned. If it does have dots, we split them into an array, and loop through it, making each a member of the previous using the subscript notation. Finally we check to see if the result is valid, and we return false if it isn’t, or a reference to the object itself. Let’s take a look at a simple way to use it. Lets say we have an object literal with a subobject, and a method inside that. var obj = { innerObj: { func: function(){ return "worked"; } }} Then we retrieve it via string with the function. var objFunc = parseNameSpace("obj.innerObj.func");alert(objFunc()); //shows "worked" This should work most places as long as you are mindful of function scope. Enjoy! JavaScript 2008-01-10T01:37:00-05:00 http://codeblog.studiokoi.com/share/site/create_right_click_menus_to_test_air_files_win_mac/ http://codeblog.studiokoi.com/share/site/create_right_click_menus_to_test_air_files_win_mac/#When:05:18:02Z At the beginning of this year, when I first heard about A.I.R. I was excited to learn more about it and see what I could do with it. What really jumpstarted my interest was a trip to Cincinnati, OH to the Adobe onAIR Bus Tour. At this point I am full steam excited about working with AIR. I work on a Windows machine at work and Mac at home, so I am also excited to see cross platform development. One thing that is a little wonky about AIR is the way that you test your applications. Since AIR is built with an SDK instead of a builder application, such as Flash, you have you use the terminal to launch the SDK. So I came up with methods for OS X and Windows XP to use right-click contextual menus to test AIR applications. I will first note that you can use Aptana, Flex 3, Flash CS3, and Dreamweaver CS3 to test your AIR apps, but i thought i would make something for the hardcore coders. Though, I personally use all the aforementioned for AIR. I will assume you have already installed the SDK on either system. Windows XP: [skip to mac version] In Windows XP, you can customize your right-click menus for any filetype with the 'folder options' panel. First, navigate to control panel, then folder options. Navigate to XML (It will be close to the bottom.). If the button says 'Restore' where you expect it to say 'Advanced', it is because you have changed the Windows default opening program for the xml file type. Click 'Restore' first then you can click 'Advanced'. (When you are finished, you can change the opening program back when you are finished, the menu will still stick.) Next, click the 'edit' button and we will create a new contextual command. You will need the full path of the location of your AIR SDK. For this example, I will use mine: C:Program FilesAdobeAIR SDKbinadl.exe This will application field in quotes, followed by "%1". This will notate that you are opening the file right-clicked with this program. (This works on most other windows programs as well.) Then give it a name you can remember. This is how it will show up in the contextual menu. Just replace my AIR bin location with yours. "C:Program FilesAdobeAIR SDKbinadl.exe" "%1" Now click OK and you should see your command in the window: Now you can right-click your AIR application.xml and test them right from the Windows file explorer: The CMD prompt will open, then your air file should open. The CMD prompt will be your error output window.   OS X: The Mac version will be somewhat similar, but we will use Automator to do the function. This means you will need at least OS X 10.4 for this tutorial. Open Automator, and go to 'Finder' in the Library menu, under Applications. Drag 'Get Selected Finder Items' to the work space. Next, go to 'Automator' in the Library menu, and drag 'Run AppleScript' to the work space under 'Get Selected Finder Items'. For the Applescript, I had a little help from Mac OS X Hints. You will need the directory for your Adobe AIR SDK. Mine is: /Applications/Adobe AIR SDK/bin/adl For this one, I will give the code to you. Paste this into the Applescript window and replace my AIR Adl location with yours:  on run {input, parameters} tell application "Terminal" activate if (the (count of the window) = 0) or ¬ (the busy of window 1 = true) then tell application "System Events" keystroke "n" using command down end tell end if do script "'/Applications/Adobe AIR SDK/bin/adl' "" & (POSIX path of ¬ (input as string)) & """ in window 1 end tell return inputend run  Next, we will save this as a Plug-in. Under the File menu, select 'Save As Plug-in..'. Then select finder as the application and give it a name you can remember: Now you can just right-click your AIR application.xml, hover over Automater, and choose your new workflow to preview AIR projects! Enjoy! AIR 2007-08-22T05:18:02-05:00 http://codeblog.studiokoi.com/share/site/expression_engine_16_preview_and_rick_ellis_birthday_contest/ http://codeblog.studiokoi.com/share/site/expression_engine_16_preview_and_rick_ellis_birthday_contest/#When:04:14:00Z So Expression Engine is previewing version 1.6 (filled with LOADS of new features) and it is also EE CEO Rick Ellis' Birthday. To celebrate this and some new software, they are having a photoshop contest that ends noon Tuesday June 19th, 2007. Check out the forums here for the other submissions. Here is the original blog post. Without further adieu here are my entries. View Larger View Larger View Larger View Larger ExpressionEngine 2007-06-19T04:14:00-05:00 http://codeblog.studiokoi.com/share/site/import_classes_and_multiple_actionscript_layers_in_flash/ http://codeblog.studiokoi.com/share/site/import_classes_and_multiple_actionscript_layers_in_flash/#When:02:11:00Z At work I am making a new Flash interface for a project, and my goal this time around was to make as many global functions out of repetitive ones as possible so we could save development time. As I began writing and testing Prototype class extensions and global functions, I noticed something I had not run into before with flash. If Import classes on one ActionScript layer, and call it on another Actions layer, or even the next frame, it produces an ActionScript error. Normally, I put all actions and functions on one layer and have no keyframes unless they are inside other MovieClips, or I need to animate something to audio cues. With this current project, there was going to be so much ActionScript, I decided to do more than one Actions layer so I could keep everything straight. Never having a reason to do this until now, I was not prepared for some of the problems I ran into. First and foremost being that: If import a class on one Actions layer, and I create a new class object from that group on another layer, I get a syntax error. Here is a quick example. I have a MovieClip named “box1” and I am going to tween it with the Tween class. normally I would just put it all on the same layer like this: import mx.transitions.Tween;import mx.transitions.easing.*;var boxTween:Tween = new Tween(box1, "_x", Regular.easeOut, box1._x, box1._x+300, 1, true); This works perfectly and makes the box move across the screen on load. When I ran into the error was when I decided that I wanted all imports on one actions layer and the object on another. Like so: I expected it to work just the same, as I have My publish settings set to ActionScript 2.0, top down, and Flash 8. Instead, I was presented with a nice error. The problem is replicated also by putting the new Tween object in the following frame. Effectively, any frame that ISN’T the one I imported the class into. This strikes me as totally odd, as functions endure over frames and from layer to layer. I also tested this with other import classes besides the Tween class. I had the same issues with the Alert class and BitmapData class. For now, the simple solution I came up with was making a function in the same frame/layer as the import classes that I would simply call elsewhere when I needed the tween to happen. This of course makes no sense to me at all, but it works perfectly. import mx.transitions.Tween;import mx.transitions.easing.*;function tweenIt() { var boxTween:Tween = new Tween(box1, "_x", Regular.easeOut, box1._x, box1._x+300, 1, true);} Calling this function in other frames and layers has worked so far, and has more than solved my problem. If you are using multiple tweens, or classes, you could use passthrough variables to be able to make the function usable in other situations. import mx.transitions.Tween;import mx.transitions.easing.*;function tweenIt(mc:MovieClip):Void { mc.boxTween = new Tween(mc, "_x", Regular.easeOut, mc._x, mc._x+300, 1, true);}tweenIt(box1) If I found out any more info as to why this is a problem, I will post it here. If anyone else has some insight, please leave me a comment. Flash-ActionScript 2007-05-24T02:11:00-05:00 http://codeblog.studiokoi.com/share/site/dreamweaver_mass_find_replace_extension/ http://codeblog.studiokoi.com/share/site/dreamweaver_mass_find_replace_extension/#When:03:46:00Z At work I work with a lot of local files, and repetitive file groups. Meaning, I might have 30 folders all with the same CSS file or JavaScript file. The trouble I run into with using a lot of the same files is changing them, then having to copy/paste the file a gillion times. It gets really old. (To answer your immediate question as to why I don't just use one file outside of all the folders; I have to send each folder as a separate package to the client because the server they go on handles them as single entities. This however is beside the point of today's post, because you can use this in many situations.) I work on a corporate network, so i can only install approved programs on my work computer. This keeps me from using my preferred win32 text editor. However, since I work with Flash a lot, I also have DreamWeaver, which is an acceptable text editor in a pinch (as long as you never EVER use the WYSIWYG window). After using DreamWeaver a while, I've found that it does have a few very useful features. For instance, DreamWeaver has a lot of functions built into the api that can access the file system. These can be utilized within extensions; which brings me to today's goodie. The DreamWeaver Mass Find Replace extension. I built this because of all the time I was wasting every time I needed to make changes to a file that was used multiple times. The nice part about DreamWeaver's access to the file system, is that it isn't restricted to just DreamWeaver file associations, so you can use this to replace any type of writable file. I use it for Swfs all the time. Here is an example of how it works: Open the extension and choose a master file (meaning, the file you want to replace all similarly named files with) Choose the folder (and all sub folders) where you want to Find all files with the same name as the file you chose, and Replace them all with the chosen file. Click OK. That's it. You're done! This is a very simple, but powerful tool, so be careful using it. It overwrites all files with the same name as the replace file without warning. Extensions 2007-05-21T03:46:00-05:00 http://codeblog.studiokoi.com/share/site/moving_away_from_the_root/ http://codeblog.studiokoi.com/share/site/moving_away_from_the_root/#When:06:08:01Z When working with multiple, nested MovieClips, or dynamic variables, sometimes you need your ActionScript to refer out to other MovieClips, or the main timeline of the swf file. When I was first teaching myself ActionScript, I learned to use _root to reference outside of functions or MovieClips. It is this point in my learning that see how wrong I was to rely on _root for every outside-the-MovieClip function. First lets look at how _root is wrongly commonly used: button1_btn.onPress = function(){ _root.variableValue = 55 _root["myDynamicVariable"+1]._visible = false} Let's assume that this button code is on the main timeline. First of all, if 'variableValue' is on the maine timeline, and so is this button function, then you do not need to reference _root. When you call a function or variable inside of a function, Flash assumes already that you are referring to the timeline the parent function is in. However, the dynamic variable on the second line poses a different problem. Most of the time, if you were going to do a dynamic variable without using _root, you would simply use 'this'. Like so: this["myDynamicVariable"+1]._visible = false Using 'this' should be treated with as much caution as _root. Whenever you say 'this' you mean the entity you are currently in. So, if you are writing a regular function, 'this' refers to the main timeline, because the function is in the main timeline. This principle is implicit. To illustrate, lets use the previous button example coded on the timeline and replace _root with 'this': button1_btn.onPress = function(){ this.variableValue = 55 this["myDynamicVariable"+1]._visible = false} First things first, this doesn't work (and this is what turns people to using _root). What confuses many people is why this works on the main timeline, inside regular functions, but not in this instance. When you write a button function like this, you are making a references to an event, onPress , given by the object button1_btn. So 'this' refers to button1_btn and not the main timeline. To clarify, using 'this' inside of a timeline written button function refers to the button, calling a variable or function works as it would inside a normal function. In many places where you might use _root, you can also use _parent, which is one MovieClip out of where you are (_parent is stackable to go out as many times as you need). For the button code, by itself, it still wont work. button1_btn.onPress = function(){ _parent["myDynamicVariable"+1]._visible = false} This function would refer to the parent of the timeline the function is in. Because as we just learned, if 'this' isn't referred, the button function is treated as a normal timeline function. So to get the function to work without using _root, we need to combine the two. button1_btn.onPress = function(){ this._parent["myDynamicVariable"+1]._visible = false} This works because 'this' refers to button1_btn, therefore _parent refers to button1_btn's parent, the timeline this function is in. Now for the advanced solution. Using this._parent could get a little redundant after a while, and would cease to work if you moved the function to a different MovieClip. The best solution i have found is to make a variable that is data-typed as a MovieClip and refer it to the timeline you are wanting to reference. var home:MovieClip = this What this says is that anytime you call home you will be referring to the timeline. (You can also refer to other timelines by replacing 'this' with _parent, MovieClip or MovieClip.ChildClip). Let's see how it would work:  var home:MovieClip = thisbutton1_btn.onPress = function(){ home["myDynamicVariable"+1]._visible = false} So now you have no excuse what-so-ever to use _root unless you really REALLY mean it! Flash-ActionScript 2007-05-07T06:08:01-05:00 http://codeblog.studiokoi.com/share/site/batch_publish_flash_plug_in/ http://codeblog.studiokoi.com/share/site/batch_publish_flash_plug_in/#When:20:39:01Z Lately I have been working on a project that has a lot of flash files that use external ActionScript files for similar functions. It helps that they have many of the functions external because you can make mass changes with one file. For those not in the know, here is how you include an external ActionScript file: #include "filepath/actionscript.as" The downside of using external AS and changing it is that you have to publish every file that includes that script file. This gets to be a little tedious when doing it file by file, so I made a flash extension that will publish all files in a folder. To use the extension, install the mxp, then restart flash. Under the commands menu, there will be a command called “BatchPublish”. Run it, then select the folder that contains your flash files that need to be published. This version does not publish files in sub-folders, but I am working on that for the next version, which will also include a GUI. Update 5-16-07: I made version 2 finally. Now it has a GUI and some better options for output. You can publish all FLAs in a directory (and all subdirectories within) to the folder of choice. Force Swf only, and save and compact on close. Extensions 2007-04-26T20:39:01-05:00 http://codeblog.studiokoi.com/share/site/playing_flash_flvs_without_the_flash_player/ http://codeblog.studiokoi.com/share/site/playing_flash_flvs_without_the_flash_player/#When:22:12:01Z Due to the rise in internet video, and the need for it to be easily played on different operatiing systems and browers, Flash FLVs have taken off in the last two years. In light of this phenomenon, I find myself more and more downloading FLV videos for later viewng. The most common places you will see FLV video for the masses is of course YouTube and Google Video, but many more sites are catching on. Flash has 98% browser penetration, and works on Mac, PC, and Linux, so it is a no brainer. So what do you do with all those downloaded FLVs? You could open Flash and make a quick SWF file to play it, but that would be annoying and wouldn't work at all for people without Flash Professional installed. The direct problem with FLVs is that they dont play in Windows Media Player or Linux's Totem player. If you are on a Mac, you can install Perian and Quicktime will play the FLVs You could convert them to normal video files with some free video conversion programs such as Media Coder for Windows or FFMpegX for Mac. You could also use a free online converter such as Media Convert. However, all that could add up to time wasted. The solution I found to be the most pleasing and easy was to download the free VLC Media Player for Windows/Mac/Linux/Unix. VLC plays FLV files natively and vry clearly. The controlls are quite plain but intuitive, and it supports playlists for viewing multiple FLVs. Best of all, it also plays pretty much any other file format thrown at it. I have used it as my primary video player on Mac and PC for 2 years and have been very satisfied. I don't even open Windows Media Player anymore. VLC plays all Windows Media files out of the box. Plus, if you are on a heavily regulated network at work, or do not have install privelages, there is a no-install thumbdrive version of VLC with all the same capabilities as the full install version! Flash-ActionScript 2007-04-22T22:12:01-05:00 http://codeblog.studiokoi.com/share/site/disable_click_through_on_movieclips_in_flash/ http://codeblog.studiokoi.com/share/site/disable_click_through_on_movieclips_in_flash/#When:06:48:00Z At work we use a lot of fake pop-ups in Flash to show information. Everything generally works very well, until we discovered that you can click buttons in flash that are underneath a movieclip or a graphic. The first solution was to hard code disabling of MovieClips/buttons like so: button1_btn.onPress = function(){ popUp_mc._visible = true; button1._btn.enabled = false; button2._btn.enabled = false;} popUpClose_btn.onPress = function(){ popUp_mc._visible = false; button1._btn.enabled = true; button2._btn.enabled = true;} As you can see, this is VERY messy and impractical, as every time you add another button, you have to edit the code for the pop-up buttons to enable/disable it when shown. One thing we did know up front is that if you put two buttons on top of one another, the one with the highest depth will over take the one below it. Therefore only the top one get's clicked. (The same is not true for rollovers, both items recieve a rollover event, but not click.) So, we tried using a giant button below the background of the fake pop-up movieclip. It worked in the fact that we could not click buttons below the MovieClip. What was not cool was the hand cursor that showed up over the entire MovieClip because we had a button in the background. Fortunatly, we discovered a built in ActionScript function that disables the hand cursor: hiddenButton_btn.useHandCursor = false; It solved our problem completely! Now we could have pop-ups and not be able to click buttons underneath them while they were open. Here is an example file. Flash-ActionScript 2007-04-22T06:48:00-05:00