2 Replies Latest reply on Oct 4, 2007 10:51 AM by Mark.P.

    Running into problems zooming in on a component made in Flash

    Mark.P.
      I created a component in flash CS3 and am trying to put some kind of zoom feature on it, but when I zoom in on it it zooms right out of the Panel it sits in. What's the problem here?

      Here's what I have:

      - MXML -

      <mx:Panel id="radar" title="Radar" width="100%" height="100%" horizontalAlign="center" verticalAlign="middle" >
      <mx:Canvas width="100%" height="100%" clipContent="true">
      <fR:StarAndBall id="radar" width="600" height="600" click="getService()" />
      </mx:Canvas>....

      <mx:HSlider
      minimum=".25" maximum="2"
      value="1"
      liveDragging="true"
      change="radar.zoomRadar(event.target.value)" tickInterval=".15" labels="[.25,2]" left="10" top="10" bottom="36"/>

      - AS in the Flash -

      public function zoomRadar( factor:Number ) : void {
      this.scaleX = factor;
      this.scaleY = factor;
      }
        • 1. Running into problems zooming in on a component made in Flash
          Karl_Sigiscar_1971 Level 3
          Hi,

          In the project our team work on, we are in a similar situation where a Flash piece scales according to the size of Flex components surrounding it. The first thing is to place the Flash component in a Box (a workaround for the bug where components do not accept percentage sizing as a box always scales to fit the size of its content). Then place the Box in a Canvas.

          <mx:Canvas id="gameContainerCanvas"
          width="100%"
          height="100%"
          minWidth="512"
          minHeight="384"
          horizontalScrollPolicy="off"
          verticalScrollPolicy="off">

          <!-- This box is there to be the container of the Flash CS3 component (cf. Flex Component Kit for Flash CS3 issue) -->

          <!-- Percentage sizing is not working in absolute layouts.
          As a workaround, you can use horizontal/vertical layouts or put your contents inside a VBox.
          This is a bug that will be fixed in a future release. Glenn Ruehle 11:00, 16 May 2007 (PDT) -->

          <mx:Box id="gameContainerBox"
          width="100%"
          height="100%"
          paddingBottom="50"
          paddingLeft="50"
          paddingRight="50"
          paddingTop="50">

          <local:MyFlashComponent id="content"
          width="{ this.gameContainerCanvas.width }"
          height="{ this.gameContainerCanvas.width * ASPECT_RATIO }">
          </local>

          </mx:Box>

          </Canvas>

          Now, if you dynamically change the width and height of your canvas (e.g by binding to the value of an <mx:Slider), the Flash component will scale.

          Karl Sigiscar.
          • 2. Re: Running into problems zooming in on a component made in Flash
            Mark.P. Level 1
            Yes, thank you! This does it very well. This solution brings up 2 questions.

            When I zoom out from the 100% it zooms from the center, but when I zoom in it zooms from the center until it hits the top and left borders. When it hits there it starts to zoom from those 2 points.
            When I zoom in I'd like to see scroll bars, but I can get that to work on the Panel, any sugestions?


            Thanks Again