Опубликован: 07.11.2006 | Уровень: специалист | Доступ: платный
Лекция 4:

Рисование API

Сохранение данных рисунка

На примере рассмотренного приложения становится ясно, что сохранение рисунков в приложении заключается просто в сохранении массива данных в общем объекте.

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

Приведем структуру того, что мы хотим сделать:

Главная страница:

Возможности:

Панель, содержащая список рисунков из sharedObject с полосой прокрутки.

Опции:

Выбрать имеющийся рисунок - перейти к странице перерисовки.

Создать новый рисунок - перейти к странице создания.

Страница перерисовки:

Возможности:

Перерисовка прежнего рисунка.

Опции:

Вернуться на главную страницу.

Страница создания:

Возможности:

Рисование мышью.

Опции:

Сохранить текущий рисунок - сохранить рисунок в общем объекте - перейти на главную страницу.

Вернуться - возврат на главную страницу.

У нас есть три основных задачи: меню, рисование и перерисовка. Мы можем предположить, какие функции нам потребуются для создания приложения:

Таблица 3.2.
Имя функции Цель
init Установка некоторых основных управляющих элементов кнопок и вызов drawPanel.
drawPanel Получение данных из объекта sharedObject и отключение кнопки возврата и сохранения. Вызов listDrawings и initScrollers.
listDrawings Добавление текстового поля в меню.
initScrollers Установка полос прокрутки для текстового поля.
initDraw Выключение меню, включение кнопки возврата и сохранения и установка управляющих элементов событий onMouseDown и onMouseUp для реализации рисования. Настройка lineStyle и создание временного массива для хранения точек.
drawOn Начало рисования линии, установка onEnterFrame и addPoint.
addPoint Рисование линии и добавление текущей точки в массив.
drawOff Выключение addPoint.
save Добавление текущего массива точек в sharedObject и вызов backToMain.
backToMain Удаление всех событий кадра и мыши на _root. Вызов drawPanel.
redraw Отключение меню и включение кнопки возврата. Установка onEnterFrame.
drawNextPoint Рисование следующей точки в текущем рисунке.

Полнофункциональное приложение рисования

Перейдем к работе над полнофункциональным приложением рисования и сохранения рисунков.

  1. Прежде всего займемся основой будущего приложения. Создайте два символа кнопок, которые будут использоваться для сохранения наших рисунков и для возврата к временно сохраненным рисункам. Вы сами теперь можете создать кнопки. На наших кнопках мы просто написали "save" и "return", причем настроили текстовое поле на использование системных шрифтов. Эти кнопки расположены в правом нижнем углу главного рабочего места.

  2. Инстанс кнопки Save назовите saverButton с помощью Property inspector, а инстанс кнопки Return - backButton.
  3. Создайте символ фильма и назовите его listingsPanel. В фильме создайте новый слой с именем textfield и добавьте динамическое текстовое поле на этот слой. С помощью Property inspector назовите текстовое поле lista.

  4. Создайте новый слой с именем background и нарисуйте прямоугольник (светло-серого цвета, #F5F5F5) значительно больший динамического текстового поля, которое вы только что создали. Под ним я нарисовал другой прямоугольник, который намного темнее первого (#E8E8E8), чтобы выделить его. Затем перетащите слой background под слой textfield.

  5. Все еще находясь в фильме listingsPanel, создайте слой с именем new под слоем textField. Внутри слоя new создайте символ кнопки и присвойте ему имя инстанса newButton с помощью Property inspector. Как видите, мы просто добавили необходимый текст в нашу кнопку и поместили его внизу динамического текстового поля.

  6. Создайте два новых слоя с именами upscroll и downscroll. Создайте символ кнопок прокрутки вверх и вниз. Я просто добавил текстовые поля с символами "больше" и "меньше". Разместите символ прокрутки вверх на слое upscroll и с помощью Property inspector дайте ему имя инстанса upScroll. Расположите второй символ кнопки на слое downscroll и назовите его инстанс именем downScroll. Здесь вполне понятно, какие действия выполняют эти кнопки. Мы расположили наши кнопки под текстовым полем слева от кнопки new.

    Можно было бы использовать для этого программный компонент прокрутки, но компоненты мы будем рассматривать в следующей лекции и пока не будем забегать вперед. Создание фильма почти завершено, осталось только добавить в него заголовок. Мы создали новый слой с именем title и добавили статическое текстовое поле со словами "List of drawings".


Игорь Хан
Игорь Хан

у меня аналогичная ситуация. Однако, если взять пример из приложения (ball_motion_04_click for trial.fla) то след остается. при этом заметил, что в моем проекте в поле "One item in library" виден кружок, в то время как в приложенном примере такого кружка нет.

Вопрос знатокам, что не так?

Александр Коргапольцев
Александр Коргапольцев

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

Тамара Ионова
Тамара Ионова
Россия, Нижний Новгород, НГПУ, 2009
Магомед Алисултанов
Магомед Алисултанов
Россия, Волгоград, лицей 2