Простое приложение:редактор аватара пользователя Вк.

Только готовые уроки по использованию ВКонтакте API. Flash + PHP + API. НЕ IFrame!

Простое приложение:редактор аватара пользователя Вк.

Сообщение Foxmen » 29 авг 2012, 20:16

Редактор фотографии пользователя
ApiConnection,AS3.

Этот урок является продолжением к моему первому уроку(topic3587.html)
Приложение загружает профильную фотографию пользователя из контакта и позволяет поставить на нее обычную картинку, затем сохраняет результат в профиль пользователя.

Первый шаг
Создайте папку с названием changephoto.
Теперь нужно создать .as фаил,назвать его Main.as и сохранить в папке changephoto.
Прокомментированный код ниже,поместите его в Main.as
  1.  
  2. package
  3. {
  4.     import flash.display.*;
  5.     import flash.events.*;
  6.     import flash.utils.ByteArray;
  7.     import flash.net.URLRequest;
  8.     import flash.net.URLRequestHeader;
  9.     import flash.net.URLRequestMethod;
  10.     import flash.net.URLLoader;
  11.     import flash.system.LoaderContext
  12.     import flash.system.ApplicationDomain
  13.     import vk.api.serialization.json.JSON;
  14.     import vk.api.MD5;
  15.     import vk.APIConnection;
  16.     import vk.events.*;
  17.     import vk.ui.*;
  18.     import vk.PNGEncoder;
  19.     import vk.MultipartURLLoader;
  20.     import vk.MultipartURLLoaderEvent;
  21.     import vk.api.serialization.json.JSON;
  22.     //папку vk можно найти в исходнике.
  23.  
  24.     public class Main extends Sprite
  25.     {
  26.  
  27.         public var uploadphoto:VKButton; //обычная кнопка
  28.         public var loader:Loader = new Loader();
  29.         public var urlforpost:String;//Адрес, на который будем отправлять фотографию, чтобы загрузить в профиль
  30.         public var urlofphoto:String;//адрес аватара
  31.         public var api_id:Number;
  32.         public var viewer_id:Number;
  33.         public var sid:String;
  34.         public var secret:String;
  35.         public var changephotobtn:VKButton; //обычная кнопка
  36.         public var profilephoto:Bitmap; //фотография пользователя
  37.         public var brr:ByteArray;
  38.         //получаем flashvars
  39.         public var flashVars:Object = stage.loaderInfo.parameters as Object;
  40.         //инициализация
  41.         public var VK:APIConnection = new APIConnection(flashVars);
  42.  
  43.         public function Main()
  44.         {
  45.             //переменные приложения
  46.             api_id = flashVars['api_id'];
  47.             viewer_id = flashVars['viewer_id'];
  48.             sid = flashVars['sid'];
  49.             secret = flashVars['secret'];
  50.             //получаем адрес, на который будем отправлять картинку
  51.             VK.api('photos.getProfileUploadServer', {}, geturl, onError);
  52.  
  53.         }
  54.         private function geturl(data:Object):void
  55.         {
  56.             urlforpost = data.upload_url;
  57.             //получаем фотографию пользователя с профиля
  58.             VK.api('getProfiles', {uids:viewer_id,fields:'photo_big'}, geturlofprofilephoto, onError);
  59.  
  60.         }
  61.  
  62.         private function geturlofprofilephoto(data:Object):void
  63.         {
  64.            
  65.  
  66.             urlofphoto = data[0]['photo_big'];
  67.             //загружаем фотографию
  68.             var loaderContext:LoaderContext = new LoaderContext();
  69.             loaderContext.checkPolicyFile = true
  70.             loader.load(new URLRequest(urlofphoto),loaderContext);
  71.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE,dobtn);
  72.  
  73.         }
  74.         function dobtn(e:Event):void
  75.         {
  76.             //помещаем фотографию на сцену, используя BitMapData.
  77.              var bmp:Bitmap = loader.content as Bitmap;
  78.              profilephoto = new Bitmap(bmp.bitmapData);
  79.              addChild(profilephoto);
  80.              addChild(img);//небольшой костыль, просто могут возникнуть проблемы с "наложением" картинок друг на друга..
  81.              //позволяем перетаскивать картинку на профильную фотографию..
  82.              img.addEventListener(MouseEvent.MOUSE_DOWN, sdrag);
  83.              function sdrag(e:MouseEvent):void
  84.             {
  85.                 img.startDrag();
  86.             }
  87.             img.addEventListener(MouseEvent.MOUSE_UP, stdrag);
  88.             function stdrag(e:MouseEvent):void
  89.             {
  90.                 img.stopDrag();
  91.             }
  92.  
  93.  
  94.  
  95.            
  96.  
  97.             changephotobtn = new VKButton("Изменить аватар"); // при нажатии на эту кнопку, фотография сохранится в профиль.
  98.             changephotobtn.x = 400;
  99.             addChild(changephotobtn);
  100.             //сохраняем
  101.             changephotobtn.addEventListener(MouseEvent.CLICK,save);
  102.  
  103.         }
  104.  
  105.         function save(e:MouseEvent):void
  106.         {
  107.             var raw:BitmapData = new BitmapData(loader.width,loader.height);//"фотографируем" область где находится аватар, чтобы понять как расположена картинка
  108.             raw.draw(stage);
  109.             brr = PNGEncoder.encode(raw);
  110.             changephoto(urlforpost,brr);
  111.         }
  112.  
  113.         public function changephoto(Url:String,brr:ByteArray):void
  114.         {
  115.             var mll:MultipartURLLoader = new MultipartURLLoader();
  116.             mll.addFile(brr, "file.jpg", "photo", 'image/jpg');
  117.             mll.load(Url);
  118.             mll.addEventListener(Event.COMPLETE, loadComplete);
  119.  
  120.  
  121.  
  122.         }
  123.         function loadComplete(e:Event):void
  124.         {
  125.             var loader:URLLoader = MultipartURLLoader(e.currentTarget).loader;
  126.             var response = JSON.decode(loader.data);
  127.             consol.text = response.photo;
  128.             VK.api('photos.saveProfilePhoto', {server:response.server,photo:response.photo,hash:response.hash}, savephoto, onError);
  129.  
  130.         }
  131.  
  132.         private function savephoto(data:Object):void
  133.         {
  134.             trace("OK");
  135.         }
  136.         private function onError(data:Object):void
  137.         {
  138.             consol.text = data.error;
  139.         }
  140.     }
  141.  
  142. }
  143.  

Код не совсем "чистый", есть ошибки по оформлению и некоторым приемам, но прошу не судить строго, он работает, для понятия общих принципов вполне подходит.

Второй шаг
Теперь нужно создать .fla фаил назвать redaktor.fla и сохранить в папке changephoto.
В этом файле на сцену поместить следующие объекты:динамическое текстовое поле и назвать его consol и любую картинку, которую пользователи будут ставить на аватар и назвать ее img.
В папку change photo, поместить папку vk, которую можно найти в исходнике.
Все, компилируем и заливаем в Контакт.

Настройки приложения: включено и видно всем, без использования контейнера.
Само приложение можно увидеть здесь: http://vk.com/app3102056
Исходник: http://webfile.ru/6097041


p.s помогите разработать шахматный движок: topic5644.html
Foxmen

 
Автор темы
Сообщения: 80
Зарегистрирован: 03 сен 2010, 19:58
Благодарил (а): 4 раз.
Поблагодарили: 2 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Простое приложение:редактор аватара пользователя Вк.

Сообщение CK1002 » 18 мар 2014, 09:18

Исходник не найден, перезалей
CK1002

 
Сообщения: 1
Зарегистрирован: 09 мар 2014, 20:41
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.


Вернуться в Уроки по использованию ВКонтакте API



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron