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.