'FLEX'에 해당되는 글 48건

  1. 2010.07.12 1차 alpha 개인 프로젝트...
  2. 2010.07.12 [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 4: 간단한 컨트롤 사용하기
  3. 2010.07.12 [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 3: 인터페이스 레이아웃하기
  4. 2010.07.12 [Flex 3.0] 간편한 DataGrid Export Excel
  5. 2010.07.12 [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 2: 시작하기
  6. 2010.07.12 [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 1: Rich Internet Applications 이해하기
  7. 2010.07.12 [AS3.0] Math함수에 대하여
  8. 2010.07.12 [FLEX 3.0] Flex SWF Font만들기
  9. 2010.07.12 [AS3.0] AS에서 동적 변수 사용하기(또는 동적 함수명 사용하기)
  10. 2010.07.12 [FLEX 3.0] HorizontalList와 ControlBar로 이미지 slider 구현하기

1차 alpha 개인 프로젝트...

FLEX/FLEX Project 2010. 7. 12. 21:50

아~~ 일차본을 완성한지가 3달이나 지났는데.. 이제야 정리를 하네.. 쩝

그래도 잊지 않기 위해서 정리를...

일차 버전은 quietlyscheming.com 에 올라와있는 이미지 슬라이드를 이용해서 카테고리별 이미지 데이터를 이용하여
슬라이더를 구성하는것에 중점을 뒀다..

카테고리 구성이나 이런것들도 디자인을 해야되나 아직까지 기능구현이 먼저이기 때문에 디자인에 별 신경은 쓰지말고..
(매번 디자인 신경쓰다가 기능도 못 구현해서리..ㅠ.ㅠ)


일차 버전은 가장 중점은
1. db에서 카테고리 정보를 받아와 이미지 카테고리를 구성한다.
2. 클릭된 카테고리에 해당하는 이미지 데이터를 가지고 와서 이미지 슬라이더에 적용한다.
3. 나머지는 담버전에..ㅋㅋ


기본 베이스는 APM + Flex로 구성

db 데이터 연동은 기본적으로 Text 파싱 방식으로...

이미지별 comment기능도 추가 해야되나 이것은 나중에... 쓩~~~~~~~~~~

기본적인 데이터 파싱을 Text로 하였기 때문에 데이터는 아래와 같이 리턴된다.
------------------------------------------------------------------------------------------

bbId|^|bbName|^|bbFlag|^|bbImg
27|^|2007년송년회|^|cdn6|^|/UploadFile/categoryList/data-20081126_5.jpg
26|^|remix korea|^|cdn5|^|/UploadFile/categoryList/data-20081126_4.jpg
25|^|테크놀로지|^|cdn4|^|/UploadFile/categoryList/data-20081126_3.jpg
24|^|2007년 체육대회|^|cdn3|^|/UploadFile/categoryList/data-20081126_2.jpg
23|^|JAPAN NET|^|cdn2|^|/UploadFile/categoryList/data-20081126_1.jpg
22|^|2007년 바자회|^|cdn1|^|/UploadFile/categoryList/data-20081126_.jpg
2|^|test1|^|test1|^|/UploadFile/categoryList/data-20081119_.jpg
1|^|홍천|^|album1|^|/UploadFile/categoryList/data-20081118_1.jpg

-------------------------------------------------------------------------------------------

Text파싱하는것을 저번에 만들어 놓았으니 그냥 갔다쓰면 되고...

url : http://riamx.com/album/album.html

혹시 시간되시면 구경좀 와주세요.. 좋은 아이디어나 기능있으면 좀 알려주시고요...

ps: 이미지에 문제가 된다면 바로 바로 삭제 하겠습니다.. 절대 네버... 상업용으로 이미지를 사용하지는 않았어요.. 요즘 무서워서리..

담 버전은 또 언제 만들지...
:

[Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 4: 간단한 컨트롤 사용하기

FLEX/Adobe Flex3 실전 트레이닝북 2010. 7. 12. 21:50

  • LESSON 4: 간단한 컨트롤 사용하기

  • -------------------------------------------------------------------------------------
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     creationComplete="lab1.text=caption1;lab2.text=caption2;">

     <mx:Script>
      <![CDATA[
       /// Parse에게 CDATA 밑에 있는것은 해석 하지 말라고 알려 주는것
       
       [Bindable]
       public var caption1:String = "Caption1";
      
       [Bindable]
       public var caption2:String = "Caption2";
       
      ]]>
     </mx:Script>

     <mx:Label id="lab1" x="90" y="61" text="Label1"/>
     <mx:Label id="lab2" x="90" y="87" text="Label2"/> 
     <mx:Button x="90" y="113" label="Button" click="caption1='okok';caption2='nono'"/>
     
     <!--
     mx:Binding 태그는 해당 변수와 해당 레이블에 값을 연결할수 있다.
     구지 해당 값을 변경하지 않아도 mapping이 되어 있기 때문에 변수 값을 바꾸어도 레이블에 값을 변경할수 있다.
     단, 해당 변수의 [Bindable]로 선언 해주어야 된다. 
     -->
     <mx:Binding source="caption1" destination="lab1.text" />
     <mx:Binding source="caption2" destination="lab2.text" />
     
     <!--
     mx:Binding 태그를 사용하지 않아도 직접 선언할수도 있다.
     <mx:Label id="lab1" x="90" y="61" text="{caption}"/>
     중괄호를 사용하여 선언하면 Binding 한다는 의미가 된다.
     -->
      
     
    </mx:Application>

    ------------------------------------------------------------------------------------------------------
    [EComm.mxml]
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

     <mx:Model id="groceryInventory">
      <groceries>
       <catName>Dairy</catName>
       <prodName>Milk</prodName>
       <imageName>assets/acc.png</imageName>
       <cost>1.20</cost>
       <listPrice>1.99</listPrice>
       <isOrganic>true</isOrganic>
       <isLowFat>true</isLowFat>
       <description>Direct from California where cows are happiest!</description>
      </groceries>
     </mx:Model>

     <mx:states>
      <mx:State name="cartView">
       <mx:SetProperty target="{products}" name="width" value="0"/>
       <mx:SetProperty target="{products}" name="height" value="0"/>
       <mx:SetProperty target="{cartBox}" name="width" value="100%"/>
       <mx:AddChild relativeTo="{cartBox}" position="lastChild">
        <mx:DataGrid id="dgCart" width="100%">
         <mx:columns>
          <mx:DataGridColumn headerText="Column 1" dataField="col1"/>
          <mx:DataGridColumn headerText="Column 2" dataField="col2"/>
          <mx:DataGridColumn headerText="Column 3" dataField="col3"/>
         </mx:columns>
        </mx:DataGrid>
       </mx:AddChild>
       <mx:AddChild relativeTo="{cartBox}" position="lastChild">
        <mx:LinkButton label="Continue Shopping" click="this.currentState=''"/>
       </mx:AddChild>
       <mx:RemoveChild target="{linkbutton1}"/>
      </mx:State>
      
      <mx:State name="expanded">
       <mx:AddChild>
        <mx:VBox x="200" width="100%">
         <mx:Text text="{groceryInventory.description}" width="50%"/>
         <mx:Label text="Certified Organic"/>
         <mx:Label text="Low Fat"/>
        </mx:VBox>   
       </mx:AddChild>
      </mx:State>
     
     </mx:states>
     <mx:ApplicationControlBar dock="true" width="100%" height="90">
      <mx:Canvas width="100%" height="100%">
       <mx:Label x="0" y="0" text="Flex"/>
       <mx:Label x="0" y="41" text="GROCER"/>
       <mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/>
       <mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/>
      </mx:Canvas>
     </mx:ApplicationControlBar>
     <mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/>
     <mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox">
      <mx:VBox width="100%" height="100%" id="products">
       <mx:Label text="Milk" id="prodName"/>
       <mx:Image source="assets/acc.png" scaleContent="true"
        mouseOver="this.currentState='expanded'" mouseOut="this.currentState=''"/>
       <mx:Label text="$1.99" id="price"/>
       <mx:Button label="Add To Cart" id="add"/>
      </mx:VBox>
      <mx:VBox height="100%" id="cartBox">
       <mx:Label text="Your Cart Total: $"/>
       <mx:LinkButton label="View Cart" click="this.currentState='cartView'" id="linkbutton1"/>
      </mx:VBox>
     </mx:HBox>
     
     <!--
      image 태크 사용시  source를 사용하면 해당 swf에는 같이 포함이 되지 않는다.
      그래서 해당 swf파일 실행시 이미지 다운로드 파일은 따로 다운로드 받는다.
      그런데 swf 컴파일시 해당 이미지를 같이 컴파일 하는 방법도 있다. source에 @Embed('assets/......')로 써주면 된다.
      <mx:Image source="@Embed('assets/acc.png')" />
      하지만 @Embed를 사용하면 해당 이미지에 대한 크기가 swf에 같이 포함이 되기 때문에 swf가 단순 source를 사용할때보다 이미지 파일만큼 커진다.
     -->
     
     
    </mx:Application>

    :

    [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 3: 인터페이스 레이아웃하기

    FLEX/Adobe Flex3 실전 트레이닝북 2010. 7. 12. 21:49

  • LESSON 3: 인터페이스 레이아웃하기
  • -----------------------------------------------------------------------------------------------
    [2009.03.11]
    ApplicationControlBar - Dock options = true =>Application의 최 상단에 자동적으로 붙는다.
     -> Default layout은 horizontal 배치가 기본적이다.







    ConstaintRow.swf
    :

    [Flex 3.0] 간편한 DataGrid Export Excel

    FLEX/FLEX 2010. 7. 12. 21:48

    아래 글은 DataGrid의 내용을 간단 하게 Excel로 나타내는것이다.

    기존 Java Lib중 poi 라이브러리 보다는 가볍다.. 하지만 약간의 제한은 있는듯..

    Flex 파일에 있는 Export Excel 버튼을 클릭하지 말고(클릭하면 보안 경고창 나타남)

    See Example 클릭후 해보면 에러 없이 잘된다.

    The following example shows how you can Export to Excel file from DataGrid in Flex 2.



    See Example


    Here are the instructions.

    1: Create mxml file for the GUI with a data grid and export button.
    MXML FILE [main.mxml]:
    Code: Select all

    <?xml version="1.0"?>
    <!--
    * RIASolve.
    * Export data, delivered in the POST, to excel.
    * @author Sobhan Dutta
    -->


    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
       <mx:Script>
          <![CDATA[
             import com.riasolve.utils.DataGridDataExporter;
             private function exportExcel ():void
             {
                DataGridDataExporter.exportCSV(dg,"export.php"); // Change the file type based on the server you are using
                return;
             }
          ]]>
       </mx:Script>
        <mx:XMLList id="users">
            <user>
                <name>Christina Coenraets</name>
                <phone>555-219-2270</phone>
            </user>
            <user>
                <name>Joanne Wall</name>
                <phone>555-219-2012</phone>
            </user>       
        </mx:XMLList>
        <mx:Panel title="DataGrid Export Excel Example" height="100%" width="100%">       
            <mx:DataGrid id="dg" width="100%" height="100" rowCount="5" dataProvider="{users}">
                <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name"/>
                    <mx:DataGridColumn dataField="phone" headerText="Phone"/>
                </mx:columns>
            </mx:DataGrid>
           <mx:Button label="Export Excel" click="exportExcel ()"/>
        </mx:Panel>
    </mx:Application>





    2: Create a class file which does the export.
    CLASS FILE [com.riasolve.utils.DataGridDataExporter]:
    Code: Select all

    /**
       * RIASolve.
       * Export data, delivered in the POST, to excel.
       * @author Sobhan Dutta
       */
    package com.riasolve.utils
    {
       import mx.controls.DataGrid;
       import mx.controls.dataGridClasses.DataGridColumn;
       import mx.collections.ArrayCollection;
       import mx.collections.XMLListCollection;
       import mx.collections.IList;
       import mx.collections.IViewCursor;
       import flash.net.URLVariables;
       import flash.net.URLRequest;
       import flash.net.URLRequestMethod;
       import flash.net.navigateToURL;
       
       public class DataGridDataExporter
       {

          public static function exportCSV(dg:DataGrid,
             jspFile:String,
             columnSeparator:String="\t",
             rowSeparator:String="\n"):void
          {
             var data:String = "";
             var columns:Array = dg.columns;
             var columnCount:int = columns.length;
             var column:DataGridColumn;
             var header:String = "";
             var headerGenerated:Boolean = false;
             var dataProvider:Object = dg.dataProvider;

             var rowCount:int = dataProvider.length;
             var dp:Object = null;

          
             var cursor:IViewCursor = dataProvider.createCursor ();
             var j:int = 0;
             
             header ='<table><thead>';
             data   = '<tr >';
             
             //loop through rows
             while (!cursor.afterLast)
             {
                var obj:Object = null;
                obj = cursor.current;
                
                if (headerGenerated)
                   data += "<tr >";
                   
                //loop through all columns for the row
                for(var k:int = 0; k < columnCount; k++)
                {
                   column = columns[k];

                   // Don't add if data is invisible
                   if(!column.visible || column.dataField==null)
                   {                  
                      continue;
                   }
                
                   data += "<td >"+ column.itemToLabel(obj)+ "</td >";

                   //generate header of TSV, only if it's not genereted yet
                   if (!headerGenerated)
                   {
                      header += "<th >" + column.headerText + "</th >";
                   }            
                }
                
                if (!headerGenerated){
                   header += "</tr></thead><tbody>";
                   headerGenerated = true;
                }

                data += "</tr >";
                j++;
                cursor.moveNext ();
             }
             
             data += "</tbody></table >"
             //set references to null:
             dataProvider = null;
             columns = null;
             column = null;         
             
             
             ////////////////////////////////////////////
             // Start opening into a new browser
             var variables:URLVariables = new URLVariables();
             variables.dg   = header + "\r\n" + data;
             
             //Setup a new request and make sure that we are
             //sending the data through a post
             var u:URLRequest = new URLRequest(jspFile);
             u.data = variables; //Pass the variables
             u.method = URLRequestMethod.POST; //Don't forget that we need to send as POST
             
             //We can use _self here, since the script will through a filedownload header
             //which results in offering a download to the user (and still remaining in you Flex app.)
                navigateToURL(u,"_self");

          }   
       }

    }



    3: Copy this PHP or JSP file in your webapp which will open the excel file.

    Export file for PHP code [export.php]:
    Code: Select all

    <?php
    /**
    * Export data, delivered in the POST, to excel.
    * @author Sobhan Dutta
    */
    header('ETag: etagforie7download'); //IE7 requires this header
    header('Content-type: application/octet_stream');
    header('Content-disposition: attachment; filename="rapportage.xls"');

    //Add html tags, so that excel can interpret it
    echo "<html>
    <body>
    ".stripslashes($_POST["dg"])."
    </body>
    </html>
    ";
    ?>



    Export file for JSP code [export.jsp]:
    Code: Select all

    <%-- Set the content type header with the JSP directive --%>
    <%@ page contentType="application/vnd.ms-excel" %>
                                                                                                                       
    <%-- Set the content disposition header --%>
    <% response.setHeader("Content-Disposition", "attachment; filename=\"odi.xls\""); %>

    <%@page language="java" import="java.util.*" %>
    <%
    out.println(request.getParameter("dg"));
    %>

    출처 : http://forums.riasolve.com/viewtopic.php?f=2&t=2

    :

    [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 2: 시작하기

    FLEX/Adobe Flex3 실전 트레이닝북 2010. 7. 12. 21:42

    LESSON 2: 시작하기

  • LESSON 2: 시작하기 [판도라HD], [VimeoHD]


  • flash player debug 다운로드 : aditional download >> flash player 10 >>Adobe flash player 10
    기존 설치된 flash player를 삭제 하고 debug버전을 설치한다.
    :

    [Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 1: Rich Internet Applications 이해하기

    FLEX/Adobe Flex3 실전 트레이닝북 2010. 7. 12. 21:42

    LESSON 1: Rich Internet Applications 이해하기

    엄진영 님에 기술 나눔터로 링크 변경..

  • LESSON 1: Rich Internet Applications 이해하기 [판도라HD], [VimeoHD] 
  • :

    [AS3.0] Math함수에 대하여

    FLEX/FLEX 2010. 7. 12. 21:42

    Math.abs(-1)              //  절대값.   결과는 1
    Math.sin(1)               //  sin 값.   결과는 0.841470984807897
    Math.cos(1)               //  cos 값.   결과는 0.54030230586814
    Math.tan(1)               //  tan 값.   결과는 1.5574077246549
    Math.log(2)               //  log 값.   결과는 0.693147180559945
    Math.exp(1)               //  지수 값.    결과는 2.71828182845905
    Math.sqrt(9)              //  제곱근 값.    결과는 3
    Math.pow(2 , 4)           //  거듭제곱 값.    결과는 16
    Math.ceil(1.1)            //  가까운 정수로 올림 값.    결과는 2
    Math.ceil(1.5)            //  가까운 정수로 올림 값.    결과는 2
    Math.floor(1.2)           //  가까운 정수로 내림 값.    결과는 1
    Math.floor(1.7)           //  가까운 정수로 내림 값.    결과는 1
    Math.round(1.2)           //  가까운 정수로 반올림 값.    결과는 1
    Math.round(1.5)           //  가까운 정수로 반올림 값.    결과는 2
    Math.max(1 , 2)           //  두 정수 중 큰 정수값.    결과는 2
    Math.min(1 , 2)           //  두 정수 중 작은 정수값.    결과는 1
    int(1.12 );               //  수치를 정수화.   결과는 1    
    int(1.82 );               //  수치를 정수화.   결과는 1    
    parseInt("3.2");          //  문자열을 정수화.  결과는 3    
    parseInt("3.7");          //  문자열을 정수화.  결과는 3    
    parseInt("5abc");         //  문자열을 정수화.  결과는 5
    parseInt("abc5");         //  문자열을 정수화.  결과는 NaN    
    parseInt("3E8", 16);      //  16 진수로 변환.   결과는 1000
    parseInt("777", 8);       //  8 진수로 변환.   결과는 511
    parseInt("1010", 2);      //  2 진수로 변환.   결과는 10
    parseFloat("2")           // 문자열을 부동점 숫자로 변환.  결과는 2
    parseFloat("2.4")         // 문자열을 부동점 숫자로 변환.  결과는 2.4
    parseFloat("2.6abc")      // 문자열을 부동점 숫자로 변환.  결과는 2.6
    Number("11")              //  문자열을 숫자로 변환.   결과는 11
    Number("12.34")           //  문자열을 숫자로 변환.   결과는 12.34
    Number("12.34abc")        //  문자열을 숫자로 변환.   결과는 NaN
    sss = 123;  uuu = sss.toString();      // 숫자를 문자로변환.  결과는 123
    ord("abc");                            //  ASCII 값.   결과는 97
    s = "abc";   sss = s.charCodeAt(0);    //  1번째 ASCII 값 .   결과는 97
    s = "abc";   sss = s.charCodeAt(1);    //  2번째 ASCII 값.    결과는 98
    chr(65);                               //  ASCII 코드를 문자화.  결과는 A
    String.fromCharCode(64,65,66);         //  ASCII 코드를 문자화.  결과는 @AB
    Math.random();                         // 난수 발생.  결과는 0 - 1 사이의 소숫점 포함한 값
    random(5);                             // 난수 발생.  결과는 0,1,2,3,4 중 하나

    :

    [FLEX 3.0] Flex SWF Font만들기

    FLEX/FLEX 2010. 7. 12. 21:41

    FLEX에서 사용할 SWF 폰트를 만들어보자.

    flex에서 사용해야 되기 때문에 swf로 형태로 만드는것이 편한다.

    그럼 일단 사용하고자 하는 폰트 파일이 필요하다. 그런데 폰트 파일 용량을 보면 놀라게 된다. 그런데 걱정하지 말자..ㅎㅎ

    테스트를 하기 위해서 잘 사용하지는 않지만 휴먼편지체를 만들어 볼것이다.
    이걸 보면 알겠지만 기본 폰트 용량이 2.53MB나 된다.. (걱정하지 마삼..ㅎㅎ)

    자 이제 시작해보자.

    1. 자신이 사용할 폰트를 결정하다.

    2. swf를 만들어야 하니까 플래쉬 실행한다.

    3. 새파일을 하나 만들어서 'T'를 눌러 글자를 입력한다. (참고로 플래쉬 쓰는법을 잘 모름..ㅎㅎ)
     -> 플래쉬를 몰라서 flash cs3 한글판을 사용하고 있는데 한글판이 더 사용하기 힘드네요.ㅠ.ㅠ

    4. 원하는 폰트로 변경하고 속성을 '동적 텍스트'형식 그리고 '가독성을 위한 앤티앨리어싱'으로 선택한다.

    5. 여기서 이제 용량을 줄이기 위해서 포함을 눌러보면 아래와 같이 원하는 문자 세트만 추가 할수 있다.
        이래서 용량을 줄일수 있는것이다. 필요한것만 선택하고 Ctrl + 클릭하면 됨


    6. 이제 내보내기만 하면 끝

    7. 자 이제 FLEX에서 사용해보자.

    8. MXML에서 <mx:Style source="/assets/styles/style.css"/> 추가하고

    9. style.css에서 사용할 폰트 지정
    @font-face
    {
     src: url("/assets/font.swf");
     fontFamily: "휴먼편지체";
    }

    .label {
     fontSize:10;
     fontFamily : "휴먼편지체";
    }


    예제를 만들기 위해서 휴먼편지체를 사용했는데 왠만하면 영어도 될 폰트를 쓰자...^^
    :

    [AS3.0] AS에서 동적 변수 사용하기(또는 동적 함수명 사용하기)

    FLEX/FLEX 2010. 7. 12. 21:41

    동적인 변수나 동적인 함수를 실행해야되는 경우가 있는데 이경우 아래와 같이 사용하면 될거 같다.

    아래는 httpService를 한번 날려서 return 되는 결과값을 가지고 다시 httpService를 send할때 사용했다.

    ------------------------------------------

    for(var i=0; i < 15; i++)
    {
      this["search" + (i+1)].send(params);
    }

    <mx:HTTPService id="search1" ........................../>
    ................
    <mx:HTTPService id="search15" ........................../>
    :

    [FLEX 3.0] HorizontalList와 ControlBar로 이미지 slider 구현하기

    FLEX/FLEX 2010. 7. 12. 21:38

    이미지 카테고리를 만들려고 구현하다가 스크롤바가 너무 보기 싶어서 다른방법을 써보기로 했다.

    http://blog.flexexamples.com/ 이곳에서 찾아보다가 HorizontalList와 controlBar로 구현하면 되겠다 싶어서
    내가 필요한것으로 좀 변경해보았다..

    이미지 카테고리 이기때문에 파일 업로드시 이미 내가 필요한 사이즈 대로 여러가시 썸네일을 구현해 놓은 상태이고
    다순히 화면에 보여주기만 하면된다.

    기본 로직은 http://blog.flexexamples.com/ 에 나와있는 소스 그대로 이고 화면에 보여줄때 itemRenderer를 사용해버려서리
    스크롤바가 나타나는데 그것을 방지 하기 위해서 대표 이미지를 하나 구해서 이미지의 사이즈를 구했다..

    ----------------------------------------------------------------------------------------------
    sliderTest.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="hListInit();">

     <mx:Script>
      <![CDATA[
       import mx.controls.Image;
       import mx.events.SliderEvent;
       
       private var imageUrl:String = "";
       private var basePlusWidth = 6;
       private var basePlusHeight = 26;
       
       private function prev():void
       {
        var pos:int = hList.horizontalScrollPosition - 1;
        var min:int = 0;
        var value:int = Math.max(min, pos);
        hList.horizontalScrollPosition = value;
       }
       
       private function next():void
       {
        var pos:int = hList.horizontalScrollPosition + 1;
        var max:int = hList.maxHorizontalScrollPosition;
        var value:int = Math.min(pos, max);
        hList.horizontalScrollPosition = value; 
       }
       
       private function slider_change(evt:SliderEvent):void
       {
        hList.horizontalScrollPosition = evt.value;
       }
       
       
       private function hListInit():void
       {
        var listData:Array = arr;
        var baseImage:Image = new Image();
        var baseImageWidth:int = 0;
        var baseImageHeight:int = 0;
        
        if(listData && listData.length > 0)
        { 
         imageUrl = listData[0]["src"];
         baseImage.addEventListener(Event.COMPLETE, imageLoadHandler);
         baseImage.load(imageUrl);
        }
       }
       
       private function imageLoadHandler(event:Event):void
       {
        var baseImage:Image = event.currentTarget as Image;
        baseImage.width = baseImage.contentWidth;
        baseImage.height = baseImage.contentHeight;
        
        hList.columnWidth = baseImage.width + basePlusWidth;
        hList.rowHeight = baseImage.height + basePlusHeight;
        
       }
       
       
      ]]>
     </mx:Script>

     

     <mx:Array id="arr">
      <mx:Object lbl="TEST 1" src="http://riamx.com/UploadFile/album3List/data-20081114_.jpg" />
     </mx:Array>
     
     
     <mx:Panel styleName="opaquePanel">
      <mx:HorizontalList id="hList"
       dataProvider="{arr}"
       itemRenderer="HorizontalListItemRenderer"
       verticalScrollPolicy="off"
       horizontalScrollPolicy="off"
       rowCount="1"
       borderSkin="{null}"/>

       <mx:ControlBar>
        <mx:Button label="Previous" click="prev();" />
        <mx:HSlider id="slider" minimum="0" maximum="{hList.maxHorizontalScrollPosition}"
         value="{hList.horizontalScrollPosition}" liveDragging="true" snapInterval="1"
         tickInterval="1" showDataTip="false" width="100%" change="slider_change(event);" />
        <mx:Button label="Next" click="next();"/>
       </mx:ControlBar>
       
     </mx:Panel>
     
    </mx:Application>

    ------------------------------------------------------------
    HorizontalListItemRenderer.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:Label text="{data.lbl}" fontWeight="bold" horizontalCenter="0"/>
     <mx:Image source="{data.src}" verticalCenter="10" horizontalCenter="0"/>
    </mx:Canvas>

    :