Tags: Файрворкс

Фреймер Икс. Решил не изучать Реакт

Полжизни я мечтал о рисовании дизайна в коде. Ещё во времена Файрворкса тестил плагины всякие. 

Когда анонсировали Фреймер Икс, я очень радовался — это ж оно! Чтобы лучше въехать решил подрастить ножку «Реакт». Стал кое-что делать на Кодскуле. 

И вот вышел Фреймер. И вот он — дизайн кодом:

Блин. Ну я, конечно, понимаю, что тут написано, но писать вот такое, чтобы квадратик нарисовался... сории, не:

render() {

    return <div style={style}>{this.props.text}</div>;

    }

Пора принять трудное решение: я никогда не смогу своими руками создать программный продукт продакшн-качества. Если я буду что-то писать, то только ради развлечения. Для серьёзных дел вариант один — найти хорошего разработчика и попросить его помочь. 

Так что ножку реакта растить бросаю, буду растить другие.

Мутации и кликабельный прототип

Как говорит один знакомый дипломированный юрист: раз пошла такая пьянка, режь последний огурец. Продолжим о «Дизайне дизайнера», поговорим о мутациях.

Мутации — важный инструмент эволюции и естественного отбора. Жили-были, скажем, белые бабочки. Тусовали на берёзах, всё было хорошо. Попадались, конечно, и чёрные мутанты, но немного, долго чёрным на белой берёзе не проживёшь. Но тут люди стали промышленными отходами берёзы закапчивать, и чёрные бабочки неожиданно победили, а белые — просрали все полимеры, птички же тоже кушать хотят. Эволюция.

С дизайном, да и вообще в работе и жизни человеческой, точно также, только происходит всё гораздо быстрее. Попробовала бы какая-нибудь софтверная компания не следить за новыми технологиями и трендами, слилась бы через пару лет.

Однако есть в профессиональным мутациях важное отличие от природных — мы можем ими управлять по своей прихоти и без особых последствий для здоровья: если ошибёшься, нога на лбу на всю жизнь не останется висеть. Поэтому есть смысл всё время пробовать разное, оно может сработать, и тогда ты выиграешь, а остальные лошки — проиграют. Конечно, тупо перебирать варианты не самая лучшая идея, но перебор — тема другого поста.

Например, Людвиг на лекции рассказывал о кликабельных прототипах. Суть в том, что когда смотришь просто на картинки, в голове работает «софтовое» отделение, которое представляет, как всё это вместе взаимодействует. Но когда ты берёшь в руки реальный сайт и начинаешь всё в живую кликать, вводить тексты, короче пользоваться, подключается «хардверный» отдел и открываются новые истины. Поэтому имеет смысл из макетов собирать кликабельные прототипы и смотреть сразу их.

В бюро к прототипам относятся подозрительно: если нужен прототип, скорее всего, решение слишком сложное и вместо его визуализации, стоит подумать об упрощении. Но кликабельные прототипы — типичная мутация, почему бы её не попробовать? Тем более собирать их в Фаерворксе плёвое дело.

Я попробовал. В одной небольшой задаче нафигачили кликабельный прототип. Действительно, когда кликаешь, смотришь на решение по-другому. Правда в результате получился такой глубины и хитроумности сценарий, что его пришлось выкинуть целиком и оставить один экран, который прекрасно помещался в голове без каких-либо прототипов.

Кликабельные прототипы сработали не очень, ну и ничего страшного, можно идти дальше и пробовать другие мутации. А изменённый ген навсегда остался внутри и, если будет нужно, я вспомню о приёме и воспользуюсь им.

Мутируйте, хули :-)


P. S.
Кстати, ещё одна мутация — микропрототипы.

Затестил Скетч


К прошлому разговору о графических редакторах.

Ведро «Договоров» сделал в Скетче: http://artgorbunov.ru/projects/action-dogovory/recycled/

В общем — прикольно, картинку высотой в 30 000 пикселей переварил спокойно, работал при этом очень быстро. В Фаере для этого пришлось бы танцевать с бубном. Но работать с растровой графикой там почти невозможно, похоже это скорей инструмент для тех, кто сам всё рисует с нуля.

По ходу работы записывал вопросы:
1. Как измерить расстояние между гайдами? И вообще, почему гайды такие неудобные?
2. Как скопировать и вставить в тоже место?
3. Ооо, да он не реагирует на хоткеи в русской раскладке, что делать?
4. Эээ, а где меджик вэнд? Как белое говно убрать с картинки?
5. А экшены есть?
6. А как подмазать что-то в пнгешке?
7. Где скролл документа? Запарился мотать.
8. А где левелсы? Как вытравить фон с картинки?
9. Бля, а где лассо?
10. Где авто интерлиньяж?
11. Как сделать весь фон серым?

Ссылка на сайт программы, если кто не в теме: http://www.bohemiancoding.com/sketch/

Мышка для макбука

Продолжаем разговор. Работать на чистом макбуке оказалось невозможно. Тупо в Фаерворксе не работает жест зума, а выполнять коман+пробел+клик на трекпаде+растягивание прямоугольника неудобно. Так как трекпад надо держать нажатым, трение о него сильно большое получается. 

Какую мышку взять? Я планирую постоянно перетаскивать всё хозяйство между двумя квартирами в одном подъезде.

P. S.
Кстати команд+пробел тоже не работал для зума сначала, потому что на это сочетание же висит переключение языка. Перевесил переключение языка на другое сочетание. Может есть другие способы?

UPD:
Используя инструкцию уважаемого tonsky я смог сделать переключение раскладок по капслоку, это весьма удобно.

UnlockAll.jsf

Вот этим самодельным скрипатом для фаера я пользуюсь 10 раз на дню:

fw.getDocumentDOM().setElementLocked(-1, -1, -1, false, false, false);


Он просто разлочивает всё что есть на странице. Чтобы воспользоваться надо создать файл UnlockAll.jsf с сабжем в папке %AppData%\Adobe\Fireworks CS5\Commands.

JavaScript в Fireworks

Разобрался немного с джаваскриптом в Фаере. Хочу рассказать вам.

Всё очень просто
В Фаере есть почти такие же экшены, как в фотошопе. Только в фотошопе надо включать запись, а в Фаере просто из истории действий выбираешь что хочешь и говоришь: сделать это скриптом.



Все скрипты — это просто джаваскриптовые файлы с расширением «.jsf», которые хранятся в папке ApplicationData. Например, у меня в Вин7 это C:\Users\Kolan\AppData\Roaming\Adobe\Fireworks CS5\Commands.


Типичный код вглядит так (тут создается три прямоугольника (см. картинку выше), затем один перемещаеся):

fw.getDocumentDOM().addNewRectanglePrimitive({left:264, top:88, right:376, bottom:175}, 0);
fw.getDocumentDOM().addNewRectanglePrimitive({left:320, top:267, right:432, bottom:317}, 0);
fw.getDocumentDOM().addNewRectanglePrimitive({left:446, top:208, right:545, bottom:251}, 0);
fw.getDocumentDOM().moveSelectionBy({x:-21, y:-59}, false, false);




Для взаимодействия с документом есть АПИ, которое можно найти тут: http://help.adobe.com/en_US/fireworks/cs/extend/index.html.

К сожалению, АПИ описано весьма скверно, но разобраться можно.

Пример
Программирование в графическом редакторе — это то, о чем я давно мечтал, потому что не имея такого инструмента, сделать действительно интересную инфографику невозможно.

Посмотрим как всё это работает на примере.

Не так давно я делал график про вред наркоты для википедии.


Делал я его классическим для себя образом: взял данные из ПДФки, засунул в эксель, построил график, сделал скриншот и обрисовал точки в Фаерворксе. При этом мне понадобилось пару раз повторить все, чтобы подобрать масштаб. Если бы график был раз в десять больше, я бы точно одурел и бросил.

Имея скрипты масштаб подбирать очень легко и количество точек никак не влияет на процесс. Поменял циферку, нажал кнопочку, всё строится само.

В исходной ПДФке была такая таблица:


С помощью простого копипаста и Нотпада++ она за пару секунд превращается в такой файл:

Heroin;2.78;2.8;2.5;3.0;3.00;3.0;3.0;3.0;2.54;1.6;3.0;3.0
Cocaine;2.33;2.0;2.0;3.0;2.39;3.0;2.8;1.3;2.17;1.8;2.5;2.3
Barbiturates;2.23;2.3;1.9;2.5;2.01;2.0;2.2;1.8;2.00;2.4;1.9;1.7
Street methadone;1.86;2.5;1.7;1.4;2.08;1.8;2.3;2.3;1.87;1.6;1.9;2.0
Alcohol;1.40;1.9;2.4;0;1.93;2.3;1.9;1.6;2.21;2.2;2.4;2.1
Ketamine;2.00;2.1;1.7;2.1;1.54;1.9;1.7;1.0;1.69;2.0;1.5;1.5
Benzodiazepines;1.63;1.5;1.7;1.8;1.83;1.7;2.1;1.8;1.65;2.0;1.5;1.5
Amphetamine;1.81;1.3;1.8;2.4;1.67;2.0;1.9;1.1;1.50;1.4;1.5;1.6
Tobacco;1.24;0.9;2.9;0;2.21;2.3;2.6;1.8;1.42;0.8;1.1;2.4
Buprenorphine;1.60;1.2;1.3;2.3;1.64;2.0;1.5;1.5;1.49;1.6;1.5;1.4
Cannabis;0.99;0.9;2.1;0;1.51;1.9;1.7;0.8;1.50;1.7;1.3;1.5
Solvents;1.28;2.1;1.7;0;1.01;1.7;1.2;0.1;1.52;1.9;1.5;1.2
4-MTA;1.44;2.2;2.1;0;1.30;1.0;1.7;0.8;1.06;1.2;1.0;1.0
LSD;1.13;1.7;1.4;0.3;1.23;2.2;1.1;0.3;1.32;1.6;1.3;1.1
Methylphenidate;1.32;1.2;1.3;1.6;1.25;1.4;1.3;1.0;0.97;1.1;0.8;1.1
Anabolic steroids;1.45;0.8;2.0;1.7;0.88;1.1;0.8;0.8;1.13;1.3;0.8;1.3
GHB;0.86;1.4;1.2;0;1.19;1.4;1.1;1.1;1.30;1.4;1.3;1.2
Ecstasy;1.05;1.6;1.6;0;1.13;1.5;1.2;0.7;1.09;1.2;1.0;1.1
Alkyl nitrites;0.93;1.6;0.9;0.3;0.87;1.6;0.7;0.3;0.97;0.8;0.7;1.4
Khat;0.50;0.3;1.2;0;1.04;1.6;1.2;0.3;0.85;0.7;1.1;0.8




А дальше пишется скрипт, который читает файл. Находит среднее по каждому параметру, рисует кружочки и подписывает их. Огромный плюс тут еще в том, что устраняется возможность человеческой ошибки (не то подписал, не тем цветом покрасил, не туда точку поставил или вообще забыл её и пр.).

Вот, собственно, скрипт. Читайте комменты.

/*Функция, которая умеет загружать текстовый файли и отдавать массив строк.*/
function loadFileAsStringArray(fileName, resultArr) {
var fileObj = Files.open(fileName, "UTF8", false);
if (fileObj == null) {
alert("Null");
};

var reading = true;
while (reading) {
var str = fileObj.readline();
reading = (str != null);
if (reading) {
resultArr[resultArr.length] = str;
};
};

fileObj.close();
};

//Очистить документ.
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().deleteSelection(false);

/*Константы.*/
var scale = 150;
var pointSize = 5;
var textShift = 7;

//Загрузить файл.
var points = [];
loadFileAsStringArray("file:///H|/MyDocuments/Blog/Drugs/Drugs.txt", points);

//Пройти по всем строкам из файла.
for (i=0;i<points.length;i++) {
//Разделить строку на элементы.
var lineArr = points[i].split(';');

//Вычислить среднее значение по каждому параметру.
var drugName = lineArr[0];
var drugPhysicalHarm = (parseFloat(lineArr[1]) + parseFloat(lineArr[2]) + parseFloat(lineArr[3]) + parseFloat(lineArr[4]))/4;
var drugDependence = (parseFloat(lineArr[5]) + parseFloat(lineArr[6]) + parseFloat(lineArr[7]) + parseFloat(lineArr[8]))/4;
var drugSocialHarm = (parseFloat(lineArr[9]) + parseFloat(lineArr[10]) + parseFloat(lineArr[11]) + parseFloat(lineArr[12]))/4;

//Рассчитать координаты с учетом масштаба.
var myLeft = drugDependence*scale;
var myTop = -drugPhysicalHarm*scale;

//Нарисовать прямоугольник.
fw.getDocumentDOM().addNewRectanglePrimitive({left:myLeft, top:myTop, right:myLeft+pointSize, bottom:myTop+pointSize}, 3);
fw.getDocumentDOM().setFillNColor({ category:"fc_Solid", ditherColors:[ "#000000", "#000000" ], edgeType:"antialiased", feather:0, gradient:null, name:"fn_Normal", pattern:null, shape:"solid", stampingMode:"blend opaque", textureBlend:0, webDitherTransparent:false }, "#990000");

//Вывести название наркотика.
textR = {
initialAttrs:{
alignment : "left",
size:"10pt",
face: "Arial",
fillColor: "#000000"

},
textRuns:[
{
changedAttrs:{},
characters:drugName
}
]
}
fw.getDocumentDOM().addNewText({left:myLeft + textShift, top:myTop + textShift, right:0, bottom:0}, true);
fw.getDocumentDOM().setTextRuns(textR);
}

//Веделить всё и сдвинуть, чтобы график не оказался за пределами листа.
fw.getDocumentDOM().selectAll();
fw.getDocumentDOM().moveSelectionBy({x:500, y:500}, false, false);


Замечу, что с джаваскриптом я работаю второй раз в жизни (первый был на прошлой неделе), поэтому тут может быть дебильный код.

Вот результат работы скрипта:


Дальше привести это к человеческому виду гораздо проще.

Пример можете запросто сами запустить. Сохраните код в файл с расширением, .jsf, положите его в папку с командами (см. выше путь), перезапустите Фаер, если он запущен, вызовите команду из меню Commands.
 
Только путь к текстовому файлу, который передаётся в loadFileAsStringArray, не забудьте поменять.
 
Ту би континьюд
Так как документация плохая, сразу написать подобную штуку может быть непросто. Я копал примеры (почему то на японском языке много примеров :) по добавлению текста, а с загрузкой файла вообще почти наугад писал, поэтому постараюсь сделать отдельные короткие посты по плоходокумментированным функциям.

P. S.
Удобная фишка: если выделить действие в окне с историей действий и нажать на значок копирования внизу этого окна, то в буфер попадет джаваскрипт-код указанного действия. Удобно при написание большого скрипта, сделал что-то, что не знаешь как писать, небольшое в отдельном файле, скопировали, вставил в большой скрипт, поменял параметры — готово.
 

Ограничение на размер холста в Файрворксе

Можно изменить!

Убеждаемся, что Файрворкс не запущен.


Находим файл «Fireworks CS5 Preferences.txt» (В Виндоус Икс-Пи он лежит в папке %APPDATA%\Adobe\Fireworks CS5\en_GB).

Открываем в блокноте и ищем параметр «MaxDocSizeInPixels».
<key>MaxDocSizeInPixels</key>
<integer>6000</integer>

Задаём нужный размер в теге «integer», сохраняем файл, запускаем Файрворкс и наслаждаемся :)

Оригинал: forums.adobe.com/thread/248564

--

Для CS4 файл называется «Fireworks CS4 Preferences.txt».

UPD
http://stuffandnonsense.co.uk/blog/about/turn_on_fireworks_cs6_auto_save
http://graphicdesign.stackexchange.com/questions/9440/adobe-fireworks-cs6-maximum-image-dimension

Мысль об Индизайне

Всё-таки я считаю, что Индизайн — это рассово-тафтивски-неверная программа. Она слабо соответствует принципу интеграции всего и вся. Более менее сложные картинки надо править в Фотошопе, Иллюстраторе или еще где-то. Причем переносить в Индизайн потом их надо с умом, разделяя на части так, чтобы, если понадобится, не нужно было лезть обратно в фотошоп.

А рисование в нём это просто песня, выбор цвета доставляет особо.

Весьма противная программа, короче.

Для экранного дизайна гораздо лучше Файрворкс. По сравнению с Индизайном у него три недостатка:
— слабые стили (блин, пунктирное подчёркивание стилем не сделать),
— ограниченный размер страницы (таки десяти тысячные страницы нужны бывают частенько),
— название слишком похоже на Файрфокс, постоянно путаешься.

В остальном это очень мощная штука.

В нем, кстати, была сделана графика для всего пакета CS5


http://veerle-v2.duoh.com/blog/comments/the_new_cs5_branding/


А вот тут гигантская подборка штук, сделанных в Файрворксе: «The Power of Adobe Fireworks: What Can You Achieve With It?»

UPD
А копировать вставить в Индизайне, я даже злиться не могу, смешно прям. Копия помешается в случайное место в пределах экрана. Чтобы вставить в тоже место, как и должно быть, нужно нажать Ctrl+Shift+Alt+V.

Зато в Файрворксе ебанутый зум. Он зумит к выбранному геометрическому центу элемента. То есть ты на линии в 2000 пикселей выделил правый край, отзумился, чтобы её всю увидеть, обратно возаращаешься. а он не обратно зумит, а в середину, то есть нужную точку ты в итоге даже не видишь и нужно скролить.