Прототипирование. Практическое руководство.

Шаг 4: добавляем к значку приложения перебор и интерактивность.

1. На панели Pages выберите домашнюю страницу.

2. Выберите панель States.

3. Дважды нажмите State 1 и введите текст MouseOut. Состояниям тоже лучше давать осмысленные имена.

4. Добавьте новое состояние, кликнув правой кнопкой на состоянии MouseOut и выбрав из меню (рис. 9.10) команду Duplicate State.

5. Дважды нажмите на новое состояние и введите текст MouseOver.

6. Выберите состояние MouseOver и нарисуйте вокруг значка Twitterific прямоугольник со скругленными углами. Заполните его белым цветом с прозрачностью 70%.

7. Еще раз выберите состояние MouseOut на панели States.

8. Выберите инструмент Slice из раздела Web палитры Tools (см. рис. 9.11). Нарисуйте прямоугольник над значком Twitterific. Должно получиться что-то подобное изображенному на рис. 9.12.

9. Выберите окошко на экране и кликните на нем правой кнопкой. Выберите команду Add Swap Image Behavior из меню (рис. 9.13).

10. В диалоговом окне в параметре State no: выберите MouseOver (2) и нажмите OK. Это создаст эффект, срабатывающий при наведении курсора на значок.

11. Еще раз выберите слой и нажмите на список Link на панели Properties. Из меню Options выберите TwitterStream.htm. Когда вы будете экспортировать прототип, появится ссылка от значка Twitter к списку сообщений на странице прототипа TwitterStream.

12. В режиме предварительного просмотра проверьте работу эффекта наведения курсора, выбрав кнопку Preview в левом верхнем углу окна документа. Проведите курсором по значку Twitter. Вы должны увидеть эффект прозрачности.

13. Нажмите в верхнем левом углу окна документа Original, чтобы вернуться в режим редактирования.

Прототипирование. Практическое руководство

РИС. 9.10. Команда Duplicate State на панели States

Прототипирование. Практическое руководство

РИС. 9.11. Инструменты Web на палитре Tools

Прототипирование. Практическое руководство

РИС. 9.12. Домашний экран со слоем над значком приложения Twitterific

Прототипирование. Практическое руководство

РИС. 9.13. Команда Add Swap Image Behavior в контекстном меню