Flash Builder, Mobile und der SplashScreen

Seit Flash Builder 4.6 gibt es die Möglichkeit für Mobile Apps eine SplashScreenImage  anzulegen...

Leider waren die Beispiele von Adobe für meine Zwecke nicht ausreichend... wer z.B. iPad, iPhone 3GS, iPhone 4S, Android Smartphone und Android Tablet abdecken will hat mehr Probleme mit dem Splashscreen als man sich vorstellen kann... hier meine Lösung die alle Varianten Abdeckt:

<?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:Declarations>
<!-- Platzieren Sie nichtvisuelle Elemente (z. B. Dienste, Wertobjekte) hier -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
[Embed(source="assets/imgs/Default.png")] //320x480
[Bindable]
public var ios160p:Class;
[Embed(source="assets/imgs/DefaultLandscape.png")]  //480x320
[Bindable]
public var ios160l:Class;
[Embed(source="assets/imgs/Default@2x.png")]  //640x960
[Bindable]
public var ios320p:Class;
[Embed(source="assets/imgs/Default@2xLandscape.png")] //960x640
[Bindable]
public var ios320l:Class;
[Embed(source="assets/imgs/Default-Landscape~ipad.png")] //1024x748
[Bindable]
public var iosTablettL:Class;
[Embed(source="assets/imgs/Default-Portrait~ipad.png")] //768x1004
[Bindable]
public var iosTablettP:Class;
[Embed(source="assets/imgs/logoTabletPortraitDefault.png")] //800x1232
[Bindable]
public var andTablettP:Class;
[Embed(source="assets/imgs/logoTabletLandscapeDefault.png")] //1280x752
[Bindable]
public var andTablettL:Class;
[Embed(source="assets/imgs/logo160PortraitDefault.png")] //320x480
[Bindable]
public var and160p:Class;
[Embed(source="assets/imgs/logo160LandscapeDefault.png")] //480x320
[Bindable]
public var and160l:Class;
[Embed(source="assets/imgs/logo240PortraitDefault.png")] // 480x800
[Bindable]
public var and240p:Class;
[Embed(source="assets/imgs/logo240LandscapeDefault.png")] //800x480
[Bindable]
public var and240l:Class;
[Embed(source="assets/imgs/logo320PortraitDefault.png")] //640x960
[Bindable]
public var and320p:Class;
[Embed(source="assets/imgs/logo320LandscapeDefault.png")] //960x640
[Bindable]
public var and320l:Class;
// Override getImageClass() to return an image for iOS.
override public function getImageClass(aspectRatio:String, dpi:Number, resolution:Number):Class
{
// Is the application running on iOS?
var isIOS:Boolean = (Capabilities.version.indexOf("IOS") == 0 ? true:false);
if(aspectRatio == StageAspectRatio.PORTRAIT) //Portrait
{
if(dpi == 160 && resolution<1000)//real 160
return (isIOS==true?ios160p:and160p);
else if(dpi == 160 && resolution>1000)//tablett
return (isIOS==true?iosTablettP:andTablettP);
else if(dpi == 240) return and240p;
else if(dpi == 320)
return (isIOS==true?ios320p:and320p);
}
else //Landscape
{
if(dpi == 160 && resolution<1000) //real 160
return (isIOS==true?ios160l:and160l);
else if(dpi == 160 && resolution>1000)//tablett
return (isIOS==true?iosTablettL:andTablettL);
else if(dpi == 240) return and240l;
else if(dpi == 320)
return (isIOS==true?ios320l:and320l);
}
return super.getImageClass(aspectRatio, dpi, resolution);
}
]]>
</fx:Script> </s:SplashScreenImage>

Flex: SnapScroller

Da ich derzeit an meiner Master Thesis sitze und via Flex eine Mobil App erstellen möchte, ist mir folgendes aufgefallen. Flex 4.5 ist zwar echt nett was die Veröffentlichung von Apps auf mehreren Plattformen angeht, hat aber leider recht eingeschränkte Komponenten zum zusammenbauen. So fehlte mir dringend die Paging Funktion die man aus iOS kennt. Sprich man hat eine Scrollview, die seitenweise Inhalte präsentiert. Da ich auch nach längeren Suchen keine Möglichkeit gefunden habe die Scroller Komponente zu parametrisieren, habe ich sie einfach mal erweitert.

Beispiel (rote Fläche nach links wischen):




Dazu folgenden Quelltext

MXML:

<local:SnapScroller  x="0" y="0" width="320" height="460">

<s:HGroup gap="0" width="100%" height="100%" >

<s:Image source="assets/Startscreen_Portrait.png"/><s:Image x="320" source="assets/Startscreen_Portrait.png"/><s:Image x="640" source="assets/Startscreen_Portrait.png"/>

</s:HGroup>

</local:SnapScroller>

Wichtig ist, das die Komponente vom Typ SnapScroller- und der Container eine HGroup ist. Gap sollte auf 0 stehen damit die Elemente direkt nebeneinander liegen und nicht unnötig mit Spacern getrennt sind.

Die AS3 Komponente (derzeit nur horizontales snapping):

package
{
 package
{
 import flash.events.MouseEvent;
 import flash.events.TimerEvent;
 import flash.events.TouchEvent;
 import flash.ui.Mouse;
 import flash.ui.Multitouch;
 import flash.ui.MultitouchInputMode;
 import flash.utils.Timer;
 
 import flashx.textLayout.formats.Float;
 
 import mx.core.InteractionMode;
 import mx.core.ScrollPolicy;
 
 import spark.components.Group;
 import spark.components.Scroller;
 
 
 public class SnapScroller extends Scroller
 {
  private var isMouseDown:Boolean;
  private var xStart:Number;
  private var mouseUpDownXDistance : Number;
  private var t:Timer;
  private var nextHorizontalPosition: Number; 
  private var nextHorizontalPositionDistance : Number;
  
  public function SnapScroller()
  {
   super();
   
   this.setStyle('horizontalScrollPolicy',ScrollPolicy.OFF);
   this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
   this.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
   
  }
  
  protected function onMouseDown(event:MouseEvent):void
  {
   this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
   stage.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
   
   if (t)
    t.stop();
   
   isMouseDown = true;
   xStart = mouseX;
  }
  
  protected function onMouseMove(event:MouseEvent):void
  {
   if(isMouseDown)
   {
    mouseUpDownXDistance = mouseX-xStart;
    this.viewport.horizontalScrollPosition -= mouseUpDownXDistance;
    xStart = mouseX;
   }
  }
  
  protected function onMouseUp(event:MouseEvent):void
  {
   isMouseDown = false;
   
   if(mouseUpDownXDistance > 0)
    nextHorizontalPosition = (int(this.viewport.horizontalScrollPosition/this.width))*this.width;  
   else
    nextHorizontalPosition = (int(this.viewport.horizontalScrollPosition/this.width)+1)*this.width;
   
   if (nextHorizontalPosition > ((this.getElementAt(0) as Group).contentWidth)-this.width)
    nextHorizontalPosition = ((this.getElementAt(0) as Group).contentWidth)-this.width;
   
   t = new Timer(1,0);
   t.addEventListener(TimerEvent.TIMER,timerEnds);
   t.start();
   
   stage.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
   this.removeEventListener(MouseEvent.MOUSE_UP,onMouseUp);
  }
  
  protected function timerEnds(event:TimerEvent):void
  {
   var distanceToTarget:Number = Math.abs(this.viewport.horizontalScrollPosition - nextHorizontalPosition);
   
   if(this.viewport.horizontalScrollPosition > nextHorizontalPosition)
    this.viewport.horizontalScrollPosition -= Math.sqrt(distanceToTarget);
    
   else
    this.viewport.horizontalScrollPosition += Math.sqrt(distanceToTarget);
   
   if (distanceToTarget < 0.01)    
   {     
    this.viewport.horizontalScrollPosition = nextHorizontalPosition;          
    t.stop();     
    t.removeEventListener(TimerEvent.TIMER,timerEnds);    
   }   
  }  
 } 
}

Tutorial Video