On continue la série des basics.

Aujourd’hui, la galerie vidéo : FSVideoGalery.
Cette classe est basée sur le FSVideoPlayer présenté ici.
Elle permet de créer très rapidement une galerie a partir d’un tableau d’objets, avec une série de paramètres de customisation.
Le fla de la galerie est disponible pour skinner les assets (ASSETS/FLA). Il faut ensuite le re-exporter le SWC FSGraphics dans le répertoire ASSETS/SWC
Pour éditer l’aspect du player vidéo, il vous faut télécharger le package FSVideoPlayer, modifier les assets dans le fla, puis exporter le SWC dans le répertoire ASSETS/SWC

Encore une fois il s’agit d’un basic qui ne couvre pas tous les cas d’utilisation. N’hésitez pas a rajouter des fonctionnalités ou options, a personnaliser la classe, et a nous le faire savoir! Vous pouvez également soumettre des idées via les commentaires, les plus utiles et malines seront peut être intégrées dans une prochaine version.

Téléchargez les sources ici : FSVideoGalery (159)

Aperçu :

Exemple d’utilisation :


import com.fs.media.galery.FSVideoGalery;
import com.fs.media.galery.utils.GalerySettings;


//settings
var oSettings:GalerySettings = new GalerySettings();
oSettings.wMainView = 560;
oSettings.hMainView = 336;
oSettings.wThumb = 98;
oSettings.hThumb = 70;
oSettings.color = 0x2e62af;
oSettings.borderSelected = 5;
oSettings.padding = 5;
oSettings.enableCaption = true;
oSettings.autoPlay = true;
oSettings.loop = true;
oSettings.autoHide = true;


//datas
var aData:Array = new Array();
aData.push({caption:"Video 1", thumbURL:"medias/images/thumbs/img1.jpg", fileURL:"medias/videos/video1.flv"});
aData.push({caption:"Video 2", thumbURL:"medias/images/thumbs/img2.jpg", fileURL:"medias/videos/video2.flv"});
aData.push({caption:"Video 3", thumbURL:"medias/images/thumbs/img3.jpg", fileURL:"medias/videos/video3.flv"});
aData.push({caption:"Video 4", thumbURL:"medias/images/thumbs/img1.jpg", fileURL:"medias/videos/"video1.flv"});


//galery initialisation
var galery:FSVideoGalery = new FSVideoGalery();
galery.setSettings(oSettings);
galery.setDatas(aData);
this.addChild(galery);
galery.selectItem(0);


Méthodes public :

• setDatas(_aData:Array)Initialise les données. Tableau d’objets avec les propriétés suivantes :
  -caption:String
  -thumbURL:String
  -fileURL:String
• setSettings(oSettings:Object) Initialise les paramètres d’affichage.
  oSettings est un object étendu de GalerySettings avec les propriétés suivantes :
  -wMainView:int = 560; //largeur de la vue principale
  -hMainView:int = 336; //hauteur de la vue principale
  -wThumb :int = 98; //largeur des thumbnails
  -hThumb :int = 70; //hauteur des thumbnails
  -padding :int = 10; //marge entre les éléments
  -borderSelected:int = 5; //taille du bord de sélection d’un thumbnail
  -color:uint = 0×2e62af; //couleur des éléments
  -enableCapture:Boolean = true; //affiche ou non la légende
  -autoPlay: Boolean = true; //joue automatiquement la vidéo
  -loop:Boolean = true; //joue la video en boucle
  -autoHide:Boolean= true; //masque le player au rollOut
• selectItem(i:int) Sélectionne un item

Téléchargement :

Téléchargez les sources ici : FSVideoGalery (159)