[FLASH] Système de news défilantes en xml AS2

Voici comment réaliser un système de news défilantes en AS2
1) Ouvrir Flash
2) Créer un fichier AS2 de 550 x 170
3) Créer un calque AS
4) Nous allons créer la structure de notre news
   -  Créez un rectangle de 40 sur 18 et donnez-lui la couleur de votre choix *
   -  Créez un autre rectangle de 42 sur 44 avec une couleur de votre choix. Ces deux objets doivent être en mode graphique, pas en MovieClip ni Bouton. Créez un nouveau MoviClip avec comme nom "news" et dedans placez sur le premier calque les images de fond et votre autre rectangle. Sur un autre calque placez une zone de texte dynamique de 467 sur 24 avec comme nom "Titre" et sur un autre calque placez une autre zone de texte dynamique de 467 sur 89 et donnez comme nom "Description". Sur un autre calque placez une zone de texte dynamique sur le petit rectangle et donnez comme nom "jour" et juste en dessous un autre texte dynamique avec comme nom "mois".
 5) Revenez sur la scène principale et créez un MovieClip "bt_plus" et dedans créez un texte dynamique et donnez-lui comme nom "texteplus". 6) Revenez sur la scène principale et créez un MovieClip "bt_moins" et dedans créez un texte dynamique et donnez-lui comme nom "textemoins". 7) Faites un clic droit sur le clip bt_moins et choisissez "propriétés" et donnez-lui comme nom d'identifiant "bt_moins"; (pour activer il faut cocher les options comme sur le printscreen).
 
8 ) Faites de même pour le bouton plus, ensuite pour news et donnez comme nom "newsitem".
9) Sur le calque AS placez le code suivant :
stop();
// Notre css
var styles = new TextField.StyleSheet();
styles.setStyle("a:hover", {color:'#FF0033'});
styles.setStyle("a", {color:'#00CC33'});
styles.setStyle("p", {color:'#99DDEE'}); // Configuration vitesse et espace des news ( 1 rapide - 100 très lent)
var introSpeed:Number = 1;
var itemSpacing:Number = 10; // Nombre de news visibles
var noItems:Number = 1; // classes utilisées
import mx.transitions.Tween;
import mx.transitions.easing.*; // Création d'un movieclip news qui contiendra toutes nos news
this.createEmptyMovieClip("news", 1); // Position de notre MovieClip News sur la scène
news._x = 20;
news._y = 30; // Variable pour savoir qui slide up and down via les boutons
var id:Number = 0; // Création des boutons de navigation
var BoutonsNav:MovieClip = this.createEmptyMovieClip("BoutonsNav", 2);
// Position des deux boutons
BoutonsNav._x = 360;
BoutonsNav._y = 150;
//effet
fade(BoutonsNav, 0, 100, 1, Strong.easeIn);
// Notre bouton moins
var bt_moins:MovieClip = BoutonsNav.attachMovie("bt_moins", "bt_moins", 3);
bt_moins.textemoins.text = "Moins";
bt_moins._x = 130;
// Notre bouotn plus
var bt_plus:MovieClip = BoutonsNav.attachMovie("bt_plus", "bt_plus", 4);
bt_plus.texteplus.text = "Plus";
bt_plus._x = 80;
// Désactivation du bouton moins
bt_moins._alpha = 50;
bt_moins.enabled = false; // Chargement du XML
var mainNews:XML = new XML();
mainNews.ignoreWhite = true;
mainNews.onLoad = buildnews;
mainNews.load("news.xml");
function buildnews(success:Boolean):Void {
if (success) {
var allNews:XMLNode = mainNews.firstChild;
// Nombre de news dans notre xml
var allNewsTotal:Number = allNews.childNodes.length;
var i:Number;
for (i=0; i<allNewsTotal; i++) {
var newsItem:MovieClip = news.attachMovie("newsItem", "newsItem"+i, i);
// Récupération des infos du xml
newsItem.lejour = allNews.childNodes[i].childNodes[0].attributes.jour;
newsItem.lemois = allNews.childNodes[i].childNodes[0].attributes.mois;
newsItem.theTitle = allNews.childNodes[i].childNodes[1].firstChild.nodeValue;
newsItem.thedescription = allNews.childNodes[i].childNodes[2].firstChild.nodeValue;
newsItem.Titre.text = newsItem.theTitle;
// Active le css
newsItem.Description.styleSheet = styles;
// Permet de mettre du texte au format HTML
newsItem.Description.html = true;
// Notre zone de texte va s'adapter automatiquement
newsItem.Description.autoSize = true;
newsItem.Description.htmlText = newsItem.thedescription;
newsItem.jour.text = newsItem.lejour;
newsItem.mois.text = newsItem.lemois;
// Effet pour Newsitem + positionnement
newsItem._y = 0;
newsItem.pos = news['newsItem'+(i-1)]._x+news['newsItem'+(i-1)]._height+itemSpacing;
newsItem._x = newsItem.pos;
if (i<noItems) {
// Affichage de la première news
fade(newsItem, 0, 100, introSpeed+i, Strong.easeInOut);
} else {
// On cache les autres news
newsItem._alpha = 0;
}
}
bt_plus.onPress = function():Void {
if (id>=0 & id<allNewsTotal-noItems) {
// Fonction pour éviter le double clic trop rapide
pasdeclicrapide(this);
bt_plus.enabled = true;
bt_moins._alpha = 100;
bt_moins.enabled = true;
var a:Number = id+noItems;
slide(news, news._x, news._x-news['newsItem'+id]._height-itemSpacing, 1, "_x");
fade(news['newsItem'+id], 100, 0, 2, Strong.easeOut);
fade(news['newsItem'+a], 0, 100, 1, Strong.easeInOut);
id++;
//on active le cuseur si le lien est actif
if (allNewsTotal == id+noItems){
bt_plus._alpha = 50;
bt_plus.useHandCursor = false;
}
else{
bt_moins.useHandCursor = true;
}
}
};
bt_moins.onRelease = function():Void {
if (id<allNewsTotal & id>0) {
// Fonction pour éviter le double clic trop rapide
pasdeclicrapide(this);
bt_plus._alpha = 100;
bt_plus.enabled = true;
var b:Number = id-1;
var c:Number = id+noItems-1;
slide(news, news._x, news._x+news['newsItem'+b]._height+itemSpacing, 1, "_x");
fade(news['newsItem'+b], 0, 100, 1, Strong.easeInOut);
fade(news['newsItem'+c], 100, 0, 1, Strong.easeOut);
id--;
//on active le cuseur si le lien est actif
if (id == 0){
bt_moins._alpha = 50;
bt_moins.useHandCursor = false;
}
else{
bt_plus.useHandCursor = true;
}
}
};
} else {
trace("Le XML n'a pas été chargé..;");
}
}
// Fonction pour éviter le double clic trop rapide
function pasdeclicrapide(boutton) {
time = getTimer();
this.onEnterFrame = function() {
time2 = getTimer();
if (Number(time2-time)>800) {
boutton.enabled = true;
delete this.onEnterFrame;
} else {
boutton.enabled = false;
}
};
} // tween fonctions
function fade(Clip:MovieClip, startvalue:Number, endvalue:Number, fade_speed:Number, ease) {
var fader:Tween = new Tween(Clip, "_alpha", ease, startvalue, endvalue, fade_speed, true);
}
function slide(Clip:MovieClip, startvalue:Number, endvalue:Number, y_speed:Number, prop:String) {
var slider:Tween = new Tween(Clip, prop, Strong.easeInOut, startvalue, endvalue, y_speed, true);
}
10) Notre fichier xml : ICI
J'espère que le code est assez commenté pour vous...
Démo : ICI
Démo 2: ICI
Source: ICI
Bàv,
Burnside.

Les dernieres videos de buzz

Voir les dernieres videos