Home

Archive for the Category » Flash «

OpenFrameworks looking good

Saturday, September 04th, 2010 | Author: dehash

OpenFrameworks is a C++ toolkit designed for creative coding. The Code::Blocks IDE works in a familiar way and the two combine well.

Did a quick port of an old Yugo Flash4 example to AS3 and then to OpenFrameworks C++ to try it out. Very impressed with the toolkit and IDE - if you know some AS3 and some programming you will certainly have a head start. Definitely going to experiment some more with it.

The swf movie is here and the port is below:

C++:
  1. #include "testApp.h"
  2.  
  3. //--------------------------------------------------------------
  4. void testApp::setup(){
  5.  
  6. ofSetFrameRate(50);
  7.     i =0;
  8.     a = 5;
  9.     b = 1.66;
  10.     k = 20;
  11.  
  12.     for(i=0; i<NBALLS; i++) {
  13.         ball = &ballArray[i];
  14.         ball->x = 200+(i*k);
  15.         ball->y = 400;
  16.     }
  17.  
  18.     for(i=0; i<NBALLS; i++) {
  19.         ball = &ballArray[i];
  20.         ball->x_value = ball->x;
  21.         ball->y_value = ball->y;
  22.         ball->vx = 0;
  23.         ball->vy = 0;
  24.     }
  25.  
  26. }
  27.  
  28. //--------------------------------------------------------------
  29. void testApp::update(){
  30.  
  31.     for(i=1; i<NBALLS; i++) {
  32.         ball = &ballArray[i];
  33.         prevBall = &ballArray[(i-1)];
  34.         ball->vx  = (ball->vx  + ( prevBall->x_value + k - ball->x_value) /a) /b;
  35.         ball->vy  = (ball->vy  + ( prevBall->y_value - ball->y_value) /a) /b;
  36.         ball->x_value += ball->vx;
  37.         ball->y_value += ball->vy;
  38.     }
  39.  
  40.     ballArray[0].x_value = ballArray[0].x = mouseX;
  41.     ballArray[0].y_value =  ballArray[0].y = mouseY;
  42.  
  43.     for(i=0; i<NBALLS; i++) {
  44.         ball = &ballArray[i];
  45.         ball->x = ball->x_value;
  46.         ball->y = ball->y_value;
  47.     }
  48.  
  49. }
  50.  
  51. //--------------------------------------------------------------
  52. void testApp::draw(){
  53.  
  54.     for(int i=0; i<NBALLS; i++) {
  55.         ball = &ballArray[i];
  56.         ball->draw();
  57.     }
  58.  
  59. }

Category: Code Examples, Flash, OpenFrameworks | Leave a Comment

Updated Flash AS3 RobotLegs YouTube code

Friday, August 20th, 2010 | Author: dehash

RobotLegs YouTube Example2 Added a GUI and a search facility to the previous example. The demo movie is here and the source code is here . Still needs some work to improve the GUI and performance which will be added some time.

Category: Code Examples, Flash, RobotLegs, YouTube API | Leave a Comment

Flash AS3 RobotLegs YouTube example

Monday, August 09th, 2010 | Author: dehash

RobotLegs YouTube Example Was asked about an updated Flash YouTube example as the previous ones were quite old and Flex based. So here is a work in progress which I will update later. Still need to add a GUI and a search facility but this is the basic version for now. It uses MVCS in RobotLegs and MinimalComps to interface with YouTube. The demo movie is here and the source code is here and the demo search was Ronettes...
Some ideas used in the code were taken from three excellent articles here and here and here

Category: Code Examples, Flash, RobotLegs, YouTube API | Leave a Comment

AS3 Signals Bubbling note

Sunday, March 07th, 2010 | Author: dehash

Working with this now and just a note that it looks like a way to bubble Signals from a nested display class is as follows:

public var deluxeSignal:DeluxeSignal = new DeluxeSignal(this);
...
deluxeSignal.dispatch(new GenericEvent(true));

and the listening class further up the display list implements IBubbleEventHandler and requires the following method:

public function onEventBubbled(e:IEvent):void {
trace(e +"-"+ e.target +"-"+ e.currentTarget +"-"+ e.signal);
}

- - -
Added a quick example below with source code using the current signals release unedited
here

PS there is an excellent Signals video tutorial here

- - -
Update: Added a new version of the simple example that works with the latest Signals release (0.7). The onEventBubbled method now has a boolean return value to determine whether to continue bubbling or stop.
The new example code can be downloaded here

- - -

Some ideas on passing parameters:
var deluxeSignal:DeluxeSignal = new DeluxeSignal(this);
deluxeSignal.dispatch(new GenericEvent(true));
Here you are passing "this", ie the sending instance, as the GenericEvent event target so that it is available as the event.target within onEventBubbled(event:IEvent).

Alternately pass in a Value Object (VO) instead of "this" to pass more precise and data typed parameters (you would need to give it a "parent" property) or another option is to extend GenericEvent and give it some custom properties which can be read within onEventBubbled.

Category: Code Examples, Flash | 14 Comments

Quick test of FCSS

Sunday, February 14th, 2010 | Author: dehash

fcss test Spent an hour testing the cool Flash AS3 FCSS library. Seems fine to set any public property so it can trigger tweens, image loads, filters etc as in this example
There is a good FCSS video tutorial here

Trees image from here released under CC license


Code below all in one file for now as it was just a quick test. Aside from FCSS it also uses three other AS3 libraries - Tweener and MinimalComps and BumpSlide

You can view the swf here

Actionscript:
  1. /**
  2. * v0.1 code by dehash.com 2010
  3. * Quick Test of FCSS
  4. * Released as open source under the BSD License
  5. * http://www.opensource.org/licenses/bsd-license.php
  6. */
  7. package {
  8.  
  9.     // http://code.google.com/p/minimalcomps/
  10.     import com.bit101.components.*;
  11.  
  12.     // http://github.com/theflashbum/fcss
  13.     import com.flashartofwar.fcss.applicators.StyleApplicator;
  14.     import com.flashartofwar.fcss.managers.SingletonManager;
  15.     import com.flashartofwar.fcss.styles.IStyle;
  16.     import com.flashartofwar.fcss.stylesheets.*;
  17.  
  18.     import flash.display.Sprite;
  19.     import flash.events.Event;
  20.     import flash.events.MouseEvent;
  21.  
  22.     // trees image from http://www.flickr.com/photos/cybot586/4356730349/
  23.  
  24.     public class Main extends Sprite
  25.     {
  26.  
  27.         private var css:XML = <css><![CDATA[
  28.         #boxStyle {
  29.             x: 50;
  30.             y: 10;
  31.             alpha: 0.95;
  32.             width: 300;
  33.             height: 250;
  34.             color: 0x1C2331;
  35.             tweenYto: 333;
  36.             dropShadowDistance: 20;
  37.             loadImage: 4356730349_2cfcbdff4d.jpg;
  38.         }
  39.         ]]>
  40.         </css>;
  41.  
  42.         private var styleSheetCollection:IStyleSheetCollection =
  43. SingletonManager.getClassReference(StyleSheetCollection) as IStyleSheetCollection;
  44.  
  45.         private var txt:Text;
  46.  
  47.         private var box:BoxExtended;
  48.  
  49.         public function Main():void
  50.         {
  51.             if (stage) init();
  52.             else addEventListener(Event.ADDED_TO_STAGE, init);
  53.         }
  54.  
  55.         private function init(e:Event = null):void
  56.         {
  57.             removeEventListener(Event.ADDED_TO_STAGE, init);
  58.  
  59.             // entry point
  60.             addControls();
  61.             addBox();
  62.         }
  63.  
  64.         private function addControls():void {
  65.  
  66.             var window:Window = new Window(this, 400, 50, "Box CSS Window");
  67.             window.width = 320;
  68.             window.height = 460;
  69.  
  70.             var vBox:VBox = new VBox(window.content);
  71.  
  72.             txt = new Text(vBox, 10, 20);
  73.             txt.text = css.toString();
  74.             txt.width = 300;
  75.             txt.height = 400;
  76.  
  77.             new PushButton(vBox, 180 , 0, "Apply CSS to Box", parseButtonHandler);
  78.  
  79.         }
  80.  
  81.         private function parseButtonHandler(e:MouseEvent):void {
  82.  
  83.             var styleSheet:IStyleSheet = new FStyleSheet( );
  84.             styleSheet.parseCSS(txt.text.toString());
  85.  
  86.             styleSheetCollection.removeStyleSheet("boxStyleSheet");
  87.             styleSheetCollection.addStyleSheet(styleSheet, "boxStyleSheet");
  88.  
  89.             var boxStyle:IStyle = styleSheetCollection.getStyle("#boxStyle");
  90.  
  91.             var styleApplicator:StyleApplicator = new StyleApplicator();
  92.             styleApplicator.applyStyle(box,boxStyle);
  93.         }
  94.  
  95.         private function addBox():void {
  96.             box = new BoxExtended();
  97.             addChild(box);
  98.         }
  99.  
  100.     }
  101. }
  102.  
  103. // http://code.google.com/p/tweener/
  104. import caurina.transitions.Tweener;
  105. import flash.filters.DropShadowFilter;
  106. // http://code.google.com/p/bumpslide/
  107. import com.bumpslide.events.UIEvent;
  108. import com.bumpslide.ui.Box;
  109. import com.bumpslide.ui.Image;
  110.  
  111. class BoxExtended extends Box {
  112.  
  113.     private var image:Image = new Image(null, Image.SCALE_CROP, -1, -1, imageLoaded);
  114.     private var _tweenYto:Number;
  115.     private var _loadImage:String;
  116.     private var _dropShadowDistance:Number;
  117.  
  118.     public function BoxExtended() {
  119.         super(0xccccff,100,100,20,20);
  120.     }
  121.  
  122.     public function set tweenYto(value:Number):void {
  123.         _tweenYto = value;
  124.         Tweener.addTween(this, { y:_tweenYto, time:2.5, delay:0.5, transition:"easeInOutExpo" } );
  125.     }
  126.  
  127.     public function set loadImage(value:String):void {
  128.         _loadImage = "/demoimages/"+ value.split("/").pop();
  129.         if (_loadImage == "null") {
  130.             tileBitmap = null;
  131.         }else {
  132.             image.url = _loadImage;
  133.         }
  134.     }
  135.  
  136.     public function set dropShadowDistance(value:Number):void {
  137.         _dropShadowDistance = value;
  138.         filters = [new DropShadowFilter(_dropShadowDistance)];
  139.     }
  140.  
  141.     private function imageLoaded(e:UIEvent):void {
  142.         tileBitmap = image.imageBitmap.bitmapData;
  143.     }
  144.  
  145. }

Category: Code Examples, Flash | 3 Comments

Flash 10 3D example

Wednesday, December 23rd, 2009 | Author: dehash

fp10 3d example3D Flash Player 10 example and code using PaperSprite and the new built in 3D instead of PaperVision. The output is similar to similar to the InteractivePlanesBoard example and some of it is loosely based on this example code too.
view swf here


Actionscript:
  1. /**
  2. * v0.1 code by dehash.com 2009
  3. * Flash Player 10 swf using PaperSprite similar to InteractivePlanesBoard
  4. * http://www.dehash.com/?page_id=219 only using FP10 3D rather than PV3D
  5. * code loosely based on example at :
  6. * http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10
  7. * Released as open source under the BSD License
  8. * http://www.opensource.org/licenses/bsd-license.php
  9. */
  10.  
  11. package  {
  12.     import flash.events.Event;
  13.     import flash.events.MouseEvent;
  14.     import flash.display.Sprite;
  15.    
  16.     //http://blog.soulwire.co.uk/code/open-source/two-sided-planes-in-flash-player-10
  17.     import soulwire.display.PaperSprite;
  18.    
  19.     // http://code.google.com/p/tweener/
  20.     import caurina.transitions.Tweener;
  21.  
  22.     [SWF(width="800", height="600", backgroundColor="0xFFFFFF")]
  23.  
  24.     public class InteractivePlanesBoard10Multi2CleanedUp extends Sprite {
  25.  
  26.         private const NUM_OBJECTS:uint = 4;
  27.  
  28.         [Embed(source='add.png')]
  29.         private var pic:Class;
  30.  
  31.         private var size:uint = 100;
  32.         private var cnt:uint = 0;
  33.         private var holder:PaperSprite;
  34.  
  35.         public function InteractivePlanesBoard10Multi2CleanedUp() {
  36.             holder = new PaperSprite();
  37.             addChild(holder);
  38.             holder.x = stage.stageWidth / 2;
  39.             holder.y = stage.stageHeight / 2;
  40.  
  41.             var xOffset:Number = (NUM_OBJECTS * size) / 2;
  42.             var yOffset:Number = (NUM_OBJECTS * size) / 2;
  43.  
  44.             for (var i:int = 0; i <NUM_OBJECTS; i++) {
  45.                 for (var j:int = 0; j <NUM_OBJECTS; j++) {
  46.  
  47.                     var paperSprite:PaperSprite = new PaperSprite();
  48.                     paperSprite = new PaperSprite();
  49.                     paperSprite.x = -xOffset + (i * size * 1.2);
  50.                     paperSprite.y = -yOffset + (j * size * 1.2);
  51.  
  52.                     if(cnt%5==0){
  53.                         paperSprite.front = createPicSprite();
  54.                     }else {
  55.                         paperSprite.front = createSprite();
  56.                     }
  57.  
  58.                     paperSprite.back = createSprite()
  59.                     paperSprite.rotationY = 0;
  60.                     holder.addChild(paperSprite );
  61.  
  62.                     paperSprite.addEventListener(MouseEvent.MOUSE_OVER, planePressedHandler, false, 0, true);
  63.  
  64.                     cnt++;
  65.                 }
  66.             }
  67.  
  68.             addEventListener ( Event.ENTER_FRAME, spin );
  69.         }
  70.  
  71.         private function createSprite ():Sprite {
  72.             var sp:Sprite = new Sprite();
  73.             sp.graphics.beginFill ( Math.random() * 0xffffff );
  74.             sp.graphics.drawRect ( -size / 2, -size / 2, size, size);
  75.             sp.graphics.endFill ();
  76.             return sp;
  77.         }
  78.  
  79.         public function createPicSprite():Sprite {
  80.             var sp:Sprite = new Sprite();
  81.             var b:*= new pic();
  82.             b.width = b.height = size;
  83.             sp.addChild(b);
  84.             return sp;
  85.         }
  86.  
  87.         private function spin ( event:Event ):void {
  88.             var mX:Number = ((mouseX / stage.stageWidth) - 0.5) * 360;
  89.             var mY:Number = ((mouseY / stage.stageHeight) - 0.5) * 360;
  90.             holder.rotationY += (mX - holder.rotationY) / 140;
  91.             holder.rotationX += (mY - holder.rotationX) / 140;
  92.         }
  93.  
  94.         public function planePressedHandler(e:MouseEvent):void {
  95.             if (!Tweener.isTweening(e.currentTarget)) {
  96.                 Tweener.addTween(e.currentTarget, { time:2, delay:0, transition:'easeinoutback', rotationY: e.currentTarget.rotationY + 180 } );
  97.             }
  98.         }
  99.  
  100.     }
  101. }

Category: Code Examples, Flash | Leave a Comment

Quick Image Viewer

Thursday, November 26th, 2009 | Author: dehash

Image ViewerMade a quick image displayer with zoom and pan in just a few lines of code using BumpSlide and MinimalComps which can be viewed here. The main source code is below and the image is The Starry Night by Van Gogh from here


Actionscript:
  1. /**
  2. * v0.1 code by dehash.com 2009
  3. * based on example code at :
  4. * http://bumpslide.googlecode.com/svn/trunk/as3/examples/zoom/ZoomDemo_01.as
  5. * Released as open source under the BSD License
  6. * http://www.opensource.org/licenses/bsd-license.php
  7. */
  8.  
  9. package {
  10.  
  11. import com.bit101.components.HBox;
  12. import com.bit101.components.HSlider;
  13. import com.bit101.components.Label;
  14. import com.bit101.components.PushButton;
  15.  
  16. import com.bumpslide.ui.Applet;
  17. import com.bumpslide.ui.ZoomPanel;
  18. import net.stevensacks.utils.Web;
  19.  
  20. import flash.display.Bitmap;
  21. import flash.display.Loader;
  22. import flash.events.Event;
  23. import flash.events.MouseEvent;
  24. import flash.net.URLRequest;
  25.  
  26. public class ImageDisplayer extends Applet {
  27.  
  28. static private const CONTENT_URL:String = "starrynight1280.jpg";
  29. private var zoomPanel:ZoomPanel;
  30. private var image:Loader;
  31. private var myZoomSlider:HSlider;
  32. private var controls:HBox;
  33. private var credits:HBox;
  34. private var offset:uint = 50;
  35. private var label:Label;
  36.  
  37. override protected function addChildren():void {
  38.  
  39. // load image with smoothing not applied
  40. image = new Loader();
  41. image.contentLoaderInfo.addEventListener(Event.INIT, function(e:Event):void {
  42. (image.content as Bitmap).smoothing = false;
  43. });
  44. image.load(new URLRequest(CONTENT_URL));
  45.  
  46. // create zoom panel with image as content
  47. zoomPanel = new ZoomPanel();
  48. zoomPanel.content = image;
  49. addChild(zoomPanel);
  50.  
  51. // create HBox to hold controls
  52. controls = new HBox(this);
  53.  
  54. // create controls
  55. new PushButton(controls, 0, 0, "Home", function():void {
  56. zoomPanel.panTo(0, 0);
  57. });
  58. new PushButton(controls, 0, 0, "<<--", function():void {
  59. zoomPanel.panLeft();
  60. });
  61. new PushButton(controls, 0, 0, "-->>", function():void {
  62. zoomPanel.panRight();
  63. });
  64. new PushButton(controls, 0, 0, "/\\", function():void {
  65. zoomPanel.panUp();
  66. });
  67. new PushButton(controls, 0, 0, "\\/", function():void {
  68. zoomPanel.panDown();
  69. });
  70. myZoomSlider = new HSlider(controls, 0, 5, doZoom);
  71. myZoomSlider.tick = 0.25;
  72. myZoomSlider.minimum = 0.25;
  73. myZoomSlider.maximum = 7;
  74. myZoomSlider.value = 1;
  75.  
  76. addChild(controls);
  77.  
  78. zoomPanel.dragZoomControl.minZoom = .25;
  79. zoomPanel.dragZoomControl.maxZoom = 7;
  80.  
  81. zoomPanel.zoomContent.cacheAsBitmap = true;
  82.  
  83. // create HBox to hold credits
  84. credits = new HBox(this);
  85.  
  86. // create credits
  87. var labelText:String = "Van Gogh - Starry Night - 1889 -";
  88. labelText += "(source http://www.flickr.com/photos/financialaidpodcast/3956763480/)";
  89. label = new Label(credits, 0, 0, labelText);
  90.  
  91. new PushButton(credits, 0, 0, "Image Source", getSource);
  92.  
  93. }
  94.  
  95. private function getSource(e:MouseEvent):void {
  96. var link:String = "http://www.flickr.com/photos/financialaidpodcast/3956763480/";
  97. Web.getURL(link, "_blank");
  98. }
  99.  
  100. private function doZoom(event:Event):void {
  101. zoomPanel.zoom = myZoomSlider.value;
  102. }
  103.  
  104. /**
  105. * Applets are resized when stage size changes, so re-center content during redraw
  106. */
  107. override protected function draw():void {
  108. zoomPanel.move(offset, offset);
  109. zoomPanel.setSize(width * .85, height * .85);
  110. controls.x = offset;
  111. controls.y = offset / 2;
  112. credits.x = offset;
  113. credits.y = height * .95;
  114. }
  115. }
  116. }

Category: Code Examples, Flash | One Comment