It looks like Creative Suite CS5 has amended their zoom keystroke bungle they released with CS4. I wrote a post about it here. They changed the default keystroke of zoom to m (and renamed it Magnify) to make room for a third string tool like the Bone tool. Firstly, bone doesn’t even begin with z, so why would it make sense to transpose those? The keystroke for the Zoom tool is z in every Adobe program, so why was an exception made for Flash? I guess there was a public outcry or Adobe checked their user data and found that everyone changing it back to the way it should be.
AddThis Class For Custom Flash Visualizations
One thing I don’t like about the AddThis API is that it doesn’t give you the ability to get all services to make your own custom visualizations. You can only make a bookmark URL one link at a time. If there was some way to get all the services listed you could loop through them in any programming language and make your own organized listing of all the services and attach the link accordingly. Whether that was a just a scroll box or some kind of crazy over-the-top 3D Flash thing it would be possible with such an API. I suggested this idea of a Supported Services Data API on the AddThis forum. You can see the post here.
I have a feature request that I’m sure at least a lot of people in the Flash community would like to have. It would be great if there was a way to access all the service names posted here.
http://www.addthis.com/help/menu-api#service-codes
In addition to the service names, it would be necessary to have access to the service thumbnail image URLs and service descriptions though a data API similar to Twitter’s search API. Basically, the developer would send a request to a URL and the URL would return either XML or JSON or some other standard data language. This would enable Flash developers (and all other web developers) to create data driven custom visualizations for the AddThis bookmark repertoire. Thanks for your support.
The moderator told me that they were working on a Flash API and lead me to believe that this new API would be able to get the supported services. The API did not address anything that I was looking for, it only added OExchange support, whatever that is, but no way of getting the names and codes of the 150+ services that they have available.
It doesn’t seem like they have any plans of making a Supported Services Data API so I hacked out my own. I made a class that goes on to AddThis and screen scrapes the needed information to make visualizations for Flash. This is achieved by loading in 3 files from the AddThis site. Firstly, the class loads the services HTML page and parses all the data from the services table, then it parses a CSS file to get all the y locations of the PNG sprite images and finally it loads the PNG sprite image. With the information provided in this class you would be able to make any kind of visualization you could think of. Here is my simple example of what the class is capable of. You can download the Flex Builder files here.
Here are my disclaimers about this class. It is firstly a hack. These webpages can change at any time and it may cause the class to break. I know that some people might build something with this class and then have the data source be broken, so I included files that absolutely work with this class in the data folder of the Flex Builder example. If worse comes to worse you will always have at least some list of data to pull from.
Secondly, this was done more as a proof-of-concept that perhaps that I could show to AddThis to show what interesting kinds of things could be done with a Supported Services API. It’s not what I would call a production worthy class.
Lastly, and my least favorite caveat is that you need to write server side proxy files to get the data. You have to do this because AddThis does not have a crossdomain.xml so Flash cannot load things from that domain. In the Flex example I wrote some proxy files in PHP. You can see they are very simple, but it still another step and three more files that I would rather not have to make this class work. Also, be aware that you probably need to change the server location in the init function from a dot to your web address where you are hosting the proxy files.
I’m not promising too many updates to this class but any revisions will be here. Once again, here is my simple example and the files.
Posted in ActionScript 3.0, Flash, Work.
OSX Only Allows 8 LocalConnection Instances
While bug hunting I came across this very unusual bug. In a project that I am working on, I am using multiple unique instances of the LocalConnection object to communicate between an AS3 master and an AS2 slave. These LocalConnection instances use a random number to keep them unique, so each time the program is reloaded it makes a new LocalConnection instance. After refreshing the browser exactly 8 times the LocalConnection object stops sending out messages. I remember reading about an 8 connection limit somewhere, but I didn’t connect the dots until right now. These dots suck to connect. The picture comes out to be a big dick in my ass.
Quitting all browsers that used the LocalConnection object fixes the problem, or actually just resets the count back to zero. The bigger problem here is that this RIA I’m working on can contain up to 99 AS2 slave files. That means only 8 will work, and after a page reload, none of them will. This may not be an Apple bug per se; it is probably intentional on Apple’s part for whatever reason. I wish it wasn’t because it means they just effectively destroyed a feature, because there is probably no way around it. I can understand a limitation but that seems to be a really small number. Here is an example of the problem at hand.
Posted in ActionScript 3.0, Flash.
Conflict With XAMPP 1.7.2 and Version Cue
I went to go upgrade my copy of XAMPP today from 0.3 to 1.7.2. Following the instructions on the XAMPP site I removed the old XAMPP from the Applications folder and put in the new one. The instruction was simple enough. The instruction was singular; not even plural. I went to boot Apache and it started fine. MySQL did not do as hot. I got this dialogue when I tried to boot up MySQL. I went through the next necessary diagnostic steps: curse, restart, retry, and curse.
Once the brain started functioning on a higher level than caveman I opened up Activity Monitor to see other processes that were running that might be using MySQL. Using the filter I brought up a mysqld process and a double click revealed the culprit. Version Cue also uses mysqld to manage versions. Version Cue has a start up item so it is always running in the background if you set it up that way. I use Version Cue to version my graphical assets so I leave it on. After turning Version Cue off, XAMPP 1.7.2 started MySQL successfully. Turning Version Cue on broke it again. For some reason XAMPP 0.3 can coexist at the same time, but not XAMPP 1.7.2. I’m not going to speculate as to why, but if you run into this error consider seeing if Version Cue or another mysqld process is running. I sent an email off to the Apache friends (which sounds like an Native American version of the Justice League) to make them aware of this potential bug.
Seeing that I already made some modifications to httpd.conf and httpd-vhosts.conf for virtual hosts and to map directories outside of the htdocs folder to use XAMPP it’s better that I stay back at 0.3 for now anyway. Fortunately, taking the shot at the upgrade didn’t hurt anything and it was really simple to revert as it is just moving folders to and fro.
Posted in Work.
Social Bookmarking Badges
Before I changed my mind about how I was going to deal with social bookmarking for my project I did some old fashioned Photoshop work and created a few badges to use as artwork. This work is based on the template made by jwloh. I merely added some badges. For what it’s worth, here is the archive containing the template and the badges saved as PNG files in 16, 24, 48 and 60 pixels squared.
AddThis Popup Menu in Flash
Continuing on my AddThis journey from last post, I’ve moved away from doing something really custom for the social bookmarking part of this project. My fear as the designer is that a slick functionality is going to take away from the project itself. My fear as the developer is that making something that doesn’t hook up to AddThis’ data will become obsolete and will require updates. So, I decided to do some research on getting the native AddThis popup menus to work with a Flash site. I was kind of leary about it, but I read this post and decided that it might be worth attempting.
Well, it was relatively easy to get something working pretty well. I haven’t tested this on every browser on the planet yet, and I’m sure this kind of overlay functionality is going to cause some problems on some browsers. Right now, this is tested on Safari 4 and Firefox 3. I didn’t even need to use the wmode Flash param for this. The forum said setting this to transparent would help, but I didn’t find it necessary. I’m thinking as a workaround for troubled browsers I will give them a different functionality that opens this page instead of the popup.
Here is the simple demo I put together. Below is a long winded explanation of what is going on here.
Here is the only change to the Flex HTML template. It is the addthis_open function wrapped up in a function. For some flexibility I gave the showAddThis function the ability to exclude from the more list using the AddThis variable addthis_exclude. The excludes are sent as a comma delimited string. The next parameter set is a boolean that decides whether the popup is the email popup or the bookmark popup.
I couldn’t find decent documentation on the addthis_open function, so allow me to break it down for you. The first parameter is an object that the hover menu is attached to. In Flash, the hover menu is not going to be used so I just set that element to the body of the document. The second parameter is the type of popup. In most of the examples on AddThis that second parameter is set to an empty string which gives the hover. Adding more as a string goes straight to the popup. From what I gleaned there are 3 acceptable string values: email, more and feed. I left feed off because it doesn’t make sense for my project. The third one is the url to share. Their default is [URL] as a string, which is equivalent to location.href in JavaScript. Lastly, is the title parameter. Their default is [TITLE] as a string, which is equivalent to document.title in JavaScript.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <script type="text/javascript"> var addthis_exclude; function showAddThis(excludes, isEmail) { addthis_exclude = excludes; addthis_open(document.body, (isEmail ? 'email' : 'more'), '[URL]', '[TITLE]'); } </script>
In Flex, I added this code. It uses ExternalInterface to call the JavaScript code above. In this example I’ve excluded yardbarker and ballhype services because sports are totally gay. Two buttons were added to show email and the bookmark interface. That’s it, AddThis takes care of the rest.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> <mx:Script> <![CDATA[ private function addThis(isEmail:Boolean = false):void { ExternalInterface.call("showAddThis", 'yardbarker, ballhype', isEmail); } ]]> </mx:Script> <mx:Button label="AddThis Bookmark" click="addThis()" /> <mx:Button label="AddThis Email" click="addThis(true)" /> </mx:Application>
For those of you who don’t care about explanations and scroll all the way to the bottom without reading, I’ve attached a simple working demo and the download for the impatient.
Posted in Flex, JavaScript, Work.
AddThis 16×16 Badges For Download
I’m working on social bookmarking integration on a project. By far, the easiest way to do this is to use the AddThis service. It gives all the tracking and metrics information if you want it and it takes of the little differences between how each service bookmarks and homogenizes it down to a simple link that redirects you to the service. Basically, AddThis works as a middle man between a lot of the social bookmarking sites out there. As of this post, AddThis has 54 services that it supports. It also has a good API that allows an AddThis badge to be added quite easily to a HTML page.
Adding it to a Flash RIA is a different story, there is no official support, but there are a few ideas floating around. I wanted to use the AddThis badges that display in the pop up inside my application. I couldn’t find any place where they were publicly available. Also, I couldn’t just web grab them from the page, because they are set as backgrounds in the CSS, not images. I looked around in the source and was able to find the stylesheet. The stylesheet is not written reader friendly, but I was able to find the sprite they use for all the badges.
The direct link to the social bookmark badge on addthis.com is here. For what it’s worth, I cut up the sprite in Photoshop and saved each badge out as a PNG file. A ZIP file of all the badges is here. Each filename corresponds to the services code used by AddThis in the redirect query string discussed in their API. I think this has probably been a wasted day for me, because I am probably going to make some slicker badges and a nicer interface inside my RIA. Hopefully, someone will benefit from this, but I am probably going to go another direction.
Get Outside Inner HTML
Most web developers know about innerHTML. Some will say not to use it, because it is a Microsoft invention. I kind of agree; it is ugly and not very DOM, but it gets shit done on pretty much every browser out there. Which is more than I can say for some of the DOM functions I’ve attempted.
So based on it’s adoption across many browsers innerHTML has earned some street cred. There is also a property out there that is related to innerHTML. It is innerHTML’s retarded cousin. The outerHTML property has the handy ability to get all the innerHTML and the node that is containing it. In IE only. Hence, retarded cousin. I think it is a pretty useful thing, but other browsers don’t support it. I found this solution in a 4 post forum thread and I thought it was a worth a repost. This prototype extends HTMLElement adding custom functionality that works like outerHTML does across the other browsers out there.
HTMLElement.prototype.__defineGetter__("outerHTML", function() { var span = document.createElement("span"); span.appendChild(this.cloneNode(true)); return span.innerHTML; }); HTMLElement.prototype.__defineSetter__("outerHTML", function(html) { var range = document.createRange(); this.innerHTML = html; range.selectNodeContents(this); var frag = range.extractContents(); this.parentNode.insertBefore(frag, this); this.parentNode.removeChild(this); });
Posted in HTML, JavaScript, Work.
Vimeo Player and the Secret API
I am working on a project that is going to have an API that allows the user to insert video. The API is basically an ActionScript class that attaches a property when the user publishes their SWF. When the SWF is loaded into the main SWF program, it has access to the special functions in the SWF file. First, I just used the FLVPlayback and a registry function so the app would have access to it’s functions. That’s fine, but the user has to host an FLV for this to be effective. Not everyone has a server at their disposal, so this is the reason to build on existing video sites. Also, your not shit as a dev guy unless your mashable Web 2.0 savvy.
Fortunately, the popular sites have APIs out there ready and available to get content and media. A developer is expected to know what they have available to them and what will make the job easier for them. Being in the know about Facebook shit is actually a job requirement.
So, first one I thought of was the giant, YouTube. YouTube’s player is AS2 and to use it in an AS3 project you need to wrap it in an AS3 SWF and use LocalConnection to interface with it. There are a few solutions out there but in the end it is a band aid, until YouTube puts together an alternative player API. After fumbling with this, and saving the failing code to my repository for later, I went to Vimeo.
Vimeo has a pretty cool player and the thing that puts it over the top for my app is that it is written in ActionScript 3. But, as with everything, it isn’t perfect. YouTube has a good API page, and some decent forums, and support of the widespread dev community. Vimeo does not. Their API page is nothing short of pathetic, to say the least. They have one example and it doesn’t work. I found a working example on their fourm. At the top of the API page (as of this posting) they have a blurb that says this: You may have noticed that there are some inaccuracies in this documentation. We working on improving it. How about now? In the time it took to put up that asinine message you could of updated the code. That is annoying. Also, there is no public functions to be seen what so ever. Searching on the forums, someone found play, load and unload, which kind of works like stop. I also needed an event at the end of the video. Pretty standard stuff as far as a video API goes. Looks like I am going to have to Sherlock Holmes this shit.
There are some API functions exposed that I found by debugging the player. Use these at your own risk as they are not documented and may change. The way I figure it as soon there is an update to the player changing the functions to the real deal functions is no biggie. For the here and now I need ways to respond to the end of a video, play, pause and stop.
It seems that all the API commands are prefaced with api_ before the function name. Below are a list of functions that seem to be exposed for API usage. I have not tested all of them, but for what it’s worth here is a list. Some need parameters to work and my debugger isn’t specific about the datatype for these. So, here are the method signatures as far as I can tell. The debugger shows the wildcard (*) for datatypes that are not top level, so it could be anything specific to the Vimeo player. Really unknown unknowns are marked with a question mark.
function api_changeColor(?):? function api_changeOutro(one:String, two:*):void function api_disableHDEmbed():void function api_enableHDEmbed():* function api_isLoaded():Boolean function api_isPaused():Boolean function api_isPlaying():Boolean function api_likeClip():void function api_loadVideo(one:int):void function api_pause():* function api_play():* function api_seekTo(?):? function api_setOnFinishCallback(one:String):void function api_setOnPauseCallback(one:String):void function api_setOnProgressCallback(one:String):void function api_setSize(one:int, two:int):void function api_toggleElement(one:String, two:*):* function api_toggleFullscreen():void function api_toggleLoop():void function api_togglePlayPause(one:Boolean):void function api_unload():void function api_unload_other_players():*
For the api_setOn functions, they are callbacks for JavaScript, which means you will need a JavaScript function named the same as the parameter you pass in. Remember to set your HTML page param allowScriptAccess to always as this is coming from the Vimeo site otherwise you will get a SecurityError. I hope when they do get out the official API they will have an ActionScript event to respond to so I don’t have to shoot back and forth between AS and JS to do a simple thing like get the end of a video.
Posted in ActionScript 3.0, Flash, Work.
Before I Knew About Flex Libraries
I wanted to find a way to make my ActionScript library files into a SWC file for easy distribution. There are definitely ways to go about it, but I wanted to find a way that wouldn’t open a Pandora’s box of workarounds, learning curves, and bullshit. So, time for research.
First, I found the rather insane way of going about it by manually writing every single import statement into a document class. In this guy’s defense he is only doing one class and he is making a MXP out of it, so it’s different than what I was looking for.
I’ve heard about ANT tasks, now that I am a Eclipse and Flex user. So, I did some research on this and it seemed closer to what I was looking for. I found one or two places with some stuff to get me started. So I modified this one. After the learning curve blues, I got it to work, minus compiler warnings and a problem with the Vector class not in the Flex 3 SDK. It’s cool that ANT build files are XML so it feels familiar, but it’s a whole world to learn about.
Little did I know there was an answer closer to home. This is exactly what Flex Libraries are for. Built right into Flex. So simple, I should of looked into this first before going into new programming avenues. The one thing I don’t like about the Flex Library is that the SWC file takes the name of the project. There doesn’t seem to be any way to change it, I looked until late into the night for a renaming answer. So advantage ANT task on that. Also the Flex Library makes the SWC a derived file, and that doesn’t sync with my SVN repository. So, for now I am going with the Flex Library until I obtain the strength of an ANT. Here is the ANT task that I put together for what’s it worth.
<!--build.xml --> <project name="AS3Library" basedir="." default="swc"> <!-- load user configuration properties --> <property file="build.properties" /> <taskdef resource="flexTasks.tasks" classpath="${FLEX_HOME}/ant/lib/flexTasks.jar" /> <!-- create swc file base on config --> <target name="swc"> <fileset id="sources" dir="${basedir}${input}"> <include name="**/*.as"/> </fileset> <pathconvert property="classes" pathsep=" " refid="sources"> <chainedmapper> <globmapper from="${basedir}${input}/*" to="*"/> <mapper type="package" from="*.as" to="*"/> </chainedmapper> </pathconvert> <echo message="compiling classes ${classes}"/> <compc output="${output}/${swc}.swc" include-classes="${classes}"> <source-path path-element="${basedir}${input}"/> </compc> </target> </project>
#build.properties # location of flex sdk FLEX_HOME = /Applications/Adobe Flex Builder 3 Plug-in/sdks/3.2.0 # input location, can be blank of single dir with leading slash input = # output folder, doesn't need slash output = . # name of the swc exported swc = as3library
Posted in ActionScript 3.0, Eclipse, Flex, Work.