There’s a project page of this component now, check it here, it’s open source!
I’ve been quite busy working on my CoverFlow component. I’ve added my reflection class and added the possibility to use cubes instead of planes as a cover. Since I’ve used a true 3D engine (Away3D) to build this component it’s become much more than just a CoverFlow rip-off. Here are some examples of what it can do:
Click here to see the CoverCube in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.
Here’s a few examples of the component using just planes:
Click here to see the CoverFlowV2 in action. Try the presets and drag the sliders to explore the possibilities of this component.
Click here to view the source code.
really well done man! very smart
Great!!!
thanks for shared it,
amazing,
Magnifico
I made a few changes to allow for lazy-loading the images so you didn’t need to embed them. Would you like these changes? If so, email me.
Hi Sebastiaan,
Cool component indeed! But I’m trying to add images dynamically to it with addChild() and has no result…
Could you please give an example of adding/removing items using action script?
Thanks
Hi guys
Great application, and thanks for the source code. This is probably a stupid question, but when I create a new project in Flex Builder using the source, it creates a new application.mxml file. If I replace that with the actual file from the source (place it in the src directory) it cannot find the target path to the coverflow.as and other components.
Please help me. There are so many great sources out there, but I can never seem to get them working when I import them in.
What am I doing wrong?
Many thanks,
Matt
Pretty cool, does this work with flex 3 right out of the box?
I tried it out, and it almost works. 99.9%, I just had to cast ContextMenu’s
ContextMenu(scopeMenu.contextMenu).hideBuiltInItems();
i do appreciate the wonderful work out by Sebastiaan. it runs much better than most of the coverflow components i searched from internet. Thx a lot for Sebastiaan’s sharing.
But i’m obsessed with how to add images dynamically. i tried to use coverFlow.addChild() in the init function, but errored with invalid bitmapdata~~ but this works fine if i add to a test Canvas ~~How could i possible add images at runtime via AS? Hope Sebastiaan or anybody use this wonderful component could give some examples.
i think i understand why you can’t addchild dynamically to the coverflow component: the component can only take the image child render at init when create the whole container, and if you add child later than the creation complete, the coverflow would not accept the image because the image had not be 3D treated. That’s why you are thrown a big invalid bitmapdata error.
So if you want to use AS to add image dynamically,there are two ways to solve this problem: first, use repeat class,eg:
Good news,in this way, you can do the data via dataprovider in any kind of data forms as XML or something. Bad news, you can only bear a long time waiting for the pics loading if you have many pics.
But perhaps ok if you only need to load less than 20 3~4K pics. Deferred creation? NO WAY!
oops! Seems the system automatically ate my codes~
i post it again in another way~~
Codes to addChild dynamically with not much pics:
still no codes…eh~~ i used “~” to reffer “”
~mx:Script~
~![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var imgList:ArrayCollection = new ArrayCollection([
{img:"img/23.jpg"},
{img:"img/23.jpg"},
{img:"img/23.jpg"}
]);
]]~
~/mx:Script~
~sbh:CoverFlow id=”coverFlow”
width=”100%” height=”100%” shape=”planeshape”
horizontalGap=”{this.horizontalGapSlider.value}”
angle=”{this.angleSlider.value}”
flippoint=”{this.flippointSlider.value}”
selectedItemWidth=”{this.selectedItemWidthSlider.value}”
selectedItemZoom=”{this.selectedItemZoomSlider.value}”
cameraOffsetX=”{this.cameraOffsetXSlider.value}”
cameraOffsetY=”{this.cameraOffsetYSlider.value}”~
~mx:Repeater id=”r” dataProvider=”{imgList}”~
~mx:Image source=”{r.currentItem.img}”/~
~/mx:Repeater~
~/sbh:CoverFlow~
The second way may be much more powerful and useful,but also may takes more time to think and do a lot of work.I don’t know if i could finish it. The basic idea is to add a new component only to 3D the images, and the coverflow component add the 3Ded images as child and loop the runtime added child together. If so, you can asynchronically call and add the pics to your screen, see add 10pics at beginning, add another 10 when scrolled the last one.Hope someone could give some new advice: How to call and add pics asynchronically at runtime.
asynchronously~~forgive my poor English, i’m Chinese
I found the problem, a matter with IUIComponent and Container~~~~
Hi
Very nice use of Away3D, F*cking excellent actually.
Can anybody provide a simple function to have the CoverCube auto scroll without user interaction, so bsaically function in the same way as an automatic carousel that rotates infinitely.
Any help will be much appreciated.
Have a nice one
Al
Very nice. I’m trying to use it embedded in a small part of my application, but the covers still flow to the edges of the screen! Perhaps I’m doing something wrong, but if not it would be nice if you could make it work within other components.
Wow… this is by far the most efficient coverflow I’ve seen to date. It can actually handle my 1000 cd covers fine.
Has anyone been successful in rewriting this to do deferred loading of the images? With 1000 covers the initial load time is not really acceptable. I want to just load the first 10 covers and then load additional ones as they scroll into view. I did succeed in getting the images loaded programatically, instead of embedded, however when I tried doing deferred loads in the next() method, addChild doesn’t seem to work after the initial setup (as suggested above).
Ideas?
Hello people!
Pretty nice control. I implemented this and works fine, but in my tomcat consol something is happening and show me the next error:
java.lang.StringIndexOutOfBoundsException: String index out of range: -1
at java.lang.String.substring(String.java:1938)
at flex2.server.j2ee.BaseCompileFilter.isJspFile(BaseCompileFilter.java:
105)
at flex2.server.j2ee.BaseCompileFilter.getDependenciesFromCompilationUni
ts(BaseCompileFilter.java:144)
at flex2.server.j2ee.IncrementalCompileFilter.compileMxml(IncrementalCom
pileFilter.java:114)
at flex2.server.j2ee.BaseCompileFilter.mxmlToSwf(BaseCompileFilter.java:
318)
at flex2.server.j2ee.BaseCompileFilter.invoke(BaseCompileFilter.java:60)
at flex2.server.j2ee.RecompileFilter.invoke(RecompileFilter.java:37)
at flex2.server.j2ee.PathExistsFilter.invoke(PathExistsFilter.java:42)
at flex2.server.j2ee.AboutFilter.invoke(AboutFilter.java:48)
at flex2.server.j2ee.MxmlServlet.doGet(MxmlServlet.java:158)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:689)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:802)
at flex.bootstrap.BootstrapServlet.service(BootstrapServlet.java:85)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(Appl
icationFilterChain.java:252)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationF
ilterChain.java:173)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperV
alve.java:213)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextV
alve.java:178)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.j
ava:126)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.j
ava:105)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineVal
ve.java:107)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.jav
a:148)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java
:869)
at org.apache.coyote.http11.Http11BaseProtocol$Http11ConnectionHandler.p
rocessConnection(Http11BaseProtocol.java:664)
at org.apache.tomcat.util.net.PoolTcpEndpoint.processSocket(PoolTcpEndpo
int.java:527)
at org.apache.tomcat.util.net.LeaderFollowerWorkerThread.runIt(LeaderFol
lowerWorkerThread.java:80)
at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadP
ool.java:684)
at java.lang.Thread.run(Thread.java:619)
And my applycation is really slow now. And, when I try to open same application in other IExplorer tomcat get a crash with a PerSpace exception. It happen with the source code aviable here…..
Could any body help me with this? I really want to implement this wonderful control in my app.
Regards,
Carlos T.
PS~sorry about my English, lol!
Really fantastic component. Thanks Sebastiaan.
Any idea of how to add and change the images at runtime?
I’m able to add the images using an array collection and a repeter, but after that I can’t change images again.
hi guys,
i want to add an listener for the cover in the front. I want to show a popup by clicking. but after i add a new mousedown-listener, i cant remove the listner of the cover before.by selecting a cover before automaticly the popoup open. how can i add a correct listener???
greetz from hamburg
Chris, you just have to change the coverflow component to be an HBox or VBox instead of a Canvas container (set this in the coverflow.as.
I’ve almost got this control to load images dynamically, but still can’t get them to display(no errors). This is an awesome control(thanks Sebastion) and I really like the speed of this control (vs. Sandy) so I’ll put in one more night of troubleshooting before moving on. If I get this worked out, i’ll post the source. In the meanwhile, if anyone else has solved this issue that would be great if they could post as well!
Hey Tony,
your first way to add images over a xml seems to crash. after I hacked it into my project and execute it, only the last image is in left-up corner.
If I gave the ArrayCollection three Images with wrong url the “no icon” icon came as a coverflow with 3 icons
It seems that there is a problem with the caching of the jpegs?!
how can I solve the problem??
greetz from Berlin / Germany
Hi,
I added the covercube libraries and added the project to my Flex project. But when I try to run the project, I get the error that the projectname.html does not exist in the bin-debug folder.
Can some one tell me where I should place the covercube files?Also, is there something else that I am missing?
Where should I place the Covercube folder so that my flex project can refernce them properly and create the ouput html file and swf?
Thanks in anticipation,
P
Hi everyone,
VERY nice project. But I am currently trying to get it to work in Adobe AIR since Flex works fine. Has anyone tried? Away3d is the problem, since there is flash.display.NativeMenu class which is referenced in away3d.core.stats.Stats.as So I can’t get it to work. Lines 90, 96 and 102 (in FlexBuilder) are affected. Does anyone know how to solve this?
Thanks in advance