Category Archives: UI

Obfuscated Slider

By Zevan | November 16, 2009
CLICK HERE TO COPY
Actionscript:
  1. var slider:MovieClip = makeSlider();
  2. slider.addEventListener(Event.CHANGE, function(evt:Event):void{
  3.     trace(evt.currentTarget.percent);                                  
  4. });
  5.  
  6. function makeSlider():MovieClip{
  7.     var slider:MovieClip = MovieClip(addChild(new MovieClip()));
  8.     var circle:Sprite = Sprite(slider.addChild(new Sprite()));
  9.     with (circle.graphics) beginFill(0x000000), drawCircle(0,0,10);
  10.     var line:Shape = Shape(slider.addChild(new Shape()));
  11.     with (line.graphics) lineStyle(0,0x000000), lineTo(0, 100);
  12.     slider.x = slider.y = 100;
  13.     circle.addEventListener(MouseEvent.MOUSE_DOWN, function(evt:Event):void{ evt.currentTarget.startDrag(false, new Rectangle(0,0,0,100)), slider.addEventListener(Event.ENTER_FRAME, onChange) });
  14.     var stopIt:Function = function(){ stopDrag(), slider.removeEventListener(Event.ENTER_FRAME, onChange) };
  15.     stage.addEventListener(Event.MOUSE_LEAVE, stopIt);
  16.     stage.addEventListener(MouseEvent.MOUSE_UP, stopIt);
  17.     return slider;
  18. }
  19. function onChange(evt:Event):void { evt.currentTarget.percent = evt.currentTarget.getChildAt(0).y / 100, evt.currentTarget.dispatchEvent(new Event(Event.CHANGE)) }

This is a pretty nasty implementation of a basic slider. Just felt like writing some obfuscated code today... It could probably be made even more confusing with some additional tweaks...

Have a look at the swf over at wonderfl...

Posted in UI | Tagged , , | Comments closed

Hide Browser Scrollbars

By ascontest | November 9, 2009
CLICK HERE TO COPY
Actionscript:
  1. /*
  2. This snippet is by Mels le Noble
  3. www.melslenoble.nl
  4. It will hide the browser scrollbars.
  5. */
  6.  
  7. // see if we are testing locally
  8. if (stage.loaderInfo.url.split("/")[2])
  9. {
  10.  ExternalInterface.call("function(){document.body.style.overflow='hidden';document.html.style.overflow = 'hidden';}");
  11. }

This snippet by Mels le Noble will hide the browser scrollbars. The bulk of the snippet is the javascript inside the ExternalInterface.call() method. I like the trick that Mels uses to check if the swf is local.... snippet-worthy in itself.

Posted in UI | Tagged , , , , | Leave a comment

HSV Color Type

By Zevan | June 24, 2009
CLICK HERE TO COPY
Actionscript:
  1. [SWF(width=560,height=300,backgroundColor=0x000000,frameRate=30)]
  2.  
  3. var key:Object = new Object();
  4. var alphabet:Array = "abcdefghijklmnopqrstuvwxyz".split("");
  5.  
  6. var num:Number = alphabet.length;
  7. var step:Number = 360 / num;
  8.  
  9. var colors:Object = new Object();
  10. for (var i:int  = 0; i<num; i++){
  11.     var index:String = alphabet[i];
  12.      key[index] = 65 + i;
  13.      var c:Array = hsv(i * step, 1, 1);
  14.      colors[index] = c[0] <<16 | c[1] <<8 | c[2];
  15. }
  16. alphabet.push("32");
  17. num++;
  18. key["32"] = 32;
  19. colors["32"]  = 0x333333;
  20. x = y = 10;
  21. var count:int = 0;
  22. var size:int = 20;
  23. stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyPressed);
  24. function onKeyPressed(evt:KeyboardEvent):void{
  25.     for (var i:int= 0; i<num; i++){
  26.         var index:String = alphabet[i];
  27.          if (index == "32"){
  28.             trace("hi", evt.keyCode, key[index]);
  29.          }
  30.         if (evt.keyCode == key[index]){
  31.             graphics.beginFill(colors[index]);
  32.             var xp:int = count % num * size;
  33.             var yp:int = int(count / num) * size;
  34.             graphics.drawRect(xp, yp, size, size);
  35.             count++;
  36.         }
  37.     }
  38. }
  39. // ported from here:
  40. //http://www.cs.rit.edu/~ncs/color/t_convert.html
  41. function hsv(h:Number, s:Number, v:Number):Array{
  42.     var r:Number, g:Number, b:Number;
  43.     var i:int;
  44.     var f:Number, p:Number, q:Number, t:Number;
  45.     if (s == 0){
  46.         r = g = b = v;
  47.         return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  48.     }
  49.     h /= 60;
  50.     i  = Math.floor(h);
  51.     f = h - i;
  52.     p = v *  (1 - s);
  53.     q = v * (1 - s * f);
  54.     t = v * (1 - s * (1 - f));
  55.     switch( i ) {
  56.         case 0:
  57.             r = v, g = t, b = p;
  58.             break;
  59.         case 1:
  60.             r = q, g = v, b = p;
  61.             break;
  62.         case 2:
  63.             r = p, g = v, b = t;
  64.             break;
  65.         case 3:
  66.             r = p, g = q, b = v;
  67.             break;
  68.         case 4:
  69.             r = t, g = p, b = v;
  70.             break;
  71.         default:        // case 5:
  72.             r = v, g = p, b = q;
  73.             break;
  74.     }
  75.     return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
  76. }

This snippet is a typing experiment - for every letter, you type a box filled with a specific color is drawn to the stage. The color associated with each letter is determined by moving through hsv color space - so typing an alphabet will end up with something resembling a spectrum.

Also posted in Graphics, color, keys | Tagged , , | Leave a comment

Mouse.cursor

By Zevan | May 27, 2009
CLICK HERE TO COPY
Actionscript:
  1. var count:int = 0;
  2. var cursors:Array = [MouseCursor.ARROW, MouseCursor.BUTTON, MouseCursor.HAND, MouseCursor.IBEAM];
  3. setInterval(changeMouse, 100);
  4. function changeMouse():void{
  5.     Mouse.cursor = cursors[count % cursors.length];
  6.     count++;
  7. }

This is a small snippet that shows the cursor property of the Mouse class. This is fp10 only...

Posted in UI | Tagged , | Leave a comment