3 Replies Latest reply on Dec 7, 2008 8:37 PM by rtalton

    Loop to create same image multiple times

    miglara
      I believe this should be easier than I think but I haven't found the correct way to do it. Could you please let me know how do I display the same image multiple times?
      Let's say, there are multiple items, each with a rate which goes from 0 to 10. The idea is to display the item name and then multiple images according to the rate value. I was able to get the Repeater to display the name of all items but I'm having a lot of trouble to create a loop to display the images. It should look something like:
      item 1 * * * * *
      item 2 * * *
      item 3 * * * *

      I will greatly appreciate any suggestions!!!

      -Mike
        • 1. Loop to create same image multiple times
          Michael Borbor Level 4
          You could do something like this:

          <mx:Script>
          <![CDATA[
          import mx.collections.ArrayCollection;
          //dummy Array
          //The range of values
          public var myArray:Array=[1,2,3,4,5,6,7,8,9,10];
          var myMovies:ArrayCollection = new ArrayCollection([{Movie: 'Superman', stars: 3},{Movie: 'Batman', stars: 5}
          ,{Movie: 'Spiderman', stars: 4}]);
          private function repeat(req:int):void{

          }
          ]]>
          </mx:Script>
          <mx:VBox width="100%" height="50%">
          <mx:Repeater dataProvider="{myMovies}" id="r" >
          <mx:HBox>
          <mx:Label text="{r.currentItem.Movie}" />
          <mx:HBox>
          <mx:Repeater dataProvider="{myArray}" count="{r.currentItem.stars}">
          <mx:Image width="109" height="142" source="stars.jpg"/>
          </mx:Repeater>
          </mx:HBox>
          </mx:HBox>
          </mx:Repeater>
          </mx:VBox>
          • 2. Re: Loop to create same image multiple times
            *gsb* Level 1
            This is usually accomplished a different way. That is using two images both of five stars. One image, the bottom most when layered, is the star outlines; the other, atop of the first, is the same stars but filled with color. The top image has a mask attached such that at x scale == 0% none of the top image shows and at 100% all five of the top image stars show. So, 20% is 1-star, 40% is 2-stars, ... and 50% is two and a half. See??

            • 3. Re: Loop to create same image multiple times
              rtalton Level 4
              Having a "star-rating" is something I've been meaning to do so I made a component you can use if you want. I expanded on mab_bond's code a bit, making a separate component and using the drawing API to draw the stars.
              I also added the ability to display a "1/2" star in the ratings, and add a dropshadow if you want.
              Example with source-view enabled:
              http://www.anaheimwib.com/_comps/stars/

              Hope it helps you.