3 Replies Latest reply on Sep 22, 2009 2:16 PM by Flex harUI

    Resizing Components | IMG | SWF for Different Screen Resolutions

    frogman.pep

      This is a multi-part question and might be best answered by directing towards some good tutorials/documentation on the topics, yet I'll use a specific instance.  Go here: site for this example.  The three areas I'd like to touch up are the logo (The building, pole, and neon sign), the picture stamps, and trailer animation (History).  If you change the screen resolution from 800 x 600 to 1280 x 1024 you'll see the layout fits the screen ok at least in my opinion, except for those three areas mentioned earlier.  So what I'm getting at is, is there a way synonomous to 'scaleContent="true"' for mx:Image(s) inside Panels for custom components, img (by themselves), SWFs etc?  For example how can I make the neon custom component fit more appropriately when it's displayed on a 1280 x 1024 screen.  Here's the code.

       

      Index.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"    
          creationComplete="init()"
          xmlns:comp="components.*"
          layout="absolute"
          verticalScrollPolicy="off"
          horizontalScrollPolicy="off"
           backgroundColor="#464d57">
       
       <mx:Script>
        <![CDATA[
         import mx.rpc.events.*;
         import mx.collections.*;
         
         import mx.resources.*;
         
         [Bindable]
         public var pic:ArrayCollection;
         
         private function init():void{
          picDataIn.send();
         }
         
         private function picHandler(event:ResultEvent):void{
          pic = event.result.pics.image;
          trace(pic);
         }
        ]]>
       </mx:Script>
       
       <mx:constraintColumns>
        <mx:ConstraintColumn id="col1" width="25%"/>
        <mx:ConstraintColumn id="col2" width="25%"/>
        <mx:ConstraintColumn id="col3" width="25%"/>
        <mx:ConstraintColumn id="col4" width="25%"/>
       </mx:constraintColumns>
          
       <mx:constraintRows>
        <mx:ConstraintRow id="row1" height="25%"/>
        <mx:ConstraintRow id="row2" height="50%"/>
        <mx:ConstraintRow id="row3" height="25%"/>
        
        </mx:constraintRows>
       
       <mx:HTTPService id="picDataIn"
           url="assets/data/books.xml"
           result="picHandler(event)"/>
       
       <mx:Image source="assets/view/Interface.png"
          top="row2:0"
          scaleContent="true"/>
       
       <comp:Neon  autoLayout="true" />
       
       <mx:LinkBar dataProvider="bookPages"    
          fontSize="24"
          horizontalGap="50"
          bottom="row1:-5"
          right="col4:0"
          disabledColor= "0xaf2d2d"/>
       
       <mx:ViewStack id="bookPages"
           top="row2:0" bottom="row3:0"
           left="col1:0" right="col4:0"
           resizeToContent="true">
        
        <comp:Home id="home"
           label="Home"/>      
        
        <comp:Pics id="pics"
           label="Pics"     
           width="100%" height="100%"
           picData="{pic}"/>
        
        <comp:History id="history"
            label="History"/>
            
        <comp:Contact id="contact"
            label="Contact"
            width="100%" height="100%"/>
            
       </mx:ViewStack>
      </mx:Application>
      
      


      comp:Neon (Neon.mxml)

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas  xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:SWFLoader id="Loader"
         source="@Embed(source='assets/view/neon2.swf')"/>
      </mx:Canvas>

       

      The neon.fla's dimensions are 800 x 150, as that goes along with my uncertainties.  Is there a prefered method to setting up your images?  Would setting up multiple swfs to be loaded pending on the user's screen resolution be the best way, and all those questions in between?  Thanks a lot for your time, understand this is not the easiest of questions to answer.