Home

Flex YouTube API Example Update

Monday, June 30th, 2008 | Author: dehash

Added a Comments viewer, and a related movies tab using the as3-youtube-data-api

View the flex swf here

Loading the comments is almost identical to loading the feeds - just use these classes :
import ca.newcommerce.youtube.data.CommentData;
import ca.newcommerce.youtube.feeds.CommentFeed;
import ca.newcommerce.youtube.events.CommentFeedEvent;

The rest is the same.

Category: Flash, YouTube API | Leave a Comment

YouTube API Resources

Wednesday, June 25th, 2008 | Author: dehash

Posting just to keep some of the resources linked in a single post - will add to this list as further resources are found:

—===General===—
YouTube Announcement

YouTube APIs Developer Forum

YouTube Data API FAQ

—===Flex AS3 Related===—
as3-youtube-data-api

Youtube Data API AS3 - Tutorial

Martin Legris’ Blog (as3-youtube-data-api author)

more links

—===Flex Examples===—
as3-youtube-data-api usage example(with source code)

Example Flex YouTube Player(with source code)

—===fin===—

Update: No need for Developer Key to load the chromeless player from now on the new chromeless player URL is: http://www.youtube.com/apiplayer

Category: Flash, YouTube API | Leave a Comment

Flex YouTube API Example Feed + Search Display

Wednesday, June 18th, 2008 | Author: dehash

Flex YouTube API feed + search display. download source code

Uses library @ as3-youtube-data-api

Nice player example @ on_the_other_hand

author of as3-youtube-data-api has a blog @ blog.martinlegris.com

update: added in a simple player to view the movies.

.
Update 2: Added source code download for the feed display
We are making a Cairngorm version of this but here is a simple component version to test.
The source code for the feed display component (not the player) is here
It is a FlashDevelop3 Beta7 project file and uses the Flex3 SDK to compile. To build the project requires the as3-youtube-data-api library Just download youtube-google-0.95.zip and add it to the project path and compile, that is it.

All of the hard work is done by SimpleFeedGrabberExample.as which uses the excellent as3-youtube-data-api library to load feeds from YouTube and parses them into an ArrayCollection which is the Bindable datasource for the display. This is a simple version that will likely change a lot when it is in our Cairngorm project but works fine for now.
as3-youtube-data-api notes: in strict mode you get a few warnings of variables declared without datatypes in the as3-youtube-data-api library but these are easy to fix. Also YouTubeClient has been removed in the library version released yesterday but we substituted YouTubeFeedClient in its place and that seems to work ok.

—
Once the above is complete to integrate with into the otoh player grab the source code from here:
* copy the src directory into this project src folder
* make YouTubeTest.mxml the target file + make 3 edits to it:
* put xmlns:ytfeeds=”ytfeeds.*” in the Application tag at the top
* put <ytfeeds:YTFeedComponent top=”325″ /> just before </mx:Application>
* insert your YouTube Developer key into YouTubeTest.mxml and compile.

Now when you click on a movie in the display it can be played in the otoh player because video.text is set to the selected movie ID.

update:
Added a Comments viewer, and a related movies tab using the as3-youtube-data-api

View the flex swf here

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

Simple Flex Flickr Search Tool

Monday, December 10th, 2007 | Author: dehash

Category: Code Examples, Flash, Flickr API | Leave a Comment

Using Papervision3D with FlashDevelop 3

Sunday, June 24th, 2007 | Author: dehash

Below is an example using Papervision3D AS3 engine using Flex2 SDK and FlashDevelop3 Beta 2. Look here for a fantastic Shark Demo

PLAIN TEXT
Actionscript:
  1. package {
  2. import flash.display.*;
  3. import flash.events.*;
  4. import org.papervision3d.scenes.*;
  5. import org.papervision3d.objects.*;
  6. import org.papervision3d.cameras.*;
  7. import org.papervision3d.materials.*;
  8.  
  9. import com.suite75.papervision3d.objects.*;
  10.  
  11. [SWF(backgroundColor="#000000", frameRate="30")]
  12.  
  13. public class TestTorus extends Sprite {
  14. private var container : Sprite;
  15. private var scene     : Scene3D;
  16. private var camera    : Camera3D;
  17. private var rootNode  : DisplayObject3D;
  18.  
  19. private var torusObj  : DisplayObject3D;
  20. private var torusSize : int = 300;
  21. private var segment   : int = 3;
  22. private var material  : ColorMaterial;
  23.  
  24. private var valx      : Number = 0;
  25. private var valy      : Number = 0;
  26.  
  27. public function TestTorus():void {
  28. stage.frameRate = 60;
  29. stage.quality   = "MEDIUM";
  30. stage.scaleMode = "noScale";
  31. stage.align = StageAlign.TOP_LEFT;
  32. this.addEventListener(Event.ENTER_FRAME, loop3D);
  33. this.stage.addEventListener(Event.RESIZE, onStageResize);
  34.  
  35. init3D();
  36. }
  37.  
  38. private function init3D():void {
  39. this.container = new Sprite();
  40. addChild(this.container);
  41. this.container.x = this.stage.stageWidth  / 2;
  42. this.container.y = this.stage.stageHeight / 2;
  43.  
  44. scene = new Scene3D( container );
  45.  
  46. camera = new Camera3D();
  47. camera.z = -torusSize;
  48. camera.focus = 500;
  49. camera.zoom = 1;
  50.  
  51. rootNode = scene.addChild( new DisplayObject3D( "rootNode" ) );
  52.  
  53. material = new ColorMaterial( 0x0099cc, 0.3);
  54. material.oneSide = false;
  55.  
  56. torusObj = rootNode.addChild( new Torus( material,100,50) );
  57. torusObj.material.lineColor = 0x00ccff;
  58. torusObj.material.lineAlpha = 0.3;
  59. }
  60.  
  61. private function loop3D( event:Event ):void {
  62.  
  63. valx += this.container.mouseX / 50;
  64. valy += this.container.mouseY / 50;
  65. torusObj.rotationY = valx;
  66. torusObj.rotationX = valy;
  67.  
  68. this.scene.renderCamera( camera );
  69. }
  70.  
  71. private function onStageResize(event:Event):void {
  72. this.container.x = this.stage.stageWidth  / 2;
  73. this.container.y = this.stage.stageHeight / 2;
  74. }
  75.  
  76. }
  77. }

Some code here was useful to use

Category: Code Examples, Flash, Papervision 3D | Leave a Comment

SVG Embedding again

Monday, October 23rd, 2006 | Author: dehash

I got some useful feedback at Flashcoders about my SVG post below. So far from what I found there is no golden rule for predicting filesize when embedding svgs except that usually the swf will be smaller.

I tried some of the suggested Inkscape optimising tips (ungroup,convert to paths, removing metadata/gradient definitions) and others (Vacuum Defs, Paths simplify) but none had a notable filesize impact once that particular svg was embedded in Flash (although they do benefit other svgs).

The main culprit seems to be the three shadows below the base and one once they were removed from the svg took the resulting swf from 63k down to 30k which is roughly the svg/swf ratio I would expect.

Below left is the original monitor and the edited one one on the right, those shadows below the base add 33k (over half of the total).

One related thing I found is :

Original monitor svg = 64k adds 63k to the swf when embedded alone
Edited monitor svg = 69k adds 30k to the swf when embedded alone
Embedding BOTH svg files in the SAME swf adds only 63k to the swf

I am guessing that the reason why is that when converting embedded svgs to swf the Flex2 SDK caches paths and gradients converts them to symbols in the library so that if it finds the same definition in another embedded svg it pulls it out of the library instead of recreating it. But I would need to test it some more to be sure. Cool if it is though.

Category: Code Examples, Flash, Flex SVG | Leave a Comment

SVG Embedding and file size

Tuesday, October 17th, 2006 | Author: dehash

Here are just a few of the nice vector clipart examples from at http://www.openclipart.org . All four originals are in SVG format created using Created with Inkscape and below is the code to embed them and apply DropShadow and Bevel filters to each using the Flex2 SDK to compile a Flash 9 swf.

The laptop svg is around 9k adds around 3k to the final swf. The vacuum svg is 36k and adds 11k, camcorder svg is 36k and adds 14k, and the monitor svg is 63k and adds around around 65k.

So all the swf conversions are smaller than their respective svg files except the monitor svg (and this adds more than twice the size to the swf of the other three put together).

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3. import flash.display.Sprite;
  4. import flash.filters.DropShadowFilter;
  5. import flash.filters.BevelFilter;
  6.  
  7. [SWF( backgroundColor='0x333333', frameRate='30', height='400', width='400')]
  8.  
  9. public class SVGfilters extends Sprite
  10. {
  11. // svg files from http://www.openclipart.org
  12.  
  13. [Embed(source="../assets/laptop.svg")]
  14. private var SVG_Laptop:Class;
  15.  
  16. [Embed(source="../assets/camcorder_jaime_sanchez1.svg")]
  17. private var SVG_Camcorder:Class;
  18.  
  19. [Embed(source="../assets/lcd_monitor_the_structor_.svg")]
  20. private var SVG_Monitor:Class;
  21.  
  22. [Embed(source="../assets/blue_vacuum_cleaner_jaim_01.svg")]
  23. private var SVG_Vacuum:Class;
  24.  
  25. public function SVGfilters()
  26. {
  27. init();
  28. }
  29.  
  30. private function init():void
  31. {
  32.  
  33. var mySVG_Laptop:Sprite = new SVG_Laptop() as Sprite;
  34. mySVG_Laptop.scaleX=0.25;
  35. mySVG_Laptop.scaleY=0.25;
  36. mySVG_Laptop.x=50;
  37. mySVG_Laptop.y=0;
  38. mySVG_Laptop.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  39. addChild(mySVG_Laptop);
  40.  
  41. var mySVG_Vacuum:Sprite = new SVG_Vacuum() as Sprite;
  42. mySVG_Vacuum.scaleX=0.25;
  43. mySVG_Vacuum.scaleY=0.25;
  44. mySVG_Vacuum.x=190;
  45. mySVG_Vacuum.y=30;
  46. mySVG_Vacuum.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  47. addChild(mySVG_Vacuum);
  48.  
  49. var mySVG_Monitor:Sprite = new SVG_Monitor() as Sprite;
  50. mySVG_Monitor.scaleX=0.25;
  51. mySVG_Monitor.scaleY=0.25;
  52. mySVG_Monitor.y=150;
  53. mySVG_Monitor.x=50;
  54. mySVG_Monitor.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  55. addChild(mySVG_Monitor);
  56.  
  57. var mySVG_Camcorder:Sprite = new SVG_Camcorder() as Sprite;
  58. mySVG_Camcorder.scaleX=0.25;
  59. mySVG_Camcorder.scaleY=0.25;
  60. mySVG_Camcorder.x=190;
  61. mySVG_Camcorder.y=200;
  62. mySVG_Camcorder.filters = [ new DropShadowFilter() ,  new BevelFilter() ];
  63. addChild(mySVG_Camcorder);
  64.  
  65. }
  66. }
  67. }

Category: Code Examples, Flash, Flex SVG | Leave a Comment

Embedding a SVG file

Thursday, August 17th, 2006 | Author: dehash

SVG file drawn using Inkscape and embedded in swf at compile time. The box at bottom left had a radial gradient fill in the svg that does not appear in the swf.

SVGEmbed.as code below compiled using FlashDevelop and a Bit-101 template

PLAIN TEXT
Actionscript:
  1. package {
  2. import flash.display.Sprite;
  3. public class SVGEmbed extends Sprite {
  4. [Embed(source="../assets/plainsvg1.svg")]
  5. private var SimpleSVG:Class;
  6.  
  7. public function SVGEmbed() {
  8. init();
  9. }
  10. private function init():void {
  11. var mySVG:Sprite = new SimpleSVG();
  12. mySVG.scaleX=0.5;
  13. mySVG.scaleY=0.5;
  14. addChild(mySVG);
  15. }
  16. }
  17. }

Category: Code Examples, Flash, Flex SVG | Leave a Comment