parpue.net » WEB http://parpue.net Flash, Flex, デザイン等自分の好きなことを好きなようにやってます Wed, 12 Aug 2009 17:46:04 +0000 http://wordpress.org/?v=2.9.2 ja hourly 1 tumblrの様子が変わっているようなので再起。 http://parpue.net/web/1126 http://parpue.net/web/1126#comments Wed, 12 Aug 2009 17:45:08 +0000 okm http://parpue.net/?p=1126 tumb

thumblrが会社でちょっと話題になった。
１年半前くらいに登録して、ちょっと遊んでからずっと放置していたアカウント、
長いことログインなしだからといって特に無効になったりしていなかったので
久々にログインしてみた。
→ http://parpue.tumblr.com/

いろいろと貼り付けられるスクラップブックのようなものだと思っていたけど、
TwitterのようにFollow機能がついたり、
ひとのブログ記事をそのままReblog、”再掲載してコメントを追加”したりできるように進化している。

Reblog、手軽で良い。
スクラップブック的なものだったころから著作的なもの気になってたんだけど、
Tumblrはその辺りはあんまり気にせず進化の道を辿ったんだろうか。

デザインは、ちょっと独自のテンプレートを覚えなきゃいけなかったりで、
ちょっとめんどくさい。
（MySpaceの中のデザインテンプレート作りに近いかな。）

theme
(専用ページでゴリゴリ編集していく）

めんどくさい人は、利用できるテンプレートがたくさんあったので、
そのまま利用してもいいし、
それを編集していくことで自分好みに変えていくこともできる。

こういう制限があるなかでのCSSでのデザインは、
結構燃える体質なので、できる限り頑張ってみた。

なんとなく最近のTumblrがどんな風に進化してきたか、
わかってきた気がするので、
ちょくちょく更新して、遊んでみようと思う。

]]> http://parpue.net/web/1126/feed 0 マッシュアップ地図アルバムを作ってみる[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 wordpress 2.8.1 にしたら ShadowBoxが動かない・・・と思ったら http://parpue.net/wordpress/1020 http://parpue.net/wordpress/1020#comments Mon, 13 Jul 2009 17:07:12 +0000 okm http://parpue.net/?p=1020 同様に困ってる人発見。
http://wordpress.org/support/topic/284028

ShadowBox最新版にして、一度プラグインを無効にして、
再度有効にしたら動きました。

困ってる人、お試しください。

]]> http://parpue.net/wordpress/1020/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で３Dダンボー http://parpue.net/web/601 http://parpue.net/web/601#comments Sat, 11 Apr 2009 04:16:43 +0000 okm http://parpue.net/?p=601 danboo

これも誰かやってそうだけど、簡単そうな題材だったから・・・

例によってFlashPlayer１０以上で確認しています。

■ ダンボーDemo

■ Demo2 ぬるぬる動かしてみた

danbobobo
■Demo3 カメラもマウスに追従、重いかも

PaperVision3D、手軽でおもしろいなー







danbo_measure
きっちりと計測しました！

]]> http://parpue.net/web/601/feed 0 MacでRemember the Milk のタスクを気軽にデスクトップに表示する http://parpue.net/web/566 http://parpue.net/web/566#comments Thu, 09 Apr 2009 16:17:22 +0000 okm http://parpue.net/?p=566 rmt_pict

今までRemember the milkをFirefoxのサイドバーに表示していたんだけど、
サイドバーには、お気に入り表示したり、履歴表示したり、
つい見ないでいたら忘れてしまうタスクも多かったり。。。

とりあえず、デスクトップにウィンドウで常駐したくなったので、
いろいろ方法を考えてみた。


その１．　ダッシュボードに表示

ダッシュボードに表示するRTMのウィジェットあったんだけど、
個人的には、FireFoxのサイドバーに入れていたiGoogle用画面の方が使いやすい。

↓そこでみたいなHTMLファイルを作成して、ローカルに保存し、

>>text
HTML:
  1. <html>
  2. <object type="text/html" data="http://www.rememberthemilk.com/services/modules/googleig/" width="300" height="500">
  3. </object>
  4. </html>

pic1
safariでWEBクリップしてしまう。

pic2
ダッシュボードに表示できた。

ウィジェットは、デスクトップにも表示できる。
でもデスクトップに表示すると常に最前面にいて今度はちょっとウザい。。。

chromeみたいなアプリケーション化できないのかなぁ・・・と思ってググってみた。

その２. Firefox のプラグイン　Prism for Firefox　を使う。

すごいいいのがあった。。。→　Prisom for Firefox

chromeのようにWEBアプリを単体ウィンドウで起動できる。

pic3
この期限切れの山をどうにかしろと・・・。

Dockにも登録でき、RTM専用アプリのように動作する。
これで、すっごい満足しました。

あーもっとなんか楽な方法ある気がしてならない。

]]> http://parpue.net/web/566/feed 2 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