Имя в компьютерной кодировке (интерактив)
Автор: Nikitar
Сайт: Rusforumz.com
Недавно натолкнулся на нашем форуме на такую причуду: каждое имя можно представить в виде компьютерной кодировки, каждой букве соответствует определённый код и чтобы высчитать ваш персональный код, нужно сложить все коды букв вашего имени. Так как коды были длинными и сложно запоминаемыми, то я решил это сделать в виде 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. Теперь подниметесь на уровень выше (теперь вы в мувиклипе с формой для заполнения имени) и введите в кадр следующий код.
btn.onRelease=function(){
if(name_txt.text.length>0){
_root.kod_producer();
_parent.gotoAndPlay(12)
}
}
btn.onRollOver=function(){
this.gotoAndStop(2);
}
btn.onRollOut=function(){
this.gotoAndStop(1);
}
5. Осталось сделать 2 остальных мувиклипа, в первом содержится магическое число, а во втором код имени. Внизу страницы вы видите как они выглядят. Статическое текстовое поле + димнамическое. В первую очередь делаем верхний блок (с магическим числом) - у динамического мувиклипа введите имя name_num, а у всего мувиклипа instance name будет magic_num. Последний блок находится внизу и содержит код имени. Instance name мувиклипа пусть будет kod_mc, а имя динамического текстового поля внутри мувиклипа kod_txt. Должна получиться такая же картина, как на скриншоте ниже.
6. Объедините все три мувиклипа в один мувиклип и назовите его в instance name main. Внутри мувиклипа сделайте анимацию, как на готовом варианте внизу или любую свою. Главное, анимация делится на 2 части: до нажатия кнопки и после. До 11 кадра и после, поэтому на 11 кадре поставьте stop();
7. Возвращаемся в главную сцену, в которой у нас располагается только фон и наш основной мувиклип main, содержащий три других мувиклипа, которые мы делали всю первую часть урока. В кадре пишем следующий код.
al=new Array();
al[0]="А";
al[1]="Б";
al[2]="В";
al[3]="Г";
al[4]="Д";
al[5]="Е";
al[6]="Ё";
al[7]="Ж";
al[8]="З";
al[9]="И";
al[10]="Й";
al[11]="К";
al[12]="Л";
al[13]="М";
al[14]="Н";
al[15]="О";
al[16]="П";
al[17]="Р";
al[18]="С";
al[19]="Т";
al[20]="У";
al[21]="Ф";
al[22]="Х";
al[23]="Ц";
al[24]="Ч";
al[25]="Ш";
al[26]="Щ";
al[27]="Ь";
al[28]="Ы"
al[29]="Ъ"
al[30]="Э"
al[31]="Ю"
al[32]="Я"
kod=new Array();
kod[0]="000001";
kod[1]="000011";
kod[2]="000111";
kod[3]="001111";
kod[4]="011111";
kod[5]="111111";
kod[6]="000101";
kod[7]="001101";
kod[8]="011101";
kod[9]="111101";
kod[10]="001001";
kod[11]="011001";
kod[12]="111001";
kod[13]="010001";
kod[14]="110001";
kod[15]="000000";
kod[16]="100001";
kod[17]="100010";
kod[18]="100110";
kod[19]="101110";
kod[20]="111110";
kod[21]="101010";
kod[22]="010101";
kod[23]="110011";
kod[24]="010101";
kod[25]="110111";
kod[26]="111011";
kod[27]="010010";
kod[28]="100000";
kod[29]="010000";
kod[30]="001000";
kod[31]="000100";
kod[32]="000010";
function kod_producer(){
var writen_name:String=main.name_mc.name_txt.text;
right_name=writen_name.toUpperCase();
name_cod=""
for(j=0; j<=right_name.length; j++){
for(i=0; i<=al.length-1; i++){
if(right_name.charAt(j)==al[i]){
name_cod+=kod[i];
}
}
}
main.kod_mc.kod_txt.text=name_cod;
magic_number=0
for(i=0; i<=name_cod.length-1; i++){
if(name_cod.charAt(i)=="1"){
magic_number++
}
}
main.magic_num.name_num.text=magic_number
}
8. Поясню, что же мы сделали вышенаписанным кодом. Прежде всего, создали 2 массива: первый массив с буквами (от А до Я), заметьте, что все буквы все большие - это важно. Второй массив - с кодами, которые соответствуют каждой букве. Далее создаём функцию kod_producer(). Эта функция вызывается, когда мы нажимаем на кнопку при введении имени. Присваиваем переменной writen_name значение поля ввода для имени. Переменная right_name делает все буквы, которые мы ввели в поле, заглавными. Это необходимо, так как весь массив у нас состоит из заглавных букв. После этого создаются циклы, которые отслеживают буквы в введённом имени и каждой букве присваивают код. Весь код находится в переменной name_cod. Ещё один цикл позволяет посчитать магическое число. Скрипт анализирует полученный код на наличие единиц и считает их.
9. В общем, теперь можно нажимать на ctrl+Enter и проверять то, что получилось. Должно быть что-то вроде того, что вы видите ниже.
ВНИМАНИЕ: Вы можете скачать исходник к данному уроку и самостоятельно разобраться что, куда и сколько раз. Исходники всех уроков выложены в Школе Флэша, которая располагается на портале RusForumz.com. Условия доступа в Школу Флэша
