AIRでウェブサービスと連携して画像を表示するアプリケーションの作成 その3
displayメソッド
displayメソッドでは、calculateScaleにより計算した拡大率を取得し、その値をBitmapLoaderに与えることで、縮小した画像を得ます。次に、positionShitaにより画像を表示する角度から表示位置を計算し、その位置に画像を表示します。
_player_namesや_profiles、_records、_commentsがNULLでなければ、中央に表示している野球選手の名前やプロフィール、記録、コメントを表示します。TextFormatクラスは字を太字にしたり、文字の色を変えるために使用しています。
CircleDisplay.as displayメソッド
//************************************************************* // 回転後の再表示を行なっています。 //************************************************************* private function display():void { for(var i:uint = 0; i < _image_urls.length; i++) { var scale:Number = calculateScale( (ALL_DIRECTION/_image_urls.length)*i); var _bitmap_loader:BitmapLoader; _bitmap_loader = new BitmapLoader(_image_urls[i], scale); positionShita(_bitmap_loader, (ALL_DIRECTION/_image_urls.length)*i); addChild(_bitmap_loader); _bitmaps.push(_bitmap_loader); } if (_player_names != null) { _text_field_player_name.text = _player_names[0]; var pp_formatter:TextFormat = new TextFormat(); pp_formatter.bold = true; pp_formatter.color = 0x000000; _text_field_player_name.setTextFormat(pp_formatter); } if (_profiles != null) { _text_field_profile.text = _profiles[0]; var p_formatter:TextFormat = new TextFormat(); p_formatter.bold = true; p_formatter.color = 0xFF00FF; _text_field_profile.setTextFormat(p_formatter); } if (_records != null) { _text_field_record.text = _records[0]; var r_formatter:TextFormat = new TextFormat(); r_formatter.bold = true; r_formatter.color = 0x00FFFF; _text_field_record.setTextFormat(r_formatter); } if (_comments != null) { _text_field_comment.text = _comments[0]; var c_formatter:TextFormat = new TextFormat(); c_formatter.bold = true; _text_field_comment.setTextFormat(c_formatter); } }
calculateScaleメソッド
shita * (Math.PI / 180)により、角度をラジアンに変換します。Y_ORIGIN*(1+Math.cos(rad))/(Y_ORIGIN*2)により画像の拡大率を計算します。(Y_ORIGIN*2)は画像が見えやすくなるように微調整した補正値です。if (scale <= 0.4)により、画像が元の大きさの40％未満にならないようにしています。
CircleDisplay.as calculateScaleメソッド
//************************************************************* // 各画像の位置により、縮小率を計算します。 //************************************************************* private function calculateScale(shita:uint):Number { var rad:Number = shita * (Math.PI / 180); var scale:Number = Y_ORIGIN*(1+Math.cos(rad))/(Y_ORIGIN*2); if (scale <= 0.4) { return 0.4; } else { return scale; } }
positionShitaメソッド
X_ORIGIN*(1+Math.sin(rad))とY_ORIGIN*(1+Math.cos(rad))は円上の画像の位置を表しています。楕円形にするために、xoffsetとyoffsetを加えています。
CircleDisplay.as positionShitaメソッド
//************************************************************* // 回転角により画像の位置を計算します。 //************************************************************* private function positionShita(_ball:BitmapLoader, shita:uint):void { // オフセットを計算します。 var scale:Number = calculateScale(shita); var xoffset:Number = (160*(1 - scale))/4; var yoffset:Number = 0; var rad:Number = shita * (Math.PI / 180); _ball.x = X_ORIGIN*(1+Math.sin(rad)) + xoffset; _ball.y = Y_ORIGIN*(1+Math.cos(rad)) + yoffset; _ball._shita = shita; }
画像の回転
rightHandleClickとleftHandleClickメソッドにより画像の回転を制御しています。どちらのメソッドもEvent.ENTER_FRAMEイベントを使用することで、一定時間画像を回転させます。
CircleDisplay.as rightHandleClickメソッド
//************************************************************* // 回転するためのボタンが押下された場合に、動作します。 //************************************************************* private function rightHandleClick(event:MouseEvent):void { addEventListener(Event.ENTER_FRAME, onEnterFrame); }
onEnterFrameおよびonLeftEnterFrameメソッドでは、moveやleftMoveメソッドを呼び出すことで画像を回転させ、回転が終わったら画像を再描画しています。
CircleDisplay.as onEnterFrameメソッド
//************************************************************* // 回転するためのボタンが押下された場合に、一定時間動作します。 // 次の固定位置に移動後、本メソッドの処理が止まることで、 // Revolverの動きを実現しています。 //************************************************************* private function onEnterFrame(event:Event):void{ index++; move(index); if (index == SPEED) { index = 0; removeEventListener(Event.ENTER_FRAME, onEnterFrame); _image_urls = right_move_array(_image_urls); if (_player_names != null) { _player_names = right_move_array(_player_names); } if (_profiles != null) { _profiles = right_move_array(_profiles); } if (_records != null) { _records = right_move_array(_records); } if (_comments != null) { _comments = right_move_array(_comments); } // 画面上のイメージのクリア for(var i:uint = 0; i < _bitmaps.length; i++) { removeChild(_bitmaps[i]); } _bitmaps = new Array(); display(); } }
_image_urlsや_player_names、_profiles、_records、_commentsの配列の0番目を、中央にある画像やプロフィールとしています。そのため、画像を回転させた場合、その配列の内容をずらす必要があります。配列の内容をずらしているのがleft_move_arrayやright_move_arrayメソッドです。
CircleDisplay.as left_move_arrayメソッド
//********************************************************** // 時計回りに配列をずらします。 //********************************************************** private function left_move_array(taisho:Array):Array { var temp:Array = new Array(); if (taisho.length > 1) { temp.push(taisho[1]); } for(var i:uint = 2; i < taisho.length; i++) { temp.push(taisho[i]); } temp.push(taisho[0]); return temp; }
画面の作成
これまでBitmapLoaderクラスやRightTriangleButtonなどを基礎として、画像を楕円形に並べて表示するCircleDisplayクラスを作成してきました。
ここでは、CircleDisplayクラスを使用して、実際に画像を画面上に表示するためのコーディングを行います。画像や選手の情報はウェブサービスから取得します。
mst_baseball_player.mxml
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
height="600" width="900"
creationComplete="fnCreationComplete()"> <mx:Script source="mst_baseball_player_list_function.as" /> <mx:Button x="10"y="10"width="50" height="20" click="buttonClick();"
id="retrievalButton" label="検索" labelPlacement="left" /> </mx:Application>
mst_baseball_player_list_function.as
import mx.controls.Alert; import mx.rpc.soap.WebService; import mx.rpc.soap.LoadEvent; import mx.rpc.Fault; import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; import mx.controls.SWFLoader; private var webService:WebService; private var _circle_display:CircleDisplay; private var _circle_display_sl:SWFLoader; // 野球選手の画像のURL private var _image_urls:Array; // 野球選手の名前 private var _player_names:Array; // 野球選手のプロフィール private var _profiles:Array; // 野球選手の記録 private var _records:Array; // 野球選手に対するコメント private var _comments:Array; private function fnCreationComplete():void{ } private function buttonClick():void{ Alert.show("これからウェブサービスを呼び出して、検索を行います。"); webService = new WebService(); webService.wsdl ="http://localhost:3000/mst_baseball_player_service/service.wsdl"; webService.addEventListener(LoadEvent.LOAD, onWSDL); webService.FindAll.addEventListener(ResultEvent.RESULT, onFindAll); webService.loadWSDL(); webService.FindAll.addEventListener(FaultEvent.FAULT, onFaultFindAll); } private function onFindAll(event:ResultEvent):void{ _image_urls = new Array(); _player_names = new Array(); _profiles = new Array(); _records = new Array(); _comments = new Array(); for (var i:Number = 0; i < event.result.length; i++) { _image_urls.push("http://localhost:3000" + event.result[i].main_image_path); _player_names.push(event.result[i].player_name); _profiles.push (event.result[i].profile); _records.push (event.result[i].record); _comments.push (event.result[i].comment); } _circle_display = new CircleDisplay(_image_urls, _player_names, _profiles, _records, _comments); _circle_display_sl = new SWFLoader(); _circle_display_sl.source = _circle_display; _circle_display_sl.x = 20; _circle_display_sl.y = 20; addChild(_circle_display_sl); } private function onFaultFindAll(e:FaultEvent):void{ Alert.show("Fault string"+e.fault.faultString); } private function onWSDL(loadEvent:LoadEvent):void{ webService.FindAll(); }
「mst_baseball_player.mxml」に検索ボタンを用意して、検索ボタンの押下時にウェブサービスを呼び出し、CircleDisplayクラスを使用して画像を楕円形に並べて表示します。
AIRからウェブサービスを呼び出すためには、new WebService()でインスタンスを作成し、wsdlプロパティwebService.wsdlに対象のウェブサービスのWSDLを指定します。
LoadEvent.LOADイベントにWSDLをロードした時にコールするウェブサービスメソッドを指定します。loadWSDLメソッドを呼び出すことで、一連の処理が行われます。
また、CircleDisplayクラスをMXMLを通じて画面上に表示するために、SWFLoaderを使用しています。CircleDisplayをインスタンス化しaddChildするのではなく、SWFLoaderのsourceに設定してSWFLoaderをaddChildしなければ、互換性のエラーになります。
