Composant Flex – Composants Carousel (Coverflow)

Le Carousel est un type d’interface surtout utilisé pour afficher une liste d’images, des couvertures d’album par exemple. La plupart ont pris comme exemple le composant présent dans iTunes.

Plusieurs composants existent, chacun ayant ses spécificités et ses limitations. Ces composants sont pour Flex 3. Pour Flex 4, il existe des Layout pour réaliser un Carousel

CoverFlow Flex Component par Doug McCune

Le premier est le composant développé par Doug McCune:

http://dougmccune.com/blog/2007/11/03/coverflow-flex-component/

Voici un petit exemple d’utilisation:

This movie requires Flash Player 11

Le composant Coverflow dérive de ViewStack. Il suffit donc de donner des conteneurs comme enfants du composant Carousel pour qu’il fassent partie du Carousel. Il est donc possible d’intégrer n’importe quel composant Flex dans un carousel. Sur la page du dessus, vous verrez un exemple utilisant des composants Flex comme enfants.

Les options sont nombreuses, vous pourrez facilement personnaliser ce composant pour vos besoins

SebCoverFlow par Sebastiaan Holtrop

Le second composant est un peu plus limité mais peut cependant répondre à certains de vos besoins en termes de personnalisation (en tout cas, cela a fonctionné dans mon cas).

Voici la page dédiée à ce composant, dont vous pourrez aussi télécharger les sources:

http://www.sebastiaanholtrop.com/sebcoverflowprojectpage

Et une application de démonstration:

http://www.sebastiaanholtrop.com/samples/sebcoverflow/2.2.1/SebCoverFlowAppViewer/

Voilà, ce composant est plus limité car il n’accepte que les images (il n’est pas basé sur ViewStack). En revanche, il dispose de bien plus d’options d’affichage, à vous donc de faire votre choix ;)

Librairie openflow-as3

Voilà un composant pour Flex 4, utilisable en AS pur ou en MXML crée par « mazerte ». Cette fois-ci, un sacré panel d’options sont disponibles et le rendu est très fluide. Pour pouvoir tester ce composant, le développeur a mis à votre disposition une application AIR permettant de configurer son openflow:

Download: Application AIR permettant de configurer son openflow

Voici un petit aperçu de l’application:

coverflow-open

Bon, par contre, cela ne donne pas le code correspondant pour intégrer le coverflow en question, dommage. D’ailleurs, il manque pas mal de documentation sur l’implémentation de ce composant, si vous voulez comprendre comment il fonctionne, il ne vous reste plus qu’à aller fouiller dans les sources sur le projet hosté sur Google Code:

https://code.google.com/p/openflow-as3/

6 réflexions au sujet de « Composant Flex – Composants Carousel (Coverflow) »

  1. mazerte

    Salut Fabien,

    je me permet d’attirer ton attention sur un composant de coverflow que j’ai développé il y a peu et que j’ai mis en OpenSource sur Google. Il est entièrement customisable et utilisable en Flex et Flash « Classique ». J’ai mis à dispo une petite application AIR permettant de voir les possibilités

    OpenFlow AS3
    source: https://code.google.com/p/openflow-as3/

  2. fnicollet Auteur de l’article

    Salut, merci pour ton message, ton composant mérite d’etre dans cet article. Je le rajouterai quand j’aurai le temps ;)
    Fabien

  3. mazerte

    Merci Fabien pour cette update, je travail déjà sur les deux points que tu expose (la doc et la génération de code). D’autres évolutions sont prévu comme la réutilisation de cellules et un environnement Molehill!

  4. Eddoh

    Bonsoir,

    Je voudrais savoir s’il existe un composant ruban comme celui des applications ms offices ?
    Merci d’avance.

    Eddoh

Les commentaires sont fermés.