Texte dynamique avec barre de défilement.

 On se propose d'importer dans l'animation, un fichier texte depuis un répertoire 
 et de permettre le défilement du texte grâce à une barre verticale

 Cet exemple utilise des scripts assez simples.
 Je suppose connu les fonctions de création sur lesquelles je n'insisterai pas.
 

 Attention :
  Cet exemple utilise un script PHP éxécutable coté serveur.
  Alors, pour tester votre création, il vous faut :
  - soit un serveur Apache sur votre ordinateur (avec les modules PHP installés )
  - soit mettre les fichiers sur votre site, à condition que votre hébergeur accepte les scripts PHP.

 Tout d'abord, Téléchargez le fichier contenant 3 images et un fichier texte.
 Décompressez le fichier dans votre répertoire de travail SwishMax.

Partie 1 : Objectifs.

 Dans une animation 640x480, on va créer un cadre dans lequel sera affiché un texte.
 Une barre verticale va permettre de faire défiler ce texte.
 Elle comprend :
 - un bouton haut et un bouton bas qui permet de monter ou de descendre d'une ligne.
    (également possible avec les touches flêches verticales du clavier)
 - un ascenseur qui se déplacera en accord avec ce qui précède.
 En cliquant dans les zones en dessous ou au dessus de l'ascenseur, on déplacera de 5 lignes
 vers le haut ou vers le bas.
 (également possible avec les touches Page précédente et Page suivante)

Partie 2 : Création des Objets.

 1 - Définissez les dimensions générales 640x480 ainsi que la couleur du fond #000066.
     Prenez un Frame Rate quelconque.

 2 - Créez maintenant un rectangle de couleur #7C72FC, nommé Cadre
      avec un contour d'épaisseur 3 et de couleur #DDDDDD.
     Vous devez avoir :
	
     Ce rectangle va servir de fond pour le texte.

 3 - Importez maintenant l'image down.gif
	
     Convertissez en bouton.
	
     Ce bouton va servir au défilement d'une ligne.

 4 - Importez maintenant l'image up.gif
	
     Convertissez en bouton.
	
     Ce bouton va servir au défilement d'une ligne.

 5 - Créez maintenant un rectangle de couleur #7C72FC, nommé downside
     Vous devez avoir :
	
     Ce rectangle va servir pour le défilement de 5 lignes.

 6 - Créez maintenant un rectangle de couleur #7C72FC, nommé upside
     Vous devez avoir :
	
     Ce rectangle va servir pour le défilement de 5 lignes.

 7 - Importez maintenant l'image lift.gif
	
	Ce rectangle va servir d'ascenseur.

 8 - Et maintenant la partie délicate : le texte dynamique de couleur #FFFF00.
      Il m'a fallu chercher un moment pour que çà fonctionne.
	
     Suivez bien les étapes : Advanced, Dimensions, Formatting.
	
  Il est important de remarquer que la variable de contrôle scrolltext
 possède un nom différent du nom de l'objet txt.
 Leading permet de modifier la distance entre les lignes en ne respectant pas la police de caractères.

    Outline doit ressembler à 
	

Partie 3 : Script PHP.

 Avec un éditeur de texte, vous allez entrer le texte suivant :
<?
$filename = "SaveToNight.txt";
$tampon = "";
if ( $fp = fopen( $filename, "r") )
{
	$tampon = fread($fp, filesize($filename));
	fclose ( $fp );
} 
$str = utf8_encode( $tampon );

echo "scrolltext=".$str."&fini=1";
?>

 Sauvegardez ce fichier sous le nom getfile.php
 Il faudra le placer sur le serveur.
  Explications :
 On ouvre le fichier spécifié en lecture.
 On charge le contenu entier dans un tampon.
 Puis on gère les accents éventuels ( facultatif ).
 On retourne la variable de texte dynamique scrolltext et fini.

Partie 4 : Scripts SwishMax.

Voici le script général de Scene_1
onLoad () 
{
    loadVariables("getfile.php",'POST');
    // control data / quelques valeurs de controle
    Yh_lift = 76;
    Yb_lift = 386;
    Yh_upside = 76;
    Yh_downside = 93;
    hauteur = 312;
    // default : lift is at top, therefore upside is 0
    // par défaut, l'ascenseur est en haut donc upside est à 0 
    upside._height = 0;
    downside._height = 312;
}
onFrame (1) 
{	// si fichier chargé / if file loaded
    if (fini==1) gotoSceneAndPlay("<current scene>",4);
}
onFrame (3) 
{	// pas chargé : retour / not yet loaded , back off
    gotoSceneAndPlay("<current scene>",1);
}
onFrame (5) 
{
    stop();
}

Voici le script du bouton scrolldown
on (rollOver,release) 
{   // ligne suivante
    // scroll to the next line
    txt.scroll++;
    if (lift._Y < _root.Yb_lift) 
    {
        lift._Y++;
        downside._Y++;
        downside._height--;
        upside._height++;
    }
}
onSelfEvent (keyPress("<Down>")) 
{   // ligne suivante avec flêche
    // scroll to the next line with arrow
    txt.scroll++;
    if (lift._Y < _root.Yb_lift) 
    {
        lift._Y++;
        downside._Y++;
        downside._height--;
        upside._height++;
    }
}
onSelfEvent (keyPress("<PageDown>")) 
{   // 5 lignes 
    // scroll to the 5 next lines
    txt.scroll += 5;
    if (lift._Y < _root.Yb_lift) 
    {
        lift._Y += 5;        // pixels
        downside._Y += 5;
        downside._height -= 5;
        upside._height += 5;
    }
}


Voici le script du bouton scrollup
on (rollOver,release) 
{   // ligne précédente
    // scroll to the previous line
    txt.scroll--;
    if (lift._Y > _root.Yh_lift) 
   {
        lift._Y--;
        downside._Y--;
        downside._height++;
        upside._height--;
    }
}
onSelfEvent (keyPress("<Up>")) 
{   // ligne suivante avec touche flêche
    // scroll to the previous line
    txt.scroll--;
    if (lift._Y > _root.Yh_lift) 
    {
        lift._Y--;
        downside._Y--;
        downside._height++;
        upside._height--;
    }
}
onSelfEvent (keyPress("<PageUp>")) 
{   // 5 lignes
    // scroll to the 5 previous line
    txt.scroll -= 5;
    if (lift._Y > _root.Yh_lift) 
   {
        lift._Y -= 5;    // pixels
        downside._Y -= 5;
        downside._height += 5;
        upside._height -= 5;
    }
}


Voici le script de downside
on (rollOver,release) 
{   // 5 lignes
    // scroll to the 5 next lines
    txt.scroll += 5;
    if (lift._Y < _root.Yb_lift) 
   {
        lift._Y += 5;
        downside._Y += 5;
        downside._height -= 5;
        upside._height += 5;
    }
}

Voici le script de upside
on (rollOver,release) 
{   // 5 lignes
    // scroll to the 5 previous line
    txt.scroll -= 5;
    if (lift._Y > _root.Yh_lift) 
   {
        lift._Y -= 5;// pixels
        downside._Y -= 5;
        downside._height += 5;
        upside._height -= 5;
    }
}

 Et voilà, c'est terminé.

 Il faudrait améliorer la barre de défilement en déterminant le nombre de lignes
 du texte, puis en calculant le pas de déplacement de l'ascenseur de sorte
 que celui-ci arrive en bas de la barre  lorsque la fin du texte est affiché.
 Mais, bon, je pinaille.

Dernière Modification : Lun 29 Avril 2013 19:47
Copyright © 1999-2013 Jean-Paul Molina Tous droits réservés.