Hatena::Groupactionscript

ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記

2009年03月16日 月曜日

そろそろFlexBuilderのお試し期間が終了する

| 13:40 | そろそろFlexBuilderのお試し期間が終了する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - そろそろFlexBuilderのお試し期間が終了する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 そろそろFlexBuilderのお試し期間が終了する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版

そろそろFlexBuilderのお試し期間が終了するので、買おうかと思います。

はてなフォトライフの画像を表示してみる(4)小さい画像から大きい画像を表示する

| 08:16 | はてなフォトライフの画像を表示してみる(4)小さい画像から大きい画像を表示する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - はてなフォトライフの画像を表示してみる(4)小さい画像から大きい画像を表示する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 はてなフォトライフの画像を表示してみる(4)小さい画像から大きい画像を表示する - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

表示できるようになって、面白くなってきた

やってみたこと

  • 小さい画像をクリックしたら大きい画像を表示するようにしてみました。
  • 大きい画像をクリックしたら、大きい画像は消えるようにした
    • this.parent.removeChild(this)
    • 一旦、親要素からremoveChildをするのってJavaScriptに似ている

課題

  • 写真の情報を大きい画像とともに表示したい
  • もう一度シャッフルすようなボタンが欲しい

ソース(FhatenaViewer.as)

package
{
	import flash.display.DisplayObject;
	import flash.display.StageScaleMode;
	import flash.events.*;
	import flash.net.*;	
	import mx.core.UIComponent;	
	import photo.Photo;
	import photo.PhotoInfomation;

	public class FhatenaViewer extends UIComponent
	{
		public var rdf:Namespace    = new Namespace("rdf",    "http://www.w3.org/1999/02/22-rdf-syntax-ns#");
		public var dc:Namespace     = new Namespace("dc",     "http://purl.org/dc/elements/1.1/");
		public var hatena:Namespace = new Namespace("hatena", "http://www.hatena.ne.jp/info/xmlns#");

		public function FhatenaViewer()
		{
			createPhoto('http://f.hatena.ne.jp/macanai/rss');
		}

		public function onLoading(event:ProgressEvent):void
		{
		}

		public function createPhoto(feed:String):void
		{
			var loader:URLLoader = new URLLoader();
			loader.load(new URLRequest(feed));
			loader.addEventListener(Event.COMPLETE, createPhotoByXML);
			loader.addEventListener(ProgressEvent.PROGRESS, onLoading);
		}

		public function createPhotoByXML(event:Event):void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.stageFocusRect = false;
			var feed:XML = new XML(event.target.data);
			for each(var item:Object in feed.*::item){
				createPhotoItem(item.hatena::imageurlmedium,item);
			}
		}

		public function createPhotoItem(url:String,item:Object):void
		{
				var p:Photo = new Photo();
				p.property = item;
				p.x = (stage.width - p.width) * Math.random();
				p.y = (stage.height - p.height) * Math.random();
				addChild(p);
				p.loadImage(url);
				p.addEventListener(FocusEvent.FOCUS_IN,pFocusInHandler);
		}

		private function pFocusInHandler(event:FocusEvent):void
		{
			setChildIndex(event.currentTarget as DisplayObject, numChildren - 1);
			var p:PhotoInfomation = new PhotoInfomation();
			p.property = event.currentTarget.property;
			addChild(p);
			p.loadImage(event.currentTarget.property.hatena::imageurl);
			
		}

	}
}

ソース(photo/PhotoInfomation.as)

package photo
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	
	public class PhotoInfomation extends Sprite
	{
		public var property:Object;

		public function PhotoInfomation()
		{
		}

		public function loadImage(url:String):void
		{
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadhandler);
			loader.load(new URLRequest(url));
		}

		public function loadhandler(event:Event):void
		{
			addChild(event.target.loader);
			addEventListener(MouseEvent.CLICK, clickListener);
		}
		
		private function clickListener(event:Event):void
		{
			this.parent.removeChild(this);
		}
	}
}

2009年03月15日 日曜日

はてなフォトライフの画像を表示してみる(3)

| 19:58 | はてなフォトライフの画像を表示してみる(3) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - はてなフォトライフの画像を表示してみる(3) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 はてなフォトライフの画像を表示してみる(3) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

課題

  • stageオブジェクト?の呼ぶタイミングがわからない
    • インスタンス時だとnullになっている
  • フォーカス
    • stage.stageFocusRectについてfalseにしないと、黄色い四角の枠で囲まれます
    • フォーカスを合わせた時って、クリックと何が違うの?と思ったけれど、タブキーなどでもフォーカスは合わせられるんだよね(たしか)
  • stage.scaleMode
    • stageの幅が変動したときにイベントが発生するらしい
    • この時の話に関わるらしい
  • setChildIndex
  • 傾き

実際の結果

f:id:d4-1977:20090315215852p:image

元ソース(FhatenaViewer.as)

package
{
	import flash.display.DisplayObject;
	import flash.display.StageScaleMode;
	import flash.events.*;
	import flash.net.*;
	import mx.controls.Alert;
	import mx.core.UIComponent;
	import photo.Photo;

	public class FhatenaViewer extends UIComponent
	{
		public function FhatenaViewer()
		{
			createPhoto('http://f.hatena.ne.jp/macanai/rss');
		}

		public function onLoading(event:ProgressEvent):void
		{
		}

		public function createPhoto(feed:String):void
		{
			var loader:URLLoader = new URLLoader();
			loader.load(new URLRequest(feed));
			loader.addEventListener(Event.COMPLETE, createPhotoByXML);
			loader.addEventListener(ProgressEvent.PROGRESS, onLoading);
		}

		public function createPhotoByXML(event:Event):void
		{
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.stageFocusRect = false;

			var rdf:Namespace    = new Namespace("rdf",    "http://www.w3.org/1999/02/22-rdf-syntax-ns#");
			var dc:Namespace     = new Namespace("dc",     "http://purl.org/dc/elements/1.1/");
			var hatena:Namespace = new Namespace("hatena", "http://www.hatena.ne.jp/info/xmlns#");
			var feed:XML = new XML(event.target.data);
			for each(var item:Object in feed.*::item){
				createPhotoItem(item.hatena::imageurl,item.*::title);
			}
		}

		public function createPhotoItem(url:String,title:String):void
		{
				var p:Photo = new Photo();
				p.name = title;
				p.x = (stage.width - p.width) * Math.random();
				p.y = (stage.height - p.height) * Math.random();
				addChild(p);
				p.loadImage(url);
				p.addEventListener(FocusEvent.FOCUS_IN,pFocusInHandler);
		}

		private function pFocusInHandler(event:FocusEvent):void
		{
			setChildIndex(event.currentTarget as DisplayObject, numChildren - 1);
		}

	}
}

元ソース(photo/Photo.as)

package photo
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	
	public class Photo extends Sprite
	{		
		public function Photo()
		{
		}
		
		public function loadImage(url:String):void
		{
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadhandler);
			loader.load(new URLRequest(url));
		}

		public function loadhandler(event:Event):void
		{
			addChild(event.target.loader);
			rotation = Math.random() * 30 - 10;
			addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
		}

		private function mouseDownHandler(event:MouseEvent):void
		{
			stage.focus = this;
		}
	}
}

2009年03月13日 金曜日

はてなフォトライフの画像を表示してみる(2)RSSから画像を表示

| 08:36 | はてなフォトライフの画像を表示してみる(2)RSSから画像を表示 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - はてなフォトライフの画像を表示してみる(2)RSSから画像を表示 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 はてなフォトライフの画像を表示してみる(2)RSSから画像を表示 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

感想

  • 最初、URLLoaderとLoaderを間違えていた。ここの違いがあるらしい
  • XMLのnamespaceについては、色々とあるけれど、Namespaceを宣言すれば解決
  • 結構、素早く表示されて驚きます
  • photo.asをいじって、表示位置をランダムにした(これがないと、写真が多いと、何が表示されているのかわからない)
  • Stageの取得がいまいちわからない...
  • event.target.dataで取得したデータをnew XML(stringデーター)でXMLオブジェクトに出来るのを忘れていた

課題

  • 写真一つ一つに対するイベント
  • 写真の読み込みスピード
  • 並び替えとか
  • ソースを書くだけじゃなくて

FhatenaViewerソース(.as)

package
{
	import flash.events.*;
	import flash.net.*;
	import photo.Photo;
	import mx.core.UIComponent;

	public class FhatenaViewer extends UIComponent
	{
		public function FhatenaViewer()
		{
			createPhoto('http://f.hatena.ne.jp/twitter/rss');
		}

		public function createPhoto(feed:String):void
		{
			var loader:URLLoader = new URLLoader();
			loader.load(new URLRequest(feed));
			loader.addEventListener(Event.COMPLETE, createPhotoByXML);
			loader.addEventListener(ProgressEvent.PROGRESS, onLoading);
		}

		public function onLoading(event:ProgressEvent):void
		{
		}

		public function createPhotoByXML(event:Event):void
		{
			var rdf:Namespace    = new Namespace("rdf",    "http://www.w3.org/1999/02/22-rdf-syntax-ns#");
			var dc:Namespace     = new Namespace("dc",     "http://purl.org/dc/elements/1.1/");
			var hatena:Namespace = new Namespace("hatena", "http://www.hatena.ne.jp/info/xmlns#");
			var feed:XML = new XML(event.target.data);
			for each(var item:Object in feed.*::item){
				trace(item.hatena::imageurl);
			var p:Photo = new Photo();
			addChild(p);
			p.loadImage(item.hatena::imageurl);
			}
		}
	}
}

2009年03月11日 水曜日

はてなフォトライフの画像を表示してみる(1)

| 08:31 | はてなフォトライフの画像を表示してみる(1) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - はてなフォトライフの画像を表示してみる(1) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 はてなフォトライフの画像を表示してみる(1) - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

id:secondlifeさんのWeb+DBのソースを写経して、Flex3で動くようにしてみました

写経してみて気づいたことがいくつかあります。

更に進めます

contentloaderinfo

  • 画像の読み込みをイベントリスナーに伝えるために使用する
参考

Stage

ソース(.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*" layout="absolute" backgroundColor="0x000000">
	<comp:FhatenaViewer>
	</comp:FhatenaViewer>
</mx:Application>

photo.Photoソース(.as)

package photo
{
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.net.URLRequest;
	
	public class Photo extends Sprite
	{
		public var _url:String;
		public var hoge:String = 'hogehoge'
		
		public function Photo()
		{
		}
		
		public function loadImage(url:String):void
		{
			_url = url;
			var loader:Loader = new Loader();
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadhandler);
			loader.load(new URLRequest(url));
		}

		public function loadhandler(event:Event):void
		{
			addChild(event.target.loader);
		}

	}
}

FhatenaViewerソース(.as)

package
{
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import mx.core.UIComponent;
	import photo.Photo;

	public class FhatenaViewer extends UIComponent
	{
		public function FhatenaViewer()
		{
			//stage.align          = StageAlign.TOP_LEFT;
			//stage.scaleMode      = StageScaleMode.NO_SCALE;
			//stage.stageFocusRect = false;
			createPhoto('http://img.f.hatena.ne.jp/images/fotolife/d/d4-1977/20051221/20051221222742.jpg');
		}
		
		public function createPhoto(url:String):void
		{
			var p:Photo = new Photo();
			addChild(p);
			//trace(p.hoge);
			p.loadImage(url);
		}
	}
}

AleksandraAleksandra2012/12/27 07:27I came, I read this article, I conqueerd.

gpatpazqtgpatpazqt2012/12/30 10:37vXXba7 , [url=http://ugnjonmpgolm.com/]ugnjonmpgolm[/url], [link=http://uqoqpxvdpxoh.com/]uqoqpxvdpxoh[/link], http://ncjugpatuweu.com/

CrazyboysCrazyboys2015/09/30 15:11That's an ingntlileet answer to a difficult question xxx

IyanIyan2015/10/09 07:34I'm <a href="http://zpkkmxkh.com">greufatl</a> you made the post. It's cleared the air for me.

FeryFery2015/10/09 11:57That's a creative answer to a diiufcflt question http://srfgfetq.com [url=http://eqxjccbgl.com]eqxjccbgl[/url] [link=http://kkhwwykszn.com]kkhwwykszn[/link]

RuvellRuvell2015/10/10 06:40<a href="http://lquurpobdf.com">Todwouhcn!</a> That's a really cool way of putting it!

ConnieConnie2015/10/12 07:11Clear, inortmafive, simple. Could I send you some e-hugs? http://wykcxofwm.com [url=http://naoqqyx.com]naoqqyx[/url] [link=http://qgrqgqo.com]qgrqgqo[/link]

2009年03月09日 月曜日

ProgressEvent(4)描画の話2

| 00:54 | ProgressEvent(4)描画の話2 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 を含むブックマーク はてなブックマーク - ProgressEvent(4)描画の話2 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 ProgressEvent(4)描画の話2 - ActionScript(AS3)やFlexを勉強しようと思ってはじめた日記 のブックマークコメント

FlexBuilderでtraceの結果を見ながら、うなっていたのです。でも、FlexBuilderのtraceじゃなく、コンパイルをした結果だけを見るのであれば、動きとしては間違っていない。ただ、traceとはずれているんです。どうなんだろう、これでいいのかなあ。ちょっと深入りしそうな話なので、今回は、ここまでにしておこう(きっと、また困る時が来ると思う)。

疑問まとめ

  • イベントの順番を意識する
  • イベントと描画の関係を知る
  • UIComponetを継承すると、さまざまなプロパティは、set/getになっている時がある(マニュアル必須)
  • コンポーネント同士の連携はどうしたらいいのか?
  • loading処理は、ProgressBarでも、いいような気はする(でもなあ...)