Недавно натолкнулся на нашем форуме на такую причуду: каждое имя можно представить в виде компьютерной кодировки, каждой букве соответствует определённый код и чтобы высчитать ваш персональный код, нужно сложить все коды букв вашего имени. Так как коды были длинными и сложно запоминаемыми, то я решил это сделать в виде flash-ролика. Что у меня получилось, вы видите внизу этой страницы. Сегодня я опишу подробно как сделать такой же и подобные интерактивные элементы. Поняв суть, вы сможете легко сделать подобный или другой похожий сервис.
Итак, приступим. Каждой букве соответствует определённый код, например, "буква А - 000001", "буква Б - 000010" и так далее 33 буквы. Затем можно высчитать магическое число - это количество единиц во всём коде. Конечно, кому-то подобная забава покажется неправдоподобной, но именно данный пример поможет научить делать и более сложные вещи (психологические тесты, например). Прежде всего займёмся дизайном, а потом будем писать код. Прежде всего у нас должно быть 3 области. Первая - для ввода имени, вторая - с кодом всего имени, третья - с магическим числом. Как они организованы, вы видите внизу.
1. Откройте Adobe Flash. Прежде всего сделаем фон. Для фона я просто взял красивую картинку, разместил её на самом нижнем слое, выделил и сделал из неё мувиклип. Фон будет статичным, поэтому вы можете сделать его таким, каким пожелаете.
2. Теперь собственно будем делать информативную часть, которая как я уже пояснил выше, будет состоять у нас из 3-х мувиклипов, которые естественно, объединены в один. Итак, рисуем форму для ввода имени. Выглядит она так: плашка с толстой полупрозрачной линией, на неё пояснительный текст, форма для ввода имени и кнопка. После того, как всё это нарисовали у текстового поля для ввода в instance name введите name_txt. Кнопка - это мувиклип с двумя кадрами. В instance name у мувиклипа введите btn.
3. Теперь всё, что мы сделали, выделите и нажмите на F8. Получился мувиклип, в его instance name введите name_mc. Теперь зайдите в него. Далее зайдите в кнопку и сделайте в ней 2 кадра. В первом кадре будет то, что отображается без наведения на неё мыши, второй кадр - то, что будет, если навести курсор на кнопку. В первом кадре поставьте stop();.
4. Теперь подниметесь на уровень выше (теперь вы в мувиклипе с формой для заполнения имени) и введите в кадр следующий код.
5. Осталось сделать 2 остальных мувиклипа, в первом содержится магическое число, а во втором код имени. Внизу страницы вы видите как они выглядят. Статическое текстовое поле + димнамическое. В первую очередь делаем верхний блок (с магическим числом) - у динамического мувиклипа введите имя name_num, а у всего мувиклипа instance name будет magic_num. Последний блок находится внизу и содержит код имени. Instance name мувиклипа пусть будет kod_mc, а имя динамического текстового поля внутри мувиклипа kod_txt. Должна получиться такая же картина, как на скриншоте ниже.
6. Объедините все три мувиклипа в один мувиклип и назовите его в instance name main. Внутри мувиклипа сделайте анимацию, как на готовом варианте внизу или любую свою. Главное, анимация делится на 2 части: до нажатия кнопки и после. До 11 кадра и после, поэтому на 11 кадре поставьте stop();
7. Возвращаемся в главную сцену, в которой у нас располагается только фон и наш основной мувиклип main, содержащий три других мувиклипа, которые мы делали всю первую часть урока. В кадре пишем следующий код.
8. Поясню, что же мы сделали вышенаписанным кодом. Прежде всего, создали 2 массива: первый массив с буквами (от А до Я), заметьте, что все буквы все большие - это важно. Второй массив - с кодами, которые соответствуют каждой букве. Далее создаём функцию kod_producer(). Эта функция вызывается, когда мы нажимаем на кнопку при введении имени. Присваиваем переменной writen_name значение поля ввода для имени. Переменная right_name делает все буквы, которые мы ввели в поле, заглавными. Это необходимо, так как весь массив у нас состоит из заглавных букв. После этого создаются циклы, которые отслеживают буквы в введённом имени и каждой букве присваивают код. Весь код находится в переменной name_cod. Ещё один цикл позволяет посчитать магическое число. Скрипт анализирует полученный код на наличие единиц и считает их.
9. В общем, теперь можно нажимать на ctrl+Enter и проверять то, что получилось. Должно быть что-то вроде того, что вы видите ниже.
ВНИМАНИЕ: Вы можете скачать исходник к данному уроку и самостоятельно разобраться что, куда и сколько раз. Исходники всех уроков выложены в Школе Флэша, которая располагается на портале RusForumz.com. Условия доступа в Школу Флэша
