В каком графическом редакторе надо рисовать странички? А как вы
думаете, какую технику стоит выбрать при создании обычных картин -
масло, акварель, уголь или цветные карандаши? Каждый выбирает то, что
ему по душе. Так и с графическими редакторами. Лично я предпочитаю
редактор Macromedia Fireworks. Выбор был не совсем случаен — я уважаю
эту
фирму и все, что она
делает. Скажем, Macromedia Dreamweaver стал для меня первым и самым
любимым инструментом для создания сайтов. Более того, я считаю его
единственным визуальным редакторок HTML-страниц, генерирующим
нормальный код. Никакие FrontPage’ы и рядом не лежали. Впрочем, по
некоторым причинам, сам я им пользуюсь редко, но об этом как-нибудь в
следующий раз.
Пока же вернемся к нашим баранам, то есть к графическим
редакторам. Терпеть не могу рисовать однотипные элементы. Просто
не-на-ви-жу! Посмотрите на нарисованные справа желтенькие полосочки c надписями
«Архив», «Последние 5 записок» и т.д. (это было справедливо для старого
дизайна). Вот их рисовать — самое
муторное дело, они должны быть одинакового размера, одинакового
цвета, надписи должны быть выполнены одним размером шрифта и отступ
текста от края всегда должен быть выверен с точностью до пикселя.
Впрочем, могло быть и хуже, например, закругленные рамки, градиентная
заливка…
В один прекрасный день, меня окончательно вывела из себя процедура
установки всех этих параметров, и я решил жизнь себе облегчить. Для
этого были взят любимый редактор Macromedia Fireworks 4.0 и ценнейший
документ «Extending Fireworks».
Итак, меню Commands, там пункты Convert to Grayscales,
Convert to Sepia Tone и т.д. Это не что иное, как программы,
написанные на JavaScript. Их можно выполнить в редакторе, а исходные
тексты находятся в каталоге «основной каталог Fireworks»\Configuration\Commands
Вопрос теперь в том, как создавать эти программы. Легче всего,
поверьте мне, делать это визуально. Для этого зайдем
в окно History (Shift+F10):
В этом окне последние несколько команд, выполненных в редакторе.
Выделяем те, которые нас интересуют, жмем на иконку
и вводим имя файла. Все, теперь разглядываем исходый код нашей «программы», при необходимости
консультируясь в «Extending Fireworks» о назначении того или иного
параметра. А параметров таких будет много, очень много, очень-очень
много. Положим, линию надо провести. Но для этого надо задать кисть
(brush), а делается это приблизительно вот так:
doc.pathAttributes.brush = {
alphaRemap:"none",
angle:0,
antiAliased:false,
aspect:100,
blackness:0,
category:"bc_Pencil",
concentration:100,
diameter:s,
feedback:"none",
flowRate:0,
maxCount:15,
minSize:1,
name:"1-Pixel Soft",
shape:"circle",
softenMode:"bell curve",
softness:2,
spacing:15,
textureBlend:0,
textureEdge:0,
tipColoringMode:"random",
tipCount:1,
tipSpacing:0,
tipSpacingMode:"random",
type:"simple"
};
Супер!!!
Разумеется, не все, что необходимо, можно получить таким
образом. Цикл или функцию визуально, увы, не создать 
Их придется делать
ручками, благо синтаксис Java Script довольно прост. Вот, скажем,
как выглядит программа для рисования «звездного неба»:
var cnt = prompt("Количество звездочек:");
var doc = fw.getDocumentDOM();
for (i=0;i<cnt;i++){
var x = Math.random()*doc.width;
var y = Math.random()*doc.height;
var s = Math.random()*3+1;
drawStar(x,y,s)
}
function drawStar(x,y,s){
doc.pathAttributes.brush = {
alphaRemap:"none",
angle:0,
antiAliased:false,
aspect:100,
blackness:0,
category:"bc_Pencil",
concentration:100,
diameter:s,
feedback:"none",
flowRate:0,
maxCount:15,
minSize:1,
name:"1-Pixel Soft",
shape:"circle",
softenMode:"bell curve",
softness:2,
spacing:15,
textureBlend:0,
textureEdge:0,
tipColoringMode:"random",
tipCount:1,
tipSpacing:0,
tipSpacingMode:"random",
type:"simple"
};
doc.pathAttributes.brushColor = "#ffffff";
doc.addNewLine({x:x, y:y}, {x:x, y:y});
}
Небольшой комментарий — уже очень давно у меня на компьютере
прописался супер-источник знаний — Microsoft Developer Network (MSDN)
Library. Ищите там раздел «JScript Language Reference», где есть все,
что касается Java Script. Функция Math.random() была взята не с
потолка, а именно оттуда.
А вот результат работы программы:
Немного усложняем, добавив «падающие звезды»:
Побаловавшись с параметрами можно получить неожиданные результаты:
А сейчас на бис, обещанные кнопки:
var text = prompt("Что писать изволите:","Super-Puper Button");
var doc = fw.getDocumentDOM();
doc.pathAttributes.brush = {
alphaRemap:"none", angle:0, antiAliased:false,
aspect:100, blackness:0, category:"bc_Pencil",
concentration:100, diameter:30, feedback:"none",
flowRate:0, maxCount:15, minSize:1, name:"1-Pixel Soft",
shape:"circle", softenMode:"bell curve", softness:5,
spacing:15, textureBlend:0, textureEdge:0,
tipColoringMode:"random", tipCount:1, tipSpacing:0,
tipSpacingMode:"random", type:"simple"
};
doc.pathAttributes.brushColor = "#ffffff";
doc.addNewLine({x:30, y:90}, {x:170, y:90});
doc.pathAttributes.brush = {
alphaRemap:"none", angle:0, antiAliased:false,
aspect:100, blackness:0, category:"bc_Pencil",
concentration:100, diameter:26, feedback:"none",
flowRate:0, maxCount:15, minSize:1, name:"1-Pixel Soft",
shape:"circle", softenMode:"bell curve", softness:5,
spacing:15, textureBlend:0, textureEdge:0,
tipColoringMode:"random", tipCount:1, tipSpacing:0,
tipSpacingMode:"random", type:"simple"
};
doc.pathAttributes.brushColor = "#000000";
doc.addNewLine({x:30, y:90}, {x:170, y:90});
doc.addNewText({left:35, top:100, right:170, bottom:106}, true);
doc.setFillEdgeMode("antialias", 0);
doc.setTextAutoKern(true);
doc.setTextAntiAliasing("smooth");
doc.setTextOrientation("horizontal left to right");
doc.setTextRuns({ initialAttrs:{ alignment:"center",
baselineShift:0, bold:true, face:"Arial",
fillColor:"#ffffff", horizontalScale:1, italic:false,
leading:1, leadingMode:"percentage", rangeKerning:0,
size:"14pt", underline:false },
textRuns:[ { changedAttrs:{ }, characters:text } ] });
doc.setTextRectangleAutoFromPoint({x:35, y:70});
doc.setTextRectangle({left:35, top:100, right:170, bottom:106});
doc.moveSelectionTo({x:35, y:83}, false, false);
И результат:
Теперь можете скачать себе и внимательно рассмотреть все использованные выше скрипты: