Posts Tagged: iOS


4
Jul 12

“Scrolling like iOS”

(This may sound like a commercial, but I guess GreenSock deserves it)

Trying to mimic the scrolling of iOS’s UIScrollView with Actionscript over a sunny weekend made me lazy. Coding myself: “overshoot, decelerate, ease back into position”, ended up with some funny, fair and not so fair results. It just didn’t feel right. I decided to look a bit further on the interwebs and again…. GreenSock to the rescue! Ok, it comes with a price, but only fair for all those times Greensock saved the day. If you’re prepared to shell out $150 for a commercial license or $99 for a bit more restricted one you’re the proud owner of the ThrowPropsPlugin. Butter smooth “iOS scrolling” (amongst others).

(now try and nail it myself on a rainy weekend sometime soon)


25
Jun 12

iOS application descriptor file notes

Just some notes to myself and perhaps other people about the application descriptor file and the settings it allow you to configure.

language settings (AIR 3.2)
You can specify the language your app supports including app descriptions in all supported languages. Add snippet below

1
<supportedLanguages>en</supportedLanguages>

more or less anywhere in the rootnode (application) of the application descriptor xml. If your app supports more languages, seperate them with comma’s. Your app does not show up in the appstore in other languages.
(via and more on: http://www.flashrealtime.com/supported-languages-adobe-ai/)

Icons without the default glow
If you want the icon of your app without the default glow Apple adds to it, add line 8 of the snippet below to the InfoAdditions element (at the bottom of the application descriptor)

1
2
3
4
5
6
7
8
9
10
11
<iPhone>
    <InfoAdditions>
    <![CDATA[
       <key>UIDeviceFamily</key>
       <array>
         <string>1</string>
       </array>
       <key>UIPrerenderedIcon</key><true/>
   ]]>
    </InfoAdditions>
</iPhone>
Low res assets (480×320) fullscreen on high res (960×640) iPhone screen
Add following snippet to the iPhone element shown above.

1
<requestedDisplayResolution>standard</requestedDisplayResolution>

Looks crap while testing on the desktop; The graphics only cover the top-left quarter of the full resolution, but on the device it will be OK.


1
Dec 11

Limit orientation on devices with ActionScript and the application descriptor

A short one…

To limit orientation of the stage on devices you don’t need much. In this example I want the application to only be displayed in landscape mode.

Loop up the aspectRatio and autoOrients tags in the application descriptor file, and make sure it looks like the following:

1
2
3
4
5
<initialWindow>
    ...
    <aspectRatio>landscape</aspectRatio>
    <autoOrients>true</autoOrients>
</initialWindow>

Then, in the application code, check if the stage is set to auto orient, and if so, listen to the ORIENTATION_CHANGING event:

1
2
if( stage.autoOrients )
    stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGING, autoOrient );

In the eventlistener, check what the futute orientation will be, it is stored in the event parameter as it’s afterOrientation property. If that orientation is NOT what you would like it to be, call the event’s preventDefault() method. The stage will not orient itself.

Below you see the two orientations defining the portrait orientation, StageOrientation.DEFAULT and StageOrientation.UPSIDE_DOWN. The other two, StageOrientation.ROTATED_RIGHT and StageOrientation.ROTATED_LEFT represent the landscape orientation. Since the latter are what I want, the first are prevented.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Rotate only to landscape orientations
 * @param event
 *
 */
   
protected function autoOrient(event:StageOrientationEvent):void
{
    switch( event.afterOrientation )
    {
        case StageOrientation.DEFAULT:
        case StageOrientation.UPSIDE_DOWN:                 
            event.preventDefault();
            break;
    }
}

You can find more options at: Adobe’s website

(It turned out to be much easier than reading out the accelerometer and rotating the stage yourself…)

Folowing code is a more complete example in case you want to test some code. It is the main (and only) class from a Flash Builder project (uses AIR 3 and Keith Peters (AKA Bit-101) his minimalcomps):

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
package
{
    import com.bit101.components.CheckBox;
    import com.bit101.components.TextArea;
   
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageOrientation;
    import flash.display.StageScaleMode;
    import flash.events.MouseEvent;
    import flash.events.StageOrientationEvent;
   
    [SWF( width="1024", height="768" )]
    public class RotationResearch extends Sprite
    {

        private var noRotationCheckBox:CheckBox;
        private var noPortraitCheckBox:CheckBox;
        private var noLandscapeCheckBox:CheckBox;

        private var noRotation:Boolean;
        private var noPortrait:Boolean;
        private var noLandscape:Boolean;

        private var textArea:TextArea;
       
        private var scaleModifier:int = 3;
       
        public function RotationResearch()
        {
            super();
           
            // support autoOrients
            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
       
            if( stage.autoOrients )
                stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGING, handleOrientation );
           
            stage.addEventListener( StageOrientationEvent.ORIENTATION_CHANGE, onOrientation );
           
            buildUI();
        }
       
        /**
         * Create User interface
         *
         */
   
        private function buildUI():void
        {
            noRotationCheckBox = new CheckBox( this, 40, 40, "Stop all rotation", allRotationCheckboxHandler );
            noRotationCheckBox.scaleX = noRotationCheckBox.scaleY = scaleModifier;
           
            noPortraitCheckBox = new CheckBox( this, 40, this.height + 40, "Stop portrait orientation", portraitRotationCheckboxHandler );
            noPortraitCheckBox.scaleX = noPortraitCheckBox.scaleY = scaleModifier;
           
            noLandscapeCheckBox = new CheckBox( this, 40, this.height + 40, "Stop landscape orientation", landscapeRotationCheckboxHandler );
            noLandscapeCheckBox.scaleX = noLandscapeCheckBox.scaleY = scaleModifier;
           
            textArea = new TextArea( this, 40, this.height + 40 );
            textArea.scaleX = textArea.scaleY = scaleModifier;
        }
       
        /*
         * Checkbox eventhandlers
         *
         */

        private function allRotationCheckboxHandler( event:MouseEvent ):void
        {  
            noRotation = noRotationCheckBox.selected;
        }
        private function portraitRotationCheckboxHandler( event:MouseEvent ):void
        {
            noPortrait = noPortraitCheckBox.selected;
        }
        private function landscapeRotationCheckboxHandler( event:MouseEvent ):void
        {
            noLandscape = noLandscapeCheckBox.selected;
        }
       
        /**
         * Output of last rotation after the fact
         *  
         * @param event
         *
         */
   
        protected function onOrientation( event:StageOrientationEvent ):void
        {
            textArea.text = "orientation was: " + event.beforeOrientation + "\norientation is: " + event.afterOrientation
        }
       
        /**
         * Triggered before rotaion takes place.
         *
         * Checks which orientations are allowed based on the checkboxes
         *
         * @param event
         *
         */
   
        protected function handleOrientation(event:StageOrientationEvent):void
        {
            if( noRotation )
            {
                event.preventDefault();
                return;
            }
           
            switch( event.afterOrientation )
            {
                case StageOrientation.DEFAULT:
                    if( noPortrait )
                        event.preventDefault();
                    break;
                case StageOrientation.UPSIDE_DOWN:
                    if( noPortrait )
                        event.preventDefault();
                    break;
               
                case StageOrientation.ROTATED_LEFT:
                    if( noLandscape )
                        event.preventDefault();
                    break;
                case StageOrientation.ROTATED_RIGHT:
                    if( noLandscape )
                        event.preventDefault();
                    break;
            }
        }
    }
}