ActionScript と
Flex のレイアウト

ActionScript and Flex layouting

有限会社 CO-CONV

最田健一

自己紹介

にとよんと申します。

Hello, my name is 'nitoyon'.

「てっく煮」というサイトを
やってます。

This is my homepage.

ActionScript 2.0

createEmptyMovieClip("mc", 0);

mc.beginFill(0xff0000);
mc.moveTo(50, 0);
mc.lineTo(100, 100);
mc.lineTo(0, 100);
mc.endFill();

ActionScript 3.0

package {
   import flash.display.*;

   public class Test extends Sprite {
     public function Test() {
       // details are on the next page...
     }
   }
}

ActionScript 3.0 (constructor)

       var mc:MovieClip = new MovieClip();
       addChild(mc);

       mc.graphics.beginFill(0xff0000);
       mc.graphics.moveTo(50, 0);
       mc.graphics.lineTo(100, 100);
       mc.graphics.lineTo(0, 100);
       mc.graphics.endFill();

AS 2.0

createEmptyMovieClip("mc", 0);


mc.beginFill(0xff0000);
mc.moveTo(50, 0);
mc.lineTo(100, 100);
mc.lineTo(0, 100);
mc.endFill();

AS 3.0

var mc:MovieClip = new MovieClip();
addChild(mc);

mc.graphics.beginFill(0xff0000);
mc.graphics.moveTo(50, 0);
mc.graphics.lineTo(100, 100);
mc.graphics.lineTo(0, 100);
mc.graphics.endFill();

trace(mc.x + "," + mc.y)

→　0,0

trace(mc.width + "," + mc.height)

→　100,100

Output of "trace" function?

var mc:MovieClip = new MovieClip();
addChild(mc);

mc.graphics.beginFill(0xff0000);
mc.graphics.moveTo(100,  50);
mc.graphics.lineTo(150, 150);
mc.graphics.lineTo( 50, 150);
mc.graphics.endFill();

trace(mc.x, mc.y);

Output of "trace" function?

var mc:MovieClip = new MovieClip();
addChild(mc);

mc.graphics.beginFill(0xff0000);
mc.graphics.moveTo(100,  50);
mc.graphics.lineTo(150, 150);
mc.graphics.lineTo( 50, 150);
mc.graphics.endFill();

trace(mc.x, mc.y);

trace(mc.x, mc.y);
>> 0 0

x と y のデフォルト値は 0

The default value of 'x' and 'y' is 0.

Example

mc.x = 0;
mc.y = 0;

mc.x = 100;
mc.y = 100;

What about this?

mc.graphics.beginFill(0xff0000);
mc.graphics.moveTo(100,  50);
mc.graphics.lineTo(150, 150);
mc.graphics.lineTo( 50, 150);
mc.graphics.endFill();

trace(mc.width, mc.height);

trace(mc.width, mc.height);
>> 100 100

図形自体のサイズを返す

The size of bounding rectangle is returned.

getBounds

trace(mc.getBounds(mc));
>> (x=50, y=50, w=100, h=100)

Difference between Flash & AS

FlashX = mc.x + mc.getBounds(mc).x;

Set 'width'. What happens?

mc.graphics.beginFill(0xff0000);
mc.graphics.moveTo(100,  50);
mc.graphics.lineTo(150, 150);
mc.graphics.lineTo( 50, 150);
mc.graphics.endFill();

trace(mc.width);  // 100
mc.width = 50;

mc.width:  100 → 50

mc.width:  100 → 50
mc.xscale: 1.0 → 0.5

width, height プロパティの修正は scale に影響する

Setting 'width', 'height' property changes 'scale' property.

HBox Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="200" height="200" backgroundColor="red"/>
    <mx:Canvas width="100" height="200" backgroundColor="blue"/>
  </mx:HBox>

</mx:Application>

どうなる？ (What about this?)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="200" height="200" backgroundColor="red"/>
    <mx:Canvas x="50" y="50"
         width="100" height="200" backgroundColor="blue"/>
  </mx:HBox>
</mx:Application>

自動配置を使用するコンテナでは、x プロパティまたは y プロパティを直接設定しても、何も効果がないか、効果があっても一時的に過ぎません。

(Flex 2 開発ガイドより)

For containers that use automatic positioning, setting the x or y property directly has no effect, or only a temporary effect,

(Quoted from: Flex 2 Developer’s Guide)

これは、これらのコンテナの x 位置が、指定値ではなくレイアウト計算によって設定されるためです。

(Flex 2 開発ガイドより)

because the layout calculations set the x position to the calculation result, not the specified value.

(Quoted from: Flex 2 Developer’s Guide)

こうする 1 (Change like this #1)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">
  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="200" height="200" backgroundColor="red"/>
    <mx:Spacer width="50"/>
    <mx:VBox>
      <mx:Spacer height="50"/>
      <mx:Canvas width="100" height="200" backgroundColor="blue"/>
    </mx:VBox>
  </mx:HBox>
</mx:Application>

こうする 2 (Change like this #2)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:Canvas width="100%" height="100%">
    <mx:Canvas width="200" height="200" backgroundColor="red"/>
    <mx:Canvas x="250" y="50"
      width="100" height="200" backgroundColor="blue"/>
  </mx:Canvas>

</mx:Application>

<mx:Canvas>

x y に設定したとおりに配置される唯一のコンテナ。

The only container that lets you explicitly specify the location of its children within the container by using the x and y properties of each child.

percentage Example

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="30%" height="200" backgroundColor="red"/>
    <mx:Canvas width="60%" height="200" backgroundColor="blue"/>
  </mx:HBox>

</mx:Application>

どうなる？ (What happens?)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="60%" height="200" backgroundColor="red"/>
    <mx:Canvas width="60%" height="200" backgroundColor="blue"/>
  </mx:HBox>

</mx:Application>

パーセント値の要求が残りの領域 (親コンテナのサイズ - すべての確保済み領域)に収まらない場合は、指定されたパーセント値に従って残りの領域を比例配分します。

(Flex 2 開発ガイドより)

If available space (parent container size minus all reserved space, including borders, padding, and gaps) cannot accommodate the percentage requests, divides the available space in proportion to the specified percentages.

(Quoted from: Flex 2 Developer’s Guide)

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

残りの領域
(available space)

492px

= 500px - 8px

8px : HBox内のコンポーネント間隔 (gap between each component)

パーセント値の要求
(percent requests)

600px

= 500px * 60%
+ 500px * 60%

実際のサイズ
(component size)

196px

どうなる？ (What happens?)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="300" height="200" backgroundColor="yellow"/>
    <mx:Canvas width="20%" height="200" backgroundColor="red"/>
    <mx:Canvas width="10%" height="200" backgroundColor="blue"/>
  </mx:HBox>

</mx:Application>

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

残りの領域
(available space)

184px

= 500px
- 300px
- 8px * 2

パーセント値の要求
(percent requests)

150px

= 500px * 20%
+ 500px * 10%

実際のサイズ
(component size)

100px

50px

SWF の横幅が 400px なら...
(When SWF's width is 400px...)

残りの領域
(available space)

84px

= 400px
- 300px
- 8px * 2

パーセント値の要求
(percent requests)

120px

= 400px * 20%
+ 400px * 10%

実際のサイズ
(component size)

56px

28px

SWF の横幅が 300px なら...
(When SWF's width is 300px...)

残りの領域
(available space)

0px

= 300px
- 300px
- 8px * 2

パーセント値の要求
(percent requests)

90px

= 300px * 20%
+ 300px * 10%

実際のサイズ
(component size)

0px

どうなる？ 2 (What happens? #2)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  paddingLeft="0" paddingRight="0"
  paddingTop="0"  paddingBottom="0">

  <mx:HBox width="100%" height="100%">
    <mx:Canvas width="300" height="200" backgroundColor="yellow"/>
    <mx:Canvas width="20%" height="200" backgroundColor="red"/>
    <mx:Canvas width="10%" minWidth="100" height="200"
      backgroundColor="blue"/>
  </mx:HBox>
</mx:Application>

計算値が最小または最大の高さまたは幅の指定と衝突する場合は、最小値または最大値の方を使用し、

(Flex 2 開発ガイドより)

If a minimum or maximum height or width specification conflicts with a calculated value,

(Quoted from: Flex 2 Developer’s Guide)

その他すべてのパーセント値ベースのコンポーネントを、少なくなった残りの領域に基づいて再計算します。

(Flex 2 開発ガイドより)

uses the minimum or maximum value, and recalculates all other percentage-based components based on the reduced available space.

(Quoted from: Flex 2 Developer’s Guide)

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

残りの領域
(available space)

184px

パーセント値の要求
(percent requests)

150px

実際のサイズ
(component size)

100px

50px

再計算...
(Calculate again...)

残りの領域
(available space)

84px

= 500px
- 300px
- 100px
- 8px * 2

パーセント値の要求
(percent requests)

100px

= 500px * 20%

実際のサイズ
(component size)

84px

Important parameters are:

x, y
width, height
xscale, yscale
percentWidth, percentHeight
left, right, top, bottom
min(max)Width, min(max)Height

ActionScript とFlex のレイアウト

ActionScript and Flex layouting

自己紹介

ActionScript でのレイアウト

How to layout ActionScript applications.

三角を描画するDraw triangle.

ActionScript 2.0

ActionScript 3.0

ActionScript 3.0 (constructor)

完成品

AS 2.0

AS 3.0

問題 1Question 1

Output of "trace" function?

Output of "trace" function?

答えAnswer

Example

問題 2Question 2

What about this?

答えAnswer

補足Complement

getBounds

Difference between Flash & AS

問題 3Question 3

Set 'width'. What happens?

Bad answer 1

Bad answer 2

答えAnswer

まとめSummary

Flex でのレイアウト

How to layout Flex applications.

自動配置Automatic positioning

HBox Example

完成品

問題 4Question 4

どうなる？ (What about this?)

なぜでしょう？Why?

2つ目のボックスを右下にずらすにはどうすればよい？

How can I move the 2nd boxdown-right?

こうする 1 (Change like this #1)

こうする 2 (Change like this #2)

<mx:Canvas>

パーセント指定Percentage-based sizing

percentage Example

完成品

問題 5Question 5

どうなる？ (What happens?)

なぜでしょう？Why?

SWF の横幅が 500px なら... (When SWF's width is 500px...)

応用例Application

どうなる？ (What happens?)

SWF の横幅が 500px なら... (When SWF's width is 500px...)

SWF の横幅が 500px なら... (When SWF's width is 500px...)

SWF の横幅が 400px なら... (When SWF's width is 400px...)

SWF の横幅が 400px なら... (When SWF's width is 400px...)

SWF の横幅が 300px なら... (When SWF's width is 300px...)

どうなる？ 2 (What happens? #2)

SWF の横幅が 500px なら... (When SWF's width is 500px...)

再計算... (Calculate again...)

まとめSummary

Thank you!!

ActionScript と
Flex のレイアウト

ActionScript での
レイアウト

How to layout
ActionScript applications.

三角を描画する
Draw triangle.

問題 1
Question 1

答え
Answer

問題 2
Question 2

答え
Answer

補足
Complement

問題 3
Question 3

答え
Answer

まとめ
Summary

自動配置
Automatic positioning

問題 4
Question 4

なぜでしょう？
Why?

2つ目のボックスを
右下にずらすには
どうすればよい？

How can I move the 2nd box
down-right?

パーセント指定
Percentage-based sizing

問題 5
Question 5

なぜでしょう？
Why?

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

応用例
Application

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

SWF の横幅が 400px なら...
(When SWF's width is 400px...)

SWF の横幅が 400px なら...
(When SWF's width is 400px...)

SWF の横幅が 300px なら...
(When SWF's width is 300px...)

SWF の横幅が 500px なら...
(When SWF's width is 500px...)

再計算...
(Calculate again...)

まとめ
Summary