<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>GANCHIKU.com &#187; flex</title>
	<atom:link href="http://ganchiku.com/category/flex/feed" rel="self" type="application/rss+xml" />
	<link>http://ganchiku.com</link>
	<description>renewal, baby!</description>
	<lastBuildDate>Sun, 05 Feb 2012 12:32:58 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>CoverFlowってイカしてるね。</title>
		<link>http://ganchiku.com/2008/07/i_like_coverflow_interface.html</link>
		<comments>http://ganchiku.com/2008/07/i_like_coverflow_interface.html#comments</comments>
		<pubDate>Wed, 02 Jul 2008 11:56:00 +0000</pubDate>
		<dc:creator>shin</dc:creator>
				<category><![CDATA[flex]]></category>

		<guid isPermaLink="false">http://www.ganchiku.com/2008/07/i_like_coverflow_interface.html</guid>
		<description><![CDATA[この4月から私もマカーになったので、CoverFlowのインタフェースにも慣れてきた（と、言いつつほとんど仮想マシンのubuntu使っているけど）。また、iPodもCoverFlowなインタフェースを持っているので、ちょ &#8230; <a href="http://ganchiku.com/2008/07/i_like_coverflow_interface.html">続きを読む <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>この4月から私もマカーになったので、CoverFlowのインタフェースにも慣れてきた（と、言いつつほとんど仮想マシンのubuntu使っているけど）。また、iPodもCoverFlowなインタフェースを持っているので、ちょっと作ってみるのがいいんじゃない？ということで、簡単にFlexで作ってみた。</p>
<p>ネタは、写真をCoverFlowで表示するというもの。<a href="http://kozy.heteml.jp/l4l/2008/03/flexcoverflow.html">Flex CoverFlowで遊んでみた &#8211; l4l</a>を参考にして、作ってみた。なんかsearchResultのループで回すところがなんか納得できなかったので、そこだけは自分で簡単にやってみた。</p>
<p>しかし、元ネタのサンプル<a href="http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel-component-and-vertical-coverflow/">Flex CoverFlow performance improvement, Flex Carousel Component, and Vertical CoverFlow</a>を見ると、Carouselの方がイカしているじゃない？というわけでこちらを採用。Carouselという言葉の訳では、回転木馬らしいのだけども、「回転木馬」って言われてもしっくりこないので、とりあえずCoverFlowの亜種と言ったらいいのかしらん。</p>
<p>で、こんな感じ。例によって、写真は、私のホンジュラスのダイビングの成果。<br />
<embed width="650" height="400" flashvars="http://www.ganchiku.com/playgrounds/coverflow/=" base="http://www.ganchiku.com/playgrounds/coverflow/" menu="false" wmode="window" quality="high" bgcolor="#FFFFFF" name="id3" id="id3" src="http://www.ganchiku.com/playgrounds/coverflow/GLite.swf" type="application/x-shockwave-flash"/></p>
<p>サーバサイドのソースは、こう。単純にディレクトリの中のファイルを適当なXMLで出力しているだけ。</p>
<pre class="brush:php">
<?php
$dir = 'diving';
$doc = new DomDocument('1.0', 'UTF-8');
$doc->formatOutput = true;

$path = 'http://' . $_SERVER['HTTP_HOST'] . '/playgrounds/coverflow';
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        $root = $doc->createElement('images');
        $root = $doc->appendChild($root);
        while (($file = readdir($dh)) !== false) {
            if ($file === '..' or $file === '.') {
                continue;
            }
            $image = $doc->createElement('image', "$path/$dir/$file");
            $root->appendChild($image);
        }
        closedir($dh);
    }
}
echo $doc->saveXML();
</pre>
<p>そして、Flex側のコードは、こんな感じ。Doug McCuneさんのswcファイルはインクルードしておく。</p>
<pre class="brush:xml">
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:coverflow="com.dougmccune.coverflow.*"
	layout="vertical" horizontalAlign="center" verticalAlign="middle" width="600" height="400"
	xmlns:containers="com.dougmccune.containers.*"
      initialize="searchService.send()">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.collections.XMLListCollection;
			[SWF(frameRate="24")]
			import mx.core.Container;
			import mx.events.FlexEvent;
			import mx.controls.Image;
			import mx.rpc.events.ResultEvent
			[Bindable]
			private var serverURL:String = "images.php";
			[Bindable]
			private var xml:XMLListCollection;
    		private function getResult(event:ResultEvent):void
			{
				xml = new XMLListCollection(XML(event.result)..image);
				coverflow.selectedIndex=int(xml.length/2);
			}
			private function test(event:Event):void
			{
				mx.controls.Alert.show(event.target.parent.source);
			}
		]]&gt;
	</mx:Script>
	<mx:HTTPService id="searchService" url="{serverURL}" resultFormat="e4x" result="getResult(event)" />
	<mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="600" maxHeight="400">
		<containers:CarouselContainer id="coverflow" width="100%" height="100%"
			horizontalGap="10" borderStyle="solid" backgroundColor="0x000000"
			reflectionEnabled="true" autoUpdateFlexMaterials="true">
			<mx:Repeater id="rp" dataProvider="{xml}">
        			<mx:Box name="p{rp.currentItem}" width="300" height="225" horizontalScrollPolicy="off" verticalScrollPolicy="off" paddingTop="20">
					<mx:Image horizontalAlign="center" name="img{rp.currentItem}"
						 width="250" height="225" useHandCursor="true" buttonMode="true"
						  source="{rp.currentItem}"  click="test(event)" />
					</mx:Box>
			</mx:Repeater>
		</containers:CarouselContainer>
		</mx:VBox>
</mx:Application>
</pre>
<p>画像をクリックするとtestという関数を呼び出してalertを出すようにしているのだが、その関数で画像を大きくするとかの処理を書いたら、もう少し使える仕組みになるかな。</p>
<p>うーむ。しかし、いい写真だなぁ。</p>
]]></content:encoded>
			<wfw:commentRss>http://ganchiku.com/2008/07/i_like_coverflow_interface.html/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

