Капча при помощи расширения класса Sprite и библиотек vk.gui

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!
Ответить
Nick Lisogor
FL Team
FL Team
Сообщения: 119
Зарегистрирован: 12 дек 2010, 14:08

Капча при помощи расширения класса Sprite и библиотек vk.gui

Сообщение Nick Lisogor »

Капча при помощи расширения класса Sprite и библиотеки vk.gui

В этом уроке вы узнаете, как создать капчу при помощи класса Sprite, Array и TextField, также нам потребуется библиотека vk.gui.

1. Создаём Новый документ Flash File (ActionScript 3.0)
Сохраняем *.fla файл.

2. Скачиваем библиотеку vk.gui:
http://vkontakte.ru/source/vk_gui-0.5.zip
Папку ./src/vk из архива перемещаем в папку с сохраненным fla.

3. Создадим класс самой капчи и назовем его Captcha.as с таким кодом (код прокомментирован):

Код: Выделить всё

////@Автор: Nick Lisogor , специально для Flapps.Ru//package{    import flash.display.*;    import flash.events.*;    import flash.text.*;        import vk.gui.*;        public class Captcha extends Sprite    {        private var captcha:Sprite;        private var captcha_field:TextField;        private var captcha_input:InputField;        private var symbols:Array;        private var captcha_text:String;                private var type:Array;        private var symbols_count:int;        private var font_style:String;        private var font_color:uint;        private var font_size:int;        private var font_bold:Boolean;        private var captcha_color:uint;        private var captcha_border_color:uint;        private var captcha_width:int;        private var captcha_height:int;                public function Captcha(x_:int, y_:int, width_:int, height_:int, font_style_:String, font_color_:uint, font_size_:int, font_bold_:Boolean, captcha_color_:uint, captcha_border_color_:uint, symbols_count_:int, type_:Array):void        {            this.x = x_;            this.y = y_;            captcha_width = width_;            captcha_height = height_;            font_style = font_style_;            font_color = font_color_;            font_size = font_size_;            font_bold = font_bold_;            captcha_color = captcha_color_;            captcha_border_color = captcha_border_color_;            symbols_count = symbols_count_;            type = type_;            addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);        }                private function onAddedToStage(event:Event):void        {            removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);                        //Создали массив            symbols=new Array();                        //Сделали проверку на тип, указанный при создании экземпляра класса            for(var i in type)            {                if(type[i] == "A-Z")                    symbols.push("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z");                else if(type[i] == "a-z")                    symbols.push("a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z");                else if(type[i] == "0-9")                    symbols.push("0","1","2","3","4","5","6","7","8","9");                else                    trace("Ошибка, группы симболов указаны не верно");            }                        //Создали капчу            captcha = new Sprite();                        //При помощи библиотеки vk.gui создали квадрат в ней            vk.gui.Utils.rect(captcha,0,0,captcha_width,captcha_height,captcha_color,captcha_border_color,0.9);                        //Добавили ее на сцену            addChild(captcha);                        //Добавили в нее код            addSymbols();                        //Создали экземпляр класса InputField            captcha_input = new InputField(0,captcha_height,captcha_width,1,true,true);            captcha_input.addEventListener(InputField.EVENT_MODIFIED, inputListener);             //captcha_input.value = "введите код";                        //Добавили его на сцену            addChild(captcha_input);        }                private function addSymbols():void        {            //Чистим текст капчи            captcha_text = "";                        //При помощи цикла, добавляем к переменной captcha_text рандомный элемент из массива symbols            for(var i:int = 0; i < symbols_count; i ++)                captcha_text += symbols[Math.floor(Math.random() * symbols.length)];                        //Создаем экземпляр класса TextField и задаем ему нужные параметры            captcha_field = new TextField();            captcha_field.multiline = false;            captcha_field.selectable = false;            captcha_field.defaultTextFormat = new TextFormat(font_style, font_size, font_color, font_bold);            captcha_field.text = captcha_text;            captcha_field.width = captcha_field.textWidth + font_size/3;            captcha_field.height = captcha_field.textHeight + font_size/4;            captcha_field.x = (captcha.width - captcha_field.width) / 2;            captcha_field.y = (captcha.height - captcha_field.height) / 2;                        //Добавляем в капчу этот TextField            captcha.addChild(captcha_field);                        //Включаем слушатель мыши            captcha.addEventListener(MouseEvent.CLICK, clickHandler);        }                //Слушатель мыши        private function clickHandler(event:MouseEvent):void        {            captchaRefresh();        }                //Обновление капчи        private function captchaRefresh():void        {            //Выключаем слушатель мыши            captcha.removeEventListener(MouseEvent.CLICK, clickHandler);                        //Удаляем из капчи TextField            captcha.removeChild(captcha_field);                        //Добавляем в неё новый TextField            addSymbols();                        //Очищаем inputField            captcha_input.value = "";        }                //Слушатель поля ввода текста        private function inputListener(event:Event):void        {            checkCaptcha(event.target.value);        }                //Функция проверки капчи: принимает введенный текст в формате String и возвращает true,         //если текст совпадает с текстом капчи,иначе возвращает false        private function checkCaptcha(text_:String):Boolean        {            if(text_ == captcha_text)            {                MovieClip(parent).addLog("Код верный, вы ввели: "+text_);                return true;            }            else            {                MovieClip(parent).addLog("Код не верный, вы ввели: "+text_);                captchaRefresh();                return false;            }        }    }}
4. Создадим новый класс и назовем его Test.as , вписав туда такой код:

Код: Выделить всё

package{    import flash.display.MovieClip;    import flash.text.TextField;        public class Test extends MovieClip    {                private var captcha:Captcha;        private var text_field:TextField;        private var log:Array;                public function Test():void        {            captcha = new Captcha(10,20,100,30,"Sans-serif",0x000000,16,true,0xF7F7F7,0xCCCCCC,8,["A-Z","a-z","0-9"]);            addChild(captcha);                        log = new Array("Лог действий");                        text_field = new TextField();            text_field.x = 150;            text_field.y = 0;            text_field.width = 300;            text_field.text = log.toString();            addChild(text_field);        }                public function addLog(_txt:String):void        {            if(log.length > 4)            {                log.shift();            }            log.push("\n"+_txt);            text_field.text = log.toString();        }    }}
Подключаем Test.as к *.fla файлу.

В этом коде я вызываю капчу таким образом:

Код: Выделить всё

captcha = new Captcha(x_капчи, y_капчи, ширина_капчи, высота_капчи, стиль_шрифта, цвет_шрифта, размер_шрифта, жирность_текста, цвет_капчи, цвет_границ_капчи, количество_симболов_в_капче, тип_капчи);addChild(captcha);
Тип капчи имеет 3 варианта ["A-Z"] - Все Большие Латинские буквы, ["a-z"] - все маленькие Латинские буквы, ["0-9"] - все цифры, либо же несколько вариантов сразу, к примеру ["a-z","0-9"]

4. Компилируем приложение и проверяем его (должно получиться вот так):

Изображение

Примечания:
- При клике на картинку, она обновляется
- InputField реагирует на клавишу Enter
- При проверки текста в InputField, капча вызывает функцию addLog(_txt:String) в главном MovieClip, который указан в *.fla файле. Здесь _txt - введенный в InputField текст в формате String.

Автор: Nick Lisogor, копи паст запрещен.
Ответить