2013/10/25

Flex:: Splash画像の設定方法

Flex 4.10:: Splash画像の設定方法について紹介します。
※iOSの場合は２つ方法がありますが、両方共設定するのをお勧めします。

１．iOSの場合は、単純に「src」フォルダと同じ階層にアップルが定めた命名方法に従ったファイルを置くだけです。

例）
  • iPhone 3G / 3GS -- Default.png
  • iPhone 4 / 4S -- Default@2x.png
  • iPhone 5 / 5C / 5S -- Default-568h@2x.png
  • iPad / iPad 2 / iPad mini -- Default-Portrait.png
  • iPad 3rd / 4th -- Default-Portrait@2x.png

２．もう一つは「SplashScreenImage」クラスを使う方法です。
単純にアプリケーションタグにSplashの画像パスを設定することも出来ますが、DPIや機種によって画像を変更したい場合はSplashScreenImageをカスタムすることで実装できます。「getImageClass」をoverrideして独自の処理を入れることも出来ます。（iOSならこの画像とか、Androidならこの画像など。）

■ソースコード（Splash画像を１つだけ設定する方法）
  • splashScreenImageに画像のパスを設定
  • splashScreenScaleMode（none, stretch, letterbox, zoom）を設定（画像を画面サイズに合わせて拡大・縮小したり、フィットさせたりという設定です。）
1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.MainView"
    splashScreenImage="@Embed('Default.png')"
    splashScreenScaleMode="none">
    
</s:ViewNavigatorApplication>

■ソースコード（Splash画像をDPIなどで変更する場合）
  • sourceに画像パスを設定
  • dpiは160, 240, 320, 480から設定
  • aspectRatioはlandscape, portraitから設定
  • minResolutionを設定
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">
 
    <!-- Default splashscreen image -->
    <s:SplashScreenImageSource 
        source="@Embed('Default.png')"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('Default@2x.png')"
        dpi="320" 
        aspectRatio="portrait"/>
        
    <s:SplashScreenImageSource 
        source="@Embed('Default-Landscape@2x.png')"
        dpi="320" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('Default-Portrait@2x.png')"
        dpi="240" 
        aspectRatio="portrait" 
        minResolution="2000"/>
</s:SplashScreenImage>



1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark"
    firstView="views.MainView"
    splashScreenImage="myComponents.MySplashScreen">
</s:ViewNavigatorApplication>


■ソースコード（getImageClassをオーバーライド）
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?xml version="1.0" encoding="utf-8"?>
<s:SplashScreenImage xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Script>
        <![CDATA[
            override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class {
                // iOSの場合
                if (Capabilities.version.indexOf("IOS") == 0)
                    return iOSSplash.source;
                
                // iOS以外の場合
                return super.getImageClass(aspectRatio, dpi, resolution);
            }
        ]]>
    </fx:Script>

    <!-- Default splashscreen image -->
    <s:SplashScreenImageSource 
        source="@Embed('Default.png')"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('Default@2x.png')"
        dpi="320" 
        aspectRatio="portrait"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('Default-Landscape@2x.png')"
        dpi="320" 
        aspectRatio="landscape"/>
    
    <s:SplashScreenImageSource 
        source="@Embed('Default-Portrait@2x.png')"
        dpi="240" 
        aspectRatio="portrait" 
        minResolution="2000"/>

    <!-- iOS  -->
    <s:SplashScreenImageSource id="iosImage"
        source="@Embed('iOSSplash.png')"/>
</s:SplashScreenImage>



http://help.adobe.com/en_US/flex/mobileapps/WSa122979b4619725672e48c412a3e152164-8000.html
http://help.adobe.com/en_US/air/build/WS901d38e593cd1bac1e63e3d129907d2886-8000.html#WS901d38e593cd1bac58d08f9112e26606ea8-8000
http://www.curiousfind.com/blog/257
Labels: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)