October 12th, 2008
I’ve just come home from Flash(10)Camp and am winding down. I had a lot of fun, saw some coll stuff, and even won Best Audio (with my team) with our app Flash Tones.
I was actually very surprised, there were a lot of well done apps, including others that generated sound but I guess we just had the app polished well enough. Thanks to Rod for that, he gave us the last few bits that really made it look nice. You’ll need Flash Player 10 and a web cam if you want to try it out.
All of the features I saw in Flash Player 10 were ones I’d seen before, except for the sound generation. Things were more in depth and better put together this time, though. The sound generation is nice, but complicated and hard to make it do what you’re expecting. Of course, I’m assuming you know almost nothing about the specifics of sound, like I do.
IK is fun, but I I focused on the other 2 as I didn’t have any IK idea that seemed particularly interesting.
The 3D is very nice, being able to move and rotate objects in all three dimensions opens up a lot of new possibilities. I had a lot of fun creating some simple squares and rotating them, then applying various blend modes and filters. Here are 2 of my favorites:
Those were fun but then someone mentioned webcams. I successfully connected up webcam video to my project and then spent several hours getting the video mapped to each of the rotating squares then getting it all matched up with the video behind it. I then added edge detection (thanks to Luke Walsh’s post), added some more blending and filters and voila!
I was quite proud of that and still think it looks cool. I wish I’d shown it earlier at the Hackathon but then again we won an award so I guess I’m just being greedy.
As an added bonus, here’s an earlier version of Flash Tones which warbled in an interesting way. Try putting your hand up at the very right edge of the screen.
Tags: flash, flash 10, flashcamp, ik, sound
Posted in Uncategorized | No Comments »
May 27th, 2008
This is likely a generic problem with anything that uses a Button but I have found this issue with Tabs in a TabNavigator specifically. When you have a TabNavigator with multiple complicated children that take a while to load, clicking one tab then clicking another quickly can lead to a “shadow” icon at the top-left of the tabs. See the bug for more: SDK-15656
Posted in Uncategorized | No Comments »
May 23rd, 2008
I know what you’re thinking. window.onload and <body onload> already let you run javascript when the page loads. Why do I need something more? The answer is that the standard onload only runs when the entire page and its dependencies are finished loading. This means that if you have multiple images (such as tracking tags) or scripts or a large swf, the onloaded code will only run once all of those pieces load. The point of the following is to run some JavaScript once the page itself has loaded and been parsed. This allows you to do things like set the background color, add additional elements, or start loading other dependencies while the rest of the page’s depdencies are loading. This is particularly useful if you need to do something on a page while a large swf is loading.
The following is a combination of several posts on Dean Edwards’ blog as well as an onload handler for those browsers that don’t support this kind of solution that I found elsewhere. This may not work in Opera, I am not sure. According to the second post Opera supports DOMContentLoaded but I don’t know if this code will catch Opera properly.
function init() {
// quit if this function has already been called
if (arguments.callee.done) return;
// flag this function so we don't do the same thing twice
arguments.callee.done = true;
//CODE TO RUN GOES HERE
}
// for Mozilla browsers
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", init, false);
} else
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
var _timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
init(); // call the onload handler
}
}, 10);
} else
//for those other poor souls
{
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
addLoadEvent(init);
}
// for Internet Explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript:void(0)>< \/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
</script>
Posted in JavaScript | No Comments »
May 1st, 2008
This is another quick informational post about a program that I find very useful. Musorg. When I was on Windows I used Mp3/Tag Studio to edit the ID3 tags in my MP3s. While this program is very useful and free (ad supported) it’s a pain to have to fire it up in Parallels to edit my tags now. Musorg is a free and simple OSX program that just lets you edit your ID3 tags.
Tags: apple, id3, mac, mp3, osx
Posted in Music | No Comments »
March 19th, 2008
I just had to put up a quick blurb about QPitch. It’s the only free software I could find which would do pitch detection for Mac OS X and it works very well (and is fun to play with). Thanks, William Spinelli.
Tags: Music, pitch
Posted in Music | No Comments »
March 17th, 2008
Today I took on the challenge of changing a component I built last year to fit into a new style our creative department just finished for a new website. The previous component had a drawn background and some text laid over it which was a different color. The new style called for the same thing with a different background color and the text cut out of the shape. The different background color was easy, I simply added a few styles (one for rollover too) and had it changing color. The harder part was cutting the text out of the background. I knew that this was possible in graphics programs by inverting the mask used or subtracting the shape from another shape and using that as the mask. I couldn’t find any options in Flex for inverting a mask and a google search provided nothing on inverting a mask. I did, however run into a graphics tricks article on InsideRIA. This reminded me of the blend modes that I’d played with in the San Francisco Papervision3D course.
Curious, I went looking and sure enough there was a BlendMode.INVERT. This didn’t, however, do what I wanted of course. This inverted the color values, not the mask. Looking further I found BlendMode.ERASE. This sounded promising but several iterations had it doing nothing, then showing as normal text, then “erasing” everything underneath it. I didn’t want my text to erase everything, just the shape behind it. After some more playing I found the key. cacheAsBitmap. Of course, cacheAsBitmap on one of the pieces didn’t work. Normal masking, for that matter, required cacheAsBitmap on both the mask and the maskee. The trick to make an inverse mask is to set cacheAsBitmap to true for the container of the things that are being masked.
I’m not sure what the performance implications of this are but the effect sure is nice. :-)
Example (click to invert, view source enabled):
The red horizontal lines are on the bottom level. The text and the green vertical lines are within containingCanvas on top of the red lines. The green lines are beneath the text and masked by the text by default. Click to have it mask the green lines in inverse.
Tags: Flex, graphics, mask
Posted in Flex | No Comments »
February 28th, 2008
Last but not least in this deluge of posts is a little utility I created to allow people to reallocate their resources efficiently in Travian. There is a feature in this game, for those who pay a little money, that allows you to change any type of resource (lumber, clay, iron, crop) into any other type. This is very useful for situations where you are producing way more of one resource than another or simply want to speed up your development but if you reallocate for one thing then want to use the remaining resources for another thing you would need to either calculate the amounts manually or reallocate multiple times (thus costing more “gold”). The resulting app allows you to reallocate your resources for any troop type in the game, allows for configuration of the # of them you wish to train, and lets you add any number of subsequent reallocations with the remaining resources.
Tags: Flex, Games, Travian
Posted in Flex, Games, Travian | 4 Comments »
February 28th, 2008
Let’s keep the ball rolling with another fractal creation. I’ve been playing with Papervision3D lately due to its use in a recent site I worked on and the San Francisco Papervision3D class I attended a few weekends ago. This latest is a verson of the sierpinski gasket which follows the same ideas as the last one I made but using 4 points to make a tetrahedron in 3 space. The same symmetry is applied but 4-fold and the lines are drawn but soon after removed as they quickly overshadow the pixels and slow the rendering down quite a bit once there are more than a few. Also notice that the pixels have some nice effects applied to them, making a kind fo vortex. Thanks to Andy Zupko for the Effects branch of Papervision3D and his part in the class I attended.
Tags: 3d, Flex, Fractal, papervision, sierpinski
Posted in Flex, Fractal, Papervision3D | No Comments »
February 28th, 2008
Ever snce I got my tattoo(s) I have been explaining the fractal known as the dragon to anyone who takes an interest in it. I’ve even named some of my villages in Travian after the turns you take to create some of them. While explaining the fractal yet again I remembered the way that I originally learned to build it: draw the next iteration over the old one. I originally found this fractal at the beginning of each chapter in Jurassic Park. Since it had a regular box shape I used to use graphing paper to draw it, then after time realized that I could turn the paper over and draw the next iteration over the old one using a simple algorithm. Start by drawing a right angle to one side of the first line, then draw a righ angle to the other side of the next line, and repeat. I have programmed this fractal many times before but I had never actually coded up this algorithm before. I also wanted it to animate so as to show the drawing steps. Without further ado:
Tags: dragon, Flex, Fractal
Posted in Flex, Fractal | 1 Comment »
February 28th, 2008
While on the plane back from Indianappolis I had two new ideas for generation of a Sierpinski Gasket: 3-way symmetry and line display. For those that don’t know what a sierpinski gasket is, it is a fractal that starts as an equilateral triangle with another one inscribed inside it. The next iteration adds triangles inscribed in the 3 “edge” triangles. This continues over and over (forever).
This implementation uses a different method of generation. You start at a random corner of the triangle, choose a random corner, move halfway to it, and draw a dot. Continue to randomly choose a corner, move halfway to it, and draw a dot, and you get the same thing as above.
Tags: Flex, Fractal, sierpinski
Posted in Flex, Fractal | 1 Comment »