5 Replies Latest reply on Mar 18, 2010 9:17 AM by 123tron

    Trying to create a photo gallery... with little knowledge of Flex

    123tron

      Hey Guys,

       

      I am trying build a photo gallery and I am having the hardest time.

       

      Is there anything out there that helps people from scratch ?

       

      I need help learning where to store the images... IE... jpegs

       

      and the right syntax to call up the code...

       

      Path info etc...

       

       

       

      I tried to hack two of the following programs but in the case below the program could not find the files...

       

       

      I am looking for an easy way to get started any help would be great

      !!!

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" verticalScrollPolicy="off" horizontalScrollPolicy="off"   initialize="init()"  applicationComplete="startitup()" backgroundGradientColors="[0xffffff, 0x00808C]>

       

      <mx:HTTPService id="movieRequest" url="data/otrdata.xml" result="movieHandler(event)"/>

       

      <mx:Glow id="glowImage" duration="200"

              alphaFrom="1.0" alphaTo="0.5"

              blurXFrom="0.0" blurXTo="15.0"

              blurYFrom="0.0" blurYTo="15.0"

              color="0x00FF00"/>

          <mx:Glow id="unglowImage" duration="200"

              alphaFrom="0.3" alphaTo="1.0"

              blurXFrom="15.0" blurXTo="0.0"

              blurYFrom="15.0" blurYTo="0.0"

              color="0x0000FF"/>

       

      <mx:Fade

          id="fade"

          target="{myImage}"

          duration="400"

          alphaFrom="0"

          alphaTo="1"/>

       

       

      <mx:TextArea x="463" y="156" height="326" width="387" id="myText" fontSize="14" editable="false"/>

       

          <mx:Image x="23" y="157" width="432" height="325" id="myImage" scaleContent="true"   complete="fade.play()"/>

       

      <mx:Tile direction="horizontal" borderStyle="inset"

                  horizontalGap="10" verticalGap="15"

                  paddingLeft="10" paddingTop="10" paddingBottom="10" paddingRight="10" x="62" y="70" width="750" height="77">

       

                  <mx:Repeater id="rp" dataProvider="{movieData}">

                      <mx:Image height="49" width="50" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" toolTip="{rp.currentItem.subtitle}" source="{rp.currentItem.icon}" click="mygothere(event.currentTarget.getRepeaterItem ())" />

                  </mx:Repeater>   

                  </mx:Tile>

       

                                          <mx:Label x="78" y="485" id="sourceTag0" width="333" textAlign="center" fontSize="14"/>

       

      <mx:Label x="23" y="24" id="sourceTag1" fontSize="18" fontWeight="bold" width="281"/>

       

      <mx:Image x="801" y="14" id="navimage1" source="@Embed(source='images/icons/Urbm.jpg')"  rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="43" height="32" click="myMainget('All'),myNumfind(0)"/>

      <mx:Label id="labelall" x="813" y="50" text="All" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" width="43" height="18" click="myMainget('All'),myNumfind(0)" />

              

      <mx:Image x="383" y="14" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage2" click="myMainget('Home'),myNumfind(0)"/>

      <mx:Label x="382" y="49" text="Home" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}" click="myMainget('Home'),myNumfind(0)"/>

       

      <mx:Image x="435" y="14" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/buildingjob.jpg')" width="45" height="32" id="navimage3"  click="myMainget('City Life and Rhetoric'), myNumfind(0)"/>

      <mx:Label x="430" y="49" text="Rhetoric" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}"  width="56" height="19"   click="myMainget('City Life and Rhetoric'), myNumfind(0)"/>

       

      <mx:Image x="491" y="14" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}" source="@Embed(source='images/icons/slums.jpg')" width="46" height="32" id="navimage4"  click="myMainget('3 Perspectives'), myNumfind(0)" />

      <mx:Label x="494" y="49" text="3 Pers" rollOverEffect="{glowImage}"  rollOutEffect="{unglowImage}"   mouseUpEffect="{unglowImage}"  width="46" height="19"   click="myMainget('3 Perspectives'), myNumfind(0)"/>

       

      <mx:Image x="550" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage5"/>

      <mx:Label x="547" y="49" text="History"/>

       

      <mx:Image x="602" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage6"/>

      <mx:Label x="601" y="49" text="Today"/>

       

      <mx:Image x="650" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage7"/>

      <mx:Label x="648" y="50" text="Future"/>

       

      <mx:Image x="700" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage8"/>

      <mx:Label x="693" y="50" text="Opinions"/>

       

      <mx:Image x="751" y="14" source="@Embed(source='images/icons/Buddy.jpg')" width="38" height="32" id="navimage9"/>

      <mx:Label x="746" y="50" text="Builders"/>

       

       

      <mx:Script>

      <![CDATA[

      import mx.rpc.events.ResultEvent;

      import mx.collections.ArrayCollection;

       

      import flash.events.Event;

              import mx.events.DropdownEvent;

       

              public var mynewnum:String="Home";

       

               private function changeEvt(event:Event):void {

              

               mynewnum=event.currentTarget.selectedItem.label;

               trace(mynewnum);

                     filterByCategory2();

                  }

       

      public function startitup():void{

       

      myImage.source ="images/Buddy.jpg";

       

      myText.htmlText="<b>Over-the-Rhine</b> is not only at the center of the Cincinnati community, but it is also at the center of a lot of controversies. This area has become a breeding ground for social issues. Issues of equality, crime, affordible housing, poverty, violence, and economic growth have recently been argued. Although these topics are the current issues facing Over-the-Rhine, this is not the first time many of these issues have been see by Over-the-Rhine. It seems that history is repeating itself once again. So where does the community go from here? Are there any answers. The questions one must consider are simple. Will Over-the-Rhine be in the same position thirty years from now? Is the current Over-the-Rhine community being treated fairly by the city? Do the urbanist movement, the people's movement, and the CDC have the best interests of the community in mind? How can the city deal with these issues without causing a fight within the community? Can Over-the-Rhine become a community where everyone is happy?";

      sourceTag1.text = "Home";

       

      sourceTag0.text ="A Look into the Over-the-Rhine Community";

       

       

       

       

       

       

       

      public function myNumfind(num:Number):void{

       

      myImage.source =movieData[num].image;

       

      myText.htmlText=movieData[num].text;

      sourceTag1.text = movieData[num].title;

       

      sourceTag0.text =movieData[num].subtitle;

       

       

       

       

       

       

      public function mygothere(event:Object):void{

       

      myImage.source =event.image;

       

      myText.htmlText=event.text;

       

      sourceTag1.text = event.title;

       

      sourceTag0.text = event.subtitle;

       

       

      public function myMainget(myhere:String):void{

      mynewnum=myhere;

      filterByCategory2();

       

      }

       

       

      public function filterByCategory2():void

      {

       

      movieData.filterFunction = catFilter2;

      movieData.refresh();

      }

      public function catFilter2(item:Object):Boolean

      {

      if(mynewnum=="All"){

       

      return true;

       

      }else{

       

      return item.cat == mynewnum;

      }

      }

       

       

      [Bindable]

      private var movie:String;

       

      [Bindable]

          public var selectedItem:Object; 

       

       

       

      [Bindable]

      public var movieData:ArrayCollection;

       

      private function init():void

      {

      movieRequest.send();

       

                  }

       

       

       

       

      private function movieHandler(event:ResultEvent):void

      {

      movieData = event.result.otrdata.mydata;

      filterByCategory2();

      }

       

       

      private function formatPositionToolTip(value:int):String{

       

      var result:String = (value % 60).toString();

              if (result.length == 1){

                  result = Math.floor(value / 60).toString() + ":0" + result;

              } else {

                  result = Math.floor(value / 60).toString() + ":" + result;

              }

              return result;

      }

       

      ]]>

      </mx:Script>

      <mx:Label x="316" y="39" text="Menu" fontSize="12" fontWeight="bold" fontStyle="italic" color="#000000"/>

      <mx:HRule x="364" y="49" width="480" strokeWidth="2" strokeColor="#000000"/>

       

      </mx:Application>

        • 1. Re: Trying to create a photo gallery... with little knowledge of Flex
          Matt Le Fevre Level 4

          I'd recommend linking your flex app to a PHP file, it'll automatically handle all the photos for you without you having to embed them all. Keeps the app size small and lets you add more pictures without having to alter any code. Here's the example code of a very simply image gallery that i'd build on if i was making a photogallery.

           

          Flex:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="getPictures.send()">
              
              <mx:HTTPService id="getPictures" url="getPictures.php" method="POST" showBusyCursor="true"/>
              
              <mx:TileList dataProvider="{getPictures.lastResult.Pictures}" width="500" height="500" x="349" y="129">
                  <mx:itemRenderer>
                      <mx:Component>
                          <mx:Image width="200" height="200" source="{data.imagePath}"/>
                      </mx:Component>
                  </mx:itemRenderer>
              </mx:TileList>
          </mx:Application>
          
          

           

           

          PHP:

           

          <?php
          
              foreach (glob("*.png") as $filename) 
              {
                  print "<Pictures><imagePath>".$filename."</imagePath></Pictures>";
              }
          
          ?>
          
          • 2. Re: Trying to create a photo gallery... with little knowledge of Flex
            123tron Level 1

            I hate to admit this but I am so new... I barely know any PHP and I have no clue where to put these files in the flex builder... I find the flex builder to be very confusing... as a newby..

             

            If you have time any chance you could respond with where to put these files...  THX...

             

            P.S.

             

            I could probably figure it out with screen shots.. THX

            • 3. Re: Trying to create a photo gallery... with little knowledge of Flex
              Matt Le Fevre Level 4

              Put the release files from your flex project, the PHP file and all your .png images in the same folder on your server.

              • 4. Re: Trying to create a photo gallery... with little knowledge of Flex
                SpaghettiCoder Level 3

                There is a training video that teaches flex, It so happens that one of their case studies was building a photo album app...

                 

                Pictures were initially encoded in the application just like your app is currently.

                 

                Then later in the training, they were then moved externally to provide for more flexibility for future growth etc.  Which is probably what you should be aiming for.  No php, just really straightforward XML files called in by a <mx:HTTPService> If I remember correctly.

                 

                The vid is by TotalTraining, and it's like 10hrs total.

                • 5. Re: Trying to create a photo gallery... with little knowledge of Flex
                  123tron Level 1

                  Getting Closer

                   

                  So I did as suggested I put the PHP file in the SRC and created the project.  I get a screen with no image.. which make sence since I dont know where to add my images..

                   

                   

                   

                  But I am brand new to programming and PHP

                   

                  So I know that I need to add a file name or folder in this php but not sure...

                  Where and then when this is complete...

                   

                  Do I need to create a /bin folder to add my images... I am a bit unclear as to how to describe the path in the flex builder...

                   

                   

                  Thanks !!

                   

                  ( I am not sure where I add the file name and what's the path )

                   

                  <p>&lt;?php</p>

                  <p> foreach (glob(&quot;*.png&quot;) as $filename) <br />

                    {<br />

                    print &quot;&lt;Pictures&gt;&lt;imagePath&gt;&quot;.$filename.&quot;&lt;/imagePath&gt;&lt;/Pict ures&gt;&quot;;<br />

                    }</p>

                  <p>?&gt;</p>