CARROUSEL ADVENTORI

CRÉER VOTRE CARROUSEL

Vous pouvez créer votre propre Carrousel grâce à notre Enabler, de manière très simple:

Déclarez tout d’abord vos éléments sous Adobe Animate:

• container : movieClip qui contiendra votre carrousel.
• slide : symbol référence utilisé en tant que template « produit » (placer le slide à coté de la scène).
• btnLeft : bouton gauche de votre Carrousel.
• btnRight : bouton droit de votre Carrousel.

Initialisation des flux produits:

Pour tester votre carrousel , vous pouvez mettre des valeurs par défaut après avoir inséré le script. Ces valeurs seront automatiquement remplacées par des valeurs dynamiques au moment de l’AdServing.

    var data = ADventori.initData({
        items: [
                {data: {name: "AN ARTICLE",image: "images/310-barbecue.png",description: "A description of variable length",price: "99,99",original_price: "125,00",url: "https://www.google.fr/?q=test1",discount:"-35%" }},
		{data: {name: "AN ARTICLE",image: "images/101-ventilateur.png",description: "A description of variable length",price: "199,99",original_price: "",url: "https://www.google.fr/?q=test2",discount:""}},
		{data: {name: "AN ARTICLE",image: "images/107-Sac-a-outils.png",description: "A description of variable length",price: "399,99",original_price: "467,00",url: "https://www.google.fr/?q=test3",discount:"-15%" }},
		{data: {name: "AN ARTICLE",image: "images/301-recuperateur.png",description: "A description of variable length",price: "399,99",original_price: "167,00",url: "https://www.google.fr/?q=test4",discount:"-50%" }},
		{data: {name: "AN ARTICLE",image: "images/321-dalle-bois.png",description: "A description of variable length",price: "259,99",original_price: "367,00",url: "https://www.google.fr/?q=test5",discount:"-50%" }}
		]
    });

Le composant attend une collection d’objets nommée items ayant comme propriétés:

• name: Nom du produit
• image: Image du produit
• url: URL du clic sur le produit 
• description: Description du produit
• price: Prix du produit
• original_price: Ancien prix du produit
• discount: Discount %

Vous devez ensuite lier les noms des flux produits avec les noms de votre contenu dans « slide »: 

Remarques utiles: 

Lors de la création d’un carrousel :

Si TextField est dans « slide », et que le nom correspond –> AddAndAdaptText 

Si MovieClip est dans « slide », et que le nom correspond –> AddAndAdaptImage

Déclarez ce nouveau carrousel et configurez-le:

     var carousel = new ADventori.Carousel({ 
                 items: ADventori.data.items, 
                 carouselContainer : this.container, 
                 symbol :'slide',
                 btnLeft :this.left,
                 btnRight :this.right, 
                 animation :'scale',
                 typeEffect : createjs.Ease.cubicIn ,
                 intervalAnimation : 500,
                 duration : 20000,
                 interval : 3000, 
                 autoStart :true,
                 textFieldProps:{
                                 name: {width: 110, height: 23,sizeMin:14},
                                 description: {width: 80, height: 33,sizeMin:7},
                                 price: {width: 99, height: 32,sizeMin:15}, 
                                 original_price: {width: 132, height: 29,sizeMin:10},
                                 discount: {width: 76, height: 26,sizeMin:10}},  
                },
                bulletContainer : this.bullet ,
                bulletColor : "#5EBEBB",
                bulletColorActive :"#114454" ,
                bulletColorOver : "#EC6A6D" 
               );

• items: Valeurs dynamiques contenues dans data
• carouselContainer: movieClip ou sera inséré le carrousel  (obligatoires)
• symbol: Nom du symbol correspondant au modèle (ici: « slide »)  (obligatoires)
• btnLeft : movieClip jouant le rôle de bouton gauche (facultatif)
• btnRight: movieClip jouant le rôle de bouton droit (facultatif)
• animation: Ajoute une animation personnalisée lors du changement de slide (animations disponibles :  rotate /  translateY / translateX /  fade / scale) (prochainement: animation personnalisée !)
• typeEffect: Type d’effet d’animation (plus d’info). (facultatif) Exemple : createjs.Ease.cubicInOut
• intervalAnimation: Durée de l’animation du produit (facultatif)
• autoStart: Activer / désactiver le défilement (facultatif)
• duration: Durée de l’animation de la bannière (en ms) (facultatif)
• interval: Durée d’affichage d’un produit (en ms) (facultatif)
• textFieldProps: Propriétés des textFields utilisées (width,height ,sizeMin) (obligatoires).
• bulletContainer : movieClip ou serons présent les bullets points (facultatif)
• bulletColor : couleur des bullets points (facultatif)
• bulletColorActive : couleur bullet active
• bulletColorOver : couleur du bullet point on mouse hover

Gérez la visibilité de chaque élément du slide: 

SI vous devez par exemple gérer des éléments en promotion, et d’autres non, vous pouvez contrôler l’apparence de chaque slide.

Exemple:

var elems = carousel.slideList(); 
 for(var i = 0 ; i<=elems.length-1;i++){
 var slide = elems[i];
 slide['angle'].visible = (slide['discount'].text != '');
 slide['barre'].visible =(slide['original_price'].text !='');
 slide['euroOld'].visible =(slide['original_price'].text !=''); 
 }

Dans cet exemple, nous avons récupéré tous les slides créés par le Carrousel (grâce à carrousel.slideList()), et en fonction de la valeur de certains éléments, nous affichons ou pas certains éléments graphiques.

Voici quelques exemples de carrousels customisés:

Télécharger l’exemple

Télécharger l’exemple