Flex / Actionscript拖放/滑动效果（模拟android / ios界面）

Question

I am trying to simulate the interface of mobile (ios / android)...

1. Drag the menu and you will see the part of previous or next page content
2. Release the menu and if you have dragged over 30% of page content. It will do the transition between current page and target page.

I am just wondering is there any library or Flex component have already provided the above features? I have google it but got nothing related to these features (wrong keyword?..). I can code it by hand but I would like to check whether my approach is the best way to do so...

Thank you in advanced.

Answer 1

i think you'll need to code the 30%-logic/etc. in any case - but here are some links you'll find useful:

1. TweenMax - super handy, very flexible, very simple and straightforward compared to the cool things you can do with it; especially useful when you want to quickly test a concept
2. a chapter in the book
3. fl.transitions

Answer 2

Using the Flex Mobile SDK, you'll note a similar interface, user experience, and functionality as found within native iOS applications.

The List component appears similar to iOS, such as how the scroll bar renders and the ability to spring before the list.

I would take a look at Jason's Flex Blog from Adobe, Mobile List Paging with Page Indicator Skin:

http://blogs.adobe.com/jasonsj/2011/11/mobile-list-paging-with-page-indicator-skin.html

<s:List id="pagedList"
        width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="on"
        pageScrollingEnabled="true"
        itemRenderer="renderers.BackgroundColorRenderer"
        skinClass="skins.PagedListSkin">
    <s:layout>
        <s:TileLayout orientation="rows" requestedRowCount="1"
                      columnWidth="{pagedList.width}" rowHeight="{pagedList.height}"
                      verticalGap="0" horizontalGap="0"/>
    </s:layout>
    <s:ArrayCollection id="colorData">
        <fx:Number>0xFF0000</fx:Number>
        <fx:Number>0xFF9900</fx:Number>
        <fx:Number>0xFFFF00</fx:Number>
        <fx:Number>0x00FF00</fx:Number>
        <fx:Number>0x0000FF</fx:Number>
        <fx:Number>0x9900FF</fx:Number>
    </s:ArrayCollection>
</s:List>

There is a FXP of the project there.