20 Replies Latest reply on Dec 20, 2010 9:19 AM by Devtron

    Does anyone know of a nice Coverflow component i can use?

    flexillu10 Level 1

      I'm looking to include one in my app, any ideas?

       

      Is it easy to write my own?

        • 2. Re: Does anyone know of a nice Coverflow component i can use?
          flexillu10 Level 1

          Shongrunden wrote:

           

          Flex 3: http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-impro vement-flex-carousel-component-and-vertical-coverflow/

           

          Flex 4: http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/

          Thankyou.

           

          I'd like to use the first one, but i don't know how to use it, can you offer any help with importing it and using it?

          • 3. Re: Does anyone know of a nice Coverflow component i can use?
            flexillu10 Level 1

            Can anyone give guidance how to import one of the mentioned coverflow layouts.

             

            The question has been asked  any times but no decent answer exists.

             

            I also want to import and use super image component but no idea how to do it.

             

            Please help, i'd really like to mark this post answered

            • 5. Re: Does anyone know of a nice Coverflow component i can use?
              Devtron Level 3

              coverflow--working-screenshot.png

               

              I use Doug McCune's coverflow control in my application. It's pretty cool but is a  little buggy, depending on what you're trying to accomplish with it.

               

              What are you trying to do with the coverflow?

               

              To get it setup in your project, (as with all custom non-standard FLEX controls) all you need to do is add the .SWC file(s) to your compiler from the menu:

               

              PROJECT-->PROPERTIES-->FLEX BUILD PATH

               

              ^ In there, you add the .SWC file ( i think there are two files for this ? papervision_phunky.swc and tweener.swc ). Those .swc files are vital to making this work, they are the guts of the coverflow library. Your project must be configured to use them, so do it!! If not, it will never work.

               

              Then you reference the coverflow library from your MXML by setting up a namespace. This is how I reference the library, at the top of my MXML component I use this namespace:

              xmlns:containers="com.dougmccune.containers.*"

               

              com.dougmccune.containers is a folder in my project, which has all the action script files/classes from the source code provided by doug and the coverflow component. In this folder I have 4 actionscript classes, BasePV3DContainer.as, CarouselContainer.as, CoverflowContainer.as, and VCoverFlowContainer.as. These 4 classes make the magic happen. Actually, I think the coverflow only uses 2 of these files.

               

              I tried using the carousel component but couldnt get it to work with anything other than images. I am using Panels and custom UI controls in my coverflow, instead of images. it can be a little laggy and has taken a great deal of time to fine tune.

               

              We recently hired an ActionScript genius and he hates the coverflow component because of how much space it requires in the UI and how it has rendering problems with large sets of UI controls. It is not stable by any means. I wish Adobe would adopt this control and integrate it into the FLEX framework. It has some great potential if someone stood behind it and really developed it well.

              • 6. Re: Does anyone know of a nice Coverflow component i can use?
                flexillu10 Level 1

                Amazing, thank you so much!

                 

                I too agree that a conver flow component should certainly be integrated into flex.

                • 7. Re: Does anyone know of a nice Coverflow component i can use?
                  Devtron Level 3

                  I wonder if the Coverflow control will be put in a grave because of Apple and Adobe's hatred towards each other.

                   

                  I am curious why Adobe wouldnt adopt this control and fine tune it. Maybe because it is a rip off of an Apple iTunes control?

                   

                  I wonder how much Apple's influence affects decisions like this.

                  • 8. Re: Does anyone know of a nice Coverflow component i can use?
                    flexillu10 Level 1

                    Just had a read round, seems apple got sued for ripping it off someone else...

                     

                    So what's the deal? If i put this in an air app and sell it..could I get sued?

                    • 9. Re: Does anyone know of a nice Coverflow component i can use?
                      flexillu10 Level 1

                      Finally got round to using your info, my boss will be happy. Works pretty well.

                       

                      However i keep getting the following error when trying out the vertical coverflow:

                      ArgumentError: Error #2015: Invalid BitmapData.

                       

                      Do you know how to use the Vertical one? I followed the example that i got with all the files but it only shows how to use the vertical component.

                      • 10. Re: Does anyone know of a nice Coverflow component i can use?
                        Devtron Level 3

                        I never got the Vertical coverflow to work, but I didnt play with it much either.

                         

                        What "children" are you using in the coverflow? Images or UI controls? I used Panels/UI Controls.

                         

                        I found that if I instantiate the "children" in Actionscript (not MXML), I could add it easily to the coverflow.

                         

                        But if I used static MXML Panels and UI Controls, it would get rather unhappy, depending on the layout of my MXML. For instance, if I used a lot of VBOX and HBOX stuff and crazy layout, the coverflow would get unhappy.

                         

                        Also, in regards to your error, I believe it could be that it does want images only, and not UI controls. I dont think ther vertical coverflow knows how to render anything but images. I could be wrong since I didnt play with the Vertical one too much. But that's my guess at it.

                         

                        I hope that wasnt too confusing...lol

                        • 11. Re: Does anyone know of a nice Coverflow component i can use?
                          flexillu10 Level 1

                          I want to use it just for images, is this possible with the normal coverflow?

                           

                          With the Vertical Coverflow i get the Invalid Bitmap Data error at runtime if i use a panel, if i use just an image i get the following error before i complile.

                           

                          'The children of Halo navigators must implement INavigatorContent

                           

                          I had a google round and tried using <s:NavigatorContent> but then i get the original error again.

                           

                          Pretty stuck here, and on the website http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel -component-and-vertical-coverflow/

                           

                          I can't view the source for that

                          • 12. Re: Does anyone know of a nice Coverflow component i can use?
                            Devtron Level 3

                            Can you give an example/code of the problem

                            'The children of Halo navigators must implement INavigatorContent ???

                             

                            How are you defining your images there? Is this happening in MXML or AS3?

                            • 13. Re: Does anyone know of a nice Coverflow component i can use?
                              flexillu10 Level 1

                              At the moment MXML, how would i do it in AS3?

                               

                              here's my code

                              <?xml version="1.0" encoding="utf-8"?>
                              <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                          xmlns:s="library://ns.adobe.com/flex/spark" 
                                                          xmlns:mx="library://ns.adobe.com/flex/mx"
                                                          xmlns:containers="com.dougmccune.containers.*">
                                   <fx:Declarations>
                                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                                   </fx:Declarations>
                                   
                                   <fx:Script>
                                        <![CDATA[
                                             import mx.events.FlexEvent;
                                        ]]>
                                   </fx:Script>
                                   
                                   
                                   <mx:VBox>
                                        
                                        
                                        
                                        <containers:VCoverFlowContainer id="coverflow" width="100%" height="100%">
                                        
                                             <mx:Image id="testImage" source=""/>
                              
                                        </containers:VCoverFlowContainer>
                                        
                                   </mx:VBox>
                              
                              </s:WindowedApplication>
                              
                              

                               

                              Error occurs on the image line

                              • 14. Re: Does anyone know of a nice Coverflow component i can use?
                                Devtron Level 3

                                The first thing I notice is that your image tag has an empty "source" attribute. I am surprised the FLEX compiler will even compile that. usually it gets unhappy when resources cannot be allocated at design time like that. Maybe try giving it a real source, if youre not already?

                                 

                                I originally started out using MXML too, but later reverted to AS3.

                                 

                                I would do it like this:

                                 

                                <?xml version="1.0" encoding="utf-8"?>
                                <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                            xmlns:s="library://ns.adobe.com/flex/spark" 
                                                            xmlns:mx="library://ns.adobe.com/flex/mx"
                                                            xmlns:containers="com.dougmccune.containers.*"
                                                            creationComplete="init()"
                                                            >
                                     <fx:Declarations>
                                          <!-- Place non-visual elements (e.g., services, value objects) here -->
                                     </fx:Declarations>
                                     
                                     <fx:Script>
                                          <![CDATA[
                                               import mx.events.FlexEvent;
                                
                                               // initialization
                                               private function init():void
                                               {
                                                             var myImage:Image;
                                                             myImage.source="hereyouneedapathtoanimage";
                                                             coverflow.addChild(myImage);
                                                        }
                                          ]]>
                                     </fx:Script>
                                     
                                     
                                     <s:VGroup>
                                     
                                          <containers:VCoverFlowContainer id="coverflow" width="100%" height="100%" />
                                          
                                     </s:VGroup>
                                
                                </s:WindowedApplication>
                                
                                
                                

                                 

                                 

                                I have never worked on AIR, so I am unsure if CreationComplete/Init exists. You may have to modify that.

                                 

                                Essentially, in Init(), you could have a for loop that loads all images as needed. Hope this helps.

                                • 15. Re: Does anyone know of a nice Coverflow component i can use?
                                  flexillu10 Level 1

                                  No matter what url i put in the image source i get the following error:

                                   

                                  TypeError: Error #1009: Cannot access a property or method of a null object reference

                                  • 16. Re: Does anyone know of a nice Coverflow component i can use?
                                    Devtron Level 3
                                    <?xml version="1.0" encoding="utf-8"?>
                                    <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                                                xmlns:s="library://ns.adobe.com/flex/spark" 
                                                                xmlns:mx="library://ns.adobe.com/flex/mx"
                                                                initialize="windowedapplication1_initializeHandler(event)"
                                                                xmlns:containers="com.dougmccune.containers.*"
                                                                width="600"
                                                                height="600"
                                                                >
                                         <fx:Declarations>
                                              <!-- Place non-visual elements (e.g., services, value objects) here -->
                                         </fx:Declarations>
                                         
                                         <fx:Script>
                                              <![CDATA[
                                    
                                                   import mx.containers.Panel;
                                                   import mx.controls.Image;
                                                   import mx.events.FlexEvent;
                                    
                                                   protected function windowedapplication1_initializeHandler(event:FlexEvent):void
                                                   {
                                    
                                                        var thePanel1:Panel=new mx.containers.Panel;
                                                        thePanel1.width=450;
                                                        thePanel1.height=300;
                                                        thePanel1.setStyle("headerHeight", 20);
                                                        thePanel1.setStyle("backgroundColor", "red");
                                                        thePanel1.name="Profile";
                                                        thePanel1.title="Profile";
                                                        coverflow.addChild(thePanel1);
                                                        
                                                        var thePanel2:Panel=new mx.containers.Panel;
                                                        thePanel2.width=450;
                                                        thePanel2.height=300;
                                                        thePanel2.setStyle("headerHeight", 20);
                                                        thePanel2.setStyle("backgroundColor", "blue");
                                                        thePanel2.name="Profile";
                                                        thePanel2.title="Profile";
                                                        coverflow.addChild(thePanel2);
                                                        
                                                        var thePanel3:Panel=new mx.containers.Panel;
                                                        thePanel3.width=450;
                                                        thePanel3.height=300;
                                                        thePanel3.setStyle("headerHeight", 20);
                                                        thePanel3.setStyle("backgroundColor", "orange");
                                                        thePanel3.name="Profile";
                                                        thePanel3.title="Profile";
                                                        coverflow.addChild(thePanel3);
                                                   }
                                    
                                              ]]>
                                         </fx:Script>
                                         
                                         
                                         <mx:VBox width="100%" height="100%">
                                         
                                              <containers:VCoverFlowContainer id="coverflow" width="100%" height="100%" reflectionEnabled="true" />
                                              
                                         </mx:VBox>
                                         
                                    </s:WindowedApplication>
                                    
                                    
                                    

                                     

                                     

                                    I know this isnt what you want. I wasnt able to get images to work with the VerticalCoverflow but I dont really have enough time today to toy with it.

                                     

                                    I tried Image, Bitmap, etc. I was able to get Panels to work, as shown in the above code.

                                     

                                    To add stuff to coverflow, there is "addChild", "addElement" and "addItem". Play with those and different Image formats. I was close to figuring it out but I just dont have time at the moment, sorry...

                                    • 17. Re: Does anyone know of a nice Coverflow component i can use?
                                      flexillu10 Level 1

                                      Ok thank you.

                                       

                                      I've decided to forget the vertical coverflow. I prefer the other one for my app.

                                       

                                      What i'd like to know is how to use images instead of panels. Seems pretty simple but i keep getting the error!

                                       

                                      "The children of Halo navigators must implement INavigatorContent."

                                       

                                      I know you said you nearly had the images working with the VerticalCoverFlow, so does this mean you know how to get them working with the normal coverflow? Can you offer any help on this particular issue?

                                       

                                      Again thanks for all your time

                                      • 18. Re: Does anyone know of a nice Coverflow component i can use?
                                        flexillu10 Level 1

                                        Still not managed to get doug's working with just images..I've tried the other coverFlow posted above but my main issue is that i don't know how to change the size of the images..can anyone help with this?

                                        • 19. Re: Does anyone know of a nice Coverflow component i can use?
                                          flexillu10 Level 1

                                          Has anyone used The RIVAL VALUE coverflow?

                                           

                                          http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/

                                           

                                          If anyone has managed to get this working please could you offer any help at all?

                                           

                                          My app seems to be complaining about the starting index of the coverflow? In the example it is bound to a slider, but soon as i get rid of that it breaks..

                                          • 20. Re: Does anyone know of a nice Coverflow component i can use?
                                            Devtron Level 3

                                            Why cant you change the image size?

                                             

                                            Can you post some sample code youre using?

                                             

                                            Also, Ive seen the RIA coverflow but it doesnt seem as good. I havent tried it. Any chance you have an example of that, I could test on?