parpue.net » actionscript3 http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 マッシュアップ地図アルバムを作ってみる[Flickr+GoogleMaps+Flash] http://parpue.net/web/1070 http://parpue.net/web/1070#comments Sun, 19 Jul 2009 20:53:13 +0000 okm http://parpue.net/?p=1070 title

ちょっと前にas3flickrlibを使ってFlickrの緯度経度情報の取り方を調べた。

緯度経度情報が取れたのなら、やることはひとつ、
GoogleMaps上に表示だ。
さっそくGoogleMaps Flash API のリファレンスを見ながらしこしこ作ってみた。

以前の記事の下北GPSログの情報を流用した。

マーカーをクリックで該当箇所の画像が見られる。
地図上のラインは、KMLから緯度経度ルート情報を作成した、
外部ファイルから取得している。
リストはこんな感じ。
突貫で作ったので、今度余裕があったらコレをオサレ化してみようと思う。

Google API Key、 Flickr API Keyは伏せたソース一覧↓
＊以下のファイル他、as3flickrlibにちょっと手をいれてます。

GPSPhoto.as(メイン)

>>text
ACTIONSCRIPT:
  1. package {
  2. import com.adobe.webapis.flickr.PhotoSet;
  3. import com.google.maps.LatLng;
  4. import flash.display.Sprite;
  5. import flash.events.Event;
  6. import flash.events.IOErrorEvent;
  7. import flash.net.URLLoader;
  8. import flash.net.URLRequest;
  9.  
  10. public class GPSPhoto extends Sprite
  11. {
  12. private var csvURL:String = "shimokita.csv";
  13. private var setid:String = "72157620666800332";
  14.  
  15. private var gpsLoader:URLLoader;
  16. private var map:Gmap;
  17. private var flcon:FlickerConnector;
  18. private var flickrImageList:Array;
  19. private var photoSet:PhotoSet;
  20.  
  21. public function GPSPhoto()
  22. {
  23. // パラメータでGPSリストとPhotoSetのID取得
  24. if(loaderInfo.parameters.propertyIsEnumerable("csvURL")) this.csvURL = loaderInfo.parameters["csvURL"];
  25. if(loaderInfo.parameters.propertyIsEnumerable("setid")) this.csvURL = loaderInfo.parameters["setid"];
  26.  
  27. stage.align = "TL";
  28. stage.scaleMode = "noScale";
  29. map = new Gmap(750,600,this.mapReadyHandler);
  30. map.onMarkerClick = this.onMarkerClickHandler;
  31. this.addChild(map);
  32. }
  33.  
  34. private function mapReadyHandler(event:Event):void{
  35. var url:String = csvURL;
  36. var request:URLRequest = new URLRequest(url);
  37. gpsLoader = new URLLoader(request);
  38. gpsLoader.addEventListener(Event.COMPLETE, loadCompleteHandler);
  39. gpsLoader.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
  40.  
  41. flcon = new FlickerConnector;
  42. flcon.onFail = this.onFlickrFailHandler;
  43. flcon.onGetInfo = this.onGetInfoHandler;
  44. flcon.onGetPhotos = this.onGetPhotosHandler;
  45.  
  46. flcon.getInfo(setid);
  47. }
  48.  
  49. private function onMarkerClickHandler(id:String):void{
  50. for(var i:Number = 0; this.flickrImageList.length; i++){
  51. var image:FlickrImage = flickrImageList[i];
  52. if(image.id == id){
  53. this.map.showPhoto(image.width_m, image.height_m, new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)), image.title, image.url_m);
  54. break;
  55. }
  56. }
  57. }
  58.  
  59. private function loadCompleteHandler(event:Event):void{
  60. var lineGeoCSV:String = String(gpsLoader.data);
  61. var geoList:Array = lineGeoCSV.split(" ");
  62. var pointList:Array = new Array;
  63. for(var i:Number=0; i
  64. if(String(geoList[i])=="") continue;
  65. var infos:Array = String(geoList[i]).split(",");
  66. pointList.push(new LatLng(infos[1], infos[0]));
  67. }
  68. map.drawPolyline(pointList);
  69. }
  70.  
  71. private function onGetInfoHandler(photoset:PhotoSet):void {
  72. this.photoSet = photoSet;
  73. this.flcon.getPhotos(this.setid);
  74. }
  75.  
  76. // 画像一覧情報ロードの完了
  77. private function onGetPhotosHandler(flickrImageList:Array):void {
  78. this.flickrImageList = flickrImageList;
  79.  
  80. /*　次への布石
  81. for (var i:Number = 0; i <flickrImageList.length; i++) {
  82. var image:FlickrImage = flickrImageList[i];
  83. this.addChild(image.image);
  84. }*/
  85.  
  86. map.drawMarkers(flickrImageList);
  87. }
  88.  
  89. private function onFlickrFailHandler():void {
  90. // (^-^;;
  91. }
  92.  
  93. private function ioErrorHandler(event:IOErrorEvent):void{
  94. // (^-^;;
  95. }
  96. }
  97. }

Gmap.as 地図管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.google.maps.InfoWindowOptions;
  4. import com.google.maps.LatLng;
  5. import com.google.maps.Map;
  6. import com.google.maps.MapEvent;
  7. import com.google.maps.MapMouseEvent;
  8. import com.google.maps.controls.MapTypeControl;
  9. import com.google.maps.controls.ZoomControl;
  10. import com.google.maps.overlays.Marker;
  11. import com.google.maps.overlays.MarkerOptions;
  12. import com.google.maps.overlays.Polyline;
  13. import com.google.maps.overlays.PolylineOptions;
  14. import com.google.maps.styles.FillStyle;
  15. import com.google.maps.styles.StrokeStyle;
  16.  
  17. import flash.display.Sprite;
  18. import flash.geom.Point;
  19. import flash.text.StyleSheet;
  20.  
  21. /**
  22. * ...
  23. * @author okm
  24. */
  25. public class Gmap extends Sprite
  26. {
  27. private var map:Map;
  28. private var markerList:Array;
  29.  
  30. public var onReady:Function;
  31. public var onMarkerClick:Function;
  32.  
  33. public function Gmap(width:Number,height:Number, onReady:Function)
  34. {
  35. this.onReady = onReady;
  36.  
  37. markerList = new Array;
  38.  
  39. map = new Map;
  40. map.addEventListener(MapEvent.MAP_READY, onReady);
  41. map.key = "Google Maps APIキー";
  42. map.addControl(new MapTypeControl());
  43. map.addControl(new ZoomControl());
  44. map.setSize(new Point(width, height));
  45.  
  46. this.addChild(map);
  47. }
  48.  
  49. public function drawPolyline(pointList:Array):void{
  50. var polyline:Polyline = new Polyline(
  51. pointList,
  52. new PolylineOptions({ strokeStyle: new StrokeStyle({
  53. color: 0x6481F5,
  54. thickness: 4,
  55. alpha: 0.7})
  56. }));
  57. this.map.addOverlay(polyline);
  58. this.map.setCenter(pointList[0],17);
  59. }
  60.  
  61. public function drawMarkers(flickrImageList:Array):void{
  62. for(var i:Number = 0; i <flickrImageList.length; i++){
  63. var image:FlickrImage = flickrImageList[i];
  64. var marker:Marker = new Marker(new LatLng(parseFloat(image.latitude), parseFloat(image.longitude)),
  65. new MarkerOptions({
  66. strokeStyle: new StrokeStyle({color: 0x666666}),
  67. fillStyle: new FillStyle({color: 0x6481F5, alpha: 0.8}),
  68. radius: 12,
  69. hasShadow: true
  70. }));
  71. marker.addEventListener(MapMouseEvent.CLICK, onMarkerClickHandler, false, 1, true);
  72. this.markerList.push({id:image.id, marker:marker});
  73. this.map.addOverlay(marker);
  74. }
  75. }
  76.  
  77. private function onMarkerClickHandler(event:MapMouseEvent):void{
  78. for(var i:Number = 0; i <markerList.length; i++){
  79. if(markerList[i].marker == event.target){
  80. if(this.onMarkerClick != null) this.onMarkerClick(markerList[i].id);
  81. continue;
  82. }
  83. }
  84. //map.panTo(event.target.getLatLng()); //マーカー座標へ移動
  85. }
  86.  
  87. public function showPhoto(width:Number, height:Number, latlng:LatLng, title:String, imageUrl:String):void {
  88. var style:StyleSheet = new StyleSheet();
  89.  
  90. var heading:Object = new Object();
  91. heading.fontWeight = "bold";
  92. heading.color = "#FF0000";
  93.  
  94. var body:Object = new Object();
  95. body.fontStyle = "italic";
  96. body.textAlign = "center";
  97.  
  98. style.setStyle(".heading", heading);
  99. style.setStyle("body", body);
  100.  
  101. // インフォウィンドウ　オープン
  102. map.openInfoWindow(latlng, new InfoWindowOptions( { width:width+20, height:height+35,hasCloseButton: true, contentHTML:"<span class="heading">"+title+"</span>
  103. <img src="&quot;+imageUrl+&quot;" alt="" />", contentStyleSheet:style, hasTail:false}));
  104. }
  105.  
  106. }
  107. }

FlickerConnector.as Flickr管理用

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.events.FlickrResultEvent;
  4. import com.adobe.webapis.flickr.FlickrService;
  5. import com.adobe.webapis.flickr.methodgroups.Photos;
  6. import com.adobe.webapis.flickr.methodgroups.PhotoSets;
  7. import com.adobe.webapis.flickr.Photo;
  8. import flash.display.Loader;
  9. import flash.display.LoaderInfo;
  10. import flash.display.Sprite;
  11. import flash.events.Event;
  12. import flash.events.IOErrorEvent;
  13. import flash.net.URLLoader;
  14. import flash.net.URLRequest;
  15. import flash.text.TextField;
  16.  
  17. /**
  18. * ...
  19. * @author okm
  20. */
  21. public class FlickerConnector
  22. {
  23. private var fls:FlickrService;
  24. private var photos:Photos;
  25. private var photoSets:PhotoSets;
  26. private var photoIndex:Number = 0;
  27.  
  28. private var _imageList:Array;
  29. private var _thumnailList:Object;
  30.  
  31. private var imageLoader:Loader; // 画像ローダ
  32.  
  33. public var onGetPhotos:Function;
  34. public var onGetInfo:Function;
  35. public var onFail:Function;
  36.  
  37. public function FlickerConnector()
  38. {
  39. this._imageList = new Array;
  40.  
  41. fls = new FlickrService("Flickr API キー");
  42.  
  43. photoSets = new PhotoSets(fls);
  44.  
  45. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_PHOTOS, GetPhptosComplete)
  46. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_INFO, GetInfoComplete)
  47.  
  48. }
  49.  
  50. public function getPhotos(setid:String):void{
  51. photoSets.getPhotosExtras(setid);
  52. }
  53.  
  54. public function getInfo(setid:String):void {
  55. photoSets.getInfo(setid);
  56. }
  57.  
  58. // 写真情報取得完了
  59. private function GetPhptosComplete(e:FlickrResultEvent):void {
  60. if (!e.success &amp;&amp; this.onFail != null) onFail();
  61.  
  62. //photoSetの写真のタイトルとURLを配列に格納
  63. for (var i:uint; i &lt;e.data.photoSet.photos.length ; i++) {
  64. var flickrImage:FlickrImage = new FlickrImage(e.data.photoSet.photos[i]);
  65. this._imageList.push(flickrImage);
  66. }
  67.  
  68. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  69. //getNextPhoto();
  70. }
  71.  
  72. /* 次への布石
  73. private function getNextPhoto():void {
  74. if (this.photoIndex&gt;= this._imageList.length) {
  75. // ロード完了
  76. if (this.onGetPhotos != null) this.onGetPhotos(this._imageList);
  77. return;
  78. }
  80. var image:FlickrImage = this._imageList[photoIndex];
  82. imageLoader = new Loader();
  84. var imageURLreq:URLRequest = new URLRequest(image.url_t);
  85. var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
  86. imgInfo.addEventListener(Event.INIT, onImageInit);
  87. imgInfo.addEventListener(IOErrorEvent.IO_ERROR, onImageIOError);
  88. imageLoader.load(imageURLreq);
  89. }
  90. */
  91.  
  92. private function onImageInit(event:Event):void{
  93. var image:FlickrImage = this._imageList[photoIndex];
  94. image.image = this.imageLoader;
  95. this.photoIndex++;
  96. //getNextPhoto();
  97. }
  98.  
  99. private function onImageIOError(event:Event):void {
  100. if (this.onFail != null) onFail();
  101. }
  102.  
  103. private function GetInfoComplete(e:FlickrResultEvent):void {
  104. if (!e.success &amp;&amp; this.onFail != null) onFail();
  105. if (this.onGetInfo != null) this.onGetInfo(e.data.PhotoSet);
  106. }
  107.  
  108. }
  109.  
  110. }

FlickrImage.as　画像情報オブジェクト

>>text
ACTIONSCRIPT:
  1. package
  2. {
  3. import com.adobe.webapis.flickr.Photo;
  4. import flash.display.DisplayObject;
  5.  
  6. /**
  7. * ...
  8. * @author okm
  9. */
  10. public class FlickrImage
  11. {
  12. public var id:String;
  13. public var title:String;
  14. public var latitude:String;
  15. public var longitude:String;
  16. public var url_m:String;
  17. public var url_t:String;
  18. public var width_t:Number;
  19. public var height_t:Number;
  20. public var width_m:Number;
  21. public var height_m:Number;
  22. public var image:DisplayObject;
  23.  
  24. public function FlickrImage(photo:Photo)
  25. {
  26. this.id = photo.id;
  27. this.title = photo.title;
  28. this.longitude = photo.longitude;
  29. this.latitude = photo.latitude;
  30. this.longitude = photo.longitude;
  31. this.url_m = photo.url_m;
  32. this.url_t = photo.url_t;
  33. this.width_m = photo.width_m;
  34. this.height_m = photo.height_m;
  35. this.width_t = photo.width_t;
  36. this.height_t = photo.height_t;
  37. }
  38. }
  39.  
  40. }
]]> http://parpue.net/web/1070/feed 0 Flashで緯度経度情報つきの画像情報をFlickrから受け取る。 http://parpue.net/web/996 http://parpue.net/web/996#comments Sun, 12 Jul 2009 17:42:36 +0000 okm http://parpue.net/?p=996 ちょっと前にも書いた気がするが、
最近は画像に、撮影した場所の緯度経度情報が埋め込める。
そんでもって、緯度経度の情報付きの画像を、
Flickrに保存しておくことができる。

というわけで、Flickrに位置情報付きの画像を置いておいて、
Flash＋GoogleMaps上に展開とかしたいなーと思って調べてみたところ、
FlsahからFlickrに接続するためのas3flickrlibというのを発見。
しかしこのライブラリが長いこと更新されていない・・・。

というわけで、作りたいものの下調べがてら、
このライブラリで位置情報である、
ジオタグ付きの情報を取得できるようにするやり方を調べた。

Photos.as, PhotoSets.asの２つのファイル
（訂正）Photos.as, PhotoSets.as, MethodGroupHelper.asの３つのファイルを、
以下な感じで修正すれば、ジオタグを取得できる。

■ Photos.as

>>text
ACTIONSCRIPT:
  1. private var _notes:Array;
  2.         private var _tags:Array;
  3.         private var _urls:Array;
  4.        
  5.         // okm add
  6.         private var _latitude:String;
  7.         private var _longitude:String;
>>text
ACTIONSCRIPT:
  1. public function get latitude():String {
  2.             return _latitude;
  3.         }
  4.         public function set latitude(value:String):void {
  5.             _latitude = value;
  6.             return;
  7.         }
  8.        
  9.        
  10.         public function get longitude():String {
  11.             return _longitude;
  12.         }
  13.         public function set longitude(value:String):void {
  14.             _longitude = value;
  15.             return;
  16.         }

■PhotoSets.as

>>text
ACTIONSCRIPT:
  1. //　okm add
  2.         public function getPhotosExtras( photoset_id:String ):void {
  3.             MethodGroupHelper.invokeMethod( _service, getPhotos_result,
  4.                                    "flickr.photosets.getPhotos",
  5.                                    false,
  6.                                    new NameValuePair( "photoset_id", photoset_id ),
  7.                                    new NameValuePair( "extras", "geo" )
  8.                                    );
  9.         }

extras にとりたい情報を適当に追加すれば、返してくれる情報も増える。

■MethodGroupHelper.as

>>text
ACTIONSCRIPT:
  1. for each ( var p:XML in xml.photoset.photo ) {
  2.                 var photo:Photo = new Photo();
  3.                 photo.id = p.@id.toString();
  4.                 photo.secret = p.@secret.toString();
  5.                 photo.title = p.@title.toString();
  6.                 photo.server = parseInt( p.@server );
  7.                
  8.                 // okm add
  9.                 photo.latitude = p.@latitude.toString();
  10.                 photo.longitude = p.@longitude.toString();
  11.                
  12.                 photoSet.photos.push( photo ); 
  13.             }

あとは、↓な感じで情報を取得すればOK.

>>text
ACTIONSCRIPT:
  1. fls = new FlickrService("APIキー");
  2. photoSets = new PhotoSets(fls);
  3. fls.addEventListener(FlickrResultEvent.PHOTOSETS_GET_PHOTOS, GetPhptosComplete);
  4. photoSets.getPhotosExtras("SetsのID");
  5. 〜〜〜〜
  6. private function GetPhptosComplete(e:FlickrResultEvent):void{
  7.     //photoSetの写真のタイトルとURLを配列に格納
  8.     for(var i:uint; i <e.data.photoSet.photos.length ;i++){
  9.         trace(e.data.photoSet.photos[i].title);
  10.         trace(e.data.photoSet.photos[i].id);
  11.         trace(e.data.photoSet.photos[i].latitude);     // 緯度経度も取得可能
  12.         trace(e.data.photoSet.photos[i].longitude);  //
  13.     }
  14. }

こんな感じで返してくれます。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <rsp stat="ok">
  3. <photoset id="72157620666800332" primary="3666954753" owner="25111802@N08" ownername="----" page="1" per_page="500" perpage="500" pages="1" total="24">
  4.         <photo id="3666954753" secret="----" server="3541" farm="4" title="shimokita_0024" isprimary="1" latitude="35.665071" longitude="139.66531" accuracy="16" place_id="dtJZJhabCZm.78Qz9A" woeid="28528566" />
  5.         <photo id="3667761046" secret="----" server="3338" farm="4" title="shimokita_0023" isprimary="0" latitude="35.665002" longitude="139.665412" accuracy="16" place_id="dtJZJhabCZm.78Qz9A" woeid="28528566" />
  6.         <photo id="3666954587" secret="----" server="3323" farm="4" title="shimokita_0022" isprimary="0" latitude="35.663729" longitude="139.666517" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  7.         <photo id="3667760848" secret="----" server="2563" farm="3" title="shimokita_0020" isprimary="0" latitude="35.663106" longitude="139.667609" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  8.         <photo id="3667760770" secret="----" server="3300" farm="4" title="shimokita_0021" isprimary="0" latitude="35.662354" longitude="139.666976" accuracy="16" place_id="INaV6gKbCZlVrYnlFA" woeid="28528453" />
  9. </photoset>
  10. </rsp>

次は、実際にFlashでGoogleMapsへの展開を挑戦予定！

]]> http://parpue.net/web/996/feed 1 PaperVision3Dでタグクラウド http://parpue.net/web/667 http://parpue.net/web/667#comments Thu, 30 Apr 2009 19:12:32 +0000 okm http://parpue.net/?p=667 e38394e382afe38381e383a3-4

最近、３Dのタグクラウドよくみるので、
何となく作ってみた・・・けど、これ目立つけど見づらいような。。。

↓


あの雲まで飛べる！

XMLでタグ情報を読み込んで、
タグの内容から、Text3Dオブジェクトを生成して、
PaperVision3Dのシーンに参加させています。

あとはTweenerでくるくると。

読み込んでいるタグクラウド用のXMLは こちら

コード

>>text
ACTIONSCRIPT:
  1. package {
  2.     import caurina.transitions.Tweener;
  3.    
  4.     import flash.display.*;
  5.     import flash.events.*;
  6.     import flash.net.URLLoader;
  7.     import flash.net.URLRequest;
  8.     import flash.text.TextField;
  9.    
  10.     import org.papervision3d.cameras.*;
  11.     import org.papervision3d.materials.*;
  12.     import org.papervision3d.materials.special.Letter3DMaterial;
  13.     import org.papervision3d.objects.*;
  14.     import org.papervision3d.render.BasicRenderEngine;
  15.     import org.papervision3d.scenes.*;
  16.     import org.papervision3d.typography.fonts.HelveticaBold;
  17.     import org.papervision3d.view.Viewport3D;
  18.     [SWF(backgroundColor=0x000000)]
  19.    
  20.     public class Pv3DCloud extends Sprite
  21.     {
  22.         private var scene     : Scene3D;
  23.         private var camera    : Camera3D;
  24.         private var rootNode  : DisplayObject3D;
  25.  
  26.        private var viewport:Viewport3D;
  27.        private var renderer:BasicRenderEngine;
  28.        
  29.         private var loader:URLLoader;
  30.         private var text:TextField;
  31.        
  32.         private var tags:Array;
  33.         private var bases:Array;
  34.        
  35.         private var cameraPosition:Number = 3300;
  36.         private var radius:Number = 1000;
  37.        
  38.         public function Pv3DCloud()
  39.         {
  40.             stage.frameRate = 60;
  41.             stage.quality   = "MEDIUM";
  42.             stage.scaleMode = "noScale";
  43.             stage.align = StageAlign.TOP_LEFT;
  44.  
  45.             var url:URLRequest = null;
  46.            
  47.             var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters;
  48.             var xmlpath:String = (flashvars["xmlpath"]) ?  String(flashvars["xmlpath"]) : "test.xml" ;
  49.             url = new URLRequest(xmlpath);
  50.            
  51.             loader = new URLLoader();
  52.             loader.addEventListener(Event.COMPLETE, onLoadHandler);
  53.             loader.addEventListener(IOErrorEvent.IO_ERROR, onIOErrorHandler);
  54.             loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityErrorHandler);
  55.             loader.load(url);   
  56.         }
  57.        
  58.         private function onSecurityErrorHandler(event:Event):void{
  59.             trace("sec error");
  60.         }
  61.        
  62.         private function onLoadHandler(event:Event):void{
  63.             trace("onload");
  64.             try{
  65.                 var xmlData:XML = new XML(this.loader.data);
  66.                 tags = new Array;
  67.                 bases = new Array;
  68.  
  69.                 viewport = new Viewport3D(stage.stageWidth , stage.stageHeight);
  70.                 addChild(viewport);//viewportを表示ツリーに追加
  71.                 renderer = new BasicRenderEngine();
  72.        
  73.                 scene = new Scene3D();
  74.                 camera = new Camera3D();
  75.  
  76.                 //rootNode生成
  77.                 rootNode = new DisplayObject3D();
  78.                 scene.addChild( rootNode );
  79.                
  80.                 var letterMaterial:Letter3DMaterial = new Letter3DMaterial;
  81.                 letterMaterial.fillColor = 0xFFFFFF;
  82.                 letterMaterial.oneSide = false;
  83.                 letterMaterial.interactive = true;
  84.                
  85.                 var i:Number = 0;
  86.                 var tagXml:XMLList = xmlData.tags.tag;
  87.                 var oneDegree:Number = 360 / tagXml.length();
  88.                 for each(var tag in xmlData.tags.tag){
  89.                     var tag3D:Tag3D = new Tag3D(String(tag) , new HelveticaBold() , letterMaterial);
  90.                     tag3D.degree = oneDegree * i;
  91.                     //tag3D.scale = 1 + Number(tag.@level) * 3 /10;
  92.                     if(tag.@level == "1") tag3D.scale = 3;
  93.                     else if(tag.@level == "2") tag3D.scale = 1.75;
  94.                     tag3D.rotateSpeed = Math.floor(Math.random()*5)+1;
  95.                     tag3D.y = Math.floor(Math.random()*(radius*2))-radius;
  96.                     tag3D.z = radius*Math.sin(tag3D.degree * Math.PI / 180);
  97.                     tag3D.x = radius*Math.cos(tag3D.degree * Math.PI / 180);
  98.                     Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationX:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  99.                     rootNode.addChild(tag3D);
  100.                     tags.push(tag3D);
  101.                     i++;
  102.                 }
  103.                 stage.addEventListener(Event.ENTER_FRAME, loop);
  104.                 camera.z = -this.cameraPosition;
  105.  
  106.             }catch(err:Error){
  107.                 trace("error" + err.toString());
  108.                 return;
  109.             }
  110.         }
  111.        
  112.         private function onIOErrorHandler(event:Event):void{
  113.             trace("io error");
  114.         }
  115.        
  116.         private function onTweenHandler(i):void{
  117.             var tag3D:Tag3D = tags[i];
  118.             tag3D.rotationX = 0;
  119.             tag3D.rotationY = 0;
  120.             var XorY = (Math.floor(Math.random()*2));
  121.             if(XorY) Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationX:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  122.             else Tweener.addTween(tag3D, {time:tag3D.rotateSpeed, rotationY:360, onComplete:onTweenHandler, onCompleteParams:[i]});
  123.         }
  124.        
  125.         private function loop( event:Event ):void
  126.         {
  127.             for each(var tag3D:Tag3D in tags){
  128.                 tag3D.degree += 3;
  129.                 tag3D.z = radius*Math.sin(tag3D.degree * Math.PI / 180);
  130.                 tag3D.x = radius*Math.cos(tag3D.degree * Math.PI / 180);
  131.             }
  132.             renderer.renderScene(scene, camera, viewport);
  133.         }
  134.     }
  135. }
]]> http://parpue.net/web/667/feed 0 Flash,Degrafaで簡単に波を表現 (2) http://parpue.net/web/645 http://parpue.net/web/645#comments Tue, 14 Apr 2009 18:03:58 +0000 okm http://parpue.net/?p=645 Degrafaのベジェ曲線描画に、さらに塗りを指定して、
もうちょっと見栄えのいい波にしてみました。

今回も、重ねた波の分だけ増えただけで、
コードはMXMLを除いて、１３行といっても、
MXMLでLineToとかしちゃってるわけなので、ちょっとだけ複雑…。

塗り（ fill ）、線（strokes）をまず定義して、
今度は３次ベジェ曲線オブジェクトのCubicBezierではなく、
波を描くためのパス Path を用意します。

Pathに、CubicBezierTo,LineToでラインの情報を指示して、
塗りの指定をして、波を描画します。

↓波一つ分のパス

>>text
XML:
  1. <Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  2.     <segments>
  3.          <MoveTo x="0" y="0" />
  4.          <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  5.          <LineTo x="{bigWaveWidth}" y="{height}"/>
  6.          <LineTo x="{0}" y="{height}"/>
  7.          <LineTo x="{0}" y="{0}"/>
  8.      </segments>
  9. </Path>

これを重ねて、前回の記事と同じようにEnterFrameイベントで動かします。
MXMLでお絵かきしてるようでおもしろいですね。

SVGインポートして描画したりもできるんで、
イラレとかで作ってやったほうがはやいかもしれないですね(^-^;;

今度は、Degrafaでコンポーネントスキンとかにも挑戦してみようかすら。

以下コードです。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="http://www.degrafa.com/2007" width="400" height="220" backgroundColor="#FFFFFF" enterFrame="onEnterHandler(event)">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       [Bindable]private var waveHeight:Number = 30;
  6.       [Bindable]private var waveWidth:Number = 410;
  7.       [Bindable]private var bigWaveWidth:Number = 600;
  8.       private function onEnterHandler(event:Event):void{
  9.         if(this.bezier1.x <-this.waveWidth) this.bezier1.x = this.bezier2.x + waveWidth;
  10.         if(this.bezier2.x <-this.waveWidth) this.bezier2.x = this.bezier1.x + waveWidth;
  11.         this.bezier1.x -= 10;
  12.         this.bezier2.x -= 10;
  13.         if(this.bezier3.x <-this.bigWaveWidth) this.bezier3.x = this.bezier4.x + bigWaveWidth;
  14.         if(this.bezier4.x <-this.bigWaveWidth) this.bezier4.x = this.bezier3.x + bigWaveWidth;
  15.         this.bezier3.x -= 5;
  16.         this.bezier4.x -= 5;
  17.       }
  18.     ]]>
  19.   </mx:Script>
  20.  
  21.   <Surface>
  22.     <!-- 塗りの指定 -->
  23.     <fills>
  24.       <LinearGradientFill id="MainFill" angle="90">
  25.         <GradientStop ratio="0" alpha="0.7" color="#FFFFFF"/>
  26.         <GradientStop ratio="1" alpha="0.7" color="#FFDDDD"/>
  27.       </LinearGradientFill>
  28.      
  29.       <LinearGradientFill id="smallWaveFill1" angle="0">
  30.         <GradientStop ratio="0" alpha="0.5" color="#FF6666"/>
  31.         <GradientStop ratio="1" alpha="0.5" color="#FFCC00"/>
  32.       </LinearGradientFill>
  33.       <LinearGradientFill id="smallWaveFill2" angle="0">
  34.         <GradientStop ratio="0" alpha="0.5" color="#FFCC00"/>
  35.         <GradientStop ratio="1" alpha="0.5" color="#FF6666"/>
  36.       </LinearGradientFill>
  37.      
  38.       <SolidFill id="bigWaveFill" color="#CCCC00" alpha="0.5"/>     
  39.     </fills>
  40.  
  41.     <!-- 線の指定 -->
  42.     <strokes>
  43.       <SolidStroke color="#666688" alpha="0.3" weight="1" id="BasicStroke"/>
  44.     </strokes>
  45.  
  46.     <!--表示するオブジェクト-->   
  47.     <GeometryGroup>
  48.       <RegularRectangle id="rect" width="{width-2}" height="{height-2}" x="0" y="0" fill="{MainFill}" stroke="{BasicStroke}">
  49.         <GeometryComposition id="beziers">
  50.           <Path id="bezier3" x="{-bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  51.             <segments>
  52.                <MoveTo x="0" y="0" />
  53.                <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  54.                <LineTo x="{bigWaveWidth}" y="{height}"/>
  55.                <LineTo x="{0}" y="{height}"/>
  56.                <LineTo x="{0}" y="{0}"/>
  57.             </segments>
  58.           </Path>
  59.           <Path id="bezier4" x="{bigWaveWidth/2}" y="{height/2-10}" fill="{bigWaveFill}">
  60.             <segments>
  61.               <MoveTo x="0" y="0" />
  62.               <CubicBezierTo x="{bigWaveWidth}" y="0" cx="{bigWaveWidth/2}" cy="{-waveHeight}" cx1="{bigWaveWidth/2}" cy1="{waveHeight}" />
  63.               <LineTo x="{bigWaveWidth}" y="{height}"/>
  64.               <LineTo x="{0}" y="{height}"/>
  65.               <LineTo x="{0}" y="{0}"/>
  66.             </segments>
  67.           </Path>
  68.  
  69.           <Path id="bezier1" x="{-waveWidth/2}" y="{height/2}" fill="{smallWaveFill1}">
  70.             <segments>
  71.                <MoveTo x="0" y="0" />
  72.                <CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
  73.                <LineTo x="{waveWidth}" y="{height}"/>
  74.                <LineTo x="{0}" y="{height}"/>
  75.                <LineTo x="{0}" y="{0}"/>
  76.             </segments>
  77.           </Path>
  78.           <Path id="bezier2" x="{waveWidth/2}" y="{height/2}" fill="{smallWaveFill2}">
  79.             <segments>
  80.               <MoveTo x="0" y="0" />
  81.               <CubicBezierTo x="{waveWidth}" y="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" />
  82.               <LineTo x="{waveWidth}" y="{height}"/>
  83.               <LineTo x="{0}" y="{height}"/>
  84.               <LineTo x="{0}" y="{0}"/>
  85.             </segments>
  86.           </Path>
  87.          
  88.         </GeometryComposition>     
  89.       </RegularRectangle>
  90.     </GeometryGroup>
  91.  </Surface>
  92. </mx:Application>
]]> http://parpue.net/web/645/feed 1 Flash,Degrafaで簡単に波を表現 (1) http://parpue.net/web/630 http://parpue.net/web/630#comments Tue, 14 Apr 2009 18:02:53 +0000 okm http://parpue.net/?p=630 flash_wave

FlashグラフィックコンポーネントのDegrafaで引き続き遊んでみた。
mxmlを除くスクリプト部分はわずか7行で、簡単な波が！

↓続き

前にかいたのと同じようなことを
Degrafaを使用してやってみました。

Degrafaには３次ベジェ曲線オブジェクトである、CubicBezierがあるので、
それをMXMLで配置して、色と塗りを指定していきます。
CubicBezierでベジェ曲線をひくには、
始点( x0, y0)、終点(x1, y1)、作用点を二つ(cx,cy),(cx1,cy1)を指定します。

EnterFrameイベントで、作成したベジェ曲線オブジェクトを移動していくと、ナミナミできました。

次の記事で、Degrafaで塗りのある波もやってみます。
　　→　Flash,Degrafaで簡単に波を表現 (2)
関連→　FlashグラフィックコンポーネントDegrafaを試す

コードは、すごいシンプルです。

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns="http://www.degrafa.com/2007" width="400" height="220" backgroundColor="#FFFFFF" enterFrame="onEnterHandler(event)">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       [Bindable]private var waveHeight:Number = 50;
  6.       [Bindable]private var waveWidth:Number = 410; //> width
  7.       private function onEnterHandler(event:Event):void{
  8.         if(this.bezier1.x <-this.waveWidth) this.bezier1.x = this.bezier2.x + waveWidth;
  9.         if(this.bezier2.x <-this.waveWidth) this.bezier2.x = this.bezier1.x + waveWidth;
  10.         this.bezier1.x -= 10;
  11.         this.bezier2.x -= 10;
  12.       }
  13.     ]]>
  14.   </mx:Script>
  15.  
  16.   <Surface>
  17.     <!-- 塗りの指定 -->
  18.     <fills>
  19.       <LinearGradientFill id="MainFill" angle="90">
  20.         <GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  21.         <GradientStop ratio="1" alpha="1" color="#DDDDFF"/>
  22.       </LinearGradientFill>
  23.     </fills>
  24.  
  25.     <!-- 線の指定 -->
  26.     <strokes>
  27.       <SolidStroke color="#666688" alpha="1" weight="1" id="BasicStroke"/>
  28.     </strokes>
  29.  
  30.     <!--表示するオブジェクト-->   
  31.     <GeometryGroup>
  32.       <RegularRectangle id="rect" width="{width-2}" height="{height-2}" x="0" y="0" fill="{MainFill}" stroke="{BasicStroke}">   
  33.         <GeometryComposition id="beziers">
  34.           <CubicBezier id="bezier1" x="{-waveWidth/2}" y="{height/2}" x0="0" x1="{waveWidth}" y0="0" y1="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" stroke="{BasicStroke}" />
  35.           <CubicBezier id="bezier2" x="{waveWidth/2}" y="{height/2}" x0="0" x1="{waveWidth}" y0="0" y1="0" cx="{waveWidth/2}" cy="{-waveHeight}" cx1="{waveWidth/2}" cy1="{waveHeight}" stroke="{BasicStroke}"/>
  36.         </GeometryComposition>     
  37.       </RegularRectangle>
  38.     </GeometryGroup>
  39.  </Surface>
  40. </mx:Application>
]]> http://parpue.net/web/630/feed 0 PaperVision3Dで引き続き遊んでみる http://parpue.net/web/552 http://parpue.net/web/552#comments Tue, 07 Apr 2009 17:59:09 +0000 okm http://parpue.net/?p=552 謎のエコ生物。
pic4
*追記　FlashPlayer9だとなんかおかしい。

続き、重いかも
↓

習作でした。
おもしろかったけど・・いったい何をやっていたんだ・・・。寝よう。

　地球のテクスチャデータ
　→　http://www.oera.net/How2/TextureMaps2.htm

]]> http://parpue.net/web/552/feed 1 PaperVision3D Cubeに展開図を貼り付ける http://parpue.net/web/502 http://parpue.net/web/502#comments Tue, 07 Apr 2009 02:07:18 +0000 okm http://parpue.net/?p=502 適当に作り始めた展開図、、、意外と苦戦してしまった。

cube

tenkai

papervision3d思いだしがてら展開図作って貼り付けてみました。

せっかく３D効果なので、影効果もつけてみようかと思ったけどうまくいきませんでした。
どうやらCubeの各面に、別々のMaterialをつけると駄目なようです。

と思ったら、同じように悩んでる人を発見
　→APEIROPHOBIA:ShadedMaterialメモ

面に別々のマテリアルを割り当て↓

>>text
ACTIONSCRIPT:
  1. var mList:MaterialsList = new MaterialsList();     
  2.            
  3.     var texture_top:BitmapData = new BitmapData(300,300);
  4.     texture_top.draw(new top_img);
  5.     //var mat_top:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_top, true) , sdr);   
  6.     var mat_top:BitmapMaterial = new BitmapMaterial(texture_top, true);     
  7.     mat_top.oneSide = false;   
  8.            
  9.     var texture_bottom:BitmapData = new BitmapData(300,300);
  10.     texture_bottom.draw(new bottom_img);
  11.     //var mat_bottom:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_bottom, true) , sdr);
  12.     var mat_bottom:BitmapMaterial = new BitmapMaterial(texture_bottom, true);                       
  13.     mat_bottom.oneSide = false;
  14.    
  15.     var texture_left:BitmapData = new BitmapData(300,300);
  16.     texture_left.draw(new left_img);
  17.     //var mat_left:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_left, true) , sdr);         
  18.     var mat_left:BitmapMaterial = new BitmapMaterial(texture_left, true)
  19.     mat_left.oneSide = false;
  20.    
  21.     var texture_right:BitmapData = new BitmapData(300,300);
  22.     texture_right.draw(new right_img);
  23.     //var mat_right:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_right, true) , sdr);   
  24.     var mat_right:BitmapMaterial = new BitmapMaterial(texture_right, true);
  25.     mat_right.oneSide = false;
  26.    
  27.     var texture_back:BitmapData = new BitmapData(300,300);
  28.     texture_back.draw(new back_img);
  29.     //var mat_back:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_back, true) , sdr);
  30.     var mat_back:BitmapMaterial = new BitmapMaterial(texture_back, true);                       
  31.     mat_back.oneSide = false;
  32.    
  33.     var texture_front:BitmapData = new BitmapData(300,300);
  34.     texture_front.draw(new front_img);
  35.     //var mat_front:ShadedMaterial = new ShadedMaterial( new BitmapMaterial(texture_front, true) , sdr);   
  36.     var mat_front:BitmapMaterial = new BitmapMaterial(texture_front, true);     
  37.     mat_front.oneSide = false;

別々にShadedMaterialを指定すると動きが微妙になります。
うーん・・仕様なのか・・？

]]> http://parpue.net/web/502/feed 2 Flex AdvancedDataGrid 矢印キーでセル移動して編集 http://parpue.net/web/492 http://parpue.net/web/492#comments Thu, 02 Apr 2009 16:30:42 +0000 okm http://parpue.net/?p=492
セル選択後と矢印キーで移動


NumericStepeprで編集して移動
(デフォルトでは矢印キーで数字変えちゃうのでそっちは殺してます)

DataGrid内のセルを矢印キーで選択して編集、というのをやりたくて、
調べて下記リンクのサンプルを見つけたんだけど、Flex 3ではこのままでは使えませんでした。

　→　スプレッドシートのように単一セルを選択、編集できるデータグリッド

もうちょっと調べてみたところ、
DataGridColumn, AdvancedDataGridColumnのitemRenderer, itemEditorプロパティに、
自作のコンポーネントを割り当てればできそう。
→ http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
→ http://www.necst.co.jp/product/ibiz/column/flex/chap17.html

というわけで、itemEditorにTextInputを継承した、TextInputRendererを割り当てて、
カーソルキーイベントを拾うようにして、移動可能とさせます。

GridTest.mxml

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="502" height="220">
  3.     <mx:Script>
  4.         <![CDATA[
  5.             import mx.collections.ArrayCollection;
  6.                  
  7.             [Bindable]
  8.             private var dp_flat:ArrayCollection = new ArrayCollection([
  9.               {col_a:"test_1_1", col_b:"test_2_1", col_c:"test_3_1"},
  10.               {col_a:"test_1_2", col_b:"test_2_2", col_c:"test_3_2"},
  11.               {col_a:"test_1_3", col_b:"test_2_3", col_c:"test_3_3"},
  12.               {col_a:"test_1_4", col_b:"test_2_4", col_c:"test_3_4"},
  13.               {col_a:"test_1_5", col_b:"test_2_5", col_c:"test_3_5"}
  14.             ]);
  15.         ]]>
  16.     </mx:Script>
  17.     <mx :P anel x="10" y="10" width="480" height="204" layout="absolute" title="AdvancedDataGrid">
  18.         <mx:AdvancedDataGrid x="5" y="5" id="test_adg" designViewDataType="flat" width="449" height="152" dataProvider="{dp_flat}" editable="true">
  19.             <mx:columns>
  20.                 <mx:AdvancedDataGridColumn headerText="列 1" dataField="col_a" itemEditor="renderer.TextRenderer"/>
  21.                 <mx:AdvancedDataGridColumn headerText="列 2" dataField="col_b" itemEditor="renderer.TextRenderer"/>
  22.                 <mx:AdvancedDataGridColumn headerText="列 3" dataField="col_c" itemEditor="renderer.TextRenderer"/>
  23.             </mx:columns>
  24.         </mx:AdvancedDataGrid>
  25.     </mx :P anel>
  26. </mx:Application>

TextRenderer.mxml

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" keyDown="onKeydownHandler(event)">
  3. <mx:Script>
  4.     <![CDATA[
  5.         import mx.controls.AdvancedDataGrid;
  6.         import mx.controls.dataGridClasses.DataGridListData;
  7.                
  8.         private function onKeydownHandler(event:KeyboardEvent):void{
  9.             // -> http://livedocs.adobe.com/flex/3_jp/html/help.html?content=cellrenderer_4.html
  10.             var list_data:DataGridListData = DataGridListData(listData);
  11.             var list_owner:AdvancedDataGrid = AdvancedDataGrid(list_data.owner);
  12.             var row_index:Number =  list_data.rowIndex;
  13.             var column_index:Number = list_data.columnIndex;
  14.             var changed:Boolean = false; 
  15.             if(event.keyCode == Keyboard.LEFT){
  16.                 if(column_index> 0 ) {
  17.                     changed = true;
  18.                      column_index = column_index - 1;
  19.                  }
  20.         }else if(event.keyCode == Keyboard.DOWN){
  21.                 if(row_index <list_owner.dataProvider.length - 1 ) {
  22.                     changed = true;
  23.                     row_index = row_index + 1;
  24.                 }
  25.         }else if(event.keyCode == Keyboard.RIGHT){
  26.                 if(column_index <list_owner.columnCount - 1 ) {
  27.                     changed = true;
  28.                     column_index = column_index + 1;
  29.                 }
  30.             }else if(event.keyCode == Keyboard.UP){
  31.                 if(row_index> 0 ) {
  32.                     changed = true;
  33.                     row_index = row_index - 1;
  34.                 }
  35.             }
  36.             if(changed)list_owner.editedItemPosition = {rowIndex:row_index, columnIndex:column_index};
  37.         }   
  38.     ]]>
  39. </mx:Script>
  40. </mx:TextInput>
]]> http://parpue.net/web/492/feed 0 DegrafaでFlexコンポーネントのSkin作成解説ビデオがわかりやすい http://parpue.net/web/473 http://parpue.net/web/473#comments Fri, 27 Mar 2009 01:35:11 +0000 okm http://parpue.net/?p=473 skin_button

http://www.asfusion.com/examples/item/skinning-with-degrafa-1

昨日に引き続き、Degrafa。今度はコンポーネントSkin作ってみようと、
なんか参考になるもんないかなーと、探してみたら、これがわかりやすい。
サンプルプロジェクトファイルもダウンロードできます。

]]> http://parpue.net/web/473/feed 0 FlashグラフィックコンポーネントDegrafaを試す http://parpue.net/web/432 http://parpue.net/web/432#comments Wed, 25 Mar 2009 14:54:56 +0000 admin http://parpue.net/?p=432 MoonGiftで紹介されていたDegrafaを試してみた。

■参考リンク
→Flash向けのグラフィックスフレームワーク「Degrafa」
→http://www.degrafa.org/


公式のサンプルたちがおもしろい
これでFlex標準コンポーネントのスキンも作成できるようです。
Flexコンポーネント使いつつも我流Flex画面とかもできます。

ついでに見つけた反射効果のライブラリも使いました
→Live “reflection” component

■作ってみたデモ

反射とかやったせいでちょっと重い・・・。オブジェクトの描画は全部ＭＸＭＬだけで行ってます。

公式のサンプルをいくつか落として、ドキュメントも適当に読んで、
ちょっと理解した程度ですが、
MXMLで、線や、円などの描画オブジェクトを配置していき、
塗りや、線の太さなどもMXMLで定義できるようなものだと思います。

>>text
XML:
  1. <mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
  2.        
  3.     <degrafa:Surface>
  4.         <degrafa:fills>

UIComponentを継承しているSurfaceを用意して、
その上に塗りの定義のfills,線(ストローク)の定義であるstrokes,
描画オブジェクトGeometryGroupを定義していくことで、描画していく。

>>text
XML:
  1. <degrafa:fills>
  2.             <degrafa:LinearGradientFill id="MainFill" angle="90">
  3.                 <degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  4.                 <degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
  5.         </degrafa:LinearGradientFill>

グラデーション塗りの定義をしてから、

>>text
XML:
  1. <degrafa:GeometryGroup>
  2.             <degrafa:RoundedRectangle id="aa" width="300" height="248" x="40" y="10" cornerRadius="15" fill="{MainFill}" stroke="{BasicStroke}">

描画オブジェクトに塗りの設定を適用していく。

おもしろいけど、、、結構めんどくさい。

でもこれで、MXMLコンポーネントを手軽に作るにはいいかもしれない、です。

以下全部

>>text
XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:degrafa="http://www.degrafa.com/2007"
  3.     xmlns:refrector="com.rictus.reflector.*" width="410" height="400" color="#000000" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#010101, #010101]" verticalScrollPolicy="off" horizontalScrollPolicy="off" xmlns:geometry="com.degrafa.geometry.*" creationComplete="startHandler(event);">
  4.        
  5.     <mx:Canvas id="main_canvas" x="5" y="5" width="400" height="258" verticalScrollPolicy="off" horizontalScrollPolicy="off">
  6.        
  7.     <degrafa:Surface>
  8.         <degrafa:fills>
  9.             <degrafa:LinearGradientFill id="MainFill" angle="90">
  10.                 <degrafa:GradientStop ratio="0" alpha="1" color="#FFFFFF"/>
  11.                 <degrafa:GradientStop ratio="1" alpha="1" color="#DDDDDD"/>
  12.             </degrafa:LinearGradientFill>
  13.            
  14.             <degrafa:LinearGradientFill id="TextFill" angle="90">
  15.                 <degrafa:GradientStop ratio="0" alpha="1" color="#AAAAAA"/>
  16.                 <degrafa:GradientStop ratio="1" alpha="1" color="#444444"/>
  17.             </degrafa:LinearGradientFill>
  18.            
  19.             <degrafa:SolidFill id="CircleFill1" color="#000044"/>
  20.             <degrafa:SolidFill id="CircleFill2" color="#FFFFFF"/>
  21.             <degrafa:SolidFill id="CircleFill3" color="#333333"/>
  22.         </degrafa:fills>
  23.         <degrafa:strokes>
  24.             <degrafa:SolidStroke color="#000000" alpha="1" weight="1" id="BasicStroke"/>
  25.  
  26.             <degrafa:SolidStroke color="#222222" alpha="1" weight="3" id="CircleStroke1"/>
  27.  
  28.             <degrafa:LinearGradientStroke weight="4" id="insetEdge" pixelHinting="true">
  29.                 <degrafa:GradientStop ratio="0" alpha=".3" color="#366079"/>
  30.                 <degrafa:GradientStop ratio=".5" alpha="0" color="#366079"/>
  31.                 <degrafa:GradientStop ratio="1" alpha=".3" color="#366079"/>
  32.             </degrafa:LinearGradientStroke>
  33.  
  34.  
  35.      </degrafa:strokes>
  36.         <degrafa:GeometryGroup>
  37.             <degrafa:RoundedRectangle id="aa" width="300" height="248" x="40" y="10" cornerRadius="15" fill="{MainFill}" stroke="{BasicStroke}">
  38.                 <degrafa:RasterText fill="{TextFill}" x="55" y="210 " fontSize="34" text="Hello!!Degrafa!" bold="true" autoSize="left"/>
  39.                
  40.                 <degrafa:GeometryComposition x="100" y="150" id="circle">
  41.                     <degrafa:Circle radius="30" fill="{CircleFill1}" stroke="{CircleStroke1}" x="10" y="10">
  42.               <degrafa:Circle  radius="25" fill="{CircleFill2}" stroke="{CircleStroke1}" x="5" y="5">
  43.                <degrafa:Circle  radius="15" fill="{CircleFill3}" stroke="{CircleStroke1}" x="10" y="10">
  44.               </degrafa:Circle>
  45.               </degrafa:Circle>
  46.                  <degrafa:filters>
  47.              <mx:GlowFilter alpha="0.5" color="0x777777" blurX="10" blurY="10" strength="3" inner="false" />
  48.                  </degrafa:filters>
  49.  
  50.                  </degrafa:Circle>
  51.             </degrafa:GeometryComposition>     
  52.        
  53.             </degrafa:RoundedRectangle>
  54.         </degrafa:GeometryGroup>
  55.     </degrafa:Surface>
  56.     </mx:Canvas>
  57.    
  58.   <refrector:Reflector target="{main_canvas}" alpha=".3" falloff="{(this.circle.y+100)}" id="reflector"/>
  59.  
  60.   <mx:Script>
  61.     <![CDATA[
  62.       private var add_y:Number = 3;
  63.       private var add_x:Number = 3;
  64.      
  65.       function startHandler(event:Event):void{
  66.         this.addEventListener(Event.ENTER_FRAME, this.onEnterHandler);
  67.       }
  68.      
  69.       function onEnterHandler(event:Event):void{
  70.           if(circle.x <-3) this.add_x = -add_x;
  71.             else if(circle.x> 225) this.add_x = -add_x;
  72.             if(circle.y <0) this.add_y = -add_y;
  73.             else if(circle.y> 177) this.add_y = -add_y;
  74.             circle.x += add_x;
  75.             circle.y += add_y;
  76.       }
  77.      
  78.     ]]>
  79.   </mx:Script>
  80. </mx:Application>
]]> http://parpue.net/web/432/feed 0