FlexでHTMLな設定
FlexでHTMLのようにbrで改行やbで太字を表現します。
書き方は簡単で以下のようになります。
<mx:Text fontSize="10" color="#ffffff" leading="10" x="8" y="19" width="661"> <mx:htmlText> <![CDATA[ とある 大手ソーシャルネットワーキングサービスで、友人の友人とか、見ず知らずで ご縁があり集まって、2007年の末に バンド活動を開始。 一番バンド経験の浅い さくら夕紀(歴3年)が リーダー業務を務める(;´Д`) 私ゆっきーの容姿・声が 萌え系だそうなので、アニソン・ゲーソン・電波系 等の曲を生バンドでやってみようかと試みる。 自身メタルが好き(聖飢魔?は永遠のバイブル)なので、メタルやハードな演奏が出来るメンバーを集めてみた。 スタジオセッションをしたら、バッキングが激しくメタルになった( ; ゚Д゚)ZZ メタルなバッキングに萌え曲萌えVoiceのギャップのあるバンドとなり、ネーミングをMM−R 「萌えメタレボリューション」として活動を開始。 基本的にはです(今の所) <font size="16" color="#ff00f0"><b>萌え系・ダメ系・ネタ系・電波系・オタ系 バンド</b></font> それぞれジャンルが違うメンバーが、これからどのような展開になっていくのか・・・・ <font color="ff0303" size="28"><b>リーダー自身も把握していないバンド</b></font> まぁ、気楽に、ゅるく、音楽・コスプレを楽しめたらな〜という ゅるいノリです。 「バンドの方針・ジャンルは?」 と聞かれたら、分かりません 状態。プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・) プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・) とりあえず今の目標は イベントライブに出てお客さんを萌え(燃え)死させること!! その内、色んな系統のライヴに出て、たくさんの人に楽しんでもらえるようなバンドに出来たらと。 今後は、オリジナル曲も作っていきたいです。 ]]> </mx:htmlText> </mx:Text>
行間はleadingで指定できます。
ちなみにスタイルシートもCSS1程度の簡単なものであればOKとのこと。
Flexでサイトを作成してみました。
後輩に土台を作ってもらい、そこから微調整を行いました。
実際のページはこちら
http://moeten.info/flex/20080323_mmrHomePage2/bin-release/
ソースはこちら
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:reflector="com.rictus.reflector.*" xmlns:local="*" viewSourceURL="srcview/index.html"> <mx:Style> Application { backgroundColor: #ff0000; backgroundGradientColors: #330000 , #000000 ; backgroundGradientAlphas: 1, 1; themeColor: #990000; color: #990000; } VScrollBar { cornerRadius: 16; highlightAlphas: 1, 0.47; fillAlphas: 0.58, 0.91, 1, 1; fillColors: #990000, #000000, #990000, #000000; trackColors: #000000, #990000; themeColor: #000000; borderColor: #000000; } DateChooser { cornerRadius: 11; borderThickness: 4; headerColors: #990000, #000000; highlightAlphas: 0.73, 0.81; fillAlphas: 0.97, 0.85, 0.75, 0.65; fillColors: #ffffff, #990000, #ffffff, #eeeeee; todayColor: #990000; rollOverColor: #993366; color: #ffffff; borderColor: #450000; backgroundColor: #000000; backgroundAlpha: 0; fontFamily: Georgia; } .styleBtn { highlightAlphas: 0.94, 0.73; fillAlphas: 0.82, 0.12, 1, 1; fillColors: #990000, #990000, #ffffff, #eeeeee; color: #990000; } TileList{ themeColor:#4F4F4F; backgroundColor:#292929; backgroundAlpha:0; color:#FFFFFF; borderColor:#6D6D6D; borderStyle:none; rollOverColor:#222222; selectionColor:#242424; } TabNavigator { tabHeight: 34; tabWidth: 98; cornerRadius: 18; horizontalGap: -1; horizontalAlign: center; paddingLeft: 0; textIndent: 0; backgroundAlpha: 0.16; backgroundColor: #990000; borderStyle: none; borderColor: #990000; borderThickness: 20; color: #ffffff; dropShadowEnabled: true; shadowDistance: 9; tabStyleName: "myTabs"; firstTabStyleName: "myTabs"; lastTabStyleName: "myTabs"; selectedTabTextStyleName: "mySelectedTabs"; } .myTabs { cornerRadius: 0; highlightAlphas: 0.65, 0.73; letterSpacing: 2; fillAlphas: 0.77, 0.73; fillColors: #990000, #990000; backgroundAlpha: 1; backgroundColor: #990000; borderColor: #990000; themeColor: #993300; fontFamily: Monaco; fontSize: 16; } .mySelectedTabs { } </mx:Style> <mx:Script> <![CDATA[ import mx.effects.easing.*; private var bodyHeight:int = 450; //初期化関数 private function init():void{ showEffect.play([header,body,footer]); } //ビューチェンジ private var bodyHeight2:Array = new Array(); private function onChange():void{ bodyHeight2[0] = 450;//top bodyHeight2[1] = 510;//liveinfo bodyHeight2[2] = 540;//member bodyHeight2[3] = 510;//profile bodyHeight2[4] = 420;//photo bodyHeight2[5] = 450;//contact bodyHeight2[6] = 350;//link myResize.target = body; myResize.heightTo = bodyHeight2[body.selectedIndex]; myResize.play(); } ]]> </mx:Script> <!-- ############ エフェクト ########### --> <mx:Resize id="myResize"/> <mx:Sequence id="showEffect"> <mx:Zoom zoomHeightFrom="0.8" zoomHeightTo="1.0" zoomWidthFrom="0.8" zoomWidthTo="1.0" easingFunction="Back.easeOut" duration="800" /> </mx:Sequence> <!-- ############ Httpサービス ########### --> <!--<mx:HTTPService id="getRSS" url="" useProxy="false" resultFormat="e4x" fault="" result="" />--> <!-- ############ コンポーネント ########### --> <!-- ヘッダー --> <mx:Canvas id="header" x="10" y="10" width="681" height="63" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="2" y="2" width="162" height="87" source="img/mmr-logo.png" id="imgTitle" click="{body.selectedIndex=0}" buttonMode="true"/> <mx:Image x="170" y="10" width="296" height="25" source="img/moemeta.png"/> <mx:Image x="170" y="43" width="501" height="22" source="img/top-explain.png"/> </mx:Canvas> <reflector:Reflector target="{header}" alpha="0.5" /> <!-- メインボディ --> <mx:TabNavigator id="body" x="10" y="98" width="681" height="458" change="onChange()"> <!-- トップページ --> <mx:Canvas label="top" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="10" width="434" height="248" source="img/top-img.png"/> <mx:Image x="10" y="248" width="434" height="77" source="img/20080329_banner.gif" click="{body.selectedIndex=1}" buttonMode="true"/> <mx:Image x="10" y="300" width="473" height="107" source="img/live-info.png" click="{body.selectedIndex=1}" buttonMode="true"/> <mx:Image x="452" y="302" source="img/blog-explain.png" width="219" height="72"/> <mx:Button x="474" y="185" label="go to Blog" width="200" height="83" styleName="styleBtn" fontSize="17" color="#FFFFFF" icon="@Embed(source='img/blogImg.png')" fillAlphas="[0.15, 0.15, 0.15, 0.15]" alpha="1.0" cornerRadius="20" borderColor="#494949" click="{navigateToURL( new URLRequest('http://yaplog.jp/keinyan_st/') , '_blank') } "/> <mx:Image x="452" y="368" source="img/blog-reco.png" width="249" height="100"/> <mx:DateChooser x="474" y="5" width="200" height="162"/> </mx:Canvas> <!-- ライブ情報 --> <mx:Canvas label="live" width="100%" height="100%" horizontalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="440" direction="vertical" columnCount="1" rowCount="3" > <mx:itemRenderer> <mx:Component> <mx:HBox verticalAlign="top"> <mx:Label text="{data.date}" fontSize="18" width="120"/> <mx:TextArea text="{data.comment}" editable="false" fontSize="13" width="100%" height="200" backgroundAlpha="0" color="#FFFFFF" textAlign="left" borderStyle="none"/> <mx:Image source="{data.img}" width="150" height="200" /> </mx:HBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object date="3/29(Sat)" comment="イベント情報 場所 日本橋 platz主催 おたまっぷ 出演 まーめいど系列メイド♪ 開場 15:00 開演 16:00(だいたいの時間です) ★ トップに出演します!! MM-Rが見たい方は、 一番早い時間に会場に入って下さいね★ チケット 前売り 2500円 当日 3000円 (1drink別) *開場収容人数は200人位迄となります* 頑張って演奏しますので 是非遊びに来て下さい(´∀`*) MM−Rの初ライヴです!! みんながくれる勇気は・・・ おっくせんまん!! " img="img/live1.png" /> <mx:Object date="4/5(Sat)" comment="場所 三宮 BREATH バントバトル準決勝!!MM−Rに皆さんの勝利の投票をお願いします! *チケット 1枚 1500円 出演バンド8組中、3組が決勝ライヴに進出 もしお客さんの投票で選ばれたら、決勝ライヴに出れます。 お客さんが自分が選んだバンドが決勝に行くことになると、 投票した人の中から1名〜5名にニンテンドーDS、WIIなどの 豪華賞品が当たります♪(・∀・)イイ 勝てば、決勝ライヴ4/20(日) 決勝ライヴで選ばれたら・・・なんと! 5月4日(日)、難波ハッチで DJオズマ他メジャーアーティスト、 麒麟、シャンプーハットなどのお笑い、 その他ファッション関係、スポーツ関係の一流有名人を 呼んでの様々なジャンルを融合した イベントの前座バンドとして出演できます━ヽ(´∀`ヽ)━ (avex、MBS協賛" img="img/live2.png" /> <mx:Object date="6/8(Sat)" comment="場所 住之江 オスカーホール TEL 06-6684-2300 チケット 1枚1500円、他、詳細未定 大阪市住之江区新北島1-2-1 オスカードリーム3F 地下鉄四つ橋線住之江公園駅下車5番出口すぐ オスカードリームは住ノ江公園駅改札口から2分5番出口から目と鼻の先にある巨大なビルで歩く距離は、ほんの少しで非常に便利です。 オスカードリームにあるオスカーホールは 3Fです オスカーホールでのイベントに車でお越しの方へ当日、受付にて駐車割引券を販売します。2時間毎210円となっております。車でお越しの方は是非、お買い求め下さい。 " img="img/live3.png" /> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> <!-- メンバー紹介 --> <mx:Canvas label="member" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="100%" direction="horizontal" columnCount="5" > <mx:itemRenderer> <mx:Component> <mx:VBox horizontalAlign="center" verticalAlign="top"> <mx:Label y="0" text="{data.category}" fontSize="18" /> <mx:Canvas y="18" id="memberImg"> <mx:Image source="{data.img}" width="80" height="120"/> </mx:Canvas> <!--<reflector:Reflector target="{memberImg}" alpha="0.3"/>--> <mx:Text y="150" width="120" fontSize="12" height="400" id="t1" text="{data.comment}" color="#FFFFFF"/> </mx:VBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object category="ヴォーカル" img="img/m1.png" comment="・・・ブランク有りですが 一応タレントでございます。現在はあまりの寒さにバンド活動以外冬眠気味Σ(´д`;*) サンTV【夜美女】のビデオ紹介コーナーでチェリーという名前で1年間レギュラー出演してました。 ミナミの帝王にちょこっと出演したりラジオ大阪・AM神戸でDJもやってました。などCM出演 色々と・・・ *現在は 毎週水曜サンTV【チャレンジカラオケステーション】って番組で、ナレーションの声がオンエアーされています* 自分が萌え系であることを自覚したのは、2005年のライヴでマスターに言われてからです(・∀・) (・∀・)好きな食べ物(・∀・) チーズケーキ"/> <mx:Object category="ギター" img="img/m2.png" comment="江坂ミューズ・服部緑地公園・THホール・Fanj Twice・ホリデー大阪など多数のライヴハウスで出演。 様々なオーディションで近畿代表まで勝ち抜いた。 更なる飛躍を目指し、tonakai sound worksのギターで頑張っています! 過去、TVCMで、演奏している所を1年半位オンエアーされていた事もアリ。 他ゲームソングの作曲等も行っていて、CD販売されてます (・∀・)好きな食べ物 バナナロール(・∀・)"/> <mx:Object category="ベース" img="img/m3.png" comment="本職ギタリスト。出演したライヴハウス ・池袋サイバー ・目黒鹿鳴館 ・目黒ライヴステーション ・新楽坂デイメンション ・横浜セブンスアベニュー ・横浜クラブ24 ・浦和ナルシス・市川 CLUB GIO ・クラブチッタ川崎 ・ホリデー大阪 ・西九条ブランニュー 等多数(・∀・)好きな食べ物 チョコレートパフェ(・∀・)"/> <mx:Object category="ドラム" img="img/m4.png" comment="・関東・関西の色々なライヴハウス・ホールに出演(多いので割愛(;´Д`) メディア fanJのイベントでラジオ公開ライブ、CATV出演 等 (・∀・)好きな食べ物 焼きそば定食、卵焼き (・∀・)"/> <mx:Object category="ギター" img="img/m5.png" comment="日本橋とかで?彼女の事を知らない人は居ない?? 位の勢いで有名なアイドルさんです。 小柄で可愛らしいケイちゃんとスタジオ入ると萌え死にします(・∀・)モエッ でも、そんな容姿で、毎日の様に仕事頑張っていて、バンド活動も一杯やっていて非常にアグレッシブ!!"/> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> <!-- プロフィール --> <mx:Canvas label="profile" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image source="img/bandProfileImg.png" x="10" y="10"/> <mx:Image x="424" y="38" source="img/prfsub5.jpg" width="360" height="349" alpha="0.5" rotation="10"/> <mx:Text x="10" y="46" text="とある 大手ソーシャルネットワーキングサービスで、友人の友人とか、見ず知らずで ご縁があり集まって、2007年の末に バンド活動を開始。" width="563" height="46" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="117" text="一番バンド経験の浅い さくら夕紀(歴3年)が リーダー業務を務める(;´Д`)" width="391" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="151" text="私ゆっきーの容姿・声が 萌え系だそうなので、アニソン・ゲーソン・電波系 等の曲を生バンドでやってみようかと試みる。" width="563" height="69" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="188" text="自身メタルが好き(聖飢魔?は永遠のバイブル)なので、メタルやハードな演奏が出来るメンバーを集めてみた。" width="606" height="42" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="207" text="スタジオセッションをしたら、バッキングが激しくメタルになった( ; ゚Д゚)ZZ メタルなバッキングに萌え曲萌えVoiceのギャップのあるバンドとなり、ネーミングをMM−R 「萌えメタレボリューション」として活動を開始。" width="455" height="63" color="#FFFFFF" fontSize="12"/> <mx:Text x="10" y="95" text="基本的には" width="75" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="440" y="95" text="です(今の所)" width="75" height="26" color="#FFFFFF" fontSize="12"/> <mx:Text x="93" y="92" text="萌え系・ダメ系・ネタ系・電波系・オタ系 バンド" color="#FF00F0" fontSize="16" fontWeight="bold"/> <mx:Text x="10" y="258" text="それぞれジャンルが違うメンバーが、これからどのような展開になっていくのか・・・・" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="275" text="リーダー自身も 把握していないバンド" color="#FF0303" fontSize="28" fontWeight="bold"/> <mx:Text x="12" y="314" text="まぁ、気楽に、ゅるく、音楽・コスプレを楽しめたらな〜という ゅるいノリです。" fontSize="12" color="#FFFFFF"/> <mx:Text x="12" y="332" text="「バンドの方針・ジャンルは?」 と聞かれたら、分かりません 状態。プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・)" color="#FFFFFF" width="358" height="27" fontSize="12" /> <mx:Text x="12" y="348" text="プラス思考に考えると、未知の新たなジャンルのバンドが誕生したって事になるのかな(・∀・)" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="367" text="とりあえず今の目標は イベントライブに出てお客さんを萌え(燃え)死させること!!" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="386" text="その内、色んな系統のライヴに出て、たくさんの人に楽しんでもらえるようなバンドに出来たらと。" color="#FFFFFF" fontSize="12"/> <mx:Text x="12" y="405" text="今後は、オリジナル曲も作っていきたいです。 " color="#FFFFFF" fontSize="12"/> </mx:Canvas> <!-- 写真 --> <mx:Canvas label="photo" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="10" source="img/photos.png"/> <local:DisplayShelf id="shelf" x="0" y="0" width="100%"> <local:dataProvider> <mx:ArrayCollection> <mx:String>img/photo/studio1.jpg</mx:String> <mx:String>img/photo/studio2.jpg</mx:String> <mx:String>img/photo/studio3.jpg</mx:String> <mx:String>img/photo/studio4.jpg</mx:String> <mx:String>img/photo/studio5.jpg</mx:String> <mx:String>img/photo/studio6.jpg</mx:String> <mx:String>img/photo/studio7.jpg</mx:String> <mx:String>img/photo/studio8.jpg</mx:String> <mx:String>img/photo/studio9.jpg</mx:String> </mx:ArrayCollection> </local:dataProvider> </local:DisplayShelf> <mx:Button x="286.5" y="280" label="More..." width="108" height="32" color="#FFEDFB" fontSize="16" styleName="styleBtn" click="{navigateToURL( new URLRequest( 'http://photo.ameba.jp/user/mm-r/' ) , '_blank')} " /> </mx:Canvas> <!-- コンタクト --> <mx:Canvas label="contact" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="10" y="47" source="img/contactImg.png" width="255"/> <mx:Label x="273" y="40" text="お問い合わせ リーダー さくら 夕紀 まで" color="#FFFFFF" fontFamily="Arial" fontSize="18" width="398" height="26"/> <mx:Button x="273" y="86" label="メール" width="87" height="20" styleName="styleBtn"/> <mx:Button x="273" y="121" label="URL" width="87" height="20" styleName="styleBtn"/> <mx:Label x="368" y="87" text="mmr_band@yahoo.co.jp" color="#FFFFFF" fontSize="16"/> <mx:Label x="368" y="117" text="http://mixi.jp/show_friend.pl?id=13310554" color="#FFFFFF"/> <mx:Label x="273" y="143" text=" *オファー大歓迎(ノ´∀`*)♪* ★応援してくれる方・音楽仲間 ミク大歓迎です" color="#FFFFFF"/> <mx:Label x="273" y="190" text="メンバー募集" color="#FFFFFF" fontFamily="Arial" fontSize="18"/> <mx:Text x="273" y="225" text="★key1名(出来れば♀求むっ!コスプレ・メイクに抵抗の無い方) ★
大阪の梅田で、2週に一回位のペースで平日の夜だいたい20〜22時で活動しています
スタジオ代は一人2H 300円です 
そして、サポートメンバーBass・Drums(♀限定)随時募集!(ハードに演奏出来る方)" width="398" height="157" color="#FFFFFF" fontSize="15"/> <mx:Image x="10" y="10" source="img/contact.png"/> </mx:Canvas> <!-- リンク --> <mx:Canvas label="link" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:TileList selectable="false" width="100%" height="100%" direction="vertical" columnCount="1"> <mx:itemRenderer> <mx:Component> <mx:HBox verticalAlign="top"> <mx:Image buttonMode="true" source="{data.img}" width="200" height="40" click="{navigateToURL( new URLRequest( data.url ) , '_blank')} " /> <mx:TextArea text="{data.comment}" editable="false" fontSize="12" height="90" width="100%" backgroundAlpha="0" color="#FFFFFF" textAlign="left" borderStyle="none"/> </mx:HBox> </mx:Component> </mx:itemRenderer> <mx:dataProvider> <mx:ArrayCollection> <mx:Object img="img/minianibanner.gif" url="http://www.moebar.com/" comment="梅田・心斎橋に萌えメイドカフェ&メイドBARが新規OPEN! 昼間はメイドカフェ、夜間はメイドBARスタイルの新しいお店となっています。"/> <mx:Object img="img/ramudande.gif" url="http://www.larmedange.com/" comment="天使の涙をコンセプトに、2007年結成したヴィジュアル系バンド「Larme d'ange」ラムス・ダンジュの公式サイト。総合的に演奏レベル・ヴジュアル、ステージングのクオリティーが高いです!!是非ライヴ行ってみて下さい!感動します!Guitar担当の柊木さんは、さくら夕紀・リエ・かおるの音楽仲間(大先輩)であり、友達としても仲良くしてもらっています(ノ´∀`*)偶然・・・柊木さんが経営しているBarの目の前に↑まーめいど梅田店が有ります(・∀・*)"/> <mx:Object img="img/keisub7.JPG" url="http://yaplog.jp/keinyan_st/" comment="フロンティアコーポレーション所属(実は さくら夕紀も所属)の石原啓子こと、サポートメンバーケイちゃんの ブログです。 一杯お仕事頑張ってる姿に 同業者として見習うことが一杯だなーー(;^ω^) バンドは現在主に いちごのつぶ ユニットとして活動中★とにかく萌え"/> </mx:ArrayCollection> </mx:dataProvider> </mx:TileList> </mx:Canvas> </mx:TabNavigator> <!-- フッター --> <mx:Canvas id="footer" x="10" y="{body.height + 90}" width="681" height="64" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <mx:Image x="0" y="0" width="693" source="img/footer.png"/> </mx:Canvas> </mx:Application>
Flexですとサイトがまるまる1ページで完結してかけるのでいいですね。
ヘッダとフッタを作ってメイン部分はTabNavigatorでキャンバスを切り替えるだけでいいので。
加えて、リンクページのように、データを同じ形式で書き出すときに、TileList ⇒ itemRenderer ⇒ dataProviderの連携がいい感じです。
これで長くなりそうな文章も簡略できますし、管理者もデーターのArrayCollectionさえ追加すればOK。