Text Editor

 

The purpose is to show a small text editor which allows, as soon as any text has been entered, to get it formatted either a part or the whole : bold, underline, italic, align, bullet. You could get text colored and fonts changed. (Right here, only 4 of each)
Many scripts have been written. I have encountered some difficulties but as soon as I fixed them up, I was quite surprised to see how the code was simple.
Basically it uses ActionScript, so you could not test in SwishMax but only with FlashPlayer and a browser. ( Export / SWF+HTML )
I suppose you know well how to create objects, thus I wont insist on.

⇒ animation ⇐

Download an iconbar. .

Creating Objects

1 - Set up movie size 640x480 and background color #660066.
Any Frame Rate 'll fit.

2 - Creating a text zone.
We draw an external border, an internal border, then group.

Follow images :
Ext Border

   

Int Border

   

3 - Right now, we gonna put zones to capture events rollOver, release, rollOut for Bold, Italic, Underline, Palette, Align (Left, center, right), Bullet, Fonts.
The process being the same, I only give images for Bold ( the leftest )
Then, I'll give X-coord and name for the others.
Follow images for Bold :

   

Repaet processing for : (X increases 24 pitch)
name : italic X = 29
name : underline X = 53
name : palette X = 77
name : left X = 101
name : center X = 125
name : right X = 149
name : bullet X = 173
name : polices X = 197

4 - Insert the iconbar.

5 - The tooltips.
I'll only describe Bold. For others, it's your own business. So you'll see whether you have understood or not.
First draw a rectangle, then text and group. Follow images :

rectangle

   

text

   

   

Same process for tipItalic, tipUnderline, tipPalette, TipAlignL, tipAlignC, tipAlignR, tipBullet, tipFont.

6 - Popup Menu for palette colors.
Draw an external rectangle, 4 squares for the 4 colors, then group. Follow images :

border

   

RED

   

GREEN

   

BLUE

   

YELLOW

   

   

7 - Pop up menu for fonts.
Draw an external rectangle, a highlighted bar and texts, then group. Follow images :

border

   

Highlighted bar

   

arial

   

book antiqua

   

comic sans ms

   

georgia

   

   

Scripts

In Outline, select scene, get to Mode Expert. Enter the following script :

onLoad()
{
      // hide tooltips, color palette, fonts
      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;

      // depth 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;
}

In Outline, select georgia. Enter the following script :

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();
}
}

In Outline, select comic. Enter the following script :

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();
       }
}

In Outline, select book. Enter the following script :

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();
       }
}

In Outline, select arial. Enter the following script :

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();
       }
}

In Outline, select jaune. Enter the following script :

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();
       }
}

In Outline, select bleu. Enter the following script :

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();
       }
}

In Outline, select vert. Enter the following script :

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();
       }
}

In Outline, select rouge. Enter the following script :

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();
       }
}

In Outline, select polices. Enter the following script :

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

In Outline, select bullet. Enter the following script :

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;}

In Outline, select right. Enter the following script :

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;}

In Outline, select center. Enter the following script :

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; }

In Outline, select left. Enter the following script :

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;}

In Outline, select palette. Enter the following script :

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

In Outline, select underline. Enter the following script :

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;}

In Outline, select italic. Enter the following script :

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;}

In Outline, select bold. Enter the following script :

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;}

Et voilà, that's it. We might add a text replacer, ..... I guess you have understood the process. Be sure to get the good targets toggled.

 


Si vous aimez le site

 

Select a language if you need :


Page chargée en 0.004 sec.

Dernière Modification : Mer 25 Janvier 2017 8:56
Copyright © 1999-2017 Jean-Paul Molina Tous droits réservés.

to Google