Page de Jean-Paul Molina

Editeur de texte

 

On se propose de montrer un petit éditeur de texte qui permet dés qu'un texte est tapé, de formater tout ou partie : gras, souligné, italique, alignement, puces.
On pourra aussi changer les couleurs (4 ici) ainsi que les polices de caractères (4 ici).
Cet exemple comporte des scripts. Cela m'a causé quelques difficultés mais quand je les ai résolues, j'ai été surpris de la simplicité du résultat.
C'est surtout de l'ActionScript. Vous ne pourrez pas tester dans SwishMax mais seulement dans FlashPlayer et dans un navigateur ( Export / SWF+HTML )
Je suppose connu les fonctions de création sur lesquelles je n'insisterai pas.

⇒ animation ⇐

Téléchargez une barre d'icônes .

Création des Objets

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

2 - Création de la zone de texte.
On trace un cadre externe, puis un cadre interne, puis on groupe.

Suivez les images :
cadre externe

   

cadre interne

   

3 - On va mettre en place des zones d'interception d'évènements rollOver, release, rollOut pour Bold, Italic, Underline, Palette, Align (Left, center, right), Bullet, Fonts.
La démarche étant répétitive, les images sont données pour Bold (le plus à gauche)
Des indications pour le X et le nom seront données ensuite.
Suivez les images pour Bold :

   

Répétez l'opération pour : (on incrémente de 24 en X)
nom : italic X = 29
nom : underline X = 53
nom : palette X = 77
nom : left X = 101
nom : center X = 125
nom : right X = 149
nom : bullet X = 173
nom : polices X = 197

4 - Insérez la barre des icônes.

5 - Mise en place des bulles.
Je ne décrirais que celle de Bold. Pour les autres, débrouillez vous. Vous verrez ainsi si vous avez compris la démarche.
On trace d'abord un rectangle, puis le texte et on regroupe. Suivez les images :

rectangle

   

texte

   

   

Effectuez la même démarche pour tipItalic, tipUnderline, tipPalette, TipAlignL, tipAlignC, tipAlignR, tipBullet, tipFont.

6 - Menu surgissant des couleurs de palette.
On crée un rectangle externe, des carrés pour chaque couleur et on regroupe. Suivez les images :

cadre

   

ROUGE

   

VERT

   

BLEU

   

JAUNE

   

   

7 - Menu surgissant des polices de caractères.
On crée un rectangle externe, une barre lumineuse et des textes, et on regroupe. Suivez les images :

cadre

   

barre lumineuse

   

arial

   

book antiqua

   

comic sans ms

   

georgia

   

   

Scripts

Dans Outline, sélectionnez la scéne, passez en Mode Expert. Entrez le script suivant :

onLoad()
{
      // cache les tips, la palette, les polices
      HideColorBox();
      HideFontBox();

      tipBold._visible = false;
      tipItalic._visible = false;
      tipUnderline._visible = false;
      tipPalette._visible = false;
      tipAlignL._visible = false;
      tipAlignC._visible = false;
      tipAlignR._visible = false;
      tipBullet._visible = false;
      tipFont._visible = false;

      // profondeur 1
      createTextField("inputText",1,205,45,390,390);
      inputText.type="input";
      inputText.border= true;
      inputText.multiline = true;
      Selection.setFocus("inputText");

      format = new TextFormat();
      format.size = 14;
      format.font = "Arial";
      inputText.setnewTextFormat(format);
}
function HideColorBox()
{
      _root.ColorsGroup._xscale = 0;
      _root.ColorsGroup._yscale = 0;
}
function HideFontBox()
{
      _root.FontGroup._xscale = 0;
      _root.FontGroup._yscale = 0;
}

Dans Outline, sélectionnez georgia. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      barre._X = 2;
      barre._Y = 64;
}
on (release) {
if ( debut > -1)
      {
       oldfont = _root.format.font;
       _root.format.font = "georgia";
       _root.inputText.setTextFormat(debut, fin, _root.format);
       _root.format.font = oldfont ;
       _root.HideFontBox();
}
}

Dans Outline, sélectionnez comic. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      barre._X = 2;
      barre._Y = 44;
}
on (release)
{
       if ( debut > -1)
              {
             oldfont = _root.format.font;
            _root.format.font = "Comic Sans MS";
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.font = oldfont;
            _root.HideFontBox();
       }
}

Dans Outline, sélectionnez book. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      barre._X = 2;
      barre._Y = 24;
}
on (release)
{
      if ( debut > -1)
       {
             oldfont = _root.format.font;
            _root.format.font = "Book Antiqua";
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.font = oldfont;
            _root.HideFontBox();
       }
}

Dans Outline, sélectionnez arial. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      barre._X = 2;
      barre._Y = 4;
}
on (release) {       if ( debut > -1)
       {
             oldfont = _root.format.font;
            _root.format.font = "arial";
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.font = oldfont;
            _root.HideFontBox();
       }
}

Dans Outline, sélectionnez jaune. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
}
on (release)
{
      if ( debut > -1)
       {
             oldcolor = _root.format.color;
            _root.format.color = 0xFFFF00;
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.color = oldcolor;
            _root.HideColorBox();
       }
}

Dans Outline, sélectionnez bleu. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
}
on (release)
{
      if ( debut > -1)
       {
             oldcolor = _root.format.color;
            _root.format.color = 0x0000FF;
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.color = oldcolor;
            _root.HideColorBox();
       }
}

Dans Outline, sélectionnez vert. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
}
on (release)
{
      if ( debut > -1)
       {
             oldcolor = _root.format.color;
            _root.format.color = 0x00FF00;
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.color = oldcolor;
            _root.HideColorBox();
       }
}

Dans Outline, sélectionnez rouge. Entrez le script suivant :

on(rollover)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
}
on (release)
{
       if ( debut > -1)
       {
             oldcolor = _root.format.color;
            _root.format.color = 0xFF0000;
            _root.inputText.setTextFormat(debut, fin, _root.format);
            _root.format.color = oldcolor;
            _root.HideColorBox();
       }
}

Dans Outline, sélectionnez polices. Entrez le script suivant :

on (press)
{
      FontGroup._xscale = 100;
      FontGroup._yscale = 100;
}
on (rollOut) { tipFont._visible = false;}
on (rollOver) { tipFont._visible = true;}

Dans Outline, sélectionnez bullet. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipBullet._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            format.bullet = true;
            inputText.setTextFormat(debut, fin, format);
            format.bullet = false;
       }
}
on (rollOut) { tipBullet._visible = false;}

Dans Outline, sélectionnez right. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipAlignR._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            old = format.align;
            format.align = "right";
            inputText.setTextFormat(debut, fin, format);
            format.align = old;
       }
}
on (rollOut) { tipAlignR._visible = false;}

Dans Outline, sélectionnez center. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipAlignC._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            old = format.align;
            format.align = "center";
            inputText.setTextFormat(debut, fin, format);
            format.align = old;
       }
}
on (rollOut) { tipAlignC._visible = false; }

Dans Outline, sélectionnez left. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipAlignL._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            old = format.align;
            format.align = "left";
            inputText.setTextFormat(debut, fin, format);
            format.align = old;
       }
}
on (rollOut) { tipAlignL._visible = false;}

Dans Outline, sélectionnez palette. Entrez le script suivant :

on (press)
{
      ColorsGroup._xscale = 100;
      ColorsGroup._yscale = 100;
}
on (rollOut) { tipPalette._visible = false;}
on (rollOver) { tipPalette._visible = true;}

Dans Outline, sélectionnez underline. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipUnderline._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            format.underline = true;
            inputText.setTextFormat(debut, fin, format);
            format.underline = false;
       }
}
on (rollOut) { tipUnderline._visible = false;}

Dans Outline, sélectionnez italic. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipItalic._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            format.italic = true;
            inputText.setTextFormat(debut, fin, format);
            format.italic = false;
       }
}
on (rollOut) { tipItalic._visible = false;}

Dans Outline, sélectionnez bold. Entrez le script suivant :

on(rollOver)
{
      debut = Selection.getBeginIndex();
      fin = Selection.getEndIndex();
      tipBold._visible = true;
}
on (release)
{
       if ( debut > -1)
       {
            format.bold = true;
            inputText.setTextFormat(debut, fin, format);
            format.bold = false;
       }
}
on (rollOut) { tipBold._visible = false;}

Voilà, cet exemple est terminé. On pourrait compléter cet éditeur par du remplacement de texte, ...
Vous devez normalement avoir saisi la méthode. Assurez vous que les bons Target soient cochés.