Archive for the 'FLAs' Category

AS2: Animating Filters With Fuse

December 5, 2007 in AS2, FLAs | Show Some Love | | No Comments »

View Example
Download Fuse
Download Example Files

I still use Fuse for my scripted animations in AS2 so I figured I'd show how I animate filters using Fuse in AS2 projects. In this instance, I used the glow filter to animate when you roll over a button. The filter animation in Fuse is pretty much the same no matter what filter you use (of course you have to change the properties of the filter to tween) and you can see all the properties of each tweenable filter in the docs. This is comprised of a class file I made for the button and just some quick code on the timeline to show how to use it.

Here is GlowButton.as:

PLAIN TEXT
Actionscript:
  1. import mx.events.EventDispatcher;
  2. import mx.utils.Delegate;
  3. import com.mosesSupposes.fuse.Fuse;
  4. import com.mosesSupposes.fuse.FuseFMP;
  5. import com.mosesSupposes.fuse.PennerEasing;
  6.  
  7. /**
  8. * @author Matt Przybylski [http://www.reintroducing.com]
  9. * @version 1.0
  10. */
  11.  
  12. class com.reintroducing.ui.GlowButton extends MovieClip
  13. {
  14. //- PRIVATE VARIABLES -------------------------------------------------------------------------------------
  15.     
  16.     private var dispatchEvent:Function;
  17.    
  18.     private var _fuse:Fuse;
  19.     private var _id:Number;
  20.     private var _startBlur:Number;
  21.     private var _endBlur:Number;
  22.     private var _active:Boolean;
  23.    
  24. //- PUBLIC VARIABLES --------------------------------------------------------------------------------------
  25.    
  26.     public static var DEFAULT_NAME:String = "com.reintroducing.ui.GlowButton";
  27.    
  28.     public var addEventListener:Function;
  29.     public var removeEventListener:Function;
  30.    
  31.     // instances
  32.     public var title_txt:TextField;
  33.    
  34. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  35.    
  36.     public function GlowButton()
  37.     {
  38.         super();
  39.        
  40.         EventDispatcher.initialize(this);
  41.        
  42.         this.onLoad = Delegate.create(this, init);
  43.     }
  44.    
  45. //- PRIVATE METHODS ---------------------------------------------------------------------------------------
  46.    
  47.     private function init():Void
  48.     {
  49.         this.initButtonEvents();
  50.     }
  51.    
  52.     /**
  53.      * Adds the events to the button
  54.      */
  55.     private function initButtonEvents():Void
  56.     {
  57.         this.onRollOver = Delegate.create(this, doRollOver);
  58.         this.onRollOut  = Delegate.create(this, doRollOut);
  59.         this.onRelease  = Delegate.create(this, doRelease);
  60.     }
  61.    
  62.     /**
  63.      * Clears the button of events
  64.      */
  65.     private function killButtonEvents():Void
  66.     {
  67.         this.onRollOver = null;
  68.         this.onRollOut  = null;
  69.         this.onRelease  = null;
  70.     }
  71.    
  72.     /**
  73.      * onRollOver
  74.      */
  75.     private function doRollOver():Void
  76.     {
  77.         this._fuse = new Fuse({target: this, Glow_blur: this._endBlur, Glow_alpha: 1, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
  78.         this._fuse.start();
  79.     }
  80.    
  81.     /**
  82.      * onRollOut
  83.      */
  84.     private function doRollOut():Void
  85.     {
  86.         this._fuse = new Fuse({target: this, Glow_blur: this._startBlur, Glow_alpha: .5, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
  87.         this._fuse.start();
  88.     }
  89.    
  90.     /**
  91.      * onRelease
  92.      */
  93.     private function doRelease():Void
  94.     {
  95.         this.dispatchEvent({type: "onGlowButtonClicked", target: this});
  96.     }
  97.    
  98. //- PUBLIC METHODS ----------------------------------------------------------------------------------------
  99.    
  100.     /**
  101.      * Sets the properties of the button
  102.      */
  103.     public function create($title:String, $id:Number, $color:Number, $startBlur:Number, $endBlur:Number):Void
  104.     {
  105.         this.title_txt.text = $title;
  106.         this._id = $id;
  107.         this._startBlur = $startBlur;
  108.         this._endBlur = $endBlur;
  109.        
  110.         FuseFMP.writeFilter(this, "Glow", {color: $color, blur: this._startBlur, alpha: .5, strength: 2});
  111.     }
  112.    
  113.     /**
  114.      * Enables the button
  115.      */
  116.     public function setEnabled():Void
  117.     {
  118.         this.initButtonEvents();
  119.        
  120.         this.enabled = true;
  121.         this._active = true;
  122.        
  123.         this._fuse = new Fuse({target: this, alpha: 100, Glow_blur: this._startBlur, Glow_alpha: .5, Glow_strength: 2, time: .35, ease: PennerEasing.easeOutSine});
  124.         this._fuse.start();
  125.     }
  126.    
  127.     /**
  128.      * Disables the button
  129.      */
  130.     public function setDisabled():Void
  131.     {
  132.         this.killButtonEvents();
  133.        
  134.         this.enabled = false;
  135.         this._active = false;
  136.        
  137.         this._fuse = new Fuse({target: this, alpha: 50, Glow_blur: 0, Glow_alpha: 0, Glow_strength: 0, time: .35, ease: PennerEasing.easeOutSine});
  138.         this._fuse.start();
  139.     }
  140.    
  141. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  142.    
  143.    
  144.    
  145. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  146.    
  147.     public function get id():Number
  148.     {
  149.         return this._id;
  150.     }
  151.    
  152.     public function set id($val:Number):Void
  153.     {
  154.         this._id = $val;
  155.     }
  156.    
  157.     public function get active():Boolean
  158.     {
  159.         return this._active;
  160.     }
  161.    
  162.     public function set active($val:Boolean):Void
  163.     {
  164.         this._active = $val;
  165.     }
  166.    
  167. //- HELPERS -----------------------------------------------------------------------------------------------
  168.    
  169.     public function toString():String
  170.     {
  171.         return "com.reintroducing.ui.GlowButton";
  172.     }
  173.    
  174. //- END CLASS ---------------------------------------------------------------------------------------------
  175. }

And here is the code on the timeline which just sets up the buttons:

PLAIN TEXT
Actionscript:
  1. import com.reintroducing.ui.GlowButton;
  2. import com.mosesSupposes.fuse.*;
  3.  
  4. ZigoEngine.register(Fuse, FuseFMP, PennerEasing);
  5.  
  6. var numButtons:Number = 4;
  7.  
  8. function setButtons():Void
  9. {
  10.     var btn:GlowButton;
  11.    
  12.     for (var i:Number = 0; i <numButtons; i++)
  13.     {
  14.         btn = GlowButton(this["btn" + i + "_mc"]);
  15.         btn.create("button" + i, i, 0x996600, 5, 10);
  16.         btn.addEventListener("onGlowButtonClicked", this);
  17.     }
  18. }
  19.  
  20. function onGlowButtonClicked($evt:Object):Void
  21. {
  22.     for (var i:Number = 0; i <numButtons; i++)
  23.     {
  24.         var btn:GlowButton = GlowButton(this["btn" + i + "_mc"]);
  25.        
  26.         if (btn.active == false)
  27.         {
  28.            
  29.             btn.setEnabled();
  30.         }
  31.     }
  32.    
  33.     $evt.target.setDisabled();
  34. }
  35.  
  36. setButtons();

I'm quite aware this isn't the prettiest example (as my examples usually are on the ugly side), but it's the code that counts here :P

Tags: , , ,

AS2: Record & Save Audio To Server With Flash Media Server

November 11, 2007 in AS2, FLAs | Show Some Love | | 29 Comments »

Download Example Files

The other day I posted a tip on how to set up Flash Media Server Developer Edition locally on your PC. To reiterate, I'm by no means an expert with Flash Media Server and this was the only test I had done with it, but I figured I'd show how to record some audio using your microphone and FMS and save it on to the FMS server as an .flv file. Let's take a look at the code:

PLAIN TEXT
Actionscript:
  1. stop();
  2.  
  3. var count:Number          = 0;
  4. var timestamp:Date    = new Date();
  5. var nc:NetConnection       = new NetConnection();
  6.  
  7. nc.connect("rtmp://localhost/audiotest/samples");
  8.  
  9. var ns:NetStream          = new NetStream(nc);
  10. ns.setBufferTime(2);
  11.  
  12. var mic:Microphone    = Microphone.get();
  13. mic.setRate(22);
  14.  
  15. ns.attachAudio(mic);
  16.  
  17. ns.onStatus = function($info:Object):Void
  18. {
  19.     trace($info.code);
  20. };
  21.  
  22. // record the audio to the stream
  23. function recordAudio():Void
  24. {
  25.     var fileName:String = String(timestamp.getTime() + (count++));
  26.    
  27.     ns.publish(fileName, "record");
  28. }
  29.  
  30. // stop the recording of audio to the stream
  31. function stopRecordingAudio():Void
  32. {
  33.     ns.publish(false);
  34. }
  35.  
  36. // plays back the audio that was recorded
  37. function playRecordedAudio():Void
  38. {
  39.     ns.play(currentFileName);
  40. }
  41.  
  42. // record button
  43. recordBtn_mc.onRelease = function():Void
  44. {
  45.     recordAudio();
  46. };
  47.  
  48. // stop button
  49. stopBtn_mc.onRelease = function():Void
  50. {
  51.     stopRecordingAudio();
  52. };
  53.  
  54. // play button
  55. playBtn_mc.onRelease = function():Void
  56. {
  57.     playRecordedAudio();
  58. };

As you can see, I'm still making a connection to my localhost on my PC. This example assumes that you have an "audiotest" folder in your "applications" folder in FMS (refer to the tip here to see how to set up your file structure). Inside of that folder you have your "streams" folder and in there you have a folder called "samples" which is the destination directory that the .flv files will be saved to when you stop recording.

After that we have our standard code for connecting to the stream and getting the microphone. The next thing I want to go over is the recordAudio() method. I'm creating a random filename using the Date object to try to make the filename as random as possible. I was also adding a variable that I was increasing by one each time to the end of the filename as for some reason when I tried this out originally the filename that was being created was the same every time. By adding count to it, I ensure that during that users session the filenames created won't be the same. The idea here is that you'll have multiple users on the site at the same time using the service so creating the files using the date makes the chance of it being named the same very small. For the current users session, you'll increase by count to ensure that that user's filenames don't mix up as well. Ideally, you'd want to create a safer naming convention to prevent the possibility of creating the same filename for multiple users, but for this example this will suffice.

The last thing we want to note about the filename is that it does not end in the extension .flv. Just like I stated in the tip, you don't need to add the extension to the end of the filename as FMS automatically saves it out as an .flv file.

If you want to convert your .flv to an audio format for later playback, you're opening up a whole pandora's box of issues and you'll be on your own in trying to figure that out. Flash Media Server uses the NellyMoser codec to encode the audio and it's close to impossible to extract the audio unless you a) want to pay about $7,500 to NellyMoser to extract it or b) use a third party command line tool which, from my research, is a pretty hit or miss process.

Saving the file as an .flv on the server (or your hard drive in the "samples" folder if you're following this example) should suffice enough in that you can later play back the .flv file in Flash. With a combination of slick Flash programming and some server-side scripting you can make a nice little application that captures the audio, saves it to the server, saves the filename in the database, and you can later retrieve it for playback.

Here is a blog post that may help you out with some of this audio recording and converting to a different file format: Andrew Paul Simmons' Post

Tags: , , , , ,

AS2: Search As You Type

October 12, 2007 in AS2, FLAs | Show Some Love | | No Comments »

View Preview
Download Source - Flash 8+

This was a test to see if I could build a search as you type application. It was built back in mid-2006 so it's not the best code, but you can improve it if you'd like. Right now there aren't that many results so it runs relatively quickly, but I wouldn't advise using it on a huge chunk of data.

NOTE: You'll need the TweenExtended class from Square Circle to run this.

Tags: , ,

AS2: Fuse Vertex Tweening Panel

October 12, 2007 in AS2, FLAs | Show Some Love | | No Comments »

View Example
Download Source - Flash 8+

This was a test run on tweening vertices of a shape. The code isn't very elegant and certainly not bug free, but feel free to reuse it in any way, shape, or form. If you improve on this, please let me know as I'd be curious to see what you did with it.

NOTE: You'll need Fuse to run this.

Tags: , , , , ,

AS2: XML Image Loading Scroller

October 12, 2007 in AS2, FLAs | Show Some Love | | No Comments »

View Example
Download Source - Flash 8+

This is an image scroller that loads in images through XML. Right now it is set up to move horizontally based on what button on the bottom you roll over. It was originally a file I made for someone on the Kirupa forums a long time ago but it still got a lot of requests so I figured I'd put it back up here.

Tags: , , , , ,