4 Replies Latest reply on Jun 3, 2010 1:03 AM by Peter Flynn (Adobe)

    The easy way?

    SMAKDIGITAL Level 1

      I must admit that this has saved me hours of time and ultimately brought me out of Flash retirement.

       

      My question is this.

       

      When creating a portfolio with thumbnails as buttons that change a larger image to what the thumbnail displays. Am I doing this right by creating several pages just to make an image appear for each individual image? Seems like allot to me and wondering if there is an easier way to accomplish this.

       

       

      Also wondering if I should optimize the jpegs in Catalyst?

       

      smak.jpg

       

      To see it working its located it www.smakdigital.com

       

      Thank you.

       

      Osiris

        • 1. Re: The easy way?
          Peter Flynn (Adobe) Adobe Employee

          Hi Osiris,

           

          >> I must admit that this has saved me hours of time and ultimately brought me out of Flash retirement.

           

          Glad to hear it!

           

          >> Am I doing this right by creating several pages just to make an image appear for each individual image?

           

          Pretty much, yes.  Here are two ways to improve on your approach, however:

           

          1. Place the thumbnails into a Data List.  This makes it less work to edit things like item spacing/layout, or the selection highlight, since you don't have to do it once per thumbnail image.  To display a different full-size image depending on which list item you clicked, create a series of "On Select" interactions using the "When a specific item is selected" option.
          2. Put your image gallery into a custom component and have one state in the component for each image.  This keeps your list of top-level application pages/states clean, so that if you later decide to add other screens such as contact info, info page, etc., they're not all mixed in alongside your image-specific states.

           

          >> Seems like allot to me and wondering if there is an easier way to accomplish this.

           

          We here on the Catalyst team agree, and are looking into ways of making this simpler in a future version!

           

          >> Also wondering if I should optimize the jpegs in Catalyst?

           

          You should definitely optimize your images for the web by adjusting the resolution and compression settings.  You can do this within Catalyst, or within the original tool that you used to create the jpegs (e.g. Photoshop's "Save for Web" command contains all the same optimization controls, and then some).

           

          Hope that helps!

           

          - Peter

          1 person found this helpful
          • 2. Re: The easy way?
            SMAKDIGITAL Level 1

            Hey Peter,

             

            I tried your suggestion in regards to the thumbnails in a data list however, I noticed the original way I have it with the thumbnails coming in from the top with easing set to bounce, I cannot find out how to accomplish this same affect in such data list.

             

            Please revert to my working comp if possible and let me know if there is a further solution.

             

            Thanks.

            Osiris

            • 3. Re: The easy way?
              SMAKDIGITAL Level 1

              Hey Peter,

               

              I also tried your suggestion in regards to adding my main images into a component. However this too was difficult in getting the results and transitions from my original design.

              • 4. Re: The easy way?
                Peter Flynn (Adobe) Adobe Employee

                Hi Osiris,

                 

                If you've already built your gallery and you don't want to redo it, that's fine -- these are just suggestions that will make it easier or cleaner the next time you build one.  If you keep building on your current gallery, though (e.g. building it out into a full site), then you may hit a point where you really need to clean up the design in one of these ways (suggestion #2 especially; see below).

                 

                Re suggestion #1:

                Since you want each thumbnail to transition in individually, you unfortunately won't be able to use a Data List (for now).  But that's fine.  The only downside is it's a bit more repetitive -- if you decide to change the selection appearance, or item spacing, etc., you'll have to update each item individually instead of just updating the lists's "Repeated Item" template once.

                 

                Re suggestion #2:

                Placing the gallery in a custom component is a more important "best practice."  If you're using one application-level page/state per image, you'll pretty quickly hit a wall.  There's a maximum of 15 states, so the more images you put in the gallery the more it'll start to crowd out other genuine application states (e.g. a Welcome page or About page).  Plus it just gets messy having a bunch of almost-identical gallery states mixed in with very different application states.

                 

                Note that since you're not using a Data List, you'll have to put both the thumbnails and the big image display into the custom component.  This way, the custom component's state can control both the thumbnail selection appearance and which image is displayed full-size.

                 

                - Peter