A découvrir ici : http://www.lcpuppets.lutincapuche.com/

Le résultat n’est pas encore parfait, loin de la, mais j’avais besoin de quelques modèles potables pour pouvoir faire un test qui me trotte dans la tête depuis un moment.
Voici donc la version beta de “Lc Puppets Galery”, basée sur le moteur de physique Box2D.
Vous pouvez jouer avec les différentes peluches, les secouer, les jeter contre les murs ou les unes contre les autres… A venir dans la prochaine version, un petit concours de photos de famille avec quelques puppets en plus, avec pour objectif de leur faire prendre la pause la plus extravagante possible… donc a venir dans quelques semaines, surveillez vos flux RSS, le lutin n’est pas encore mort!

A découvrir ici >>

FlashSquare est un nouveau blog francophone sur les technologies Flash, Flex, et tout ce qui peut s’y rapporter. Vous y trouverez des ressources, des tutoriaux, des applications prêtes à l’emploi, une sélection de nos sites coups de coeur, un lab expérimental…

FlashSquare, c’est la fusion de 2 blogs : daweed.info et lutincapuche.com, qui vont donc bientôt disparaitre de la toile de l’Internet.
Blogguer, partager ses ressources, ses découvertes, ses coups de cœur, et ben ça prend du temps!! Nos 2 blogs étant un peu à l’abandon depuis quelques semaines pour l’une, quelques mois pour l’autre, cette association s’avère la meilleure pour faire revivre nos ego de développeurs Flash. Nous voici donc repartis pleins d’enthousiasme!!

Donc beaucoup de changement pour le lutin ces derniers temps : une conversion absolue a MAC (et oui!! finalement diront certains!!), et un nouveau blog qui prendra le relai de celui ci.

N’hésitez pas a faire des commentaires, des suggestions, c’est encore tout nouveau et beaucoup d’évolutions sont prévues!

Bonne lecture!

Mais voici encore une petite classe basique extraite d’un récent projet, un “circle slider” paramétrable.
Cette classe permet d’ instancier un slider circulaire en paramétrant l’angle de rotation souhaité, les diamètres des éléments, la valeur initiale a setter, et de récupérer en retour un pourcentage.

Paramètres :

• _radius:Number,        // rayon du cercle
• _angleMin:Number,   // angle minimum de 0 a 360
• _angleMax:Number,  // angle maximum de 0 a 360
• _initValue:Number     // valeur initiale en pourcentage de 0 a 1
• oStyleSlider:Object    // style

Méthodes :

• getValue                     // retourne un pourcentage de 0 a 1
• setValue(percent)       // envoi un pourcentage de 0 a 1

Instancier un CircleSlider :

//import de la classe CircleSlider
import com.lc.utils.CircleSlider;

//definition du style des elements
var oStyleSlider:Object 		= new Object();
oStyleSlider.colorBorderCircle 	= 0xcccccc;
oStyleSlider.isFillCircle		= false
oStyleSlider.colorCentreCircle		= 0x80923a;
oStyleSlider.thicknessBorderCircle 	= 10;
oStyleSlider.colorCursor		= 0xf2a000;
oStyleSlider.radiusCursor		= 20;
oStyleSlider.colorBorderCursor		= 0x80923a;
oStyleSlider.thicknessBorderCursor	= 0;	

//creation du circle slider
var mySlider:CircleSlider  = new CircleSlider(70, 0, 180, 0.3 ,oStyleSlider)
//_radius:Number,   --> rayon du cercle
//_angleMin:Number, --> angle minimum de 0 a 360
//_angleMax:Number, --> angle maximum de 0 a 360
//_initValue:Number --> valeur initiale en pourcentage de 0 a 1
//oStyleSlider:Object --> style

//ajout sur la scene
addChild(mySlider);

//écouteur pour savoir quand la valeur a changée
mySlider.addEventListener("onValueChange",onValueSliderChange,false,0,true)
function onValueSliderChange(e:Event):void{
	//retourne un pourcentage de 0 a 1
	trace(e.target.value)
}

Télécharger la source :
-Classe CircleSlider.as
-Exemple d’utilisation

Il permet de jouer une playlist xml de mp3 avec les contrôles basics :
- précédent
- suivant
- play/pause
- playlist xml

Paramètres :
- le fichier playlist xml
- la largeur du player
- l’affichage ou non du nom de l’artiste et de la chanson
- les caractères de séparation de artiste/titre
- la couleur des boutons et du texte
- la couleur du rollover des boutons

Méthode :
- pauseSong
- playSong
- prevSong
- nextSong

Pour instancier un nouveau mp3 player :

Assurez vous que le movieClip MusicPlayer est bien lié à la classe MusicPlayer dans la bibliothèque.
Remplissez votre fichier playlist.xml avec autant de morceaux que vous souhaitez.

Créez l’instance et attachez la sur la scène :

import com.lc.basics.MusicPlayer;

//playlistFile:String,
//_widthPlayer:Number = 205,
//_isDisplayTexte:Boolean,
//_sSeparateur:String ="//",
//_color:String = "0xFF017D",
//_overColor:String= "0xffffff";

var myPlayer:MusicPlayer = new MusicPlayer("/wp-mediaz/xml/playlist.xml", 200,
true, " // ", "0xFFCC00","0xFFFFFF");
this.addChild(myPlayer);

Téléchargez la source ici

::Musique : Misteur Valaire

Cette classe intègre :

- la gestion du son
- la timeline interactive
- le buffer
- le resize
- les fonctions habituelles

Propriétés :

• playAtStart :jouer la vidéo lors de l’init
• loop : jouer la vidéo en boucle
• hidePlayer : masquer le contrôleur vidéo

Méthodes :

• setVideo(file:String) : Initialise une vidéo
• setSize(width:Number, height:Number) : Initialise la taille de la vidéo et adapte le player
• playVideo() : Joue la vidéo
• pauseVideo() : Pause la vidéo
• unsetVideo() : Nettoie le player et la mémoire

Pour instancier un nouveau video player :

Assurez vous que le movieClip VideoPlayer est bien lié à la classe VideoPlayer dans la bibliothèque.

Puis créez l’instance et attachez la sur la scène :

import com.lc.basics.PlayerVideo;

//PlayerVideo(_playAtStart, _loop, _hidePlayer){
var myPlayer:PlayerVideo = new PlayerVideo(true,false,true);
myPlayer.setVideo("videos/spook.flv")
myPlayer.setSize(600,337);
this.addChild(myPlayer);

Téléchargez les sources ici

//vidéo Tetsouille

En attendant, je vous propose de découvrir ma dernière réalisation : le portfolio de l’ami Tetsouille. C’est bien sur lui qui a fait toute la partie graphique, je me suis chargée du développement et animation.
C’est fluo, ça tween, c’est beau

Visitez le nouveau portfolio de Tetsouille

Cette fois ci, passage en AS3. Optimisation du code pour un rendu plus fluide et léger (13ko).
J’ai aussi rajouté un loader pour chaque image (quand même, c’est pas mal!), et un nouvel effet de transition.

Vous pouvez tester les différents paramètres dans la version démo ci dessous :

Le code est accessible dans la source, si vous trouvez des améliorations à y apporter, faites m’en part, ou plutôt faites les et faites m’en part!

Pour l’utiliser, rien de plus simple:

• Téléchargez la source ici
• Ouvrez un nouveau fichier flash AS3. Importez le package :

  
  
  import com.lc.galerie.LcGalerie;
  
  

• Créez une nouvelle instance de LcGalerie comme ci dessous, en ajustant les paramètres commentés selon vos besoins.

  
  
  
  LcGalerie=new LcGalerie(400,400,20,3,3,"0xFF1D140C","XML/galerie.xml",false,hote_mc,"H","translation");
  
  
  

• Remplissez le fichier XML/galerie.xml avec vos images et leurs légendes.
• Placez vos images dans le répertoire IMG dans des tailles optimisées pour l’affichage
• Compilez le fla.
• Placez les répertoires XML et IMG, ainsi que le swf généré, sur votre ftp, à la racine de la page contenat le swf ou le site

Les variables dans l’ordre de déclaration

• largeur de la galerie
• hauteur de la galerie
• marge entre les images
• nombre de lignes
• nombre de colonnes
• couleur du fond de type arvb (alpha de 00 à ff + code alphanumérique de la couleur
• fichier xml contenant la liste des images et légendes
• affichage de la legende de l’image : true pour oui, false pour non
• clip hote de la galerie
• animation Verticale ou Horizontale (”H” ou “V”)
• type de transition (”translation” ou “rotation”)

Notes:
Si le nombre d’images dans le xml est supérieur à nombre de lignes*nombre de colonnes, seul le nombre maximal sera affiché (nombre de lignes*nombre de colonnes).
Si le nombre d’images dans le xml est inférieur à nombre de lignes*nombre de colonnes, les cases vides sont remplies avec la couleur de fond précisée.

Version AS2:

Accédez ici à la version AS2

Dans cet exemple, j’ai ajouté :
-un copyright
-un lien vers le site de l’auteur
-la gestion du fullscreen

package com.lc.common {

    //import des classes nécessaires
    import flash.net.*;
    import flash.ui.ContextMenu;
    import flash.ui.ContextMenuItem;
    import flash.ui.ContextMenuBuiltInItems;
    import flash.events.ContextMenuEvent;
    import flash.display.*;

    public class ContextMenuLc extends Sprite {

        //déclaration des variables
        private var myContextMenu:ContextMenu;
        private var menuLabel0:String = "LutinCapuche@2008";
        private var menuLabel1:String = "Portfolio LutinCapuche";
        private var menuLabel2:String = "Enter fullscreen mode";
        private var menuLabel3:String = "Exit fullscreen mode";
        private var _stage:Stage;

        //constructeur
        public function ContextMenuLc(cible:MovieClip,stageCurrent:Stage) {
            _stage = stageCurrent;
            myContextMenu = new ContextMenu();
            removeDefaultItems();
            addCustomMenuItems();
            myContextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, menuSelectHandler);
            //j'attache le contexteMenu au clip passé en paramètre, dans l'exemple la racine
            cible.contextMenu = myContextMenu;
        }

        private function removeDefaultItems():void {
            //suppression des items par défaut
            myContextMenu.hideBuiltInItems();
        }

        private function addCustomMenuItems():void {
            //ajout des items personnalisé et des évènements associés
            //le copyright
            var item0:ContextMenuItem = new ContextMenuItem(menuLabel0);
            myContextMenu.customItems.push(item0);

            //lien vers site de l'auteur
            var item1:ContextMenuItem = new ContextMenuItem(menuLabel1);
            item1.separatorBefore = true;
            myContextMenu.customItems.push(item1)
            item1.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, gotoMyPortfolio);

            //activation du fullscreen
            var item2:ContextMenuItem = new ContextMenuItem(menuLabel2);
            item2.separatorBefore = true;
            myContextMenu.customItems.push(item2);
            item2.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onShowFullScreen);

            //desactivation du fullscreen
            var item3:ContextMenuItem = new ContextMenuItem(menuLabel3);
            item3.separatorBefore = true;
            myContextMenu.customItems.push(item3);
            item3.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, onShowNormalScreen);
            myContextMenu.customItems[3].enabled = false
        }

       private function menuSelectHandler(event:ContextMenuEvent):void {
            if (_stage.displayState == StageDisplayState.NORMAL){
                 event.target.customItems[2].enabled = true; // show full screen button
                 event.target.customItems[3].enabled = false; // hide normal screen button
            }else  {
                 event.target.customItems[2].enabled = false; // hide full screen button
                 event.target.customItems[3].enabled = true; // shoe normal screen button
            }
       }

       function onShowFullScreen(event:ContextMenuEvent):void{
            _stage.displayState = StageDisplayState.FULL_SCREEN;
       }

       function onShowNormalScreen(event:ContextMenuEvent):void{
            _stage.displayState = StageDisplayState.NORMAL;
       }

       private function gotoMyPortfolio () {
            var mySite:URLRequest = new URLRequest("http://portfolio.lutincapuche.com");
            navigateToURL(mySite);
       }

    }
}

//importation de la classe
import com.lc.common.ContextMenuLc;
//creation du contexte menu sur this, avec stage en paramètre pour le fullscreeen
var myContexteMenu:ContextMenuLc = new ContextMenuLc(this,stage);