boostworthyisryantaylor

Archive for February, 2007

AS3 Virtual Timeline Animation System :: v1.0

February 27th, 2007 | Category: Dirty South, Code

[Update: June 2, 2007]
Version 2.0 is now live.
[/Update]

Earlier on, I introduced a virtual timeline animation system for AS2 that simplified the process of creating a sequence of animations with code. The system has proven to be quite useful, so I figured it was time to get the thing ported over to AS3. The concept is pretty simple; create a timeline, create tweens, add the tweens to the timeline, and then use basic controls such as Play, PlayReverse, Stop, NextFrame, and PrevFrame to control the timeline. Enough talk; it's time for a demonstration.

In the example below, click and hold to play the animation forwards, and then release the mouse button to watch the animation play in reverse.


Creating this animation with the manager paradox would require a lot more effort. Below is some code straight out of the example file that created the animation above.

ActionScript:
  1. // Constructor
  2. //
  3. // Init this object.
  4. public function VTASTestApp()
  5. {
  6.     // Create a new timeline object.
  7.     // The parameter '60' is the frames per second you would like the timeline
  8.     // to play at. '60' also happens to be the default value if nothing is passed,
  9.     // but I wanted to pass it as an example.
  10.     m_objTimeline = new Timeline(60);
  11.    
  12.     // Create a series of tween objects.
  13.     // When they are added to a timeline, they are cloned and then added, so you can
  14.     // create these seperately and add them to multiple timeline objects if you wanted to.
  15.     var objTween_1:Tween  = new Tween(m_mcBox, "x",         400, 1,   60,  Transitions.SINE_IN_AND_OUT);
  16.     var objTween_2:Tween  = new Tween(m_mcBox, "y",         140, 40,  80,  Transitions.SINE_IN_AND_OUT);
  17.     var objTween_3:Tween  = new Tween(m_mcBox, "rotation", -180, 40,  80,  Transitions.SINE_IN_AND_OUT);
  18.     var objTween_4:Tween  = new Tween(m_mcBox, "x",         60,  61,  120, Transitions.SINE_IN_AND_OUT);
  19.     var objTween_5:Tween  = new Tween(m_mcBox, "y",         90,  100, 140, Transitions.SINE_IN_AND_OUT);
  20.     var objTween_6:Tween  = new Tween(m_mcBox, "rotation",  0,   100, 140, Transitions.SINE_IN_AND_OUT);
  21.     var objTween_7:Tween  = new Tween(m_mcBox, "x",         400, 121, 180, Transitions.SINE_IN_AND_OUT);
  22.     var objTween_8:Tween  = new Tween(m_mcBox, "y",         350, 160, 220, Transitions.SINE_IN_AND_OUT);
  23.     var objTween_9:Tween  = new Tween(m_mcBox, "rotation",  90,  150, 190, Transitions.SINE_IN_AND_OUT);
  24.     var objTween_10:Tween = new Tween(m_mcBox, "rotation",  180, 191, 230, Transitions.SINE_IN_AND_OUT);
  25.     var objTween_11:Tween = new Tween(m_mcBox, "x",         60,  191, 270, Transitions.SINE_IN_AND_OUT);
  26.     var objTween_12:Tween = new Tween(m_mcBox, "scaleX",    0.5, 191, 230, Transitions.SINE_IN_AND_OUT);
  27.     var objTween_13:Tween = new Tween(m_mcBox, "scaleY",    0.5, 191, 230, Transitions.SINE_IN_AND_OUT);
  28.     var objTween_14:Tween = new Tween(m_mcBox, "scaleX",    1,   231, 270, Transitions.SINE_IN_AND_OUT);
  29.     var objTween_15:Tween = new Tween(m_mcBox, "scaleY",    1,   231, 270, Transitions.SINE_IN_AND_OUT);
  30.    
  31.     // Add each tween to the timeline object.
  32.     m_objTimeline.AddTween(objTween_1);
  33.     m_objTimeline.AddTween(objTween_2);
  34.     m_objTimeline.AddTween(objTween_3);
  35.     m_objTimeline.AddTween(objTween_4);
  36.     m_objTimeline.AddTween(objTween_5);
  37.     m_objTimeline.AddTween(objTween_6);
  38.     m_objTimeline.AddTween(objTween_7);
  39.     m_objTimeline.AddTween(objTween_8);
  40.     m_objTimeline.AddTween(objTween_9);
  41.     m_objTimeline.AddTween(objTween_10);
  42.     m_objTimeline.AddTween(objTween_11);
  43.     m_objTimeline.AddTween(objTween_12);
  44.     m_objTimeline.AddTween(objTween_13);
  45.     m_objTimeline.AddTween(objTween_14);
  46.     m_objTimeline.AddTween(objTween_15);
  47.    
  48.     // Add event listeners to the stage for the mouse down and up events.
  49.     stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);
  50.     stage.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp);
  51. }
  52.  
  53. // OnMouseDown
  54. //
  55. // Called when the mouse is down.
  56. protected function OnMouseDown(objEvent:MouseEvent):void
  57. {
  58.     // Play the timeline forwards.
  59.     m_objTimeline.Play();
  60. }
  61.  
  62. // OnMouseUp
  63. //
  64. // Called when the mouse is up.
  65. protected function OnMouseUp(objEvent:MouseEvent):void
  66. {
  67.     // Play the timeline in reverse.
  68.     m_objTimeline.PlayReverse();
  69. }

As you can see, the system is very intuitive. By listing out each tween and lining up the values in each column, you are essentially creating a dope sheet for the animation you are envisioning.

I was hoping to fix the bugs in the AS2 system before porting over to AS3, however I got anxious and wanted to put this out there for all of you to play with. A majority of the tweakiness occurs when looping is enabled, but I've been able to create some pretty cool stuff with no problems at all. Between this system and the manager system, you should have all the tools you need to create some pretty awesome animations with minimal effort.

So give it a try and let me know what you think. I'm probably aware of most of the bugs that exist, but feel free to post those as well. Enjoy!

Download 'boostworthy_animation_AS3.zip'

2 comments

AS2: Document Class

February 19th, 2007 | Category: Dirty South, Code

In talking with people about the AS3 document class feature, it seems that many are unaware that more elegant entry point solutions exist than simply passing the document scope to a static method of the main application class in AS2. Though this approach works just fine, there are better ways to accomplish this. I am certainly not the first to blog about such a topic, however I thought I would share my favorite approach with all of you.

First off, I have a document utility class titled 'DocumentUtil'; inside of which I have a static method named 'RegisterClass'. This is where the link is made between the document and the main application class (thus creating a document class of sorts). Have a look:

ActionScript:
  1. // RegisterClass
  2. //
  3. // Registers the passed document and class together, thus creating a document class.
  4. // The document class constructor is invoked upon this method being called.
  5. public static function RegisterClass(mcDocument:MovieClip, objClass:Object):Void
  6. {
  7.     // Set the prototype reference to the document classes constructor
  8.     // prototype property.
  9.     mcDocument.__proto__ = Function(objClass).prototype;
  10.        
  11.     // Invoke the document class' constructor within the scope of the document.
  12.     Function(objClass).apply(mcDocument, null);
  13. }

Now, on the first frame of the root timeline you do the following to initialize the application:

ActionScript:
  1. // Import the document utility class.
  2. import com.boostworthy.utils.DocumentUtil;
  3.  
  4. // Import the class in which you wish to register as the document class.
  5. import BallerApp;
  6.  
  7. // Register this document with the specified class.
  8. DocumentUtil.RegisterClass(this, BallerApp);

And that is it. The constructor of the class will get called immediately and the scope within the class will be that of the document. Not quite as charming as the AS3 document class, however it will certainly do.

2 comments

Updates @ Jayson Whitmore

February 16th, 2007 | Category: Dirty South

Fellow Full Sail grad Jayson Whitmore has updated his site with a new spring 07 demo reel. He's done some amazing work in the past year, especially the notorious iPod Nano commercial.

2 comments

AS3: Cellular Automata Generator

February 15th, 2007 | Category: Dirty South, Code

A cellular automata using Wolfram ruleset 30.

With the greatly increased performance of Flash 9, it is fun to experiment in ways that previous versions of Flash didn't so much allow. The generation of cellular automata is of particular interest to me. What intrigues me about these systems is the fact that complexity very similar to that seen all throughout nature is generated using simple rulesets. As you can see in the image above, the pattern appears to be quite random, however the rules are well-defined.

Below is the application I wrote to generate that imagery. You can change the ruleset constant to experiment and discover other interesting patterns that emerge.

ActionScript:
  1. // =========================================================================================
  2. // Class: CAGenerator
  3. //
  4. // Ryan Taylor
  5. // February 15, 2007
  6. // http://www.boostworthy.com
  7. // =========================================================================================
  8. //
  9. // +          +          +          +          +          +          +          +          +
  10. //
  11. // =========================================================================================
  12.  
  13. // PACKAGE /////////////////////////////////////////////////////////////////////////////////
  14.  
  15. package
  16. {
  17.     // IMPORTS /////////////////////////////////////////////////////////////////////////////
  18.    
  19.     import flash.display.Sprite;
  20.     import flash.utils.Timer;
  21.     import flash.events.TimerEvent;
  22.     import flash.display.BitmapData;
  23.     import flash.display.Bitmap;
  24.    
  25.     // CLASS ///////////////////////////////////////////////////////////////////////////////
  26.    
  27.     public class CAGenerator extends Sprite
  28.     {
  29.         // =================================================================================
  30.         // CLASS DECLARATIONS
  31.         // =================================================================================
  32.        
  33.         // CONSTANTS ///////////////////////////////////////////////////////////////////////
  34.        
  35.         // The Wolfram ruleset to use for the cellular automata.
  36.         private static const RULESET:Number     = 30;
  37.        
  38.         // A random seed value for generating the initial condition.
  39.         private static const RANDOM_SEED:Number = 0.23;
  40.        
  41.         // MEMBERS /////////////////////////////////////////////////////////////////////////
  42.        
  43.         // The bitmap data object for storing pixel data to be drawn to a bitmap
  44.         // and added to the display.
  45.         protected var m_objBitmap:BitmapData;
  46.        
  47.         // Stores the current row of generation.
  48.         protected var m_uRow:uint;
  49.        
  50.         // =================================================================================
  51.         // EVENT FUNCTIONS
  52.         // =================================================================================
  53.        
  54.         // Constructor
  55.         //
  56.         // Init this object.
  57.         public function CAGenerator()
  58.         {
  59.             // Create a new bitmap data object and set it to the size of the stage.
  60.             m_objBitmap = new BitmapData(stage.stageWidth, stage.stageHeight, false, 0xFFFFFF);
  61.            
  62.             // Generate the random initial condition.
  63.             GenerateInitialCondition();
  64.            
  65.             // Set the current row to '1'.
  66.             m_uRow = 1;
  67.            
  68.             // Create a new timer.
  69.             // It will be called every 10 milliseconds for the height of the stage.
  70.             var objTimer:Timer = new Timer(10, stage.stageHeight);
  71.            
  72.             // Add an event listener for the timer event.
  73.             objTimer.addEventListener(TimerEvent.TIMER, OnTimer);
  74.            
  75.             // Start the timer, this beginning the generation process.
  76.             objTimer.start();
  77.         }
  78.        
  79.         // OnTimer
  80.         //
  81.         // Event handler for the timer event.
  82.         protected function OnTimer(objEvent:TimerEvent):void
  83.         {
  84.             // Generate the current row, then advance to the next row.
  85.             GenerateRow(m_uRow++);
  86.         }
  87.        
  88.         // =================================================================================
  89.         // GENERATION FUNCTIONS
  90.         // =================================================================================
  91.        
  92.         // GenerateRow
  93.         //
  94.         // Generates the specified row.
  95.         protected function GenerateRow(uRow:uint):void
  96.         {
  97.             // Loop through all pixels in the row.
  98.             for(var i:Number = 0; i < stage.stageWidth; i++)
  99.             {
  100.                 // The number of bits to rotate the ruleset by.
  101.                 var nBits:Number = 0;
  102.                
  103.                 // Calculate the bit rotation by checking the neighboring pixels.
  104.                 nBits += (m_objBitmap.getPixel(i - 1, uRow - 1) == 0x000000) ? 4 : 0;
  105.                 nBits += (m_objBitmap.getPixel(i, uRow - 1) == 0x000000)     ? 2 : 0;
  106.                 nBits += (m_objBitmap.getPixel(i + 1, uRow - 1) == 0x000000 )? 1 : 0;
  107.                
  108.                 // Check the pattern against the ruleset to determine if
  109.                 // the pixel should be drawn.
  110.                 if(RULESET >> nBits & 1)
  111.                 {
  112.                     // Draw the pixel.
  113.                     m_objBitmap.setPixel(i, uRow, 0x000000);
  114.                 }
  115.             }
  116.            
  117.             // Remove the previous bitmap.
  118.             removeChildAt(0);
  119.            
  120.             // Add a new bitmap to the display with the current bitmap data.
  121.             addChildAt(new Bitmap(m_objBitmap), 0);
  122.         }
  123.        
  124.         // GenerateInitialCondition
  125.         //
  126.         // Generates a random initial condition.
  127.         protected function GenerateInitialCondition():void
  128.         {
  129.             // Loop through all pixels in the first row.
  130.             for(var i:Number = 0; i < stage.stageWidth; i++)
  131.             {
  132.                 // Use the random seed to determine if the current pixel
  133.                 // should be drawn.
  134.                 if(Math.random() < RANDOM_SEED)
  135.                 {
  136.                     // Draw the pixel.
  137.                     m_objBitmap.setPixel(i, 0, 0x000000);
  138.                 }
  139.             }
  140.            
  141.             // Add a new bitmap to the display with the current bitmap data.
  142.             addChildAt(new Bitmap(m_objBitmap), 0);
  143.         }
  144.     }
  145. }

1 comment

Adobe Flash Platform User Group Of Atlanta

February 13th, 2007 | Category: Dirty South

Those of you who live in the Atlanta area and are interested in Flash, Flex, Apollo, etc. should come to the monthly AFPUG meetings. They are the second Tuesday of every month at Roundbox Global.

Tonight, Jesse Warden spoke about dynamic data in the worlds of Flex and Flash. He showed some various examples of projects that consumed data from sources such as Amazon and Yahoo and also shared some tips regarding Flex animation performance. It was pretty basic material however he's a very entertaining speaker and we had a good talk afterwards.

It's a great way to meet people from all the different studios around town and there are some cool topics scheduled to be covered in the months to come, so definitely try and make it if you can.

No comments

Updates @ ISO50

February 13th, 2007 | Category: Dirty South

Scott Hansen has updated his site with some new content. He is such a huge inspiration to me; his design and musical creations are always top-notch.

No comments

On Flash Lite And The Internet

February 12th, 2007 | Category: Dirty South

Adobe's Flash Lite, the Flash Player runtime designed specifically for mobile phones, is in the news today. It was announced that Flash Lite 3, scheduled to be released sometime between now and June, will support Flash video. Though many will disagree with what I am about to say, it still needs to be said.

Why? Why develop for Flash Lite? Am I the only one that sees this? Right now, the internet experience on mobile devices is basically worthless. This is due to the fact that accessing the internet through your service provider is insanely slow and also because phones are terrible devices for browsing the internet. Modern phones were not designed for the internet and they are on the verge of being extinct.

The iPhone is just around the corner and with it will come many other phones of it's caliber, from Apple and otherwise. Safari on the iPhone is just the beginning; I won't be surprised at all when I see a version of Firefox running on a mobile phone this year. It's too obvious to ignore...designing special software for phones isn't the solution; designing phones that use the internet the way we are used to on our computers is.

People argue that only the high-end phones will provide this luxury, and to that I argue right back - for how long? And not only that, but clearly the cheaper phones are for people that just want a phone and not a computer in their pocket. You don't buy a Honda and expect it to perform like a Ferrari. So when are people going to realize that we need to design internet applications for the internet in general, not some for computers, some for phones, etc. If a device has a super tiny screen and terrible controls for browsing the internet, why why whyyy try and make an internet application for it? It just doesn't make sense.

The bottom line is, we don't need to accommodate for those devices; those devices need to accomodate for us. I have little doubt that Flash Lite 3 will be the final version of Flash Lite. No offense to the hard-working teams at Adobe, but what the world really needs is the regular Flash Player runtime on the next generation of mobile phones.

2 comments

AS2: URL Object

February 09th, 2007 | Category: Dirty South, Code

Here's a gem that will make working with URLs much easier. Common tasks such as extracting the protocol, host, domain, port, path and hash are now simply a method call away. In the case of queries, you can get them returned as either one big string or a hash map containing the data as key and value pairs. Enough talking, here's an example.

ActionScript:
  1. // Import the necessary classes.
  2. import com.boostworthy.datatypes.URL;
  3. import com.boostworthy.collections.HashMap;
  4. import com.boostworthy.collections.iterators.Iterator_I;
  5.  
  6. // Create a new URL object and set it's URL.
  7. var objURL:URL = new URL("https://www.boostworthy.com:1010/index.html#sample_hash?a=123&b=456");
  8.  
  9. // Example traces of various information about the URL.
  10. trace("URL: " + objURL.valueOf()); // https://www.boostworthy.com:1010/index.html#sample_hash?a=123&b=456
  11. trace("Protocol: " + objURL.GetProtocol()); // https:
  12. trace("Host: " + objURL.GetHost()); // www.boostworthy.com
  13. trace("Domain: " + objURL.GetDomain()); // boostworthy.com
  14. trace("Port: " + objURL.GetPort()); // 1010
  15. trace("Path: " + objURL.GetPath()); // index.html
  16. trace("Hash: " + objURL.GetHash()); // sample_hash
  17. trace("Is Secure: " + objURL.IsSecure()); // true
  18. trace("Query As String: " + objURL.GetQueryAsString()); // a=123&b=456
  19. trace("Query As HashMap: ");
  20.  
  21. // Store the returned hash map.
  22. var objHashMap:HashMap = objURL.GetQueryAsHashMap();
  23.  
  24. // Get an iterator instance from the hash map.
  25. var objIterator:Iterator_I = objHashMap.GetIterator();
  26.  
  27. // Iterate through the contents of the hash map.
  28. while(objIterator.HasNext())
  29. {
  30.     // Get each key.
  31.     var strKey:String = String(objIterator.Next());
  32.    
  33.     // Output the key and it's associated value.
  34.     trace("Key: " + strKey + " -> Value: " + objHashMap.Get(strKey));
  35.    
  36.     // Key: a -> Value: 123
  37.     // Key: b -> Value: 456
  38. }

Hopefully you will find this to be as handy as I have. If you can think of any other common tasks that would be appropriate for this object, definitely let me know. Enjoy!

Download 'boostworthy_url_object.zip'

No comments

The Knack

February 07th, 2007 | Category: Dirty South


I am one with the knack.

1 comment

Steve Jobs: Thoughts On Music

February 06th, 2007 | Category: Dirty South

DRM systems don't work; it's no secret. I would buy a lot more music off of the iTunes store if I didn't have to worry about how many computers I can have it on or how many CDs I can burn it to. Finally, Steve Jobs himself speaks out against the music industry and how ridiculous it is that they force Apple, Sony, and Microsoft to use these systems on downloadable music.

http://www.apple.com/hotnews/thoughtsonmusic/

I think the era of DRM-protected music is about to end. What do you think?

2 comments

— Next Page »