ログイン
ユーザ名:

パスワード:


パスワード紛失

新規登録
メインメニュー
フォーラム一覧   -   トピック一覧
   Flex 3 SDK
     窓の背景を9スライス
投稿するにはまず登録を

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 トピック
yuno
投稿日時: 2009-4-22 22:04
やや 常連さん
登録日: 2008-3-13
居住地:
投稿: 21
Re: 窓の背景を9スライス
>kurehaさん
わかります><
でもあんまり的確に答えられなくてスイマセン。

flexはなんだかぼくも背景関連で色々悩みました。が、どうやらborderクラスのborderSkinに当てるのが正解っぽいです。
しかし、borderSkinには、flashのほうで、9スライスを設定しても上手くきかなかったように思います。
(スイマセン、検証用のデータが手元にありません)
でも、CanvasのbackGroundSkinに9スライスのシンボル当てればいけそうな気もしますが。

Canvasの上だけが丸くなると言うのは、なんだか不思議な感じなので、よければサンプルのソースを見せて頂ければと思います。
kureha
投稿日時: 2009-4-22 16:20
やや お馴染みさん
登録日: 2009-4-17
居住地:
投稿: 7
Re: 窓の背景を9スライス
>yunoさん
初めまして!
レスありがとうございます…放置されてたので寂しかった^^;

9スライスのFlash側設定で、ガイドは有効になっていました。
どうもそれが原因ではなさそうです…。

CanvasのcornerRadiusは、上の角だけが丸くなったのですが
それはまた違う問題でしょうか??
yuno
投稿日時: 2009-4-21 16:48
やや 常連さん
登録日: 2008-3-13
居住地:
投稿: 21
Re: 窓の背景を9スライス
はじめまして。
yunoと申します。
CanvasコンポーネントのcornerRadiusは、borderStyleが設定されていている状態で使用が可能です。(もしかすると、borderThicknessプロパティも必要かもしれません)

flash側で、9スライスを使うためには、シンボルプロパティで、
『9スライスの拡大縮小のためのガイドを有効にする』にチェックが入っていなければなりません。

初歩的なことですが、確認していただければと思いました。
kureha
投稿日時: 2009-4-21 15:40
やや お馴染みさん
登録日: 2009-4-17
居住地:
投稿: 7
Re: 窓の背景を9スライス
更に色々試しました。
とりあえず、SWCに入れたイメージをCSSで背景に指定した上で
9スライスを有効にするのは「無理」だという結論を出しました…。

仕方ないので、
<mx:Box id="backBox" width="100%" height="100%"
 backgroundSize="100%"
 backgroundAlpha="50"
 borderSkin="@Embed(source='../bin/bg_base.png',
 scaleGridTop='100', scaleGridBottom='101',
 scaleGridLeft='14', scaleGridRight='15')"
>
というものを用意してそれでWindow全体を覆い、その背景画像を
borderSkinにPNGを指定する形にしました。
これなら9スライスが効くようです…(−−;
# しかしscaleGridのTOP<Bottom、Left<Rightの制限は何の為に…?

できれば全部をSWFに突っ込んでスキン化したいので、まだまだ方法は
探していくつもりですが、時間がないのでとりあえずこれで妥協。

という報告でした。ひとまずありがとうございました。
kureha
投稿日時: 2009-4-17 14:40
やや お馴染みさん
登録日: 2009-4-17
居住地:
投稿: 7
Re: 窓の背景を9スライス
別の方法を試しましたので報告します。
以下の事をしました。

1.mx:WindowのFlexChromeを表示しないようにした。
2.窓全域をCanvasで覆い、その上に全コンテンツを配置。Canvasに背景を指定。
3.Canvasにscale9Gridの範囲を指定

以下ソース(抜粋)

<mx:Window
 xmlns:mx="http://www.adobe.com/2006/mxml"
(中略)
 showFlexChrome="false"
(中略)
 windowComplete="on_window_complete()"
 >

 <mx:Script>
  <![CDATA[
   private function on_window_complete():void
   {
    tCanvas.scale9Grid=new Rectangle(50, 50, 50, 50)
   }
  ]]>
 </mx:Script>

 <mx:Canvas id="tCanvas" width="100%" height="100%"
  backgroundSize="100%"
  backgroundAlpha="50"
  backgroundImage="@Embed(source='mainStyle.swf', symbol='bg_menu')"
  >
(以下略)


エラーなくコンパイルできましたが…やはり9スライスにならず角はみょーんと
なってしまいました…何が悪いんでしょう…誰でもやりたいから絶対簡単に出来るのに…。
kureha
投稿日時: 2009-4-17 10:30
やや お馴染みさん
登録日: 2009-4-17
居住地:
投稿: 7
窓の背景を9スライス
kurehaと申します。
初めて投稿させて頂きます!


Flexを使用したアプリケーションを開発しようとしています。
窓にはスキンを用意して、今後切り替えられるようにできたらいいなと思い、SWCを結合した
SWFを作成してそれをFlexから参照する形を取ろうとしています。
窓には背景画像をSWFでつけ、窓サイズを変更可能なように右下にグリップエリアを用意したいと
考えています。

ここで、以下の内容で現在詰まっています。
・窓のサイズを変更した際、背景画像が拡大されると角が荒れる
そのまま拡大されてしまうので、当然の結果です。
これを回避したい。サイズ変更しても四隅の角や全体のデザインは崩したくない。
回避する為、以下の手順で確認をしました。

【試している方法】
1.
<mx:Window
xmlns:mx="http://www.adobe.com/2006/mxml"
(中略)
cornerRadius="8"> ←これ!

これで、四隅が丸い窓が…と思ったら上の角しか丸くならず、下の角は
四角いまま…そういうものなんでしょうかこれ(−−;

2.
9スライスという手法があるそうで、これを使えば四隅を守れるとか。
それを背景に使う方法を模索。

↓これをCSSでスタイル指定
.bgMainMenu
{
backgroundImage: source="back.jpg"'
backgroundSize: 100%;
scaleGridLeft: 20;
scaleGridTop: 100;
scaleGridRight: 20;
scaleGridBottom: 20;
}

背景はちゃんとついていますが、結果は変わらず角がみょーん状態。
9スライスが効かないです…(;;

他にやり方があるんでしょうか…それとも私の設定ミスでしょうか。
ヒントなどご存じの方、いらっしゃいましたらお知恵をお借りしたいです。

よろしくお願いします!
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ

投稿するにはまず登録を