28 Replies Latest reply on Aug 21, 2008 11:59 AM by 91100

    Coverflow component

    mac_55 Level 1
      Hi, I understand that the coverflow component ( http://dougmccune.com/blog/2007/11/03/coverflow-flex-component/) is based upon the view stack, and therefore I hope someone can help!

      I'm adding children at runtime, and they're not being displayed properly, it's like i somehow need to update the display...any ideas?
        • 1. Re: Coverflow component
          kcell Level 2
          Hi Mac,

          I also played with doug's code and added items at startup with no problem ...

          Can you give some more details which children you added (and when ) I might can check it at my code.

          best regards,
          kcell
          • 2. Re: Coverflow component
            mac_55 Level 1
            Hrm. Works now...no idea what was going on...

            Thanks!
            • 3. Re: Coverflow component
              leodido Level 1
              i write in this topic because i've a problem with coverFlow component (by dougmccune.com). I'm not able to insert images in the coverFlow 'cause if i cannot use image component in the viewStack. How is possible to add images to this wonderful component? Is it necessary to extend the base class ? i hope in some help :p
              • 4. Re: Coverflow component
                kcell Level 2
                hi leodido,

                The objects I added to the coverflow component inherits from the canvas class. The canvas class include one image object. The canvas class has functions that set/get the url of the image (directly propagation to the image object).

                If you like I can also post some sourccode (when I am back at my home pc, where the sources are located ;) )

                best regards,
                kcell
                • 5. Coverflow component
                  leodido Level 1
                  hi kcell,
                  first of all: tnx for your reply. Now, i've not understood the next quoted concepts... :( Can you explane me better, please? (i'm a newbie in flex)
                  quote:

                  Originally posted by: kcell
                  The objects I added to the coverflow component inherits from the canvas class. The canvas class include one image object. The canvas class has functions that set/get the url of the image (directly propagation to the image object).

                  However if you want, you can post some source code to help me to understand better, i'll be grateful to you :)
                  thanks a lot
                  regards
                  • 6. Re: Coverflow component
                    kcell Level 2
                    Hi Leo,

                    found the code (its in actionscript ). It is an early version but should clarify how the image is used.

                    So this is the ImageWrapper.as class which capsuled the image (located in subdir com):

                    package com
                    {
                    import mx.controls.Image;
                    import mx.containers.Canvas;

                    public class ImageWrapper extends Canvas
                    {
                    private var m_strImageURL:String;

                    public var m_image:Image;

                    public function ImageWrapper()
                    {
                    super();
                    m_strImageURL = "";
                    }

                    public function initFom():void
                    {
                    m_image = new Image;

                    if ( m_strImageURL )
                    m_image.source = m_strImageURL;

                    m_image.percentHeight = 100;
                    m_image.percentWidth = 100;
                    addChild(m_image);

                    }

                    public function set _urlImage(strUrl:String):void
                    {
                    m_strImageURL = strUrl;
                    if ( m_image )
                    m_image.source = m_strImageURL;
                    }
                    public function get _urlImage():String
                    {
                    return m_strImageURL;
                    }

                    }
                    }


                    //**************************************************************************************** **********************
                    and this is the MXML application which use the imagewrapper, the code is not perfect and there might be easier solutions, but for my case it worked.

                    best regards,
                    kcell
                    //**************************************************************************************** **********************

                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
                    xmlns:coverflow="com.dougmccune.coverflow.*"
                    layout="vertical" horizontalAlign="center" verticalAlign="middle" backgroundColor="#00000" borderColor="#00000"
                    viewSourceURL="srcview/index.html" xmlns:containers="com.dougmccune.containers.*" creationComplete="initCoverflow()">
                    <mx:Script>
                    <![CDATA[
                    import mx.events.ScrollEvent;
                    import mx.controls.HScrollBar;
                    import com.ImageWrapper;
                    import mx.containers.Canvas;
                    import mx.controls.Image;
                    import mx.rpc.events.FaultEvent;
                    import mx.rpc.events.ResultEvent;
                    import mx.containers.Panel;
                    import mx.events.FlexEvent;

                    private function initCoverflow():void
                    {
                    m_playlist.addEventListener("result", playlistLoaded);
                    m_playlist.addEventListener("fault" ,errorHandling);
                    m_playlist.send();
                    }
                    private function errorHandling(event:FaultEvent):void
                    {
                    trace(event);
                    }

                    private function playlistLoaded(event:ResultEvent):void
                    {
                    /*
                    <playlist>
                    <image>
                    <urlImage></urlImage>
                    </image>
                    <image>
                    <urlImage></urlImage>
                    </image>
                    <image>
                    <urlImage></urlImage>
                    </image>
                    ...
                    </playlist>
                    */
                    for (var i:Number=0; i<event.result.playlist.image.length; i++)
                    {
                    var aTempImage:ImageWrapper = new ImageWrapper();
                    aTempImage._urlImage = event.result.playlist.image .urlImage;

                    aTempImage.width = 200;
                    aTempImage.height = 200;
                    aTempImage.initFom();
                    coverflow.addChild(aTempImage);
                    }
                    var aScrollbar:HScrollBar = new HScrollBar();
                    aScrollbar.id = "scrollbar";
                    aScrollbar.percentWidth = 100;
                    aScrollbar.pageSize = 1;
                    aScrollbar.maxScrollPosition= coverflow.numChildren - 1;
                    aScrollbar.scrollPosition= coverflow.selectedIndex;
                    aScrollbar.addEventListener(ScrollEvent.SCROLL, this.scrollEventHbox);

                    box.addChild(aScrollbar);
                    }
                    private function scrollEventHbox(event:ScrollEvent):void
                    {
                    coverflow.selectedIndex = Math.round(event.position);
                    }

                    ]]>
                    </mx:Script>
                    <mx:Style>
                    Canvas {
                    borderColor: #99CDEE;
                    borderAlpha: 1;
                    borderThickness: 1;
                    borderThicknessLeft: 1;
                    borderThicknessTop: 0;
                    borderThicknessBottom: 1;
                    borderThicknessRight: 1;
                    roundedBottomCorners: false;
                    cornerRadius: 5;
                    headerColors: #b5e6f3, #81b3e6;
                    dropShadowEnabled: false;
                    titleStyleName: "mypanelTitle";
                    vertical-align:middle;
                    horizontal-align:center;
                    }

                    .mypanelTitle {
                    letterSpacing: 1;
                    color: #333333;
                    fontSize: 12;
                    fontWeight: bold;
                    }
                    </mx:Style>

                    <mx:HTTPService id="m_playlist" url="playlist.xml" useProxy="false"/>
                    <mx:VBox id="box" verticalGap="0" height="100%" width="100%" maxWidth="800" maxHeight="500" borderColor="#00000" >
                    <containers:CoverFlowContainer id="coverflow" width="100%" height="100%"
                    horizontalGap="40" borderStyle="none" backgroundColor="0x000000" horizontalSpacing="150"
                    segments="6" reflectionEnabled="true" >
                    </containers:CoverFlowContainer>
                    </mx:VBox>


                    </mx:Application>

                    • 7. Re: Coverflow component
                      kcell Level 2
                      forgot to mention the playlist.xml contains something like :
                      <?xml version="1.0" encoding="utf-8"?>
                      <playlist>
                      <image>
                      <urlImage>pic1jpg</urlImage>
                      </image
                      <image>
                      <urlImage>pic2.jpg</urlImage>
                      </image
                      </playlist>


                      • 8. Re: Coverflow component
                        leodido Level 1
                        wonderful help kcell, now i start to studying your code and, eventually, ask again for clarifications ;)

                        thanks a lot
                        respect!
                        • 9. Re: Coverflow component
                          robmcmi Level 1
                          Thanks for this, I am also doing the same sort of thing.

                          I want to add elements at runtime but also change them at runtime too.

                          I want to add this code to an event handler for an array collection of images in my model locator. Where i is a VO of my images in an array collection.

                          var panel : Panel = new Panel();
                          panel.height = 110;
                          panel.width = 78;
                          panel.id = i.id;
                          panel.setStyle("borderStyle", "none");
                          var image : Image = new Image();
                          image.source = i.thumbnail;
                          panel.addChild( image );
                          coverflow.addChild(panel);


                          When I get the event handler for the array collection working I will let you know if this method works.
                          • 10. Coverflow component
                            kcell Level 2
                            just recognized that your link is an "old" link/entry on dougs page:

                            I have downloaded the coverflow code from this page/blog entry:
                            http://dougmccune.com/blog/2007/11/19/flex-coverflow-performance-improvement-flex-carousel -component-and-vertical-coverflow/

                            @fmgdev: Some people mentioned in dougs blog that there is a memory leak when objects are released from the coverflow. I am not sure where the problem is, but you might give a look to the memory when you change the elements at runtime ;).
                            • 11. Re: Coverflow component
                              robmcmi Level 1
                              Yeah I saw them too! Bit worried as I may be doing it a lot!

                              Although I will worry about that when I get to it, perhaps changing the source of the images rather than adding and removing them will help!

                              I am still stuck on the other problem of adding an event to an array collection, if you have any ideas about that!
                              • 12. Coverflow component
                                leodido Level 1
                                hi kcell,
                                I've tried to use your method but it doesn't work.. i think that the problem regards the width and height parameters. Do you want to know why i think this? Because I've added manually (trough mxml...) some canvas elements with nested images elements and coverflow works fine!
                                the code that I've added into CoverFlow component is this:
                                <mx:Canvas width="200" height="200">
                                <mx:Image source="images/02.jpg"/>
                                </mx:Canvas>
                                <mx:Canvas width="200" height="200">
                                <mx:Image source="images/10.jpg"/>
                                </mx:Canvas>
                                and, how I've just said: it works!

                                So I think that the problem can be in this 2 lines of code in the CDATA code section:
                                tempImg.width = 200;
                                tempImg.height = 200;
                                (don't worry about the different var name..)

                                I've tried to use parent attribute but no need results have obtained, too.
                                So
                                tempImg.parent.width = 200;
                                tempImg.parent.height = 200;
                                this doesn't seem to work, too :(

                                Some ideas ? Is possible to create a getter into the class ImageWrapper that return the instance of Canvas ? In this way will be possible to set the canvas elements width and height directly.

                                I hope in your help! :)

                                Regards

                                edit: but in flex how i can view the trace output ??? Or how I can denug flex apps ??? This is a mistery...
                                leo
                                • 13. Coverflow component
                                  leodido Level 1
                                  hi kcell,
                                  i've founded the solution: in the initCoverflow() function I' ve added m_playlist.send() (to send the http request) and then I've modified the events in the seguent way: m_playlist.addEventListener(ResultEvent.RESULT, playlistLoaded) and m_playlist.addEventListener(FaultEvent.FAULT, errorHandling).

                                  I've modified a bit the ImageWrapper class adding 2 setter (hEdge and vEdge) to insert edges but there are some problems of visualitazions that, i think, are caused by papervision ...

                                  However, I've added to <image> tag in the XML two attributes (named "w" and "h") but i'm not able to parse attributes. I've tried to acced to the attributes in this 2 ways:
                                  1 - event.result.playlist.image.@w;
                                  2 - event.result.playlist.image.attribute("w");

                                  Both ways don't work fine!
                                  Do you have some suggestes about ???
                                  • 14. Coverflow component
                                    kcell Level 2
                                    Hi leo,

                                    I gave a closer look to my code and found the problem. (I have modified the code for the post and deleted a little bit too much ... )

                                    1) posted playlist.xml was not wellformed (missing > on the </image tags )
                                    2) the playlistloaded function was not okay (missing hard brackets in the line
                                    ... seems that the server eat thos brackets ... edited: its treated as italics ;( , just delete the whitespaces between the brackets and the i )
                                    aTempImage._urlImage = String(event.result.playlist.image[ i ].urlImage);
                                    ...

                                    After this changes it worked.

                                    If you debug the code it helps you a lot to understand what happend ;).
                                    Do you use Flexbuilder (2 or 3 ?)? You have to install the debug flashplayer and just toggle some breakpoints in the code.

                                    I can also send you my test project if you like (just drop a private message with a email address)

                                    best regards,
                                    kcell
                                    • 15. Re: Coverflow component
                                      leodido Level 1
                                      i' ve sent a pm ;)
                                      • 16. Re: Coverflow component
                                        RoCKSTaH53 Level 1
                                        First let me say that I'm just getting started with Flex. I watched the video posted on the Adobe Flex 3 page and was frustrated when the coverflow didn't work, so now I've been doing anything I can to figure it out.

                                        I've tried both the dynamic version posted above, AND the version where you hard code in each canvas and both work fine on my machine, but when I load them to my website only the front image loads. I can click to the other images or use the scrollbar and a new image will load as the front image, but you can't see any on the sides. In addition, the reflection is just a grey gradient with the hard coded, and it's nothing with the dynamic.

                                        Also, using the code above to load from an XML file, if I click on the images to move them, the scrollbar doesn't update it's position with the images.

                                        I can't figure out why an SWF would work on my machine, but not on my website. Any ideas?
                                        • 17. Coverflow component
                                          Phil Grove Level 1
                                          @RoCKSTaH53

                                          I have the exact same problem. I have been trying to chase this down. After the website load failed, I tried to launch the myApp.html wrapper file from Windows Explorer - same problem. When I run the same myApp.html from Flex 2 Builder, it is beautiful.

                                          Any hints or help is appreciated!
                                          • 18. Coverflow component
                                            kcell Level 2
                                            Hi Rock, Hi Phil,

                                            I gave a closer look and think that the problem rise about the image path.

                                            When I use the same image path, which I have posted than I could reproduce your behaviour.
                                            ( Which means <urlImage>images\pic1.jpg</urlImage> in the playlist.xml)

                                            You should use whole URL like http://mydomain/test/images/pic1.jpg in the <urlimage> tag otherwise the flashplayer security settings take care that the images are not loaded. (which means the images didn´t load, cause the url domain of the image and from the started swf are not equal -> security sandbox violation )

                                            kcell
                                            • 19. Re: Coverflow component
                                              Phil Grove Level 1
                                              @kcell

                                              Thanks for looking into our question.

                                              So, now I will have to look into security or URLs. I use a different method than the XML file with the list of images listed above but I will try that. Once I figure out how to "Attach Code" I will post my current approach. After re-reading your approach listed above, I find some interesting ideas and ways to use CoverFlow that are new to me.
                                              • 20. Re: Coverflow component
                                                Phil Grove Level 1
                                                ATTACH CODE

                                                Ok, when I reply I see the instructions 'Please use "Attach Code" to include any sample code in the message'. What or where is this "Attach Code"? Is it a button? Help says there is an "Insert Code button" but I can't find the button. What am I missing. (I use IE7 on Vista)

                                                • 21. Re: Coverflow component
                                                  kcell Level 2
                                                  Hi Phil,

                                                  don´t know. I also ask to the forum but no one has answered so far. I assume that Adobe didn´t care about the code. ;(

                                                  kcell
                                                  • 22. Re: Coverflow component
                                                    RoCKSTaH53 Level 1
                                                    hey guys -

                                                    I've been using absolute URLs the whole time. I've linked to a couple of shots from PhotoBucket so all of the links are absolute. I understand the concept behind the security being an issue, but what makes the secondary images different from the front one? Why does flash say it's ok to load the front image but it's security whistle goes off for the others?

                                                    Understanding that something like this SHOULDN'T take 3 minutes especially for someone new to Flex, it's kind of a let down for it to look so easy in the demo, and have it be so difficult in reality. I know the demo was probably done with an old set of code that was just updated around the launch of Flex 3, but... if it didn't look so easy I might not have attempted it!

                                                    Oh and Phil I've been looking around to try and figure out that attach code thing too... I was going to type "attach Code" to see if it worked, but then I saw you did it already. haha sorry I couldn't help!

                                                    - rock
                                                    • 23. Re: Coverflow component
                                                      kcell Level 2
                                                      Hi rock,

                                                      good question, I tried some jpgs from photobucket ( by the way there is a restricted crossdomain.xml at photobucket ) and I got some security violation in the debug flash player, but what really make me wonder was that the pictures itself are loaded. Just the papervision3d engine has thrown the errors when the bitmap data for the coverflow effects is used (somewhere in dougs code).

                                                      However the coverflow works fine when the images are in the same domain.
                                                      The most common trick to get around the security issues is to use a php script on the server, which get the data from the restricted server to your server and maybe update the playlist.xml automatically. ( never used it, but i have read a couple of times that it worked very well)

                                                      "Attach code", seems to be a relict from the good old days, before someone has attached code and hacked adobes forum server ( just to seed some rumours ;) )

                                                      kcell




                                                      • 24. Re: Coverflow component
                                                        RoCKSTaH53 Level 1
                                                        hey kcell -

                                                        Thanks for your dedication to this forum... it's great to have someone whose willing to have an open dialogue about a problem. Don't find many message boards where people actually care about checking back.

                                                        I will give the same domain thing a try. It would not surprise me if it did the trick. I will try first just hosting the images on my server, and if that works then I will work some PHP magic to load them and update the XML dynamically. I will post back with my results.

                                                        - rock
                                                        • 25. Coverflow component
                                                          Phil Grove Level 1
                                                          Ok, I think I found out what is going on. In the Flex 2 Language Reference, it says?

                                                          quote:

                                                          When you load images at runtime, you should be aware of the security restrictions of Flash Player. For example, you can load an image from any domain by using a URL, but the default security settings won't allow your code to access the bitmap data of the image unless it came from the same domain as the application. To access bitmap data from images on other servers, you must use a crossdomain.xml file.


                                                          See:
                                                          http://livedocs.adobe.com/flex/201/langref/index.html?mx/controls/Image.html&mx/controls/c lass-list.html


                                                          This explains the behavior I see. When an image is front an center, it displays properly. When an image has been manipulated (skewed and reflected) the image is missing. This appears to be when the FLEX components are trying to access the bitmap data.

                                                          So, the solution appears to have two solutions:

                                                          1) Post a "crossdomain.xml" file in the root directory on the server that is serving the remote images. See:

                                                          http://livedocs.adobe.com/flex/201/html/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Live Docs_Book_Parts&file=security2_117_15.html

                                                          or 2) Set up a proxy on your Flex (SWF) server that gets the requested items from the remote server. See:

                                                          http://livedocs.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&productId=2& postId=6702

                                                          Now, I haven't tried this yet, but it is next on my stack. I'll let you know if I succeed.

                                                          @kcell -- thanks for your support and if you find another work-around all the better
                                                          • 26. Re: Coverflow component
                                                            91100 Level 1
                                                            hi, I have a problem with Coverflow on FullScreen, flash player crash in firefox and ie, the debug show this:

                                                            warning: unable to bind to property ‘numChildren’ on class ‘com.dougmccune.containers::CoverFlowContainer’

                                                            I need help please, I dont know what to do.
                                                            Take Care
                                                            • 27. Re: Coverflow component
                                                              kcell Level 2
                                                              Hi 91100,

                                                              sorry for my late answer. ( sometimes we all need holidays ).

                                                              Gave a quick look ans also tried to run the coverflow in fullscreen, but without success ( my screen stucked and I had to kill the browser with the debug flash player ).

                                                              So I couldnt reproduce your problem and I also was not able run coverflow into fullscreen, but I will try to give closer look in the evening or tommorow.

                                                              The 'numChildren" property is a property of the base classes ("Container") and I am wondering how this error could happend.
                                                              Maybe you have you used/embed the coverflow in little bit unusal (I mean creative ;) ) way, so if you still have the problem, you may can also post how you used the coverflow container.

                                                              best regards,
                                                              kcell

                                                              • 28. Re: Coverflow component
                                                                91100 Level 1
                                                                hi kcell, the problem with the coverflow is only in fullscreen mode, in normal mode works perfect.
                                                                I appreaciate your help ;), I hope you find the problem with fullscreen mode.
                                                                Take care