FLASH INTERACTIONS INTERFACE DESCRIPTION

Interface will include two parts of data: input and output variables.


Input parameters will be accessed with SetVariable() method and will be immediately passed on each user action affecting on resulting image.
Input parameters are:

  1. Label area size, which include LABEL_WIDTH and LABEL_HEIGHT variables;
  2. Minimal font size depending on size selected: FONT_MIN_SIZE;
  3. Minimal size of line block depending on size selected: LINE_MIN_WIDTH and LINE_MIN_HEIGHT;
  4. Maximal size of image block depending on size selected: IMAGE_MAX_WIDTH and IMAGE_MAX_HEIGHT;
  5. Line data will consist of four parameters, describing text block: LINE_TEXT, LINE_FONT, LINE_BOLD, LINE_ITALIC;
  6. Label image colour for both text and image: LABEL_COLOUR;
  7. Border presence for label: LABEL_BORDER;
  8. Name of image, selected from motifs or uploaded by user: IMAGE_INPUT_NAME;
  9. Name for image that is a result of user actions, saved by flash editor: IMAGE_OUTPUT_NAME;
  10. Path to image that is a result of user actions, saved by flash editor: IMAGE_OUTPUT_PATH;


Generally we have an array of lines with a number of elements from 0 to LINE_MAX_FOR_SIZE (maximal number of lines for size selected).


Input parameters will changes on such user actions as label size selection, text entering, font and font style selection, color selection, image selection (or uploading) and label border enabling.


Output parameters will be accessed with GetVariable() method as processing logic required.
Output parameters are:

  1. Flag indicating that one more line can be added on Label area yet: LINE_CAN_BE_ADDED;
  2. <del> Flag indicating that one more character can be added into a line text: CHAR_CAN_BE_ADDED;</del>
  3. Flag indicating that image can be added into label design: IMAGE_CAN_BE_ADDED;


LINE_CAN_BE_ADDED parameter will be read right before new line addition. It will depends of free space on Label area, available for new line block addition;
CHAR_CAN_BE_ADDED parameter will be read after each character typing into line input field. It will depends of size of line block on Label area.
IMAGE_CAN_BE_ADDED parameter will be read right before image addition. It will depends of free space on Label area, available for image block addition;


Templates are placed in /tpl directory of site root.

  1. layout.tpl is a main layout page for other page content blocks insertion.
  2. main_nl.tpl is a content block for a main page on norwegian language.
  3. txt_line_nl.tpl is a single text line block to be added into design area.
  4. design_area_nl.tpl is a separate design area block used to add new label design.
  5. cart_item_nl.tpl is a separate shopping cart item (QC) block to be added with new label design.
  6. category_link_nl.tpl is a block for single category tab forming.
  7. main_nl_add_head.tpl is an additional header data (js includes, flash object registering, flash object styling);
  8. motiv_link_nl.tpl is a block for single icon in icon grid (motifs selector);
  9. motiv_selected_nl.tpl is an image block, highlighting selected image in grid;

Организация взаимодействия js ↔ flash
As I know, Flash has no native support for complex data types like array, so may be lines array should be presented as a formatted string with dividers in order to two dimentional array will be passed?

Можно прямо из джавового скрипта вызывать функцию внутри swf-ки, тогда можно просто этой функции все параметры (одним мноомерным массивом) передавать когда пользователь что-то изменил, пример: http://navnestempel.almeydahost.com/flash/index.html

Тогда предлагаю сделать так:
Все параметры, которые будут передаваться флэш-редактору (ФР) разделить на две части:

Параметры дизайна организуем следующим образом:

Для передачи используем массив design_params.

design_params[0] будет содержать имена переменных, а именно: label_width, label_height, font_min_size, line_min_width, line_min_heigth, image_max_width, image_max_height, label_color, label_border, selected_image. Например: design_params[0][label_width, label_height, font_min_size, line_min_width, …].

design_params[section_no] будет содержать значения переменных для секции дизайна section_no в соответствии с их индексацией в design_params[0]. Т.е. индекс значения элемента в design_params[section_no] будет строго соответствовать индексу имени элемента в design_params[0]. Например: design_params[section_no][60, 10, 8, 30, …] - значения элементов в соответствии с их именами в приведенном выше примере для design_params[0].

Собственно передача в js выглядит так: obj.sendToActionscript(design_params[0],design_params[parseInt(n)]);
Сколько она раз вызывается из ДжаваСкрипта? (сам флеш мне говорит что примерно по 7 раз заодно изменение при изменении масштаба)
Просто мне надо хранить предыдущие значения ширины-высоты для пропорционального изменения координат картинок/текста.
Она вызывается для каждого из параметров label_width, label_height, font_min_size, line_min_width, line_min_heigth, image_max_width, image_max_height, которые обновляются при смене размеров. Если тебя это не устраивает - могу попробовать переписать эту часть.
Хорошо, или можно просто мне отдавать прежний размер лейбла - как удобнее будет.
Переписал, теперь на смену размера один вызов. Прежний размер лейбла не храню…

Параметры строк организуем так:

Для передачи данных используем массив text_lines_params.

text_lines_params[section_no][line_no] будет содержать значения переменных текстовой строки line_no для секции дизайна section_no. При этом считаем, что:


Например: text_lines_params[section_no][line_no][qwerty, Arial, false, true].

Собственно передача в js выглядит так: obj.sendToActionscript(text_lines_params[parseInt(n)][parseInt(value)]); Т.е. в обоих случаях передается только последняя часть - одномерный массив.

** Проверка возможности добавления блоков текста и изображения **

Мне нужно от тебя имена переменных, в которых ты будешь выставлять признаки LINE_CAN_BE_ADDED и IMAGE_CAN_BE_ADDED и имя метода, с помощью которого эти значения можно будет прочитать (GetVariable(…)?). Признак CHAR_CAN_BE_ADDED во флэш-редакторе можно упразднить, поскольку это решено ресайзом текста внутри блока.

** Получение сгенерированного изображения **

В design_params добавляем 2 параметра:

т.е. требуется сохранить снимок дизайна как IMAGE_OUTPUT_PATH/IMAGE_OUTPUT_NAME.jpg

В design_params[0] добавлены имена переменных 'image_output_path' и 'image_output_name', в design_params[section_no] - их значения. Скрипт jpg_encoder_download.php, необходимый для получения данных из редактора и сохранения файла положил в папку flash/. Т.е. можно пробовать сохранять изображение лейбла.

В design_params[0] добавлено имя переменной 'image_script_name', в design_params[section_no] - ее значение. Содержит имя скрипта (например, jpg_encoder_download.php), получающего данные от флэш-редактора для их сохранения в виде конечного изображения лейбла.


Проблемы с HTML

  1. Диалог для выбора иконок (motiv selector) - нужно изображение images/selected.png корректно разместить под выбранной иконкой фоном так же, как на merkalt.no для обозначения выбранной иконки из таблицы. Сейчас оно после выбора располагается не под выбранной иконкой, а в следующем ряду иконок.

Замечания по работе редактора

может быть, какие-то вещи, например ресайз, еще в разработке. тогда просто рассматривай это как напоминание при работе

Общее:

Селектор размера:

Строки:

Селектор границы не работает.

Изображения:

//
мне кажется надо ввести вызов функции из флеша уведомляющей о невозможности добавить блок (текст или картинку тк пользователь может существующие так растянуть что остальное попросту не влезет)
пример: добавление строки при отсутствии свободного места
//

02.06.2009


1. селектор шрифта для строки не работают.
3. Ввод строки вызывает (часто, но не всегда) следующую ошибку:

4. Смена размера лейбла вызывает ошибки. Во-первых, не удаляются лишние строки. Возникает все то же uncaught exeption и нормальное функционирование JS прерывается (менял с 40х40 на 60х10: обрати внимание на “Linje 3” - она очистилась джаваскриптом,но при передаче параметров строки во флеш что-то сломалось):

Во-вторых, не работает ресайз и перемещение объектов при смене размера:
сделали дизайн для 40х40…

… изменили размер на 60х10…

5. Удаление изображения из дизайна не работает - остается пустой блок.
6. Проблема с выбором места для новой строки (даже если есть свободное место) осталась. Первая строка вводится и ресайзится, вторая все равно лезет между левой границей и первой строкой…

7. Дизайн после ввода изображения, если для него нет достаточного места выглядит примерно так:

8. Текст, введенный в строку в русском регистре, в объектах не отображается. А будет ли он отображаться, если будет вводиться голландский текст?
9. Кнопка Slett stempel для одного (или первого) дизайна должна вызывать очистку области дизайна. Объекты после ее нажатия остаются.
// для нее можно вызов влешевой функции написать? clear_design //
если тебе так удобнее - можешь сделать
ок


нашел глюк (или это так задумано?):
если создать текстовые поля 1,2,3
потом 2 удалить чтоб было 1 и 3, и добавить новый то будет 1, 3, 3
“1, 3, 3” - это что имеется ввиду?


по исправлениям: -


в image_output_path можно ли записать имя скрипта которому я отдаю файл?
может быть стоит для этого завести отдельную переменную?
хорошо, что-нибуть типа script_name
добавлено: image_script_name //
в image_output_name мне расширение jpg или jpeg делать? (если это имеет значение конечно)
//jpg
сейчас флеш правильно составляет путь?
с путем надо так: jpg_encoder_download.php?name=/home/.reku/andreas_ho/navnestempel.almeydahost.com/2009060807482276.jpg //
теперь вроде правильно (flash/ в начале тк пхп относительно самой страницы где находится модуль флеша находится в этой папке)
//ты данные-то постишь? чет не работает так, похоже. может, flash/ попробовать убрать?
счас сделаю для теста переход по ссылке которую генерирует флеш flash/ убрал
снапшоты теперь сохраняются, переход по ссылке можно убрать. работает вроде бы.
убрал, все еще работае надеюсь?
работает, но снапшот не полный: http://navnestempel.almeydahost.com/output/2009060809220936.jpg //
сейчас нормальный размер передает?
//да, вроде бы полный размер попадает теперь


13.06.2009
Вызов функции obj.sendToActionscript(design_params[0],design_params[parseInt(n)]); вызывает какой-то сбой - после sendToActionscript выполнение js прерывается, и дальнейшая работа джаваскрипта становится неустойчивой. Если этот вызов отключить - js работает корректно. Нужно бы выяснить, из-за чего это происходит - может быть, дело в передаваемых параметрах или в чем-то еще?
исправил. у меня опечатка в вызове была (извиняюсь)
когда флеш не может разместить любой элемент (кратинка/текст - неважно), я предлагаю пользователю выводить alert'ом сообщение об этом, например: “there is no enough free space to place element” и сам элемент не будет добавляться на сцену. Для вызова мне нужно только имя JS функции (если будем реализовывать таким образом)

Посмотри выше:
** Проверка возможности добавления блоков текста и изображения **

Т.е. мне нужен признак, который я буду читать перед добавлением объектов. И сам буду выводить сообщение, если добавление невозможно. Это реализуемо?

// для проверки оставшегося места брать максимальные размеры блоков (картинки/текста)?//

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

// и признаки делть раздельно или один?.//

если ты о признаках для объектов текста и картинки, то лучше раздельно

// и передавать параметры в функцию (так проще из флешка) с каким именем?//

видишь ли, мне нужны эти признаки ПЕРЕД добавлением строки или вставкой картинки. т.е. при нажатии юзером кнопки “добавить строку” или при выборе картинки из грида, перед тем как добавить данные в дизайн и послать тебе обновленные параметры дизайна, я сам должен решить на основании твоих признаков, можно ли это добавление/обновление сделать или нет. потому что твое сообщение о том, что места нет для добавления объектов, которое вернет флэш, мне уже ничем не поможет - у меня-то данные и ХТМЛ код на этот момент будут уже добавлены. мне-то потом их как удалять?

в чем, собственно говоря, сложность-то для тебя? в самом начале (при инициализации) и после того, как добавляешь какой-нить объект, проверяй по минимальным размерам картинок и текста, можно ли еще добавить то и другое, и если что-то добавить нельзя, выставляй соответствующую переменную. а я ее буду читать с помощью GetVar(…). или есть какие-то сложности с этим? может, я чего не понимаю?


setVariable(variable_name, variable_state) (пример: // setVriable(“LINE_CAN_BE_ADDED”, “true”)//
getVariable(variable_name), возвращает при вызове состояние переменной (пример: // getVriable(“IMAGE_CAN_BE_ADDED”)//
переменные: // LINE_CAN_BE_ADDED, IMAGE_CAN_BE_ADDED, snapshot_saved //
// ок, попробую. //
единственная трудность пока написать толковый алгоритм (для определения возможности добавления блоков)
у картинки нет минимального размера (мне точно не передается для нее такавой), я могу поставить скажем 20х20 пикселей.
да, действительно минимальные значения только для текста. значит, наверное, придется добавить и для картинок. думаю, они могут быть разные для разных размеров лейблов.


15.06.2009
1. Генерация файла изображения должна происходить не только по выходу указателя мыши из области дизайна. Пользователь может изменить цвет лейбла, опцию наличия рамки и т.д., не помещая после этого указатель мыши в область дизайна. Т.е. получается, что нужно выполнять сохранение снапшота дизайна на каждое изменение параметров дизайна.
2. Необходимо выставлять во флеше признак того, что снапшот сохранен. Этот признак (переменная) должен быть доступен для чтения/записи из джаваскрипта.
переменная snapshot_saved , мне к ней обращаться надо и если надо, то в каких условиях?
просто выставляй ее по факту сохранения снапшота в true. снимать этот признак буду уже я.
3. Некоторые операции во флеш-редакторе, например, применение свойств текстовой строки, занимают достаточно длительное время. Наверное, стоит ввести какой-то прогресс-индикатор, показывающий пользователю, что что-то происходит во время этих операций?
// сделал пока таким окошком, могу в это время LINE_CAN_BE_ADDED и IMAGE_CAN_BE_ADDED временно в false обращать если надо //
да, наверное лучше сделать так


23.06.2009
Странно, но ни одна переменная не работает как надо. Забиваю дизайн блоками полностью, не оставляя свободного места вообще, проверяю LINE_CAN_BE_ADDED или IMAGE_CAN_BE_ADDED - они всегда true, а snapshot_saved, напротив, всегда false, хотя снапшот сброшен…