tag:blogger.com,1999:blog-64703990642067653592024-01-21T04:38:16.232+03:00AS3Coder blogБлог от <a href="http://as3coder.blogspot.ru/2014/08/revival.html">AS3Coder</a>'a о JavaScript, HTML, CSS... и немного о <a href="http://as3coder.blogspot.com/2009/09/blog-post.html">Flash</a>.Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.comBlogger57125tag:blogger.com,1999:blog-6470399064206765359.post-22807491369891704042018-01-09T10:45:00.000+03:002018-01-09T10:45:53.548+03:00Front-End Developer на Кипр<div dir="ltr" style="text-align: left;" trbidi="on">
Друзья по цеху, очень нужен Front-End Developer на Кипр.<br />
<br />
<div style="border: 1px dashed #999; margin-left: 40px; padding: 20px;">
<h2 style="text-align: left;">
Проекты: торговые платформы и рекламно-аналитические системы</h2>
<br />
У нас множество веб-сайтов и сервисов, а будет еще больше. Для их развития и поддержания нам нужно много хороших веб-программистов, знающих, что такое действительно классный интерфейс. Если вы из таких, и можете сделать технологичное и юзабельное решение, смело присылайте свое резюме! <br />
<br />
На данной позиции мы хотим видеть опытных разработчиков с хорошим знанием JavaScript, умеющих писать высококачественный код и не боящихся экспериментировать с новыми технологиями. <br />
<br />
<b>Требования: </b>
<br />
<ul style="text-align: left;">
<li>Разработка с использованием JavaScript, CSS и HTML </li>
<li>Опыт управления командами разработчиков </li>
<li>Портфолио проектов, реализованных под вашим руководством (или с вашим участием) </li>
<li>Знание принципов построения пользовательских интерфейсов, основ дизайна, эргономики </li>
</ul>
Плюсами будут знания в смежных областях: <br />
<ul style="text-align: left;">
<li>Понимание работы Microsoft IIS, SQL СУБД и http/https </li>
<li>Общие представления или опыт в SEO </li>
<li>Знание и понимание методов обеспечения безопасности веб-сервера </li>
</ul>
Программисты front-end требуются для двух принципиально разных проектов. Вы можете выбирать, где именно хотите работать и какие именно задачи хотите решать. <br />
<br />
<b>Задачи в проекте "Торговые платформы": </b><br />
<ul style="text-align: left;">
<li>Разработка торгового приложения для веб-платформ (десктоп, мобильные) </li>
<li>Обеспечение сетевой безопасности веб-сервисов </li>
<li>Оптимизация и рефакторинг кода для снижения сетевых задержек </li>
<li>Работа с большим объемом данных (например, отображение 100 000 строк в браузере) </li>
<li>Разработка графических компонентов для отображения графиков </li>
</ul>
<br />
Используемые технологии: Javascript (ES5, ES6), HTML5, CSS3, Node, Less, Git, MVC, WebGL, WebSocket, Crypto API, TypedArray <br />
<br />
<b>Задачи в проекте "Рекламно-аналитической система": </b><br />
<ul style="text-align: left;">
<li>Разработка всего UI системы с учетом User Experience (UX) </li>
<li>Разработка и реализация оптимального отображения данных (различные типы графиков, таблицы и прочее) </li>
<li>Общая разработка интерфейсов для десктоп и мобильных платформ </li>
</ul>
<br />
Используемые технологии: Javascript (ES5, ES6), HTML5, CSS3, Node, Require JS, Less, D3, Git, MVC, REST <br />
<br />
<b>Что мы предлагаем </b><br />
<br />
В каком бы проекте вы ни хотели работать, мы обеспечим вам самые лучшие условия: <br />
<ul style="text-align: left;">
<li>Полная оплата вашего проезда и проживания для посещения собеседования </li>
<li>Компенсация переезда, мы выплачиваем одноразовую компенсацию до 10 000 евро </li>
<li>Корпоративная квартира на время поиска постоянного жилья </li>
<li>Помощь в оформлении необходимых документов </li>
<li>Заработная плата выше рынка </li>
<li>Медицинская страховка для вас и вашей семьи </li>
<li>Офис на берегу моря, широкие возможности для досуга и занятий спортом </li>
<li>Кипр — курортная страна в Средиземном море, которая дарит 300 солнечных дней в году </li>
<li>Бесплатное питание </li>
<li>Уникальный опыт, сильная команда </li>
</ul>
Присоединяйтесь!<br />
<br />
P.S. Если вы не совсем вписываетесь в требования, но хотите работать у нас, все равно отправьте нам свое резюме. Мы с радостью познакомимся с вами и попробуем что-нибудь придумать.
<br />
<br />
<a href="https://www.metaquotes.net/ru/company/vacancies/front-end-developer">https://www.metaquotes.net/ru/company/vacancies/front-end-developer</a></div>
<br />
Подписываюсь под каждым пунктом. С удовольствием получу ваше резюме на <a href="mailto:farid@metaquotes.net">farid@metaquotes.net</a>. Буду собеседовать лично. Особенно буду рад бывшим Flash-девелоперам ;)<br />
<br /></div>
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com0tag:blogger.com,1999:blog-6470399064206765359.post-65760087308849823582014-09-24T08:33:00.001+04:002014-09-24T08:34:38.826+04:00Сеты изображений. TexturePacker.<div dir="ltr" style="text-align: left;" trbidi="on">
Сколько файлов изображений используются на вашем сайте или в веб-приложении? Как часто вам хотелось уменьшить их количество? Если эти вопросы хоть раз вас посещали, то этот пост для вас.<br />
<br />
<span style="font-size: x-large;">Набор изображений</span><br />
<br />
Избавляться от огромного количества графических файлов можно и даже нужно, если они не предназначены для отдельного просмотра. Обычно это элементы интерфейса: логотипы, иконки, кнопки и прочее.<br />
<br />
Делается это следующим образом. Весь набор изображений собирается в один графический файл. Например, те же самые символы <a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji</a>:<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-wslBwzXnsyI/VCJDOZPR70I/AAAAAAAADHA/wvHFMrrrsHY/s1600/1.png" />
<br />
<br />
На экран они выводятся с помощью любого <b>HTML</b>-элемента и стиля <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/background" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">background</span></a> с указанием соответствующей позиции:<br />
<pre style="background: #f1f1f1; color: black; padding: 5px;">.icon { background: url(<span style="color: #c03030;">'/icons.png'</span>) transparent no-repeat <span style="background: yellow;"><span style="color: #0080a0;">-16<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-16<span style="color: #2060a0;">px</span></span></span>; }
</pre>
Таким образом, у нас получается один большой файл со всеми изображениями, вместо множества маленьких.<br />
<br />
Преимуществом такого способа являются:<br />
<ul style="text-align: left;">
<li>удобства при разработке и поддержки проекта</li>
<li>хоть какой-то порядок в графических ресурсах проекта</li>
<li>самое главное - это меньшее количество запросов к серверу.</li>
</ul>
Если вы со мной согласны, то поговорим о том, как собрать уже имеющиеся изображения в один файл. Кто-то называет его атласом, текстурой или еще как-то, но мне больше подходит "сет" - от английского слова <b>set</b> (ряд, серия, набор...).<br />
<br />
<span style="font-size: x-large;">Сборка сета</span><br />
<br />
Самым подходящим инструментом для выполнения подобной задачи является программа <a href="https://www.codeandweb.com/texturepacker" rel="nofollow">TexturePacker</a>. Загрузить и установить её можно с <a href="https://www.codeandweb.com/texturepacker/download" rel="nofollow">официального сайта</a>. Имеются версии для всех популярных операционных систем.<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-z0bclXtUv1k/VCJDO185HZI/AAAAAAAADHE/_2mUtmJ3Bjo/s1600/2.png" />
<br />
<br />
Устанавливаем, открываем и видим окно для выбора проекта:<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/-Rctrb6P7xu4/VCJDPH7n_FI/AAAAAAAADHI/E1qnxceRj78/s1600/3.png" height="468" width="640" />
<br />
<i><br /></i>
Нас интересует пункт <b>CSS</b>. После выбора откроется окно проекта:<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-smcf7Mvh694/VCJDPtm6n1I/AAAAAAAADHg/eOTgrOX4qEo/s1600/4.png" height="396" width="640" />
<br />
<br />
В него попробуем перетащить несколько иконок и сразу увидим предварительный вариант нашего сета:<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/-cnZdkXb-_Ds/VCJDP2UpdPI/AAAAAAAADHQ/5s94S_0Z8OM/s1600/5.png" />
<br />
<br />
В левой части будет находиться список файлов:<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-S-PHWth21_4/VCJDQGrzfjI/AAAAAAAADHc/WP0XNAkQWYg/s1600/6.png" />
<br />
<br />
В правой части окна вы найдете множество настроек для генерации сета. Рассмотрим самые необходимые:<br />
<ul style="text-align: left;">
<li>Путь к результирующему файлу:<br /><br /><img border="0" src="http://1.bp.blogspot.com/-aiaG1DEQhSo/VCJDQw_dH0I/AAAAAAAADHk/S3za4TaYuic/s1600/7.png" /><br /><br />
</li>
<li>Путь к .css-файлу со стилями:<br /><br /><img border="0" src="http://4.bp.blogspot.com/-kUlf6nXbHQQ/VCJDRJbKmjI/AAAAAAAADHo/X7rinnBS0FU/s1600/8.png" /><br /><br />
</li>
<li>Всевозможные отступы между иконками:<br /><br /><img border="0" src="http://1.bp.blogspot.com/-H3KPc1wj9g0/VCJDRh7EsVI/AAAAAAAADHs/Vdc3pes4yVg/s1600/9.png" /><br /><br />
</li>
</ul>
<span style="font-size: x-large;">Пример</span><br />
<br />
В качестве примера я попробую объединить несколько изображений адресной книги из бесплатной коллекции иконок <a href="http://p.yusukekamiyamane.com/" rel="nofollow">fugue-icons</a>:<br />
<img border="0" src="http://3.bp.blogspot.com/-Sk2WfcofVX4/VCJDOQuYGjI/AAAAAAAADG8/3AbvCwX4p2Y/s1600/10.png" />
<br />
<br />
Вот такой сет у меня получился:<br />
<img border="0" src="http://2.bp.blogspot.com/-f1Zf1UGSMZ0/VCJDOTapA8I/AAAAAAAADIM/kVqvO2-wbJI/s1600/11.png" />
<br />
<br />
А вот и <b>CSS</b>-описание к нему:<br />
<pre style="background: #f1f1f1; color: black; padding: 5px;"><span style="color: #406040;">/* ----------------------------------------------------
created with http://www.codeandweb.com/texturepacker
----------------------------------------------------
$TexturePacker:SmartUpdate:3381f3f5613a5b4583ac8d9fc2098c0c:50c3d538df782baf783f7806cded96e4:1a4beba4193919b01a56dc2c2a237cfe$
----------------------------------------------------
usage: <span class="{-spritename-} sprite"></span>
replace {-spritename-} with the sprite you like to use
*/</span>
.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(icons.png);}
.address-book {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-48<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span>}
.address-book--arrow {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span>}
.address-book--exclamation {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span>}
.address-book--minus {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-48<span style="color: #2060a0;">px</span></span>}
.address-book--pencil {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span>}
.address-book--plus {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-48<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-4<span style="color: #2060a0;">px</span></span>}
.address-book-blue {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span>}
.address-book-open {width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; background-position: <span style="color: #0080a0;">-26<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-48<span style="color: #2060a0;">px</span></span>}
</pre>
<span style="font-size: x-large;">В итоге</span><br />
<br />
Используйте сеты изображений в своих интерфейсах. Они полезны и удобны как для разработчиков, так и для пользователей, которым сокращают время ожидания и количество обращений на сервер.<br />
<br />
<span style="font-size: x-large;">И еще</span><br />
<br />
Работать с <a href="https://www.codeandweb.com/texturepacker" rel="nofollow">TexturePacker</a> можно из под командной строки. Более подробно можно ознакомиться в <a href="http://www.codeandweb.com/texturepacker/documentation#features" rel="nofollow">справке</a>.<br />
<br />
<span style="font-size: x-large;">Смотрите также:</span><br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
</ul>
</div>
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com0tag:blogger.com,1999:blog-6470399064206765359.post-17146175765648173752014-08-29T11:23:00.000+04:002014-09-16T08:41:23.738+04:00Emoji на вашем сайте<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-size: x-large;">Что такое Emoji?</span><br />
<b><br /></b>
<b>Emoji</b> - это способ передачи электронных сообщений, состоящих не из букв, а из значков и смайликов. Придумали такой способ общения в Японии и вскоре он получил популярность по всему миру. С подробной историей появления и развития вы можете ознакомиться <a href="http://www.theverge.com/2013/3/4/3966140/how-emoji-conquered-the-world">здесь</a>.<br />
<br />
<span style="font-size: x-large;">Как это выглядит?</span><br />
<br />
Вот так:<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/-GvBiEepc_WU/VAAIQ1I5PII/AAAAAAAADDQ/qZNl3H3t_jk/s1600/0.png" />
<br />
<br />
Изображения вставляются прямо в текст. Каждая иконка имеет свой юникод, такой же как и обычный текстовый символ. Все иконки делятся на несколько семантических групп:<br />
<ol style="text-align: left;">
<li>Эмоции</li>
<li>Декорации</li>
<li>Транспорт и навигация</li>
<li>Закрытые (внутри геометрической фигуры)</li>
<li>Несортированные</li>
<li>Дополнительные</li>
</ol>
У каждой группы свой диапазон юникодов. Более подробно можно ознакомиться по <a href="http://apps.timwhitlock.info/emoji/tables/unicode" rel="nofollow">ссылке</a>.<br />
<br />
<span style="font-size: x-large;">В чем заключается трудность</span><br />
<br />
Дело в том, что на сайтах обычно используется кодировка <a href="https://ru.wikipedia.org/wiki/UTF-8" rel="nofollow">UTF-8</a>. И отображаться на таком сайте наш пример будет так:<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/-LyXZ008QXW0/VAAIQyfZflI/AAAAAAAADEU/9MpiAcWJjx4/s1600/1.png" />
<br />
<br />
А всё потому, что в кодировке UTF-8 нет описания для этих символов. Большинство имеют код из неиспользуемого диапазона начиная с 4 байт.<br />
<br />
Поспешу сообщить, что не всё так плохо. И уже сегодня некоторые браузеры решили проблему самостоятельно. Они находят в тексте такие символы и подменяют из на свои изображения.<br />
<br />
Вот наш пример в <b>InternetExplorer </b>11 (Windows 8.1):<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/-W59gViEK-qc/VAAIReyQNxI/AAAAAAAADDU/yy1rWVltfBY/s1600/3.png" />
<br />
<br />
В <b>FireFox </b>31:<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/-tSmumPVVcp8/VAAIQzJjH2I/AAAAAAAADDM/doYBTKj2oWY/s1600/2.png" />
<br />
<br />
В <b>Mobile Safari</b> (iOS):<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-CtuCiMLGsbg/VAAIRjc1isI/AAAAAAAADDY/jSqhecTDYJQ/s1600/4.png" />
<br />
<br />
Но в <b>Chrome</b> мы увидим всё тот же набор квадратиков, который называется шумом:<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/-LyXZ008QXW0/VAAIQyfZflI/AAAAAAAADEU/9MpiAcWJjx4/s1600/1.png" />
<br />
<br />
Отсюда выделим следующие проблемы:<br />
<ul style="text-align: left;">
<li>Отображение шума вместо иконок в некоторых браузерах</li>
<li>Не одинаковый вид на различных устройствах</li>
</ul>
<br />
<span style="font-size: x-large;">Что делать?</span><br />
<br />
А делать мы будем ровным счетов тоже самое, что делают остальные браузеры: искать символы в тексте и подменять их на свои изображения c помощью <b>JavaScript</b>.<br />
<br />
<span style="font-size: x-large;">Поиск и замена символов на иконки</span><br />
<br />
<span style="font-size: large;"><b>Подготовка</b></span><br />
<br />
Чтобы заменять символы на иконки, нам понадобятся их изображения. В интернете можно найти много вариантов, но мы будем использовать стандартный и наиболее популярный набор, используемый в операционной системе iOS.<br />
<br />
Я нашел такое изображение в проекте <a href="https://github.com/node-modules/emoji" rel="nofollow">модулей</a> для <a href="http://nodejs.org/" rel="nofollow">node.js</a>:<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/-4PghLXaR8_0/VAAIRzLw8zI/AAAAAAAADDo/X_ov4l3bQoM/s1600/5.png" />
<br />
<br />
Загрузить файл можно по ссылке: <a href="https://raw.githubusercontent.com/node-modules/emoji/master/lib/emoji.png" rel="nofollow">https://raw.githubusercontent.com/node-modules/emoji/master/lib/emoji.png</a><br />
<br />
Там же я нашел и описание для этой сетки иконок в <b>CSS</b>-файле:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">...
.emoji { background: url(<span style="color: #c03030;">"emoji.png"</span>) top left no-repeat; width:<span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; height: <span style="color: #0080a0;">20<span style="color: #2060a0;">px</span></span>; }
.emoji2600 { background-position: <span style="color: #0080a0;">-500<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-120<span style="color: #2060a0;">px</span></span>; }
.emoji2601 { background-position: <span style="color: #0080a0;">-500<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-140<span style="color: #2060a0;">px</span></span>; }
.emoji2614 { background-position: <span style="color: #0080a0;">-500<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-200<span style="color: #2060a0;">px</span></span>; }
.emoji26c4 { background-position: <span style="color: #0080a0;">-520<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-200<span style="color: #2060a0;">px</span></span>; }
.emoji26a1 { background-position: <span style="color: #0080a0;">-520<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-100<span style="color: #2060a0;">px</span></span>; }
.emoji1f300 { background-position: <span style="color: #0080a0;">-20<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-500<span style="color: #2060a0;">px</span></span>; }
.emoji1f301 { background-position: <span style="color: #0080a0;">-20<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-520<span style="color: #2060a0;">px</span></span>; }
.emoji1f302 { background-position: <span style="color: #0080a0;">-20<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-540<span style="color: #2060a0;">px</span></span>; }
.emoji1f303 { background-position: <span style="color: #0080a0;">-20<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-560<span style="color: #2060a0;">px</span></span>; }
.emoji1f304 { background-position: <span style="color: #0080a0;">-20<span style="color: #2060a0;">px</span></span> <span style="color: #0080a0;">-580<span style="color: #2060a0;">px</span></span>; }
...
</div>
Файл доступен по адресу: <a href="https://raw.githubusercontent.com/node-modules/emoji/master/lib/emoji.css" rel="nofollow">https://raw.githubusercontent.com/node-modules/emoji/master/lib/emoji.css</a><br />
<br />
Теперь, имея файл с изображением всех иконок и координаты к ним, приступим к написанию кода.<br />
<br />
Алгоритм будет следующий:
<br />
<ol style="text-align: left;">
<li>Ищем в тексте символы с юникодом в известных нам диапазонах.</li>
<li>Заменяем найденные символы на текстовые элементы <span style="font-family: Courier New, Courier, monospace;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" rel="nofollow">span</a></span>, для которых указываем CSS-класс с HEX-кодом.</li>
</ol>
<br />
Таким образом, вместо <b>emoji</b>-символов мы получим <span style="font-family: Courier New, Courier, monospace;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span" rel="nofollow">span</a></span>-элементы , с заданными размерами и фоновым изображением. Они будут корректно отображаться всегда и во всех браузерах.<br />
<br />
<span style="font-size: large;"><b>Анализ</b></span><br />
<div>
<br />
Проанализировав <a href="http://apps.timwhitlock.info/emoji/tables/unicode#block-5-uncategorized" rel="nofollow">таблицу символов</a>, я поделил их на несколько групп по диапазону кодов:<br />
<br />
<table cellpadding="10" style="width: 100%px;">
<thead>
<tr>
<th style="text-align: left; white-space: nowrap;"></th>
<th style="text-align: left; white-space: nowrap;">Группа</th>
<th style="text-align: left; white-space: nowrap;">Размер символа</th>
<th style="text-align: left; white-space: nowrap;">Коды</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top;">1.</td>
<td style="vertical-align: top;">Флаги</td>
<td style="vertical-align: top;">8 байт</td>
<td style="vertical-align: top;">Представлены в виде 2-х суррогатных пар символов в диапазоне: <b>\ud83c\udde8</b>-<b>ud83c\uddfa</b> (1-я пара) + <b>\ud83c\udde7</b>-<b>\ud83c\uddfa</b> (2-я пара)</td>
</tr>
<tr>
<td style="vertical-align: top;">2.</td>
<td style="vertical-align: top;">Числа</td>
<td style="vertical-align: top;">4 байта</td>
<td style="vertical-align: top;">Представлены в виде двух 2 байтных символов идущих подряд с диапазоном <b>\u0023-\u0039</b> (1-й символ) и <b>\u20E3</b> (2 символ)</td>
</tr>
<tr>
<td style="vertical-align: top;">3.</td>
<td style="vertical-align: top;">Несортированные</td>
<td style="vertical-align: top;">3 байта</td>
<td style="vertical-align: top;">Символы с кодами от <b>\u2139</b> до <b>\u3299</b></td>
</tr>
<tr>
<td style="vertical-align: top;">4.</td>
<td style="vertical-align: top;">Пунктуация</td>
<td style="vertical-align: top;">3 байта</td>
<td style="vertical-align: top;">Два символа с кодами <b>\u203C</b> и <b>\u2049</b></td>
</tr>
<tr>
<td style="vertical-align: top;">5.</td>
<td style="vertical-align: top;">Все остальные</td>
<td style="vertical-align: top;">4 байта</td>
<td style="vertical-align: top;">Представлены в виде суррогатной пары в диапазоне <b>\ud800</b>-<b>\udbff </b> (1-я часть пары) + <b>\udc00</b>-<b>\udfff </b>(2-я часть пары)</td>
</tr>
</tbody>
</table>
<br />
<span style="font-size: large;"><b>Суррогатные пары</b></span><br />
<br />
Что это такое?<br />
<br />
Суррогатными парами обычно описываются символы, коды которых не помещаются в формат. Они описываются по определенным правилам формата. Мы не будем разбирать это в рамках данной статьи.<br />
<br />
В нашем случае большинство <b>emoji</b>-иконок описываются кодами превышающими формат <a href="https://ru.wikipedia.org/wiki/UTF-8" rel="nofollow">UTF-8</a>. Поэтому мы использовали суррогатные пары в приведенных выше диапазонах. Для этого использовался такой вот метод:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;"><span style="color: #a08000;">function</span> <span style="color: maroon;">GetHexFromSurrogatePair</span> (a, b)
{
<span style="color: #2060a0;">return</span>((a <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0xD800</span>) <span style="color: #2060a0;">*</span> <span style="color: #0080a0;">0x400</span> <span style="color: #2060a0;">+</span> (b <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0xDC00</span>) <span style="color: #2060a0;">+</span> <span style="color: #0080a0;">0x10000</span>);
}
</div>
Но, так как мы будем искать по юникоду, нам нужен обратный метод:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;"><span style="color: #a08000;">function</span> <span style="color: maroon;">GetSurrogatePairFromHex</span> (hex)
{
<span style="color: #2060a0;">var</span> a <span style="color: #2060a0;">=</span> Math.floor((hex <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0x10000</span>) <span style="color: #2060a0;">/</span> <span style="color: #0080a0;">0x400</span>) <span style="color: #2060a0;">+</span> <span style="color: #0080a0;">0xD800</span>,
b <span style="color: #2060a0;">=</span> (hex <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0x10000</span>) <span style="color: #2060a0;">%</span> <span style="color: #0080a0;">0x400</span> <span style="color: #2060a0;">+</span> <span style="color: #0080a0;">0xDC00</span>;
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span style="color: maroon;">\\</span>u'</span> <span style="color: #2060a0;">+</span> a.toString(<span style="color: #0080a0;">16</span>), <span style="color: #c03030;">'<span style="color: maroon;">\\</span>u'</span> <span style="color: #2060a0;">+</span> b.toString(<span style="color: #0080a0;">16</span>)]);
}
</div>
<span style="font-size: large;"><b>Код</b></span><br />
<br />
Теперь попробуем написать код для поиска и замены для каждой из этих групп.<br />
<br />
1. Флаги:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">string <span style="color: #2060a0;">=</span> string.replace(<span style="color: #c03030;">/(<span style="color: maroon;">\u</span>d83c[<span style="color: maroon;">\u</span>dde8-<span style="color: maroon;">\u</span>ddfa])(<span style="color: maroon;">\u</span>d83c[<span style="color: maroon;">\u</span>dde7-<span style="color: maroon;">\u</span>ddfa])/g</span>, <span style="color: #a08000;">function</span> (match)
{
<span style="color: #a08000;">var</span> hex <span style="color: #2060a0;">=</span>
[
GetHexFromSurrogatePair(match.charCodeAt(<span style="color: #0080a0;">0</span>), match.charCodeAt(<span style="color: #0080a0;">1</span>)).toString(<span style="color: #0080a0;">16</span>),
GetHexFromSurrogatePair(match.charCodeAt(<span style="color: #0080a0;">2</span>), match.charCodeAt(<span style="color: #0080a0;">3</span>)).toString(<span style="color: #0080a0;">16</span>)
].join(<span style="color: #c03030;">''</span>);
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span>'</span>].join(<span style="color: #c03030;">''</span>));
});
</div>
2. Числа:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">string <span style="color: #2060a0;">=</span> string.replace(<span style="color: #c03030;">/(<span style="color: maroon;">\u</span>d83c[<span style="color: maroon;">\u</span>dde8-<span style="color: maroon;">\u</span>ddfa])(<span style="color: maroon;">\u</span>d83c[<span style="color: maroon;">\u</span>dde7-<span style="color: maroon;">\u</span>ddfa])/g</span>, <span style="color: #a08000;">function</span> (match)
{
<span style="color: #a08000;">var</span> hex <span style="color: #2060a0;">=</span>
[
GetHexFromSurrogatePair(match.charCodeAt(<span style="color: #0080a0;">0</span>), match.charCodeAt(<span style="color: #0080a0;">1</span>)).toString(<span style="color: #0080a0;">16</span>),
GetHexFromSurrogatePair(match.charCodeAt(<span style="color: #0080a0;">2</span>), match.charCodeAt(<span style="color: #0080a0;">3</span>)).toString(<span style="color: #0080a0;">16</span>)
].join(<span style="color: #c03030;">''</span>);
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span>'</span>].join(<span style="color: #c03030;">''</span>));
});
</div>
3. Несортированые:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">string <span style="color: #2060a0;">=</span> string.replace(<span style="color: #c03030;">/[<span style="color: maroon;">\u</span>0023-<span style="color: maroon;">\u</span>0039]<span style="color: maroon;">\u</span>20E3/g</span>, <span style="color: #a08000;">function</span> (match)
{
<span style="color: #a08000;">var</span> hex <span style="color: #2060a0;">=</span>
[
match.charCodeAt(<span style="color: #0080a0;">0</span>).toString(<span style="color: #0080a0;">16</span>),
match.charCodeAt(<span style="color: #0080a0;">1</span>).toString(<span style="color: #0080a0;">16</span>)
].join(<span style="color: #c03030;">''</span>);
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span>'</span>].join(<span style="color: #c03030;">''</span>));
});
</div>
4. Пунктуация:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">string <span style="color: #2060a0;">=</span> string.replace(<span style="color: #c03030;">/[<span style="color: maroon;">\u</span>2139-<span style="color: maroon;">\u</span>3299]/g</span>, <span style="color: #a08000;">function</span> (match)
{
<span style="color: #a08000;">var</span> hex <span style="color: #2060a0;">=</span> match.charCodeAt(<span style="color: #0080a0;">0</span>).toString(<span style="color: #0080a0;">16</span>);
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span>'</span>].join(<span style="color: #c03030;">''</span>));
});
</div>
5. Все остальные:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;">string <span style="color: #2060a0;">=</span> string.replace(<span style="color: #c03030;">/[<span style="color: maroon;">\u</span>203C<span style="color: maroon;">\u</span>2049]/g</span>, <span style="color: #a08000;">function</span> (match)
{
<span style="color: #a08000;">var</span> hex <span style="color: #2060a0;">=</span> match.charCodeAt(<span style="color: #0080a0;">0</span>).toString(<span style="color: #0080a0;">16</span>);
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span>'</span>].join(<span style="color: #c03030;">''</span>));
});
</div>
Теперь осталось собрать и причесать весь код в один итоговый класс, который будет выполнять замену всех групп по очереди:<br />
<div style="font-family:monospace;white-space:pre;margin:10px 0;background: #f1f1f1; clear: both; color: black; overflow: auto; padding: 5px;"><span style="color: #406040;">/**
* Emoji class
* <span style="color: #2060a0;">@description</span> http://as3coder.blogspot.com/2014/08/emoji.html
* <span style="color: #2060a0;">@author</span> AS3Coder
*/</span>
(function(){
<span style="color: #406040;">/**
* Define public access
* @private
*/</span>
var emoji <span style="color: #2060a0;">=</span> window<span style="color: #2060a0;">.</span>emoji <span style="color: #2060a0;">=</span> {};
emoji<span style="color: #2060a0;">.</span>replace <span style="color: #2060a0;">=</span> <span style="color: #a08000;">Replace</span>;
<span style="color: #406040;">/**
* Grouping by range
* @constant
* @private
*/</span>
var GROUPS <span style="color: #2060a0;">=</span>
[
[<span style="color: #2060a0;">/</span>(\ud83c[\udde8<span style="color: #2060a0;">-</span>\uddfa])(\ud83c[\udde7<span style="color: #2060a0;">-</span>\uddfa])<span style="color: #2060a0;">/</span>g, <span style="color: #a08000;">ReplaceFlags</span>], <span style="color: #406040;">// Flags</span>
[<span style="color: #2060a0;">/</span>[\u0023<span style="color: #2060a0;">-</span>\u0039]\u20E3<span style="color: #2060a0;">/</span>g, <span style="color: #a08000;">ReplaceNumbers</span>], <span style="color: #406040;">// Numbers</span>
[<span style="color: #2060a0;">/</span>[\u2139<span style="color: #2060a0;">-</span>\u3299]<span style="color: #2060a0;">/</span>g, <span style="color: #a08000;">ReplaceStandard</span>], <span style="color: #406040;">// Unsorted</span>
[<span style="color: #2060a0;">/</span>[\u203C\u2049]<span style="color: #2060a0;">/</span>g, <span style="color: #a08000;">ReplaceStandard</span>], <span style="color: #406040;">// Punctuation</span>
[<span style="color: #2060a0;">/</span>([\ud800<span style="color: #2060a0;">-</span>\udbff])([\udc00<span style="color: #2060a0;">-</span>\udfff])<span style="color: #2060a0;">/</span>g, <span style="color: #a08000;">ReplaceSurrogate</span>] <span style="color: #406040;">// Other (surrogate pairs)</span>
];
<span style="color: #406040;">/**
* Method to replace all emoji characters in the icon
* <span style="color: #2060a0;">@param</span> {String} Source string
* <span style="color: #2060a0;">@return</span> {String}
* @public
*/</span>
function <span style="color: #a08000;">Replace</span> (source)
{
var pattern;
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">for</span>(var i<span style="color: #2060a0;">=</span><span style="color: #0080a0;">0</span>, j<span style="color: #2060a0;">=</span>GROUPS<span style="color: #2060a0;">.</span>length; i<span style="color: #2060a0;"><</span>j; i<span style="color: #2060a0;">++</span>)
{
pattern <span style="color: #2060a0;">=</span> GROUPS[i];
<span style="color: #2060a0;">if</span>(pattern <span style="color: #2060a0;">&&</span> pattern[<span style="color: #0080a0;">0</span>] <span style="color: #2060a0;">&&</span> pattern[<span style="color: #0080a0;">1</span>])
{
<span style="color: #2060a0;">if</span>(source<span style="color: #2060a0;">.</span>match(pattern[<span style="color: #0080a0;">0</span>]))
{
source <span style="color: #2060a0;">=</span> source<span style="color: #2060a0;">.</span>replace(pattern[<span style="color: #0080a0;">0</span>], pattern[<span style="color: #0080a0;">1</span>]);
}
}
}
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>(source);
}
<span style="color: #406040;">/**
* Method to replace flags
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">ReplaceFlags</span> (match)
{
<span style="color: #2060a0;">return</span>(GetHtmlCodeFromHex(
[
GetHexFromSurrogatePair(match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">0</span>), match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">1</span>))<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>),
GetHexFromSurrogatePair(match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">2</span>), match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">3</span>))<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>)
]<span style="color: #2060a0;">.</span>join(<span style="color: #c03030;">''</span>)));
}
<span style="color: #406040;">/**
* Method to replace numbers
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">ReplaceNumbers</span> (match)
{
<span style="color: #2060a0;">return</span>(GetHtmlCodeFromHex(match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">0</span>)<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>) <span style="color: #2060a0;">+</span> match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">1</span>)<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>)));
}
<span style="color: #406040;">/**
* Method to replace srandard charters
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">ReplaceStandard</span> (match)
{
<span style="color: #2060a0;">return</span>(GetHtmlCodeFromHex(match<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">0</span>)<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>)));
}
<span style="color: #406040;">/**
* Method to replace surrogate pairs
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">ReplaceSurrogate</span> (match, p1, p2)
{
<span style="color: #2060a0;">return</span>(GetHtmlCodeFromHex(GetHexFromSurrogatePair(p1<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">0</span>),p2<span style="color: #2060a0;">.</span>charCodeAt(<span style="color: #0080a0;">0</span>))<span style="color: #2060a0;">.</span>toString(<span style="color: #0080a0;">16</span>)));
}
<span style="color: #406040;">/**
* The method returns the hex code for a surrogate pair
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">GetHexFromSurrogatePair</span> (a, b)
{
<span style="color: #2060a0;">return</span>((a <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0xD800</span>) <span style="color: #2060a0;">*</span> <span style="color: #0080a0;">0x400</span> <span style="color: #2060a0;">+</span> (b <span style="color: #2060a0;">-</span> <span style="color: #0080a0;">0xDC00</span>) <span style="color: #2060a0;">+</span> <span style="color: #0080a0;">0x10000</span>);
}
<span style="color: #406040;">/**
* The method returns an html code for icon image
* <span style="color: #2060a0;">@param</span> {String} hex
* <span style="color: #2060a0;">@return</span> {String}
* @private
*/</span>
function <span style="color: #a08000;">GetHtmlCodeFromHex</span> (hex)
{
<span style="color: #2060a0;">return</span>([<span style="color: #c03030;">'<span class="emojic"><span class="emoji emoji'</span>, hex, <span style="color: #c03030;">'"></span><span class="emojit">&#x'</span>, hex, <span style="color: #c03030;">';</span></span>'</span>]<span style="color: #2060a0;">.</span>join(<span style="color: #c03030;">''</span>));
}
<span style="color: #406040;">//---</span>
})();
</div>
<span style="font-size: x-large;">Пример. </span><span style="font-size: xx-small;">Нужно смотреть в разных браузерах</span><br />
<script src="https://sites.google.com/site/as3coder/files/20140829_emoji.js?attredirects=0" type="text/javascript"></script>
<link href="https://sites.google.com/site/as3coder/files/20140829_emoji.css?attredirects=0" rel="stylesheet" type="text/css"></link>
<style>
.preview20140829 { background: #f0f0f0; padding:8px;}
.preview20140829 * { font-family: Tahoma,Helvetica,sans-serif; font-size: 12px; }
.preview20140829 h1 { padding-left: 5px; font-size: 18px; }
.preview20140829 table { width : 400px; }
.preview20140829 table th { width : 200px; text-align: left; padding: 0; font-weight: normal; font-size: 11px; }
.preview20140829 table td { background : #ffffff; height: 100px; vertical-align: top; padding: 4px; }
.preview20140829 .description { font-size: 11px; padding: 10px 5px; }
</style>
<br />
<div class="preview20140829">
<table cellpadding="0" cellspacing="5">
<thead>
<tr>
<th>Original text:</th>
<th>After replacing:</th>
</tr>
</thead>
<tbody>
<tr>
<td id="original20140829"></td>
<td id="transformed20140829"></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
if (!String.fromCodePoint) {
(function() {
var defineProperty = (function() {
// IE 8 only supports `Object.defineProperty` on DOM elements
try {
var object = {};
var $defineProperty = Object.defineProperty;
var result = $defineProperty(object, object, object) && $defineProperty;
} catch(error) {}
return result;
}());
var stringFromCharCode = String.fromCharCode;
var floor = Math.floor;
var fromCodePoint = function() {
var MAX_SIZE = 0x4000;
var codeUnits = [];
var highSurrogate;
var lowSurrogate;
var index = -1;
var length = arguments.length;
if (!length) {
return '';
}
var result = '';
while (++index < length) {
var codePoint = Number(arguments[index]);
if (
!isFinite(codePoint) || // `NaN`, `+Infinity`, or `-Infinity`
codePoint < 0 || // not a valid Unicode code point
codePoint > 0x10FFFF || // not a valid Unicode code point
floor(codePoint) != codePoint // not an integer
) {
throw RangeError('Invalid code point: ' + codePoint);
}
if (codePoint <= 0xFFFF) { // BMP code point
codeUnits.push(codePoint);
} else { // Astral code point; split in surrogate halves
// http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
codePoint -= 0x10000;
highSurrogate = (codePoint >> 10) + 0xD800;
lowSurrogate = (codePoint % 0x400) + 0xDC00;
codeUnits.push(highSurrogate, lowSurrogate);
}
if (index + 1 == length || codeUnits.length > MAX_SIZE) {
result += stringFromCharCode.apply(null, codeUnits);
codeUnits.length = 0;
}
}
return result;
};
if (defineProperty) {
defineProperty(String, 'fromCodePoint', {
'value': fromCodePoint,
'configurable': true,
'writable': true
});
} else {
String.fromCodePoint = fromCodePoint;
}
}());
}
</script>
<script type="text/javascript">
//---
var TEXT = String.fromCodePoint(55357, 56843, 55357, 56891, 55357, 56445, 55357, 56416, 55357, 56508, 55356, 57102, 9924, 65039, 55356, 57170);
//---
function onload20140829 ()
{
var original = document.getElementById("original20140829");
var transformed = document.getElementById("transformed20140829");
//---
original.innerHTML = TEXT;
transformed.innerHTML = window.emoji.replace(TEXT);
}
//---
onload20140829();
//---
</script>
<br />
<a href="https://sites.google.com/site/as3coder/files/20140829_soucecode.zip?attredirects=0&d=1" rel="nofollow">Исходный код примера</a> (163 кб)</div>
<br /></div>
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com2tag:blogger.com,1999:blog-6470399064206765359.post-58237967183714048192014-08-07T22:59:00.001+04:002014-09-05T09:30:27.703+04:00Сохранить изображение с камеры на JavaScript<div dir="ltr" style="text-align: left;" trbidi="on">
Я уже <a href="http://as3coder.blogspot.ru/2010/08/web.html">писал</a>, о том как сохранить изображение с камеры на <b>ActionScript 3.0</b>. Теперь самое время разобраться как сделать то же самое на <b>JavaScript</b>.<br />
<br />
<div style="text-align: left;">
<span style="font-size: large;"><b>
Вывод изображения с камеры</b></span></div>
<div>
<br />
Для вывода изображения с камеры нам понадобится <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" rel="nofollow" style="font-family: 'Courier New', Courier, monospace;">video</a><span style="font-family: inherit;">-элемент</span>. В нем мы будем отображать потоковое видео с веб-камеры. На странице выглядеть это будет так:</div>
<pre style="background: #f1f1f1; color: black; padding: 6px;"><span style="color: #2060a0;"><</span>video autoplay id<span style="color: #2060a0;">=</span><span style="color: #c03030;">"video"</span><span style="color: #2060a0;">></span><span style="color: #2060a0;"><</span>/video<span style="color: #2060a0;">></span>
</pre>
<div>
Также нам понадобиться метод <span style="font-family: Courier New, Courier, monospace;"><a href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator.getUserMedia" rel="nofollow">navigator.getUserMedia</a></span>. С помощью этого метода мы можем попросить браузер вернуть нам медиаданные пользователя, а именно: изображение с камеры и звук с микрофона. Метод довольно новый и реализован еще не во всех обозревателях (по данным <a href="http://caniuse.com/#feat=stream" rel="nofollow">caniuse.com</a> в Chrome 21+, FireFox 17+ и Opera 18+), поэтому добавим такую вот обвязку:</div>
<pre style="background: #f1f1f1; color: black; padding: 6px;">navigator.getUserMedia <span style="color: #2060a0;">=</span> (navigator.getUserMedia <span style="color: #2060a0;">||</span>
navigator.webkitGetUserMedia <span style="color: #2060a0;">||</span>
navigator.mozGetUserMedia <span style="color: #2060a0;">||</span>
navigator.msGetUserMedia);
</pre>
<div>
Теперь попробуем вызвать метод:</div>
<pre style="background: #f1f1f1; color: black; padding: 6px;">navigator.getUserMedia({ video : true }, <span style="color: #a08000;">function</span> (){}, <span style="color: #a08000;">function</span>(){});
</pre>
<div>
В первом параметре мы указываем тип необходимых нам данных. Допустимо два параметра <span style="font-family: Courier New, Courier, monospace;">audio</span> и <span style="font-family: Courier New, Courier, monospace;">video</span>. В нашем случае это только <span style="font-family: Courier New, Courier, monospace;">video</span>. После вызова пользователь увидит сообщение с запросом на разрешение использовать указанные устройства:<br />
<br />
<table cellpadding="0" cellspacing="0"><tbody>
<tr><td><img border="0" src="http://3.bp.blogspot.com/-lnCpeBvhqcY/U9lO2kcqtVI/AAAAAAAAC7o/fCZy6GFJhOw/s1600/Image+5.png" /></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Снимок в Opera 23.0</td></tr>
</tbody></table>
<br />
Для реакции на выбор пользователя имеются второй и третий параметры. В них указываются ссылки на обработчики событий. Второй вызывается, если доступ к камере разрешен. Третий, если доступ запрещен.<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;">navigator.getUserMedia({ video : true },
<span style="color: #406040;">//---</span>
<span style="color: #a08000;">function</span> ()
{
<span style="color: #406040;">// Доступ к камере разрешен</span>
},
<span style="color: #a08000;">function</span>()
{
<span style="color: #406040;">// Доступ к камере запрещен</span>
});
</pre>
Если доступ к камере имеется, то в соответствующем обработчике будет единственный аргумент - ссылка на потоковое видео с камеры. Чтобы отобразить видео, его нужно задать ранее созданному <span style="font-family: Courier New, Courier, monospace;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" rel="nofollow">video</a></span>-элементу c помощью <span style="font-family: Courier New, Courier, monospace;"><a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh453196.aspx" rel="nofollow">URL.createObjectURL</a></span>:<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;">navigator.getUserMedia({ video : true },
<span style="color: #406040;">//---</span>
<span style="color: #a08000;">function</span> ()
{
<span style="color: #a08000;">var</span> video <span style="color: #2060a0;">=</span> document.getElementById(<span style="color: #c03030;">'video'</span>);
video.src <span style="color: #2060a0;">=</span> window.URL.createObjectURL(stream);
},
<span style="color: #a08000;">function</span>()
{
alert(<span style="color: #c03030;">'No access to the camera!'</span>)
});
</pre>
</div>
<div>
<blockquote>
<i><span style="color: #444444; font-family: inherit;">В старой Opera (которая Presto) формат параметров и ссылка на локальный медиапоток немного отличается. В рамках данной статьи, мы этого рассматривать не будем.</span></i></blockquote>
После того как страница получает видео с камеры, на вкладке появляется индикатор записи. Например в Chrome это выглядит так: <br />
<br />
<img border="0" src="http://1.bp.blogspot.com/-Ehhgp_SDtDE/U-KJNnLOgSI/AAAAAAAAC8E/S7GbUTATEUQ/s1600/Image+2.png" />
<br />
<br />
<span style="font-size: large;"><b>Снимок с экрана</b></span><br />
<br />
Для того, чтобы сделать снимок с <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">video</span></a>-элемента, нам понадобится <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Canvas" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">canvas</span></a>-элемент.<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;"><canvas id=<span style="color: #c03030;">"canvas"</span>></canvas>
</pre>
Только этот элемент может снимать растровые изображения с любого элемента на странице. Для этого у <a href="http://msdn.microsoft.com/en-us/library/ie/ff975057(v=vs.85).aspx" rel="nofollow">двухмерного контекста</a> имеется метод <span style="font-family: Courier New, Courier, monospace;"><a href="http://msdn.microsoft.com/en-us/library/ie/ff975414(v=vs.85).aspx" rel="nofollow">.drawImage();</a></span> В нашем случае мы будем снимать изображение с <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">video</span></a>-элемента, в котором отображается видео с камеры.<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;">var context <span style="color: #2060a0;">=</span> canvas<span style="color: #2060a0;">.</span>getContext('2d');
context<span style="color: #2060a0;">.</span>drawImage(video, <span style="color: #0080a0;">0</span>, <span style="color: #0080a0;">0</span>);
</pre>
<span style="font-size: large;"><b>Сборка файла изображения</b></span><br />
<br />
Теперь изображение можно открыть в отдельном окне, используя адрес полученный из метода <a href="http://msdn.microsoft.com/en-us/library/ie/ff975241(v=vs.85).aspx" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">.toDataURL();</span></a> Здесь вы можете получить изображения в необходимом вам формате. Для этого достаточно указать в первом параметре <a href="http://htmlbook.ru/html/value/mime" rel="nofollow">MIME</a>-тип файла. Мы будем использовать <a href="https://www.google.ru/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&cad=rja&uact=8&sqi=2&ved=0CBoQFjAA&url=http%3A%2F%2Fru.wikipedia.org%2Fwiki%2FPNG&ei=8XziU-6GJqP4yQPs2YDoAQ&usg=AFQjCNGc-zKCSWckGFb2quXJrazJ8JqCpw&sig2=MhgZwJBY9GH-xthmEa9SOg&bvm=bv.72197243,d.bGQ" rel="nofollow">PNG</a>-формат.<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;">canvas<span style="color: #2060a0;">.</span>toDataURL('image<span style="color: #2060a0;">/</span>png');
</pre>
Открыв файл в новом окне, можно заметить, что изображение описывается прямо в адресной строке закодированное в системе <a href="https://ru.wikipedia.org/wiki/Base64" rel="nofollow">Base64</a>.<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/-0UZ28jU3zCs/U-KFxpk0vOI/AAAAAAAAC74/nQm9U0O_eIE/s1600/Image+1.png" />
<br />
<br />
Для <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Base64_encoding_and_decoding#Solution_.232_.E2.80.93_rewriting_atob%28%29_and_btoa%28%29_using_TypedArrays_and_UTF-8" rel="nofollow">работы с Base64</a> в JavaScript имеются методы <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.atob" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">.atob();</span></a> и <span style="font-family: Courier New, Courier, monospace;">.<a href="https://developer.mozilla.org/en-US/docs/Web/API/window.btoa" rel="nofollow">btoa();</a></span> Для декодирования строки <a href="https://ru.wikipedia.org/wiki/Base64" rel="nofollow">Base64</a> в бинарные данные представленные в <a href="https://ru.wikipedia.org/wiki/UTF-8" rel="nofollow">UTF-8</a> мы будем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/API/window.atob" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">.atob();</span></a><br />
<pre style="background: #f1f1f1; color: black; padding: 6px;"><span style="color: #2060a0;">var</span> utf8 = atob(canvas.toDataURL(<span style="color: #c03030;">'image/png'</span>).split(<span style="color: #c03030;">','</span>)[<span style="color: #0080a0;">1</span>]);
</pre>
Получив бинарные данные файла, мы должны оформить их в файл. Для работы с файлами в <b>JavaScript</b> имеется объект <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">Blob</span></a>. Чтобы записать данные в файл, по-символьно пройдемся по строке в <a href="https://ru.wikipedia.org/wiki/UTF-8" rel="nofollow">UTF-8</a> и соберем в <a href="http://msdn.microsoft.com/en-us/library/ie/br212477(v=vs.94).aspx" rel="nofollow"><span style="font-family: Courier New, Courier, monospace;">Uint8Array</span></a>. В итоге получим вот такой метод:<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;"><span style="color: #a08000;">function</span> <span style="color: maroon;">base64toblob</span> (base64)
{
<span style="color: #a08000;">var</span> utf8 <span style="color: #2060a0;">=</span> atob(base64),
array <span style="color: #2060a0;">=</span> [];
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">for</span>(<span style="color: #a08000;">var</span> i <span style="color: #2060a0;">=</span> <span style="color: #0080a0;">0</span>, j <span style="color: #2060a0;">=</span> utf8.length; i <span style="color: #2060a0;"><</span> j; i<span style="color: #2060a0;">++</span>)
array.push(utf8.charCodeAt(i));
<span style="color: #406040;">//---</span>
<span style="color: #2060a0;">return</span>(<span style="color: #2060a0;">new</span> Blob([<span style="color: #2060a0;">new</span> Uint8Array(array)], {type: <span style="color: #c03030;">'image/png'</span>}));
}
</pre>
<span style="font-size: large;"><b>Сохранение файла</b></span><br />
<br />
Теперь о том, как сохранить файл на локальный диск пользователя. Мы воспользуемся <a href="https://github.com/eligrey/FileSaver.js" rel="nofollow">готовым решением</a> от <a href="https://github.com/eligrey" rel="nofollow">Eli Grey</a>, за которое ему огромное спасибо. Речь идет о реализации заявленного <a href="http://www.w3.org/TR/2012/WD-file-writer-api-20120417/" rel="nofollow">FileSaver</a> для большинства современных браузеров. Итак, скачиваем <a href="https://github.com/eligrey/FileSaver.js/blob/master/FileSaver.js" rel="nofollow">FileSaver.js</a> и подключаем к нашей странице. Скрипт распространяется с лицензией <a href="https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md" rel="nofollow">X11/MIT</a>.<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;"><script type=<span style="color: #c03030;">"text/javascript"</span> src=<span style="color: #c03030;">"filesaver.js"</span>></script>
</pre>
Нам необходимо только вызвать единственный метод <span style="font-family: Courier New, Courier, monospace;">saveAs();</span><span style="font-family: inherit;"> в который пере</span>даем ссылку на файл и его название:<br />
<pre style="background: #f1f1f1; color: black; padding: 6px;">saveAs(base64toblob(canvas.toDataURL(<span style="color: #c03030;">'image/png'</span>).split(<span style="color: #c03030;">','</span>)[<span style="color: #0080a0;">1</span>]), <span style="color: #c03030;">'image_from_camera.png'</span>);
</pre>
Готовый пример и исходный код под катом.<br />
<style>.jump-link { margin: 10px 0; } </style>
<a name='more'></a><span style="font-size: large;"><b>Пример</b></span><br />
<link href="https://sites.google.com/site/as3coder/files/index20140807.css?attredirects=0" rel="stylesheet" type="text/css"></link>
<script src="https://sites.google.com/site/as3coder/files/filesaver20140807.js?attredirects=0" type="text/javascript"></script>
<script src="https://sites.google.com/site/as3coder/files/index20140807.js?attredirects=0" type="text/javascript"></script>
<br />
<div class="sample" style="width: 660px;">
<center>
<table cellpadding="0" cellspacing="0">
<thead>
<tr><th>Video from camera:</th>
<th></th>
<th>Picture preview:</th>
</tr>
</thead>
<tbody>
<tr>
<td class="box video"><video autoplay="" id="video"></video>
</td>
<td class="separator"></td>
<td class="box preview"><canvas id="canvas"></canvas>
</td>
</tr>
<tr>
<td><input id="take_button" type="button" value="Take a picture" /></td>
<td class="separator"></td>
<td><input disabled="true" id="save_button" type="button" value="Save as file" /></td>
</tr>
</tbody>
</table>
<div id="message">
</div>
</center>
</div>
<script>
window.oncamerasampleload();
</script><br />
Исходный код: <a href="https://sites.google.com/site/as3coder/files/camera.zip?attredirects=0&d=1" rel="nofollow">camera.zip</a> (5 кб)<br />
<br /></div>
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>
</div>
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com1tag:blogger.com,1999:blog-6470399064206765359.post-45093187013469112162011-12-02T16:29:00.001+04:002014-10-28T11:12:27.444+03:00Сохранение звука с микрофона на ActionScript 3.0<div dir="ltr" style="text-align: left;" trbidi="on">
То, что недавно казалось фантастикой, сегодня уже реальность. Начиная с версии <b>FlashPlayer</b>'a <b>10.1</b> у класса <a href="http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/media/Microphone.html" rel="nofollow">Microphone</a> появилось событие <a href="http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/media/Microphone.html#event:sampleData" rel="nofollow">sampleData</a>.<br />
<div>
<br />
<div>
<span class="Apple-style-span" style="font-size: x-large;">SampleDataEvent</span></div>
<div>
<br /></div>
<div>
Это <a href="http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/events/SampleDataEvent.html" rel="nofollow">событие</a> отправляется когда в буфере микрофона появляются аудио-данные. Событие имеет свойство <a href="http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/events/SampleDataEvent.html#data" rel="nofollow">data</a>, которое содержит образцы записанных с микрофона данных. Естественно данные приходят в сыром формате. И проиграть их вне <b>FlashPlayer</b>'a не получиться. Поэтому их необходимо декодировать, предварительно собрав необходимое количество в бинарный массив <a href="http://help.adobe.com/ru_RU/FlashPlatform/reference/actionscript/3/flash/utils/ByteArray.html" rel="nofollow">ByteArray</a>.</div>
<div>
<br /></div>
<div>
<pre class="code" style="-webkit-text-size-adjust: none; background-color: white; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: monospace, Courier !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Объявляем бинарный массив для хранения полученных с микрофона аудио-данных</span>
<span class="keyword" style="color: blue;">var</span> _samples_arr:ByteArray = <span class="keyword" style="color: blue;">new</span> ByteArray();;
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Получаем экзмпляр микрофона</span>
<span class="keyword" style="color: blue;">var</span> _microphone:Microphone = Microphone.getMicrophone(-<span class="number" style="color: green;">1</span>);
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Вешаем обработчик события </span>
_microphone.addEventListener(SampleDataEvent.SAMPLE_DATA, onMicrophoneSampleData, <span class="keyword" style="color: blue;">false</span>, <span class="number" style="color: green;">0</span>, <span class="keyword" style="color: blue;">true</span>);
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Обработчик обновления данных в микрофоне</span>
function onMicrophoneSampleData (e:SampleDataEvent):<span class="keyword" style="color: blue;">void</span>
{
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Добавляем полученные данные в биннарный массив</span>
_samples_arr.writeBytes(e.data);
}</pre>
</div>
<div>
<br /></div>
<div>
Для начала выполним преобразование в .<a href="http://ru.wikipedia.org/wiki/WAV" rel="nofollow">wav-формат</a>.</div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">WAVWriter</span></div>
<div>
<br /></div>
<div>
Специально для этого в <a href="http://www.adobe.com/" rel="nofollow">Adobe</a> написали класс <a href="http://code.google.com/p/ghostcat/source/browse/trunk/ghostcatfp10/src/ghostcat/media/WAVWriter.as?r=424" rel="nofollow">WAVWriter.as</a>. Останавливаться на нём не будем, потому что он довольно простой в использовании:</div>
<div>
<div style="-webkit-text-size-adjust: none; background-color: white; box-sizing: border-box; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: monospace, Courier !important; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Объявляем бинарный массив для данных .wav-файла</span>
<span class="keyword" style="color: blue;">var</span> wav_file:ByteArray = <span class="keyword" style="color: blue;">new</span> ByteArray();
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Объявляем и настроиваем энкондер</span>
<span class="keyword" style="color: blue;">var</span> writer:WAVWriter = <span class="keyword" style="color: blue;">new</span> WAVWriter();
writer.numOfChannels = <span class="number" style="color: green;">1</span>;
writer.sampleBitRate = <span class="number" style="color: green;">16</span>;
writer.samplingRate = <span class="number" style="color: green;">44100</span>;
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Декодируем данные с микрофона в wav-формат</span>
writer.processSamples(wav_file, _samples_arr, <span class="number" style="color: green;">44100</span>, <span class="number" style="color: green;">1</span>);</pre>
</div>
</div>
<div>
<br /></div>
<div>
Теперь, фактически получив бинарные данные аудио-файла в .<b>wav</b>-формате, казалось бы мы выполнили задачу и остается только сохранить их в файл. </div>
<div>
<br /></div>
<div>
Но мы пойдем дальше. И рассмотрим преобразование наших данных в .<b>mp3</b>-формат. Да, такое уже возможно и реализовано. Говорим спасибо <a href="http://kikko.fr/home" rel="nofollow">Cyril Diagn</a> за его работу в этом направлении, а именно проект <a href="http://code.google.com/p/flash-kikko/" rel="nofollow">Shine MP3 Encoder on Alchemy</a>.</div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Shine MP3 Encoder on Alchemy</span></div>
<div>
<br /></div>
<div>
Это .swc-библиотека с классом <b>ShineMP3Encoder</b> для преобразования данных из .<b>wav</b>-формата в .<b>mp3</b>. Код портирован с помощью <a href="http://www.google.ru/url?sa=t&rct=j&q=alchemy&source=web&cd=4&ved=0CFgQFjAD&url=http%3A%2F%2Flabs.adobe.com%2Ftechnologies%2Falchemy%2F&ei=AXLeTt-CKcuM4gSzo5TeBg&usg=AFQjCNElkCfGmAo3_dFG9qWcp0XLMw0rjw&sig2=R5wN3gttQe2FcxM-ARPreg" rel="nofollow">Alchemy</a> из энкодера написанного на С, автором которого является <a href="http://gabriel.mp3-tech.org/" rel="nofollow">Gabriel Bouvigne</a>.</div>
<div>
<br /></div>
<div>
Пример использования:</div>
<div>
<div style="-webkit-text-size-adjust: none; background-color: white; box-sizing: border-box; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: monospace, Courier !important; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Обнуляем позицию в массиве .wav-файла</span>
wav_file.position = <span class="number" style="color: green;">0</span>;
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Объявляем mp3-энкодер</span>
<span class="keyword" style="color: blue;">var</span> _mp3_encoder:ShineMP3Encoder = <span class="keyword" style="color: blue;">new</span> ShineMP3Encoder(wav_file);
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Вешаем обработчики событий</span>
_mp3_encoder.addEventListener(Event.COMPLETE, onMP3EncoderComplete, <span class="keyword" style="color: blue;">false</span>, <span class="number" style="color: green;">0</span>, <span class="keyword" style="color: blue;">true</span>);
_mp3_encoder.addEventListener(ProgressEvent.PROGRESS, onMP3EncoderProcess, <span class="keyword" style="color: blue;">false</span>, <span class="number" style="color: green;">0</span>, <span class="keyword" style="color: blue;">true</span>);
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Начинаем кодирование</span>
_mp3_encoder.start();
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Обработчик процесса кодирования</span>
function onMP3EncoderProcess (e:ProgressEvent):<span class="keyword" style="color: blue;">void</span>
{
trace(<span class="string" style="color: teal;">"Encoding to mp3 ... "</span> + Math.ceil(e.bytesLoaded * <span class="number" style="color: green;">100</span> / e.bytesTotal) + <span class="string" style="color: teal;">"%"</span>);
}
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Обработчик завершения кодирования</span>
function onMP3EncoderComplete (e:Event):<span class="keyword" style="color: blue;">void</span>
{
trace(<span class="string" style="color: teal;">"Encoding to mp3 complete!"</span>)
}</pre>
</div>
</div>
<div>
<br /></div>
<div>
Теперь, после преобразования мы можем сохранить .<b>mp3</b>-файл штатными средствами энкодера. Для этого имеется метод <b>saveAs()</b></div>
<div>
<div style="-webkit-text-size-adjust: none; background-color: white; box-sizing: border-box; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: monospace, Courier !important; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">_mp3_encoder.saveAs(<span class="string" style="color: teal;">'record.mp3'</span>);</pre>
</div>
</div>
<div>
<br /></div>
<div>
Если же есть необходимость отправить полученный .<b>mp3</b>-файл на сервер, мы можем сделать это самостоятельно, получив его данные во свойстве <b>mp3Data</b>.</div>
<div>
<div style="-webkit-text-size-adjust: none; background-color: white; box-sizing: border-box; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: monospace, Courier !important; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var mp3_file:ByteArray = _mp3_encoder.mp3Data;</pre>
</div>
</div>
<div>
<br /></div>
<div>
Ну и как обычно, простейший пример всего вышеописанного:</div>
<div>
<br /></div>
<div>
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,1,0,0" height="140" id="main" width="300"> <param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="https://sites.google.com/site/as3coder/files/MicrophoneSaver.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#F0F0F0" />
<embed src="https://sites.google.com/site/as3coder/files/MicrophoneSaver.swf" quality="high" bgcolor="#F0F0F0" width="300" height="140" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object></div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Ссылки по теме:</span></div>
<ul style="text-align: left;">
<li><a href="http://help.adobe.com/ru_RU/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d1d.html#WS184831AF-B842-4d52-BFB9-D7601F4A9E21" rel="nofollow">Захват аудиоданных с микрофона</a></li>
<li><a href="http://code.google.com/p/flash-kikko/" rel="nofollow">Shine MP3 Encoder on Alchemy</a></li>
<li><a href="http://www.riagora.com/2010/08/air-android-and-the-microphone/" rel="nofollow">AIR, Android and the microphone</a></li>
</ul>
<div>
</div>
</div>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com9tag:blogger.com,1999:blog-6470399064206765359.post-24294325813412282022011-10-25T23:12:00.001+04:002014-10-28T11:11:09.757+03:00Доверенные .swf-файлы<div dir="ltr" style="text-align: left;" trbidi="on">
С недавнего времени в контекстном меню <b>FlashPlayer</b>'a появился новый пункт "Глобальные настройки". А именно с версии 10.3.<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/-bTljFJxWKCg/TsvefrkKLYI/AAAAAAAAAdI/cZit9arcQuo/s1600/Image+1.png" />
<br />
<br />
Если с "Хранилищем", "Камерой и микрофоном" и "Воспроизведением" всё понятно (они итак были доступны в пункте "Параметры..."), то вот во вкладке "<b>Дополнительно</b>" появились доколе неизвестные настройки.<br />
<br />
Подробнее я хочу остановить на "<b>Настройках доверенной папки</b>..."<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/-a9-1KhA66v4/Tsvjv5tfHkI/AAAAAAAAAdQ/s48IRTRyDPI/s1600/Image+2.png" />
<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что за доверенная папка?</span><br />
<br />
На самом деле слово "папки" немного вводит в заблуждение. Естественно здесь указываются .<b>swf</b>-файлы, которым пользователь явно доверяет. А именно:<br />
<ul style="text-align: left;">
<li>домен, с которого загружаются .<b>swf</b>-файлы,</li>
<li>путь к локальному .<b>swf</b>-файлу на компьютере пользователя,</li>
<li>путь к локальному каталогу, в котором содержаться .<b>swf</b>-файлы</li>
</ul>
<div>
<span class="Apple-style-span" style="font-size: x-large;">И что же мы доверяем (разрешаем) указанным файлам?</span><br />
<br />
С версии 10.1 локально запущенным .<b>swf</b>-файлам запрещается загружать данные из сети и из локального диска пользователя. Так вот указав, что этот .<b>swf</b>-доверенный ему разрешается делать эти запросы.<br />
<br />
Сделано это для того, чтобы на этапе разработки было не обязательным постоянно выкладывать приложение на сервер.<br />
<br />
Для чего указывается домен и что мы ему доверяем, я так и не разобрался. В <a href="http://help.adobe.com/ru_RU/FlashPlayer/LSM/WS6aa5ec234ff3f285139dc56112e3786b68c-7ff0.html#WS6aa5ec234ff3f285139dc56112e3786b68c-7feb" rel="nofollow">cправке</a> тоже ничего по поводу доменов. Может разрешаем локальным .<b>swf</b>-файлам загружать данные с этого домена? Не знаю. Не проверял. Может быть вы знаете?<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/-e-Dzn7JnOgA/Tsvj6Z6lfrI/AAAAAAAAAdY/S67dkqI4kcg/s1600/Image+3.png" />
</div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">К чему я завел этот разговор?</span></div>
<div>
<br /></div>
<div>
Недавно пришлось вернуться к одному старому проекту. Проект представляет собой простую презентацию с видео и небольшим каталогом. И вот тут, я столкнулся с тем, что главный .<b>swf</b>-файл зашитый в .exe-файл <b>FlashPlayer</b>'a не может подгрузить данные с каталога, который лежит рядом. Получаю сообщение с ошибкой о нарушении политики безопасности. Удивление конечно было огромным, когда я узнал, что в новых версиях плеера этого делать нельзя.<br />
<br />
Чтож? Пришлось разбираться...<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Как лечиться?</span></div>
<div>
<br />
Ну во-первых, указать доверенный .<b>swf</b>-файл может сам пользователь в соотвествующем окне, о котором я говорил выше.<br />
<br />
Во-вторых, можно сделать это за пользователя (естественно с помощью каких-то оберток или стартеров). Для этого в системе (в качестве примера возьму Windows 7, об остальных операционных системах информацию можно найти в <a href="http://help.adobe.com/ru_RU/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e3f.html#WS5b3ccc516d4fbf351e63e3d118a9b90204-7c8d">справке</a>) имеются каталоги, в которых хранятся .<b>cfg</b>-файлы конфигурации безопасности <b>FlashPlayer</b>'a. Таких каталогов два:<br />
<br />
1. Для всех учетных записей системы.<br />
<br />
<i>C:\WINDOWS\system32\Macromed\Flash\FlashPlayerTrust</i><br />
<br />
2. Для конкретного пользователя.<br />
<br />
<i>C:\Users\JohnD\AppData\Roaming\Macromedia\Flash Player\#Security\FlashPlayerTrust</i><br />
<br />
В эти каталоги можно добавлять свои .<b>cfg</b>-файлы с любым именем. Простой текстовый файл, где каждая строчка - это путь до доверенных .<b>swf</b>-файла или папки.<br />
<br />
Все современные среды разработки создают свои .<b>cfg</b>-файлы и при создании проекта дописывают в него в качестве доверенной папки папку нового проекта. Именно поэтому многие не заметили этого нововведения. Например <a href="http://www.google.ru/url?sa=t&rct=j&q=flashdevelop&source=web&cd=1&ved=0CC0QFjAA&url=http%3A%2F%2Fwww.flashdevelop.org%2F&ei=g9jLTonDLKOJ4gT5pNkX&usg=AFQjCNHKKRsR8VDMmQ-zaJcSCuwLTK6LgA&sig2=mLpunex6WtMluih7WxHmqg">FlashDevelop</a> создает вот этот файл:<br />
<br />
<i>C:\Users\AS3Coder\AppData\Roaming\Macromedia\Flash Player\#Security\FlashPlayerTrust\FlashDevelop.cfg</i><br />
<br />
А для профилактики подобных ситуаций автор кода может узнать каким образом запущен .<b>swf</b>-файл. Для этого существует свойство <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/system/Security.html#sandboxType">Security.sandboxType</a><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Итого</span><br />
<br />
<a href="http://www.adobe.com/">Adobe</a> окончательно уводит<b> FlashPlayer</b> с локального использования в веб. Не пишите больше локальных приложений для него, без оберток, таких как <a href="http://www.multidmedia.com/software/zinc/">Zinc</a> или <a href="http://www.google.ru/url?sa=t&rct=j&q=air&source=web&cd=1&ved=0CDIQFjAA&url=http%3A%2F%2Fwww.adobe.com%2Fru%2Fproducts%2Fair.html&ei=ENvLToqmDaX44QSlrtE4&usg=AFQjCNE1H_0Q4bZPkt_1Fde1Pa_cLvJYkQ&sig2=vIDWAyYU5VqhbYSK1hzyDg">AIR</a>.</div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Ссылки по теме:</span><br />
<ul style="text-align: left;">
<li><a href="http://www.macromedia.com/support/documentation/ru/flashplayer/help/settings_manager.html">Онлайн менеджер настроек</a></li>
<li><a href="http://help.adobe.com/ru_RU/FlashPlayer/LSM/WS6aa5ec234ff3f285139dc56112e3786b68c-8000.html">Справка по менеджеру настроек</a></li>
<li><a href="http://www.adobe.com/devnet/flashplayer/security.html">Список всех обновлений политики безопасности FlashPlayer</a></li>
<li><a href="http://help.adobe.com/ru_RU/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d23.html">Безопасность проигрывателя Flash Player</a></li>
</ul>
</div>
<div>
</div>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com3tag:blogger.com,1999:blog-6470399064206765359.post-1866251389959225072011-01-25T13:05:00.002+03:002014-10-28T11:10:53.323+03:00Политика безопасности во Flash Player. Наиболее частные столкновения.<div dir="ltr" style="text-align: left;" trbidi="on">Часто вы сталкивались с ситуацией, когда ваш код не работает по непонятным причинам? Вам кажется, что всё уже проверено сотни раз и вы с уверенностью говорите себе, что здесь нет ошибок, и уже готовы биться головой о клавиатуру :) Спешу вас утешить, скорее всего ошибка не в коде.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">В чем же дело?</span><br />
<br />
А дело может быть в том, что вы нарушаете политику безопасности <b>Flash Player</b>, сами того не зная. Иногда <b>Flash Player</b> просто промолчит об этом :)<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Как это предупредить?</span><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Если что-то не работает, а по логике должно - идите в <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html" rel="nofollow">справку</a>. Там кроются все ответы на ваши вопросы. Вообще справка должна быть неотъемлемым инструментом разработчика.</div><br />
В этом посте я хочу рассказать о наиболее частых нарушениях политики безопасности, с которыми мы сталкиваемся.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Загрузка контента с доменов отличных, о того с которого запущена страница с .swf-файлом</span><br />
<br />
<b>*.load();</b><br />
<br />
Практически на весь загружаемый контент с других доменом и даже поддоменов накладываются ограничения на загрузку, отображение или исполнения сценариев (если вы загружаете исполняемый .swf-файл). Например, .swf-файл не выполнит свой сценарий, если вы загрузили его без разрешения.<br />
<br />
<b>BitmapData.draw();</b><br />
<br />
Метод не отрисует дисплей объект, если в нем есть загруженный контент с другого домена без разрешения. Это касается дочерних элементов класса <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html" rel="nofollow">Loader</a>, и даже <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html" rel="nofollow">TextField</a>, если в нем есть картинки вставленные посредством HTML-разметки.<br />
<br />
<blockquote>Возможно эти ограничения действуют и в других методах, с которыми я не сталкивался. Так что если, что-то упустил - добавляйте в комментариях.</blockquote><br />
<b>Как получить разрешение?</b><br />
<br />
Домен, с которого вы грузите контент, должен разрешить вам использовать его. Делается это двумя способами в зависимости от типа загружаемого контента.<br />
<br />
<b>1. checkPolicyFile</b><br />
<br />
Это файл, где перечислены домены, которым разрешено использовать контент. Называться такой файл должен <b>сrossdomain.xml</b> и лежать в корне сайта. Содержимое должно выглядеть следующим образом:<br />
<br />
<div style="border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 800px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="background-color: #fbf9f5;"><?xml version="1.0"?><br />
<cross-domain-policy><br />
<allow-access-from domain="</span><span class="Apple-style-span" style="background-color: yellow;">yoursite.com</span><span class="Apple-style-span" style="background-color: #fbf9f5;">"/><br />
</cross-domain-policy></span></span></div><br />
Когда .swf-файл, запущенный с вашего домена, пытается выполнить запросы на другой домен, <b>Flash Player</b> делает автоматически делает запрос на <b>сrossdomain.xml</b> расположенный на другом домене. Если в нем указано разрешение для вашего домена, то <b>Flash Player</b> разрешит в полной мере выполнять запросы.<br />
<br />
<b>2. Security.allowDomain() или Security.allowInsecureDomain()</b><br />
<br />
Этот способ предусмотрен для исполняемых .swf-файлов. Если <b>Flash Player</b> встретит в сценарии метод <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/system/Security.html#allowDomain()" rel="nofollow">Security.allowDomain()</a> или <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/system/Security.html#allowInsecureDomain()" rel="nofollow">Security.allowInsecureDomain()</a> (для https-протокола) с параметром равным доменному имени вашего сайта, то он разрешает исполнение сценариев на вашем сайте.<br />
<br />
<div style="border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 800px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="background-color: #fbf9f5;">System.allowDomain("</span><span class="Apple-style-span" style="background-color: yellow;">yoursite.com</span><span class="Apple-style-span" style="background-color: #fbf9f5;">");</span></span></div><br />
<span class="Apple-style-span" style="font-size: x-large;">Взаимодействие с клиентским окружением</span><br />
<br />
Еще одной из частых и самых болезненых, является ситуация когда не выполняются методы никак не связанные с сетью. Болезнь заключается в том, что <b>Flash Player</b>, просто молчит о нарушениях. Приведу список наиболее частых методов, в которых мы сталкиваемся с этим.<br />
<br />
<span class="Apple-style-span" style="font-family: inherit;"><b>FileReference.browse();</b></span><br />
<br />
Метод не выполнится, если внутри .swf-файла не было события нажатия клавиши мыши.<br />
<br />
<b>SharedObject.flush();</b><br />
<br />
Метод не выполнится если размер .swf-файла встроенного на страницу меньше окна с параметрами <b>Flash Player</b>'a (215 x 128).<br />
<br />
<b>LocalConnection.send();</b><br />
<br />
Метод не выполнится если вкладка со страницей, на которой запущен .swf-файл, неактивна.<br />
<br />
<b>Stage.displayState = StageDisplayState.FULL_SCREEN;</b><br />
<br />
Метод не выполнится, если внутри .swf-файла не было события нажатия мыши.<br />
<b><br />
</b><br />
<b>...</b><br />
<br />
Если вы сталкивались еще с чем-то подобным, пишите в комментарии я дополню этот список.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Доступ к HTML-окружению на странице</span><br />
<br />
.swf-файл загруженный с другого домена (даже с разрешением) не имеет доступ к HTML-окружению на вашей странице. Для этого ему нужно разрешение. Только на этот раз, вы выдаете его сами.<br />
<br />
При вставке .swf-файла на страницу необходимо указать параметр <span class="Apple-style-span" style="font-family: inherit;"><b>AllowScriptAccess</b> </span>с соответствующим параметром:<br />
<ul style="text-align: left;"><li><b><span class="Apple-style-span" style="font-family: inherit;">always </span></b>- Разрешает доступ всем .swf-файлам</li>
<li><b><span class="Apple-style-span" style="font-family: inherit;">sameDomain </span></b>- Разрешает доступ .swf-файлами, загруженным с того же домена, что и страница</li>
<li><b><span class="Apple-style-span" style="font-family: inherit;">never </span></b>- Запрещает доступ всем .swf-файлам</li>
</ul><div style="border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: 800px;"><span class="Apple-style-span" style="font-family: 'Courier New', Courier, monospace;"><span class="Apple-style-span" style="background-color: #fbf9f5;"><embed </span><span class="Apple-style-span" style="background-color: yellow;">AllowScriptAccess="always"</span><span class="Apple-style-span" style="background-color: #fbf9f5;"> height="100" src="http://www.foreigndomain.com/example.swf" type="application/x-shockwave-flash" width="100"></embed></span></span></div><br />
<blockquote><b>Внимание:</b> Учтите, когда вы открываете доступ к HTML-окружению .swf-файлам с неизвестных вам доменов, вы подвергаете всю безопасность на вашей страницы.</blockquote><br />
<span class="Apple-style-span" style="font-size: x-large;">Дополнительный материал для изучения</span><br />
<br />
Для более детального ознакомления со всеми правилами безопасности <b>Flash Player</b>, вы можете заглянуть официальную справку на русском языке в раздел "<a href="http://help.adobe.com/ru_RU/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d23.html" rel="nofollow">Безопасность проигрывателя Flash Player</a>".<br />
<br />
Также смотрите <a href="http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf?version=1" rel="nofollow">спецификацию</a> по файлу <b>crossdomain.xml</b><br />
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com4tag:blogger.com,1999:blog-6470399064206765359.post-24937345242291347712010-11-28T15:44:00.003+03:002014-10-28T11:10:10.520+03:00Поездка в Челябинск на RAFPUGРовно неделю назад я со своим коллегой Виталием приехали с <b>Челябинска</b>, куда ездил на очередной <a href="http://iheroes.ru/rafpug/che_november_2010/" rel="nofollow">RAFPUG</a> проводимый компанией <a href="http://iheroes.ru/" rel="nofollow">iHeroes</a>. Написать отчет о поездке сразу не получилось, как всегда было много работы. И сегодня таки появилось несколько свободных минут.<br />
<br />
<blockquote>Прямых поездов или самолетов на 19-20 ноября из Казани в Челябинск не оказалось. Решено было ехать на машине. 1000 км туда - 1000 км обратно. Поэтому поездку можно даже назвать маленьким путешествием :)</blockquote><br />
Приехали мы в Челябинск с опозданием, минут на 40 и все-таки успели на первый доклад.<br />
<br />
Первым выступал <b>Роман Куликов</b>, он представлял своё издательство <a href="http://i-jet.ru/" rel="nofollow">i-Jet Media</a>.<br />
<br />
<img border="0" height="265" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TPM5yV5r3CI/AAAAAAAAAY0/HpZiQmX5uqg/s400/IMG_8081.jpg" width="400" /><br />
<br />
Доклад получился очень насыщенным и интересным. Например было интересно узнать, что:<br />
<div class="MsoNormal"><ul><li><span class="Apple-style-span" style="font-family: Calibri,sans-serif; font-size: 15px; line-height: 17px;">«</span><a href="http://i-jet.ru/otdih/_12" rel="nofollow">Счастливый фермер</a><span class="Apple-style-span" style="font-family: Calibri,sans-serif; font-size: 15px; line-height: 17px;">»</span> заработал за 2009 год 20 000 000 долларов.</li>
<li>Cредняя продолжительность игрового проекта в социальных сетях - это около 6 месяцев.</li>
<li>Азиаты - одни из самых платежеспособных наций.</li>
<li>И многое другое...</li>
</ul><div>Следующим выступал <b>Илья Алябушев</b> из компании <a href="http://flexis.ru/" rel="nofollow">Flexis</a>.<br />
<br />
<img border="0" height="266" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TPM6Pin744I/AAAAAAAAAY4/0djbWbf7LEk/s400/IMG_8162.jpg" width="400" /><br />
<br />
</div><div></div><div>Его доклад был посвящен методу организации работы с помощью технологии <a href="http://ru.wikipedia.org/wiki/Scrum" rel="nofollow">Scrum</a>. Доклад получился больше технический, с кучей новых терминов и непонятных слов :) Тем не менее у Ильи получилось в общих чертах истолковать идею <b>Scrum</b>, за что ему огромное спасибо. </div><div><br />
</div>Следующей темой собрания была «<b>Инди-разработка</b>». Ею с нами поделился <b>Алексей Давыдов</b> из компании <a href="http://flazm.com/" rel="nofollow">Flazm</a>.<br />
<br />
<img border="0" height="266" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TPM64qcTMEI/AAAAAAAAAY8/MwyyP4uSVI4/s400/IMG_8170.jpg" width="400" /><br />
<br />
Он повествовал, что же это такое «<b>инди</b>». Немного запутал конечно, но суть ясна: "Инди-разработчик - это тот, который работает только на себя" :) Рассказал о плюсах и минусах этого направления. В общем было что послушать.<br />
<br />
Следующей вышла <b>Анна Сенина</b>, организатор встречи и представитель компании <a href="http://iheroes.ru/" rel="nofollow">iHeroes</a>.<br />
<br />
<img border="0" height="266" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TPM7K2BO3tI/AAAAAAAAAZA/LBVLqTR_KOg/s400/IMG_8217.jpg" width="400" /><br />
<br />
Анна рассказала о том:<br />
<ul><li>что такое <a href="http://aqua3d.ru/" rel="nofollow">Аква3D</a>, над которым они работают уже около года, </li>
<li>как устроена организация работы в их команде, </li>
<li>как они используют для этого <b>Scrum</b>, о котором рассказывал <b>Илья Алябушев.</b></li>
</ul><div>Ну и самый ожидаемый доклад <b>Антона Волкова </b>- отца 3D-движка <a href="http://alternativaplatform.com/ru/alternativa3d/" rel="nofollow">Alternativa3D</a>.<br />
<br />
<img border="0" height="266" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TPM7m20-3xI/AAAAAAAAAZE/sF1WZZXO5LA/s400/IMG_8286.jpg" width="400" /></div><div><br />
</div><blockquote><div>Лет пять назад, изучая Flash мне часто попадались его исходники, и именно его доклад вызывал у меня больший интерес. Мне хотелось увидеть его живьем :) Кстати когда я зашел в зал из <a href="http://alternativaplatform.com/ru/" rel="nofollow">AlternativaPlatform</a> я узнал только <b>Александра Карповича</b>, и в какой-то момент даже испугался что Волкова сегодня не будет. Но мои сомнения развеялись, чуть позже Антон приехал вместе с <b>Владимиром Бабушкиным</b>.</div></blockquote><div><br />
</div><div>Доклад Антона получился конкретно по делу, ничего лишнего. Он рассказал о том как становилась компания <a href="http://alternativaplatform.com/ru/" rel="nofollow">AlternativaPlatform</a>, как развивалось <b>3D </b>во <b>FlashPlayer</b>, как они попали на <a href="http://max.adobe.com/" rel="nofollow">Adobe Max</a>, какое они имеют отношению к новому плееру под кодовым именем "<a href="http://labs.adobe.com/technologies/flash/molehill/" rel="nofollow">Molehill</a>", как придется работать с 3D API во нем, когда он будет доступен в релизе. Показал готовые демки на новом плеере, а также повествовал о планах компании. В общем рассказал всё, что было интересно публике.</div><div><br />
</div><div>Из его доклада я выдели две важные вещи:</div><div><ul><li>Ожидать новый плеер в <b>бете </b>можно <b>весной 2011 года</b>, в <b>релизе </b>- не раньше <b>лета 2012</b>.</li>
<li>Сейчас можно без опасений на будущее использовать 7 версию движка, т.к. <b>AlternativaPlatform </b>обещают безболезненный переход на 8 версию.</li>
</ul></div><div>После доклада Антона, нам пришлось уехать чтобы успеть на ночлег в Уфе. И мы пропустили доклад <b>Владимира Бабушкина</b> с <b>Евгением Сушковым</b> и блиц-доклад <b>Максима Фирсова</b>, а также выпивания в ближайшем кафе, о чем сильно жалеем :(</div><div><br />
</div><div><blockquote>Кстати еще больше мы пожалели об этом, когда выехали из Челябинска и уже спустя час на трассе началась настоящая пурга. Дорога превратилась каток, дальше пяти метров ничего не видно. Плюс сотрудники гибдд перекрывают трассу, до приезда дорожных служб. В какой-то момент даже приходила мысль переночевать в машине на обочине. Но спустя пару часов, мы дождались дорожную службу, которая полила дорогу специальным составом и легковые машины пустили. Так при скорости 30-60 км./ч. часов за шесть часов мы все-таки добрались до окрестностей Уфы. Переночевали, и снова в дорогу :) Вечером были в Казани.</blockquote><br />
Также смотрите <a href="http://rafpug.groups.adobe.com/index.cfm?event=post.display&postid=32629" rel="nofollow">отчет</a> и <a href="http://iheroes.ru/rafpug/che_november_2010/RAFPUG_800.rar" rel="nofollow">фотки</a> от <b>Анны Сениной</b>. Организаторам встречи огромное спасибо :)<br />
</div></div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com3tag:blogger.com,1999:blog-6470399064206765359.post-41652429899670029962010-10-24T14:04:00.001+04:002014-10-28T11:08:57.853+03:00Отладка AS3-приложений с помощью FireFlash<span class="Apple-style-span" style="font-size: x-large;">Что такое FireFlash?</span><br />
<br />
<b>FireFlash</b> - это плагин для <b>FireBug</b>'а, с помощью которого можно легко и удобно отлаживать свои приложения.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что такое FireBug?</span><br />
<br />
<b>FireBug</b> - это расширение для браузера <a href="http://www.mozilla.com/" rel="nofollow">Mozilla Firefox</a>. Используется он для отладки web-приложений и пожалуй является самым сильным инструментом в этой области. Попробовав раз, отказаться от него уже не сможешь :)<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что умеет FireFlash?</span><br />
<br />
<b>FireFlash</b> предоставляет .<b>swf</b>-файлам на странице доступ к консоли <b>FireBug</b>'a. С возможностями добавлять в консоль и окно Output используемого редактора <b>ActionScript 3.0</b> записи разных типов:<br />
<ul><li>Записи журнала</li>
<li>Информационные сообщения</li>
<li>Сообщения об опасности</li>
<li>Деревья объектов</li>
<li>...</li>
</ul><div><span class="Apple-style-span" style="font-size: x-large;">Как установить FireFlash?</span></div><div><br />
</div><div>Первым делом нужно установить <b>Mozilla Firefox</b>, если такого не имеется. Скачать его можно с официального сайта <a href="http://www.mozilla.com/" rel="nofollow">http://www.mozilla.com/</a>.</div><div><br />
</div><div>Во-вторых, нужно поставить плагин <b>FireBug </b>не ниже версии 1.4.5. Установить его можно на соответствующей странице <a href="https://addons.mozilla.org/en-US/firefox/addon/1843/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/1843/</a>. После установки в правом нижнем углу браузера появится соответствующая иконка для открытия окна <b>FireBug</b>'a.</div><div><br />
</div><img border="0" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TMP_YfxfKkI/AAAAAAAAAX4/zUsSbQsJAEE/s1600/firebug.png" /><br />
<div><br />
</div><div>В-третьих нужно поставить сам <b>FireFlash</b>. Сделать это можно также со страницы дополнений к <b>Mozilla Firefox</b> по адресу <a href="https://addons.mozilla.org/en-US/firefox/addon/55979/" rel="nofollow">https://addons.mozilla.org/en-US/firefox/addon/55979/</a>. В правом верхнем углу содержимого <b>FireBug</b>'a вы увидите вот такую иконку.</div><div><br />
</div><img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TMP_fJMAjDI/AAAAAAAAAX8/wvO4SPUpX-A/s1600/fireflash.png" /><br />
<div><br />
</div><div><span class="Apple-style-span" style="font-size: x-large;">Как обращаться к FireFlash из ActionScript 3.0?</span></div><div><br />
</div><div>Для этого имеется библиотека классов <b>com.actionscript_flash_guru.* </b>В ней имеется единственный необходимый нам класс <b>com.actionscript_flash_guru.fireflashlite.Console.as</b>, который содержит в себе различные методы для работы с <b>FireFlash</b>. Скачать архив с библиотекой можно с <a href="http://www.actionscript-flash-guru.com/blog/21-fireflash--firebug-console-for-flash" rel="nofollow">официальной страницы</a>. А также можно подписаться на уведомления об обновлении библиотеки в <a href="http://www.twitter.com/fireflashupdate" rel="nofollow">Twitter</a>.</div><div><br />
</div><div><span class="Apple-style-span" style="font-size: x-large;">А можно по-подробнее?</span></div><div><pre class="code" style="background-color: #fbf9f5; border: 1px solid rgb(179, 179, 179); clear: both; font-family: Courier,monospace ! important; font-size: 12px; margin-top: 6px; overflow: auto; padding: 8px 8px 8px 20px;"><span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Блокирует вывод сообщений в окно Output внутри используемого FrameWork
* Другими словами класс консоли не регистриует свои сообщения при помощи фунции trace();
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.disableIdeTrace</span>()<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит в консоли FireBug'a содержимое объекта в виде дерева,
* а также дублирует его в окне Output
*
* @param Ссылка на объект
* @param Количество вложенностей дерева
* @param Сопутствующее сообщений
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.dir</span>(obj, <span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">3</span>, <span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Custom message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит в консоли FireBug'a содержимое xml-строки,
* а также дублирует его в окне Output
*
* @param Строка xml-узла
* @param Сопутствующее сообщений
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.dirxml</span>(xml, <span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Custom message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит в окно Output сообщение с меткой ошибки,
* ссылкой на класс и метод инициализировавший ошибку
*
* @param Строка с сообщением об ошибке
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.error</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Error message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод созает таймер с заданным идентификатором и начинает отсчет.
* Для того чтобы, остановить таймер необходимо
* использовать метод timeEnd();
*
* @param Идентификатор таймера
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.time</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"your_id"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод останавливает таймер c заданым идентификатором.
* Выводит информационное сообщение в консоль FireBug'a
* с указанием имени .swf-файла, идентикатора таймера и его значения.
* А также дублирует сообщение в окно Output с соответвующей меткой
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.timeEnd</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"your_id"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод проверяет условие, и если оно ложное
* выводит указанное сообщение в окно Output
*
* @param Условие
* @param Сообщение для ложного значения
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.assert</span>(false, <span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Messages for the false values"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит в окно Output сообщение с
* ссылкой на класс и метод инициализировавший вызов
*
* @param Строка с сообщением об ошибке
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.stackTrace</span>()<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит простое сообщение в консоль FireBug'a,
* а также дублирует его в окно Output с соответствующей меткой
*
* @param Текстовое сообщение
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.log</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Simple message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит информационное сообщение в консоль
* FireBug'a с соответствующей иконкой, а также дублирует
* его в окно Output с соответствующей меткой
*
* @param Информационное сообщение
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.info</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Information message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод выводит сообщение об опасности в консоль
* FireBug'a с соответствующей иконкой, а также дублирует
* его в окно Output с соответствующей меткой
*
* @param Cообщение об опасности
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.warn</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Warning message!"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод дублирует поведение метода log();
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.debug</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Simple message"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод добавляет в консоли FireBug'а блок для группы
* с заданным названием, а также дублирует соответсвующую
* запись в окне Output
*
* @param Названия для группы
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.group</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Group name"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод дублирует поведение метода Console.group();
* только блок будет иметь закрытое состояние
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.groupCollapsed</span>(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Group name"</span>)<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
*
*/</span>
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* Метод закрывает блок, открытый ранее
* Используется только после вызова методов
* Console.group(); и Console.groupCollapsed();
*/</span>
<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">C</span>onsole<span class="preprocessor" style="color: #2b91af; font-family: Courier,monospace; font-size: 12px;">.groupEnd</span>()<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">;</span></pre></div><div><br />
</div><div><span class="Apple-style-span" style="font-size: x-large;">А как-же пример?</span></div><div><br />
</div><div>Откройте консоль <b>FireBug</b>'a и понажимайте на кнопки из примера. Вы должны увидеть результат примеров.</div><br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="200" id="FireFlashExample" width="500"> <param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/FireFlashExample.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/FireFlashExample.swf" quality="high" bgcolor="#F0F0F0" width="500" height="200" name="FireFlashExample" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
<br />
<div><span class="Apple-style-span" style="font-size: x-large;">Дополнительно</span></div><div><br />
</div><div>Более подробно ознакомиться с <b>FireFlash </b>можно на его <a href="http://www.actionscript-flash-guru.com/blog/21-fireflash--firebug-console-for-flash" rel="nofollow">официальной странице</a>. </div><div><br />
</div><div>Огромное спасибо за новый инструмент <a href="http://www.actionscript-flash-guru.com/" rel="nofollow">Nicholas Dunbar</a>, надеюсь его работа прижевется в руках разработчиков <b>ActionScript</b>-приложений. А также спасибо <a href="http://flastar.ru/blog/" rel="nofollow">Flastar</a>'у за <a href="http://flastar.ru/blog/flastarposts/505" rel="nofollow">информацию</a> о существовании инструмента.</div><div> </div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com3tag:blogger.com,1999:blog-6470399064206765359.post-13507340939061059882010-10-06T11:49:00.000+04:002014-10-28T11:07:53.183+03:00Проверка орфографии в ActionScript 3.024 сентября 2010 года на сайте <a href="http://labs.adobe.com/" rel="nofollow">лаборатории</a> Adobe обновился проект "<a href="http://labs.adobe.com/technologies/squiggly/" rel="nofollow">Squiggly</a>". Обновили проект до 4-ой пререлизной версии. О нем я услышал впервые, и очень им заинтересовался. Теперь хочу подделиться с вами.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что такое проект "Squiggly"?</span><br />
<br />
Это набор .swc-библиотек для работы с орфографией во <b>Flash</b>, Flex и AIR проектах. Название переводится как "<b>волнистые</b>" с намеком на то, что неправильные слова подчеркиваются именно этой линией.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что он дает?</span><br />
<br />
Возможности анализа текста в <b>ActionScript 3.0</b>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Какие возможности?</span><br />
<br />
Проверка орфографии и правил языка, варианты исправления неправильных слов.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">На чем основан проект?</span><br />
<br />
За основу взят проект "<a href="http://ru.wikipedia.org/wiki/Hunspell" rel="nofollow">Hunspell</a>".<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что это означает?</span><br />
<br />
Это означает, что нам можно использовать уже готовые словари из других программ, основанных на этой же основе. Таких как: <a href="http://ru.openoffice.org/" rel="nofollow">OpenOffice</a>, <a href="http://www.mozilla-russia.org/" rel="nofollow">Mozilla FireFox</a>, <a href="http://www.opera.com/" rel="nofollow">Opera</a> и многих других. Например, словари от Mozill'ы можно найти <a href="https://addons.mozilla.org/ru/firefox/language-tools/" rel="nofollow">здесь</a>. Но прежде чем использовать словари сторонних программ, пожалуйста ознакомьтесь с лицензионными соглашениями.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Как это работает?</span><br />
<br />
Рассмотрим по-подробнее чистый <b>ActionScript 3.0</b> проект. Загружаем <a href="http://labs.adobe.com/downloads/squiggly.html" rel="nofollow">архив</a> с библиотеками. Нам понадобиться только одна из них: <b>AdobeSpellingEngine.swc</b> (Остальные предназначены для Flex-проектов). Подключаем её у нашему проекту.<br />
<br />
Первым делом нужно загрузить словари с орфографией и правилами.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Создаем экземпляр словаря</span>
dictionary = <span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">new</span> HunSpellDictionary();
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Добавляем обработчик события загрузки библиотек</span>
dictionary.addEventListener(Event.COMPLETE, onDictanionaryComplete, <span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">false</span>, <span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">0</span>, <span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">true</span>);
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Грузим библиотеки</span>
dictionary.load(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"dictionaries/en_US/en_US.aff"</span>, <span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"dictionaries/en_US/en_US.dic"</span>);</pre><br />
После того, как словари загружены, в обработчике нужно создать объект который будет проверять орфографию слов.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Метод обрабатывает событие успешной загрузки библиотек для словаря
* Создает экземпляр объекта для проверки слов
*/</span>
<span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">private</span> function onDictanionaryComplete (e:Event):<span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">void</span>
{
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">//</span>
<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Создаем экземпляр объекта для проверки слов, в параметре указываем ссылку на словарь</span>
spell_checker = <span class="keyword" style="color: blue; font-family: Courier, monospace; font-size: 12px;">new</span> SpellChecker(dictionary);
}</pre><br />
Чтобы проверить какое-то слов нужно вызвать у проверяющего объекта метод <b>checkWord();</b><br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">spell_checker<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.checkWord</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"heloo"</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre><br />
Чтобы получить список возможных исправлений для слова имеется метод <b>getSuggestions();</b><br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">spell_checker<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.getSuggestions</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"heloo"</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre><br />
<span class="Apple-style-span" style="font-size: x-large;">А как проверить содержимое текстового поля и подчеркнуть неправильные слова?</span><br />
<br />
Алгоритм примерно такой:<br />
<ol><li>Разбиваем строку содержимого на список слов (В элементах списка нужно иметь значение слова, индекс первого символа и последнего).</li>
<li>В цикле пробежаться по списку.</li>
<li>Определить ошибочное слово.</li>
<li>Зная индексы крайних символов с помощью метода <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/text/TextField.html#getCharBoundaries()" rel="nofollow">TextField.getCharBoundaries()</a> вычислить координаты слова</li>
<li>Наложить на текстовое поле новый слой, в котором нарисовать волниcтые линии.</li>
</ol><br />
<span class="Apple-style-span" style="font-size: x-large;">А пример?</span><br />
<br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="100" id="main" width="400"> <param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/MyFirstSquigglyProject.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/MyFirstSquigglyProject.swf" quality="high" bgcolor="#F0F0F0" width="400" height="100" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Дополнительная информация</span><br />
<ul><li><a href="http://labs.adobe.com/technologies/squiggly/releasenotes.html" rel="nofollow">Squiggly Release Notes</a></li>
<li><a href="http://labs.adobe.com/technologies/squiggly/demo/#" rel="nofollow">Try the online demo to become familiar with the functionality provided by Squiggly</a></li>
</ul>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com5tag:blogger.com,1999:blog-6470399064206765359.post-26618768727021084552010-09-17T11:58:00.000+04:002014-10-30T11:00:59.743+03:00Разработка приложений для iPhone на ActionScript 3.0 во FlashDevelop (Packager for iPhone)<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-size: x-large;">Немного истории</span><br />
<br />
За несколько дней до выхода последней на текущий момент среды разработки <b>Flash</b>-приложений <a href="http://www.adobe.com/products/flash/" rel="nofollow">Adobe Flash CS5</a>, компания <a href="http://www.apple.com/ru/" rel="nofollow">Apple</a> выпустила запрет на разработку приложений для телефонов <a href="http://www.apple.com/ru/iphone/" rel="nofollow">iPhone</a>, используя сторонние технологии. А это означало то, что самая ожидаемая возможность новой платформы - портирование <b>Flash</b>-приложений на iOS (операционная система телефонов <b>iPhone </b>и планшетов <a href="http://www.apple.com/ru/ipad/" rel="nofollow">iPad</a>) использоваться не может. Для сообщества Flash-разработчиков это было настоящим ударом. Вокруг того события было много <a href="http://www.google.ru/search?sourceid=chrome&ie=UTF-8&q=flash+cs5+iphone#sclient=psy&hl=ru&lr=lang_ru&newwindow=1&tbs=lr%3Alang_1ru&q=apple+vs+adobe&aq=0&aqi=g2&aql=&oq=apple+vs+ad&gs_rfai=&pbx=1&fp=5f8ab8df7d87d59a" rel="nofollow">шума</a> и обсуждений...<br />
<br />
<a href="http://www.adobe.com/" rel="nofollow">Adobe</a> ничего не оставалось и пришлось смириться с этим. Они заявили, что прекращают все инвестиции в разработку <a href="http://labs.adobe.com/technologies/packagerforiphone/" rel="nofollow">Packager for iPhone</a> и сконцентрируют своё внимание на мобильной платформе <a href="http://www.android.com/" rel="nofollow">Android</a>. Кстати у них это неплохо получилось: <a href="http://labs.adobe.com/technologies/air2/android/" rel="nofollow">AIR</a> и <a href="http://kb2.adobe.com/cps/860/cpsid_86018.html" rel="nofollow">FlashPlayer</a> уже есть на Android.<br />
<br />
9 сентября 2010 года компания Apple <a href="http://www.apple.com/pr/library/2010/09/09statement.html" rel="nofollow">заявляет</a> об отмене ограничений на разработку приложений для iOS используя сторонние технологии. Для разработчиков <b>Flash</b>-платформы это стало радостной новостью. Adobe видимо тоже это обрадовало, и на забытой странице <a href="http://labs.adobe.com/technologies/packagerforiphone/" rel="nofollow">Packager for iPhone</a> появилось специальное сообщение от 9 сентября о том, что Adobe возобнавляет работы над проектом <b>Packager for iPhone</b>. Я попробовал перевести его:<br />
<span class="Apple-style-span" style="font-family: Tahoma,Helvetica,sans-serif; font-size: 12px;"></span><br />
<div class="quote" style="border: 1px dashed rgb(204, 204, 204); margin: 10px; padding: 10px;">
<span class="Apple-style-span" style="font-family: Georgia,'Times New Roman',serif;"><span class="Apple-style-span" style="font-size: small;">Недавнее заявление Apple о том, что он снял ограничения на принципы разработки третьими сторонами имеет прямые последствия для Packager для iPhone. Функция доступна для использования разработчиками уже сегодня и сейчас мы возобновим работу по развитию этой функции в будущих выпусках. Это отличная новость для разработчиков, и мы слышим от них, что новые приложения AIR для устройств iOS уже утверждены на Apple App Store. Мы хотим отметить, что ограничения на работу Flash содержимого в браузерах iOS устройств остается в силе.</span></span></div>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<div>
<div>
<span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: x-large;">Packager for iPhone</span></div>
<br />
Из названия видно, что это упаковщик. Что же именно он упаковывает? А упаковывает он AIR-приложения. Т.е. мы будем разрабатывать AIR-приложения, после чего портировать их в родные для <b>iOS</b> инсталяторы приложения IPA файлы. Естественно нам будут доступны не все возмодности AIR. Именно поэтому <b>Adobe </b>собрал отдельную версию <b>AIR SDK</b> и назвал её «<b>Packager for iPhone»</b>, который также умеет конвертировать приложения AIR в IPA.<br />
<br />
Использование упаковщика доступно нам в двух вариантах:<br />
<ul>
<li>Встроенные функции во <b>Flash CS5</b></li>
<li>Отлельная библиотека <b>AIR SDK</b></li>
</ul>
<div>
В данном посте я хочу показать пример разработки AIR-приложений для <b>iPhone</b>, используя <b>FlashDevelop </b>совместно с <b>AIR SDK</b>. </div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Настроим FlashDevelop</span></div>
<div>
<br /></div>
<div>
О том, что такое <a href="http://www.flashdevelop.org/" rel="nofollow">FlashDevelop</a>, как его установить и настроить, я говорить не буду. Если у вас его еще нету, то смотрите пост "<a href="http://as3coder.blogspot.com/2009/09/flashdevelop.html">FlashDevelop: установка и настройка</a>". Кроме того, во избежания ошибок компилятора, советую обновить Flex SDK до версии 4.0.1. Найти последнюю версию сборки можно на <a href="http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4" rel="nofollow">сайте</a> проекта.</div>
<div>
<br /></div>
<div>
Первым делом нужно скачать <b>Packager for iPhone</b>. <a href="http://labs.adobe.com/downloads/packagerforiphone.html" rel="nofollow">Ссылку </a>можно найти на <a href="http://labs.adobe.com/technologies/packagerforiphone/" rel="nofollow">официальной странице</a> проекта. После загрузки нужно распаковать данный архив в постоянную директорию. Например у меня он лежит по адресу: <i>C:\Program Files\Adobe\Adobe Packager for iPhone</i></div>
<div>
<i><br />
</i></div>
<div>
Теперь открываем FlashDevelop и в Tools > Custom Arguments... заводим новый аргумент с именем <b>PackagerForiPhonePath</b>. В значении указываем выше выбранный путь до библиотеки нашего упаковщика.<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TJMRKWH8z3I/AAAAAAAAAWs/ebw6X6K-Z3Y/s1600/2010-09-16+16+57+16.png" /><br />
<br /></div>
<div>
Загружаем подготовленный мной <a href="https://sites.google.com/site/as3coder/files/410ActionScript3-PackagerforiPhoneProjector.zip?attredirects=0&d=1" rel="nofollow">образ проекта</a>. Кладем его в Tools > Application Data... > Projects. Если всё сделано правильно, должен появиться новый типа проекта "<b>Packager for iPhone Projector</b>"<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TJMRb0JcmKI/AAAAAAAAAW0/IXdhHrZjrbw/s1600/2010-09-16+17+04+46.png" /><br />
<br /></div>
<div>
Это и есть наш проект для разработки AIR-приложений, которые впоследствии можно будет портировать в IPA-файлы. В следующих постах я буду обновлять образ проекта. На данный момент он имеет только те функции, которые необходимы в рамках данного поста.</div>
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Создадим новый проект</span></div>
<div>
<br /></div>
<div>
Идем в Project > New Project, называем наш проект "My first application for iPhone", выбираем тип проекта "<b>Packager for iPhone Projector</b>", жмем "OK". Получаем новый проект.<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TJMRo9K7C_I/AAAAAAAAAW8/3EUb1XDnvBc/s1600/2010-09-16+17+08+10.png" /><br />
<br /></div>
<div>
Сразу пробуем. Нажимаем F5. И видим окно нашего приложения с размерами для iPhone.<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TJMR11I6J8I/AAAAAAAAAXE/iieLoY_q1T4/s320/2010-09-16+17+18+31.png" height="320" width="212" /><br />
<br /></div>
<div>
Здесь мы можем даже проэмулировать поворот девайса. Для этого выбираем Device > Rotate Left или Rotate Right. Окно приложения изменит размеры соотвественно.<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TJMSEQ47-1I/AAAAAAAAAXM/9GXYkvfLw90/s320/2010-09-16+17+19+02.png" height="233" width="320" /><br />
<br /></div>
<div>
Теперь подробнее расмотрим файлы проекта.<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TJMSRufzd_I/AAAAAAAAAXU/dZBdP4R88Fc/s320/2010-09-16+17+42+39.png" /><br />
<br /></div>
<div>
Так как это AIR-приложение мы имеем всё тоже что и в обычном AIR-проекте. Остановимся только на <b>application.xml</b>. Он имеет небольшие дополнения к стандартным дескрипторам.</div>
<pre class="code" style="width: 80px;"><?xml version=<span class="string">'1.0'</span> encoding=<span class="string">'UTF-8'</span>?>
<application xmlns=<span class="string">'http://ns.adobe.com/air/application/2.0'</span>>
<!-- -->
<!-- The application ID uniquely identifies your application.
The recommended form <span class="keyword">is</span> a dot-delimited,
reverse-DNS-style <span class="keyword">string</span>, such <span class="keyword">as</span> <span class="string">'com.company.AppName'</span>.
The compiler uses <span class="keyword">this</span> <span class="keyword">value</span> <span class="keyword">as</span> the bundle ID <span class="keyword">for</span> the iPhone application. -->
<id>TestProject</id>
<!-- -->
<!-- The name used <span class="keyword">for</span> the iPhone installer file.
Do not include a plus sign (+) character <span class="keyword">in</span> the filename. -->
<filename>TestProject</filename>
<!-- -->
<!-- The name of the application displayed <span class="keyword">in</span> the iTunes application and <span class="keyword">in</span> the iPhone.
Do not include a plus sign (+) character <span class="keyword">in</span> the name -->
<name>Test Project</name>
<!-- -->
<!-- Helps users to determine which version of your application they are installing.
The version <span class="keyword">is</span> used <span class="keyword">as</span> the CFBundleVersion of the iPhone application.
It must be <span class="keyword">in</span> a format similar to nnnnn[.nn[.nn]]
<span class="keyword">where</span> n <span class="keyword">is</span> a digit <span class="number">0</span>-<span class="number">9</span> and brackets indicate optional components,
such <span class="keyword">as</span> <span class="number">1</span>, <span class="number">1.0</span>, or <span class="number">1.0</span>.<span class="number">1</span>. iPhone versions must contain only digits and <span class="keyword">decimal</span> points.
iPhone versions can contain up to two <span class="keyword">decimal</span> points. -->
<version><span class="number">1.0</span></version>
<!-- -->
<!-- The element contains the following child elements to specify the properties
<span class="keyword">for</span> of the initial appearance of the application -->
<initialWindow>
<!-- -->
<!-- The rendering mode used by the application. There are three possible settings:
- cpu—The application uses the CPU to render all display objects.
No hardware acceleration <span class="keyword">is</span> used.
- gpu—The application uses the iPhone GPU to composite bitmaps.
- auto—This feature has not been implemented. -->
<renderMode>gpu</renderMode>
<!-- -->
<!-- Identifies the root SWF file to compile <span class="keyword">into</span> the iPhone application -->
<content>TestProject.swf</content>
<!-- -->
<!-- Specifies that the application uses the entire screen of the iPhone -->
<fullScreen><span class="keyword">false</span></fullScreen>
<!-- -->
<!-- Specifies that the initial aspect ratio of the application
<span class="keyword">is</span> <span class="keyword">in</span> portrait mode (rather than landscape).
Note the Default.png file used to define the initial window of the application
should be <span class="number">320</span> pixels wide and <span class="number">480</span> pixels high,
regardless of <span class="keyword">this</span> setting. -->
<aspectRatio>portrait</aspectRatio>
<!-- -->
<!-- Specifies whether the orientation of content <span class="keyword">in</span> the application automatically
reorients <span class="keyword">as</span> the device itself changes physical orientation -->
<autoOrients><span class="keyword">true</span></autoOrients>
</initialWindow>
</application></pre>
<br />
<br />
<div>
На данный момент в нем не полный список дескрипторов, а только необходимый для разработки и отладки.</div>
<div>
<br /></div>
<div>
В следующих версиях образа проекта я буду добавлять их по необходимости. Ну если не втерпеж, полный список можно найти в официальном справочнике "<a href="http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b2-48bca492124b39ac5e2-7ffb.html" rel="nofollow">Setting iPhone application properties in the application descriptor file</a>"</div>
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">Пробуем что-нибудь написать</span><br />
<br />
Я написал вот такой небольшой код:<br />
<div style="background-color: white; font-family: Tahoma,Helvetica,sans-serif; font-size: 12px; margin: 5px; padding: 0px; width: 800px;">
<pre class="code" style="background-color: #fbf9f5; border: 1px solid rgb(179, 179, 179); clear: both; font-family: Courier,monospace ! important; font-size: 12px; margin-top: 6px; overflow: auto; padding: 8px 8px 8px 20px;">package
{
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.display.Stage;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.StageOrientationEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormatAlign;
import flash.text.TextFormat;
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">/**
* ...
* @author AS3Coder
*/</span>
<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">public</span> <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">class</span> Main extends Sprite
{
<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">private</span> <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">var</span> message_txt:TextField;
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
function Main():<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">void</span>
{
addEventListener(Event.ADDED_TO_STAGE, onAddToStage, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>, <span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">0</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">true</span>);
}
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">private</span> function create ():<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">void</span>
{
message_txt = <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">new</span> TextField();
message_txt.autoSize = TextFieldAutoSize.LEFT;
message_txt.defaultTextFormat = <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">new</span> TextFormat(<span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"Tahoma"</span>, <span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">11</span>, <span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">0</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">null</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">null</span>, TextFormatAlign.CENTER);
stage.addChild(message_txt);
stage.dispatchEvent(<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">new</span> StageOrientationEvent(StageOrientationEvent.ORIENTATION_CHANGE));
}
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">private</span> function onAddToStage (e:Event):<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">void</span>
{
removeEventListener(Event.ADDED_TO_STAGE, onAddToStage, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>);
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.addEventListener(StageOrientationEvent.ORIENTATION_CHANGE, onStageOrientationChange, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">false</span>, <span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">0</span>, <span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">true</span>);
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
create();
}
<span class="comment" style="color: grey; cursor: text ! important; font-family: Courier,monospace; font-size: 12px; padding: 0px ! important; text-decoration: none ! important;">//</span>
<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">private</span> function onStageOrientationChange (e:StageOrientationEvent):<span class="keyword" style="color: blue; font-family: Courier,monospace; font-size: 12px;">void</span>
{
message_txt.text = <span class="string" style="color: teal; font-family: Courier,monospace; font-size: 12px;">"My first application for iPhone\nStage orientation: "</span> + stage.orientation;
message_txt.x = stage.stageWidth * .<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">5</span> - message_txt.width * .<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">5</span>;
message_txt.y = stage.stageHeight * .<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">5</span> - message_txt.height * .<span class="number" style="color: green; font-family: Courier,monospace; font-size: 12px;">5</span>;
}
}
}</pre>
</div>
Результат получился такой:<br />
<br />
<a href="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TJMSc_6EBMI/AAAAAAAAAXc/zD2nDKzB5GY/s1600/2010-09-16+18+04+05.png" rel="nofollow"><img border="0" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TJMSc_6EBMI/AAAAAAAAAXc/zD2nDKzB5GY/s320/2010-09-16+18+04+05.png" height="320" width="211" /></a><br />
<br />
Попробуем повернуть:<br />
<br />
<a href="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TJMSulHzbiI/AAAAAAAAAXk/QHaxocwN5xk/s1600/2010-09-16+18+04+43.png" rel="nofollow"><img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TJMSulHzbiI/AAAAAAAAAXk/QHaxocwN5xk/s320/2010-09-16+18+04+43.png" /></a><br />
<br />
Работает :)<br />
<br />
<span class="Apple-style-span">Если вы еще не имели опыт разработки AIR-приложений, то вам сюда "</span><a href="http://as3coder.blogspot.com/2010/04/air-flashdevelop.html">Создание AIR-приложения во FlashDevelop</a><span class="Apple-style-span">".</span></div>
<div>
<br /></div>
<div>
<span class="Apple-style-span" style="font-size: x-large;">Компиляция IPA-файлов</span></div>
<div>
<br /></div>
<div>
Упаковка IPA-файлов - это отдельная задача, которая требует реального устройства и получения сертификатов от Apple. Поэтому я отпущу пока эту тему. Как только у меня будет весь необходимый материал, я обязательно опишу по шагам всё решение этой задачи.</div>
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<div>
<span class="Apple-style-span" style="font-size: x-large;">О чем еще стоит сказать</span></div>
<div>
<br /></div>
<div>
А сказать еще стоит о многом. Так как тема новая и не достаточно изученная, материала много. И рамках одного поста рассказать обо всем не получится. Пока только могу предложить пищу для размышлений, которую мы разберем позже:</div>
<div>
<ul>
<li>Какие классы можно использовать в AIR-приложениях для iPhone, а какие <a href="http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b24b55b57a124b32b5b57-7fff.html" rel="nofollow">нельзя</a></li>
<li><a href="http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b24b55b57a124b32b5b57-7ffe.html" rel="nofollow">Особенности разработки под мобильные устройства и использования</a></li>
</ul>
<div>
В довесок хочу сказать, что Apple также обещала в скором времени выпустить свод правил для приложений, публикуемых в <a href="http://www.apple.com/iphone/apps-for-iphone/" rel="nofollow">App Store</a>. Так что ждем. А пока читаем публикацию Роста на эту тему: «<a href="http://flash-ripper.com/flash-on-ipad-guidelines" rel="nofollow">Flash на iPad и "таблетках": о чем надо знать разработчикам</a>».</div>
</div>
<div>
</div>
<br />
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com7tag:blogger.com,1999:blog-6470399064206765359.post-23624298669978597012010-09-06T14:29:00.001+04:002014-10-28T11:04:03.820+03:00Как очистить информацию, накопленную FlashPlayer'омОчень часто мы используем возможности <a href="http://as3coder.blogspot.com/2010/08/sharedobject.html">SharedObject</a> для хранения какой-то временной информации на компьютере пользователя, так называемый <b>кэш<span class="Apple-style-span" style="font-weight: normal;"> </span></b>FlashPlayer'a. Иногда возникают ситуации, когда что-то сохранилось и это нужно очистить.<br />
<br />
Я, как разработчик, пойду в директорию <i>\AppData\Roaming\Macromedia\Flash Player\#SharedObjects\</i>, найду соответсвующую папку и потеру её. Но если такую же операцию необходимо будет выполнить клиенту, то такие действия могут показаться ему «дикими».<br />
<br />
<div>Так вот для этих целей у Adobe имеется специальный <b>менеджер настроек Adobe Flash Player</b>, который доступен по адресу <a href="http://www.macromedia.com/support/documentation/ru/flashplayer/help/settings_manager07.html" rel="nofollow">http://www.macromedia.com/support/documentation/ru/flashplayer/help/settings_manager07.html</a>. Кстати в последних версиях плеера, по-моему с 10 версии, в контекстном меню появилась ссылка на эту страницу под названием «Глобальные настройки», раньше её не было.</div><br />
<img border="0" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TITAvpCd2fI/AAAAAAAAAWQ/WFpZT-gzu0Y/s320/2010-09-06+14+18+17.png" /><br />
<br />
<div>Для управления хранимой информации посредством SharedObject нам необходимо открыть вкладку "<a href="http://www.macromedia.com/support/documentation/ru/flashplayer/help/settings_manager07.html" rel="nofollow">Параметры хранения веб-сайтов</a>"</div><br />
<img border="0" height="344" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TITBCH6H_iI/AAAAAAAAAWY/VYOBAjxQEv8/s640/2010-09-06+14+22+27.png" width="640" /><br />
<br />
<div>Здесь мы можем увидеть:</div><div><ul><li>Какие сайты хранят информацию на вашем компьютере.</li>
<li>Сколько можно и сколько уже использует дискового пространства тот или иной сайт</li>
</ul></div><div>Здесь же можно и удалить всю информацию для отдельного домена или для всех сразу. Мне кажется, такой способ очистки информации клиентам понравится больше.</div><div></div> Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com0tag:blogger.com,1999:blog-6470399064206765359.post-12299213568174058472010-08-27T17:50:00.000+04:002014-10-28T11:03:28.422+03:00Распознавание лиц на изображении в ActionScript 3.0<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="-webkit-text-size-adjust: none; background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<div class="quote" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: dashed; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Продолжение темы: "<a href="http://as3coder.blogspot.com/2010/08/web.html">Сохранение изображения с Web-камеры</a>"</span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Times New Roman';"><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; font-size: medium;"><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: small;"><span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-size: 12px;"></span></span></span></span></div>
</div>
<br />
На многих фотоаппаратах, даже самых простых "мыльницах" появилась такая функция, как <b>распознавание лиц</b>. Иногда, это действительно удобно и даже необходимо.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">А ведь и мы имеем доступ к Web-камере во FlashPlayer, почему бы и нам не реализовать такой механизм?</span><br />
<br />
Первый над этим вопросом видимо задумался <a href="http://maaash.jp/" rel="nofollow">Ohtsuka Masakazu</a>, и <a href="http://maaash.jp/as3/as3marilena-object-detection-in-as3/" rel="nofollow">портировал</a> библиотеку компьютерного зрения <a href="http://opencv.willowgarage.com/wiki/" rel="nofollow">OpenCV</a> написанную на <b>C++</b> на <b>ActionScript 3.0</b> и опубликовал её на <a href="http://www.libspark.org/wiki/mash/Marilena" rel="nofollow">Spark project</a>.<br />
<br />
Работает механизм следующим образом: ему подсовывают .<b>xml</b>-файлы, в которых описываются необходимые свойства для распознавания тех или иных объектов, после чего идет поиск на изображении. Размер такого .xml-файла <b>для распознавания лиц</b> составляет что-то около 1 Мб и загружать его по сети не очень корректно. Тогда <a href="http://maaash.jp/" rel="nofollow">Ohtsuka Masakazu</a> запаковал его в <b>.zip</b>-архив, который получился в 100 Кб. И уже загрузив архив, использую библиотеку <a href="http://codeazur.com.br/lab/fzip/" rel="nofollow">FZip</a>, он его распаковывал внутри <b>FlashPlayer</b>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Казалось, всё прекрасно работает и можно с радостью использовать</span><br />
<br />
Но не тут-то было. Лишний запрос на запакованный .<b>xml</b>-файл, лишний код для его распаковки - всё это не понравилось <a href="http://www.quasimondo.com/" rel="nofollow">Mario Klingemann</a>. Он избавился от загрузки внешнего .xml-файла переписав его содержимое в отдельный класс сократив его размер до 50 Кб. Также он провел некоторые оптимизации внутренних алгоритмов библиотеки.<br />
<br />
Еще глубже в алгоритмы этого механизма окунулся <a href="http://blog.inspirit.ru/" rel="nofollow">Eugene Zatepyakin</a>. Он добавил распознавание глаз, носа и губ. Подробнее смотрите <a href="http://blog.inspirit.ru/?p=416" rel="nofollow">здесь</a>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Как всем эти пользоваться?</span><br />
<br />
Больше всего мне понравился вариант от <a href="http://www.quasimondo.com/" rel="nofollow">Mario Klingemann</a>. Для примера я буду использовать <a href="http://www.quasimondo.com/examples/face_detection/Marilena_mod10.zip" rel="nofollow">исходники</a> библиотеки после его оптимизации.<br />
<br />
Импортируем пакет классов <b>jp.maaash</b>. Создаем экземпляр класса <b>ObjectDetector</b> и подписываемся на событие <b>ObjectDetectorEvent.DETECTION_COMPLETE</b>.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span style="color: black; font-family: Courier, monospace; font-size: 12px;">import jp</span><span class="preprocessor" style="color: black; font-family: Courier, monospace; font-size: 12px;">.maaash</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">.*</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">
...
var detector:ObjectDetector = new ObjectDetector()</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">
</span><span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">d</span><span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">e</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">tector</span><span class="preprocessor" style="color: black; font-family: Courier, monospace; font-size: 12px;">.addEventListener</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">(ObjectDetectorEvent</span><span class="preprocessor" style="color: black; font-family: Courier, monospace; font-size: 12px;">.DETECTION</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">_COMPLETE, onDetectorComplete)</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre>
<br />
Теперь мы можем попросить наш детектор распознать лица на заданном изображении. Вызываем у него метод <b>detect </b>c единственным параметром - ссылкой на данные изображения типа <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html" rel="nofollow">flash.bitmap.BitmapData</a>.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">detector.detect(bitmapData) <span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// bitmapData - данные изображения, на котором следует которое следует распознать лица</span></pre>
<br />
После того, как распознавание закончится, детектор отправит соответствующее событие <b>ObjectDetectorEvent.DETECTION_COMPLETE</b>, в теле которого будет список распознанных областей.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">private</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;"> </span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">function</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;"> onDetectorComplete (e:ObjectDetectorEvent):void
{
</span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">var</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;"> arr:</span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">Array</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;"> = e.rects; </span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// Список распознаных областей</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">
...
}</span></pre>
<br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="355" id="main" width="440"> <param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/AS3CoderDetectImage.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/AS3CoderDetectImage.swf" quality="high" bgcolor="#F0F0F0" width="440" height="355" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
<br />
<span style="font-size: x-large;">Смотрите также:</span>
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/08/web.html">Сохранение изображения с Web-камеры</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com18tag:blogger.com,1999:blog-6470399064206765359.post-76353555984043639152010-08-25T11:55:00.001+04:002014-10-28T11:02:19.008+03:00Сохранение изображения с Web-камеры<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-size: x-large;">1. Обращение к камере</span><br />
<br />
Для работы с web-камерами во <b>FlashPlayer </b>имеется специальный класс <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Camera.html" rel="nofollow">flash.media.Camera</a>. Чтобы получить список доступных камер на компьютере необходимо спросить его у статического свойства <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Camera.html#names" rel="nofollow">names</a>.<br />
<br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">var</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;"> </span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">list</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">:</span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">Array</span> = Camera.names;</pre>
Теперь чтобы обратиться к конкретной камере, нужно вызвать статический метод <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Camera.html#getCamera()" rel="nofollow">getCamera</a>, где в качестве параметра передается имя камеры из полученного выше списка. Метод вернет экземпляр класса <b>flash.media.Camera</b>.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var camera:Camera = Camera.getCamera(list[0]);</pre>
Но как <a href="http://the33cows.com/flex/2007/11/06/25/" rel="nofollow">заметил</a> Илья Панин, обращение к камере в <b>ActionScript 3.0</b> работает не так, как это описано выше. Казалось бы всё правильно и взято из официальной <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/" rel="nofollow">справки</a>. Но это не так. В качестве параметра методу <b>getCamera </b>необходимо передавать индекс камеры, а не её название, причем в виде строки.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">var</span> camera:Camera = Camera.getCamera(index.toString()); <span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">// index - порядковый номер камеры</span></pre>
<span class="Apple-style-span" style="font-size: x-large;">2. Вывод изображения с камеры на сцену</span><br />
<br />
Изображение с камеры - это видео-поток, и для его воспроизведения воспользуется классом <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Video.html" rel="nofollow">flash.media.Video</a>. Создаем экземпляр класса и добавляем его на сцену. В конструкторе указывается ширина и высота видео.<br />
<br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var video:Video = new Video(320, 240);
addChild(video);</pre>
Теперь чтобы отобразить в экземпляре полученного видео изображение с камеры необходимо её просто прикрепить. Вызываем метод <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Video.html#attachCamera()" rel="nofollow">attachCamera</a>, где в качестве параметра указываем ссылку на камеру.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">video.attachCamera(camera);</pre>
После того, как мы попытаемся что-нибудь сделать с изображением с камеры (показать его на сцене, отправить на сервер) <b>FlashPlayer</b> попросит разрешение на это действие у пользователя. Появится диалоговое окно с соответствующим вопросом.<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/THTFxdRm2DI/AAAAAAAAAV0/OuvWilWYuec/s320/2010-08-25+11+27+25.png" /><br />
<br />
После выбора одного из пунктов камера отправляет событие <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/StatusEvent.html" rel="nofollow">flash.event.StatusEvent</a> типа <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/StatusEvent.html#STATUS" rel="nofollow">STATUS</a>. В обработчике этого события можно даже узнать о выборе пользователя. У экземпляра камеры имеется свойство <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/media/Camera.html#muted" rel="nofollow">muted</a>, которое говорит запретил ли пользователь использовать соответствующую камеру.<br />
<br />
После того, как изображение с камеры разрешено показать на сцене в экземпляре класса <b>flash.media.Video</b>, необходимо некоторое время для активации камеры. После полной активации камеры она отправляет событие <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/ActivityEvent.html" rel="nofollow">flash.event.ActivityEvent</a> типа <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/events/ActivityEvent.html#ACTIVITY" rel="nofollow">ACTIVITY</a>.<br />
<div style="-webkit-text-size-adjust: none; background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<div class="atten" style="background-color: #eaebee; border-bottom-color: rgb(216, 221, 229); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(216, 221, 229); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(216, 221, 229); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(216, 221, 229); border-top-style: solid; border-top-width: 1px; margin-bottom: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;"><span class="Apple-style-span" style="color: #444444;">Еще одной важной особенностью работы с камерой во </span><b><span class="Apple-style-span" style="color: #444444;">FlashPlayer</span></b><span class="Apple-style-span" style="color: #444444;"> является то, что одновременно показать изображение с неё в разных окнах плеера не получится. Попробуйте открыть эту страницу в двух разных браузерах. Во втором изображение с камеры вы не увидите, пока не закроете первое открытое окно.</span></span></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Times New Roman';"><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; font-size: medium;"><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: small;"><span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-size: 12px;"></span></span></span></span></div>
</div>
<br />
<span class="Apple-style-span" style="font-size: x-large;">3. Сохранение изображения со сцены</span><br />
<br />
Экземпляр класса <b>flash.media.Video</b> является потомком класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/DisplayObject.html" rel="nofollow">flash.display.DisplayObject</a> и в любой момент времени, например по нажатию соответствующей кнопки, мы можем преобразовать изображение с камеры в данные класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html" rel="nofollow">flash.display.BitmapData</a>.<br />
<br />
Для этого необходимо создать экземпляр <b>flash.display.BitmapData</b>. В конструкторе указываем ширину и высоту. Вызываем метод <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html#draw()" rel="nofollow">draw</a>, с единственным параметром - ссылкой на экземпляр нашего видео.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">var bitmapdata:BitmapData = new BitmapData(video</span><span class="preprocessor" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">.width</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">, video</span><span class="preprocessor" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">.height</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">)</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace !important; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">
</span><span class="number" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">b</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">itmapdata</span><span class="preprocessor" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">.draw</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">(video)</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace !important; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre>
Теперь с помощью любого энкодера мы можем преобразовать полученные данные в бинарный файл изображения. Например используя <a href="http://as3corelib.googlecode.com/svn/trunk/src/com/adobe/images/PNGEncoder.as" rel="nofollow">com.adobe.images.PNGEncoder</a><b> </b>после преобразования, мы получим экземпляр класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/utils/ByteArray.html" rel="nofollow">flash.utils.ByteArray</a><br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var brr:ByteArray = PNGEncoder.encode(bitmapdata);</pre>
Осталось только сохранить полученный файл на диск. Используем для этого класс <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html" rel="nofollow">flash.net.FileReference</a>. Создаем экземпляр и вызываем метод <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html#save()" rel="nofollow">save</a>, с двумя параметрами: бинарные данные файла, имя файла.<br />
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">var file:FileReference = new FileReference()</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace !important; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">
</span><span class="number" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">f</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">ile</span><span class="preprocessor" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">.save</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">(brr, </span><span class="string" style="color: black; font-family: Courier, monospace !important; font-size: 12px;">"image.png"</span><span style="color: black; font-family: Courier, monospace !important; font-size: 12px;">)</span><span class="comment" style="color: black; cursor: text !important; font-family: Courier, monospace !important; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre>
Подробнее о сохранении изображения смотрите в <a href="http://as3coder.blogspot.com/2010/03/actionscript-30.html">предыдущем посте</a>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">4. Пример</span><br />
<br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="350" id="main" width="360"> <param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/AS3CoderSaveImageFromCamera.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/AS3CoderSaveImageFromCamera.swf" quality="high" bgcolor="#F0F0F0" width="360" height="350" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">5. Как распознавать лица на изображении?</span><br />
<br />
Об этом я напишу в следующем посте. Хочу только сказать огромное спасибо за реализацию этой возможности <a href="http://maaash.jp/" rel="nofollow">Ohtsuka Masakazu</a> и <a href="http://www.quasimondo.com/" rel="nofollow">Mario Klingemann</a>, а также <a href="http://blog.inspirit.ru/" rel="nofollow">Eugene Zatepyakin</a><br />
<br />
<div style="text-align: left;">
<span style="font-size: x-large;">Смотрите также:</span></div>
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html" style="color: #999999; text-decoration: none;">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/08/actionscript-30.html" style="color: #999999; text-decoration: none;">Распознавание лиц на изображении в ActionScript 3.0</a>
</li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com12tag:blogger.com,1999:blog-6470399064206765359.post-34947628216748633232010-08-11T14:27:00.005+04:002014-10-30T11:04:34.595+03:00SharedObject. Сохранение данных на компьютере пользователя.<div dir="ltr" style="text-align: left;" trbidi="on">
<span class="Apple-style-span" style="font-size: x-large;">Что такое SharedObject?</span><br />
<br />
<b>SharedObject </b>- это название <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/" rel="nofollow">класса</a>, с помощью которого .<b>swf</b>-файл может записывать и читать различные данные на компьютере пользователя. Способ записи данных <b>SharedObject </b>имеет сходство с записью файлов <a href="http://citforum.ru/internet/html/cookie.shtml" rel="nofollow">сookie </a>в браузерах.<br />
<br />
<div style="-webkit-text-size-adjust: none; background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<div class="quote" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: dashed; border-top-width: 1px; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;">
<span class="Apple-style-span" style="-webkit-text-size-adjust: auto;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">Кроме того, </span></span><b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">SharedObject </span></span></b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">может сохранять данные и на сервере. Используется данная возможность в основном в тесной интеграции с </span></span><a href="http://www.adobe.com/ru/products/flashmediaserver/" rel="nofollow" style="color: #999999; text-decoration: none;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">Flash Media Server</span></span></a><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">'ом. Рассматривать в рамках этого поста, возможность работы </span></span><b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">SharedObject </span></span></b><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><span class="Apple-style-span" style="font-size: small;">с сервером я не буду. Поговорим только о возможностях работы с локальной системой.</span></span></span></div>
<div>
<span class="Apple-style-span" style="font-family: 'Times New Roman';"><span class="Apple-style-span" style="-webkit-text-size-adjust: auto; font-size: small;"><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif;"><br />
</span></span></span></div>
</div>
<span class="Apple-style-span" style="font-size: x-large;">Как же это работает?</span><br />
<br />
Работает это следующим образом: один .<b>swf</b>-файл может записать любую информацию на клиентском компьютере <b>только для себя</b>, и прочитать её позже сможет <b>только тот же</b> .swf-файл, который её записал.<br />
<br />
Чтобы записать данные нужно:<br />
<ol>
<li>Получить или создать экземпляр уникального контейнера</li>
<li>Записать в свойство экземпляра "<a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/SharedObject.html#data" rel="nofollow">data</a>" необходимые данные</li>
<li>Сохранить данные экземпляра на локальный диск компьютера</li>
</ol>
<div>
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;">var so:SharedObject = SharedObject<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.getLocal</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"as3coder-player"</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
so<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.data</span><span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.volume</span> = <span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">100</span><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
so<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.flush</span>()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></span></pre>
</div>
<div>
<br /></div>
<div>
При следующем открытии, .<b>swf</b>-файл может прочитать ранее записанные им данные.</div>
<div>
<ol>
<li>Получить экземпляр уникального контейнера</li>
<li>Получить необходимые данные у свойства экземпляра "<a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/SharedObject.html#data" rel="nofollow">data</a>"</li>
</ol>
<div>
<span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-text-size-adjust: none; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;">var so:SharedObject = SharedObject<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.getLocal</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"as3coder-player"</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
var volume:Number = so<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.data</span><span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.volume</span><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></span></pre>
</div>
</div>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">Где и как хранятся данные на локальном диске пользователя?</span><br />
<br />
Данные записываются в файлы с расширением "<b>sol</b>" в формате <a href="http://en.wikipedia.org/wiki/Action_Message_Format" rel="nofollow">AMF</a>. Найти их можно в директории:<br />
<br />
<i><span class="Apple-style-span" style="font-style: normal;">Windows: </span>C:\Users\<Имя пользователя>\AppData\Roaming\Macromedia\Flash Player\#SharedObjects\<Случайное число>\<Имя домена>\<Путь до .swf-файла>\<Имя контейнера>.sol</i><br />
<br />
Mac OS X: <i>~/Library/Preferences/Macromedia/Flash Player/#SharedObjects/<Случайное число>/<Имя домена>/<Путь к .swf-файлу>/<Имя контейнера>.sol</i><br />
<br />
Для Windows это выглядит так:<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TGJg2RdpjRI/AAAAAAAAAVU/JzlhR95CtFo/s400/2010-08-11+12+31+51.png" height="367" width="400" /><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Чем открывать .sol-файлы?</span><br />
<br />
Прочитать содержимое .<b>sol</b>-файлов можно, открыв их использую встроенную во <a href="http://www.flashdevelop.org/wikidocs/index.php?title=Main_Page" rel="nofollow">FlashDevelop </a>утилиту написанную на C# под названием "SharedObject Reader"<br />
<br />
<img border="0" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TGJmzqa6DAI/AAAAAAAAAVc/YlctETZ2jVc/s400/2010-08-11+13+00+28.png" height="266" width="400" /><br />
Также можно найти автономную версию этой программы, написанную на Python, "<a href="http://www.sephiroth.it/python/SOLReader.zip" rel="nofollow">SOLReader</a>".<br />
<br />
Но как оказалось, в последних версиях <b>FlashDevelop </b>эта программа не работает. Если кто знает почему или как можно её отремонтировать пожалуйста сообщите в комментариях.<br />
<br />
В качестве альтернативы нашлась другая утилита. Называется "<a href="http://sourceforge.net/projects/soleditor/" rel="nofollow">.sol Editor</a>". Умеет не только читать но и писать в .<b>sol</b>-файлах. Интересно конечно :) Но как это применить на практике пока не придумаю.<br />
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">А как же безопасность?</span><br />
<br />
Естественно <a href="http://www.adobe.com/" rel="nofollow">Adobe</a> позаботились о безопасности такого взаимодействия .<b>swf</b>-файла с файловой системой пользователя и наложили ограничение на объем записываемых данных. По умолчанию он равен 100 Кб. Но пользователь сам вправе решить, насколько он доверяет определенному домену, и может увеличить, уменьшить, либо вообще убрать это ограничение. Сделать это можно в параметрах <b>Adobe Flash Player</b>:<br />
<br />
<img border="0" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TGJum3A85RI/AAAAAAAAAVk/c9xPOTPFEhM/s320/2010-08-11+13+33+20.png" /><br />
<br />
<img border="0" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TGJuxaNuIfI/AAAAAAAAAVs/DQTMl4lhTwY/s320/2010-08-11+13+34+53.png" /><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Где и как использовать?</span><br />
<br />
Это вопрос фантазии. Например, в своих медиа-плеерах я записываю громкость звука, чтобы пользователь её постоянно не убавлял или не прибавлял когда заходил заново.<br />
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com9tag:blogger.com,1999:blog-6470399064206765359.post-15369748787423401112010-07-30T16:04:00.001+04:002014-10-28T10:59:00.288+03:00Августовская встреча RAFPUG в Перми<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TFK-2b_aSZI/AAAAAAAAAVA/B9RCSQqBQfc/s1600/star.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TFK-2b_aSZI/AAAAAAAAAVA/B9RCSQqBQfc/s320/star.png" /></a></div>7 августа в <a href="http://maps.google.com/maps?f=q&source=s_q&hl=ru&geocode=&q=%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F,+%D0%9F%D0%B5%D1%80%D0%BC%D1%8C&sll=37.0625,-95.677068&sspn=53.300127,79.013672&ie=UTF8&hq=&hnear=%D0%B3%D0%BE%D1%80%D0%BE%D0%B4+%D0%9F%D0%B5%D1%80%D0%BC%D1%8C,+%D0%9F%D0%B5%D1%80%D0%BC%D1%81%D0%BA%D0%B8%D0%B9+%D0%BA%D1%80%D0%B0%D0%B9,+%D0%A0%D0%BE%D1%81%D1%81%D0%B8%D1%8F&z=10" rel="nofollow">Перми</a> пройдет очередная встреча <b>RAFPUG </b>(Russian Adobe Flash Platform User Group). Хозяевами встречи будут <a href="http://alternativaplatform.com/ru/" rel="nofollow">AlternativaPlatform</a> и <a href="http://iheroes.ru/" rel="nofollow">iHeroes</a>. Они расскажут вам всё о создании трехмерных браузерных игр. Также на встрече будет менеджер группы Артемий Малкин из <a href="http://flexis.ru/" rel="nofollow">Flexis</a>'a, который расскажет о будущем Flash-платформы. Все подробности смотрите <a href="http://iheroes.ru/rafpug/" rel="nofollow">здесь</a> или <a href="http://iheroes.ru/rafpug/a3d/" rel="nofollow">здесь</a>.<br />
<div><br />
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com1tag:blogger.com,1999:blog-6470399064206765359.post-50746356849124983842010-07-07T10:46:00.001+04:002014-10-28T10:57:53.688+03:00ASDoc. Сборка справки во FlashDevelop.Часто ли с вашим кодом работают сторонние разработчики? Если да, то этот пост для вас :)<br />
<br />
Работая с чужим кодом всегда возникает много вопросов: "Что? Куда? Почему?". Как правило, на эти ответы должна отвечать справка, которая распространяется вместе с кодом.<br />
<br />
Компилировать свой код в .swc-библиотеки мы <a href="http://as3coder.blogspot.com/2009/12/swc-flashdevelop.html">научились</a>, теперь научимся легко и быстро собирать справки для них.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">ASDoc</span><br />
<br />
Разработчикам <b>ActionScript 3.0</b> очень повезло. Для них уже имеется готовая утилита для сборки справки, поставляемая вместе с FlexSDK. Называется она <b>ASDoc</b>. Найти её можно в директории FlexSDK в поддиректории "<b>bin</b>".<br />
<br />
Работает утилита из под командной строки. В параметрах принимает необходимые настройки и собирает справку на основе комментариев в исходном коде. В результате мы имеем папку "<b>doc</b>" c .html-файлами. Внешне справка выглядит также как <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/index.html" rel="nofollow">официальная</a> на сайте Adobe.<br />
<br />
Подробнее читайте в <a href="http://livedocs.adobe.com/flex/3/html/asdoc_1.html" rel="nofollow">справке</a> по Flex:<br />
<ul><li><a href="http://livedocs.adobe.com/flex/3/html/asdoc_2.html#187884" rel="nofollow">Об утилите</a></li>
<li><a href="http://livedocs.adobe.com/flex/3/html/asdoc_3.html#189145" rel="nofollow">Как грамотно писать комментарии к коду</a></li>
<li><a href="http://livedocs.adobe.com/flex/3/html/asdoc_9.html#142061" rel="nofollow">Как запускать утилиту и какие параметры используются</a></li>
</ul><div><span class="Apple-style-span" style="font-size: x-large;">Сборка справки во FlashDevelop</span></div><div><br />
</div><div>Естественно работать с утилитой <b>ASDoc </b>через командную строку неудобно, и во многих средах разработки есть свой "визард" для более удобной работы с <b>ASDoc</b>. И <b>FlashDevelop </b>не исключение.</div><div><br />
</div><div>Для этого у него имеется программа "<b>Documentation Generator</b>", которая находится в Tools > Flash Tools.</div><div><br />
</div><a href="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TDQf9xngumI/AAAAAAAAAT4/5f2SVHHmrco/s1600/2010-07-07+10+22+30.png" imageanchor="1" rel="nofollow"><img border="0" height="248" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TDQf9xngumI/AAAAAAAAAT4/5f2SVHHmrco/s400/2010-07-07+10+22+30.png" width="400" /></a><br />
<br />
<div>Рассмотрим по-подробнее:<br />
<br />
Во вкладке "Project" указывается заголовок справки, классы которые нужно описать или пропустить, директория куда всё сложить, и версия <b>ActionScript </b>кода. Здесь можно собирать справку и для ActionScript 2.0, но в рамках данного поста мы это пропустим.<br />
<br />
<a href="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TDQgTln7rII/AAAAAAAAAUA/TSwjBpH6jPY/s1600/2010-07-07+10+19+14.png" imageanchor="1" rel="nofollow"><img border="0" height="328" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TDQgTln7rII/AAAAAAAAAUA/TSwjBpH6jPY/s640/2010-07-07+10+19+14.png" width="640" /></a><br />
<br />
</div><div>В "Settings" указывается путь к директории с утилитой <b>ASDoc</b>.<br />
<br />
<a href="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TDQhbs1QMjI/AAAAAAAAAUI/Jxig2jV18_Q/s1600/2010-07-07+10+19+55.png" imageanchor="1" rel="nofollow"><img border="0" height="276" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TDQhbs1QMjI/AAAAAAAAAUI/Jxig2jV18_Q/s400/2010-07-07+10+19+55.png" width="400" /></a><br />
<br />
</div><div>В "Output" выводится информация и процессе сборки справки.</div><div><br />
<a href="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TDQhsWNYfdI/AAAAAAAAAUQ/Cb3Rgw8TaUA/s1600/2010-07-07+10+20+49.png" imageanchor="1" rel="nofollow"><img border="0" height="275" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TDQhsWNYfdI/AAAAAAAAAUQ/Cb3Rgw8TaUA/s400/2010-07-07+10+20+49.png" width="400" /></a><br />
<br />
</div><div>И самое удобное, что все это можно сохранить в проект, который потом можно открыть.<br />
<br />
<a href="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TDQh10Q57lI/AAAAAAAAAUY/ONlTzH7eD1k/s1600/2010-07-07+10+21+14.png" imageanchor="1" rel="nofollow"><img border="0" height="45" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/TDQh10Q57lI/AAAAAAAAAUY/ONlTzH7eD1k/s400/2010-07-07+10+21+14.png" width="400" /></a><br />
<br />
</div><div>Если что-то непонятно, имеется справка :)<br />
<br />
<a href="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TDQiBk-5onI/AAAAAAAAAUg/k3AwGijJSTc/s1600/2010-07-07+10+21+53.png" imageanchor="1" rel="nofollow"><img border="0" height="51" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TDQiBk-5onI/AAAAAAAAAUg/k3AwGijJSTc/s400/2010-07-07+10+21+53.png" width="400" /></a><br />
<br />
</div><div>Осталось нажать кнопку "Generate!"<br />
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com3tag:blogger.com,1999:blog-6470399064206765359.post-37874889184694311932010-06-01T09:40:00.000+04:002014-10-28T10:56:51.153+03:00Что такое «MindMap»? И с чем его едят?На февральской встрече <a href="http://as3coder.blogspot.com/2010/02/burafpuf-belarus-ukraine-russian-flash.html">BURAFPUG</a>, во время блиц-докладов, я заикнулся про работу c <b>MindMap</b>. Меня попросили рассказать об этом по-подробнее, по-моему это был <a href="http://flash-ripper.com/" rel="nofollow">Рост</a>. На тот момент, я почему-то подумал, что все знают что это такое, и сразу перешел к рассказу о том, как это реализуется во <b>Flash</b>'e. На днях я понял, что спрашивали меня тогда именно: "Что это такое?". Постараюсь кратко и понятно рассказать об этом.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Что такое MindMap?</span><br />
<br />
<b>MindMap </b>- это некий формат записи мыслей человека. Выглядит это как накиданные на плоскость блоки текста связанные между собой линиями. Внешне напоминают карты, отсюда в названии формата имеется "<b>Map</b>". "<b>Mind</b>" - это мысли. Наглядно:<br />
<br />
<img border="0" height="228" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/TASbCQvl_RI/AAAAAAAAATw/w7FDd6pybqo/s1600/Untitled+map+2.png" width="743" /><br />
<br />
На самом деле, этот формат записи очень удобен. Если есть какие-то идеи, то такие карты неплохо помогают развивать эти идеи в разные стороны. В офлайне полно различных тренингов для развития мышления и памяти, где в основе лежат эти самые карты.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Как и где использовать такие карты?</span><br />
<br />
Использовать такие карты очень легко и удобно на любом этапе разработки проекта. Начиная от оценки проекта, до описания архитектуры и процесса разработки приложения.<br />
<br />
<img border="0" height="386" src="http://4.bp.blogspot.com/_S7Dbp6MOKn8/TASYOnhDx7I/AAAAAAAAATg/c2iNpk-4VE8/s1600/Untitled+map.png" width="680" /><br />
<br />
Также я использую <b>MindMap </b>в повседневной жизни. Очень часто я в своем блокноте использую именно такой формат записи.<br />
<br />
<img border="0" height="258" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/TASZROuH-OI/AAAAAAAAATo/k0xebIvVmyo/s1600/Untitled+map+1.png" width="652" /><br />
<br />
Для рисования карт сейчас полно как бесплатных, так и платных, как онлайн (реализованных кстати на <b>Flash</b>), так и десктопных приложений.<br />
<br />
Список программ для рисования <b>MindMap</b> уже <a href="http://www.dzinepress.com/2010/03/40-ultimate-useful-mind-mapping-tools/" rel="nofollow">есть</a>. В качестве бесплатной могу порекомендовать <a href="http://freemind.sourceforge.net/wiki/index.php/Main_Page" rel="nofollow">FreeMind</a>. Если не устраивает, то очень неплохая платная - <a href="http://www.mindjet.com/" rel="nofollow">Mindjet</a>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Дополнительная информация</span><br />
<br />
В последнее время на эту появляется все больше информации. Потому-что это действительно интересная и удобная вещь. Стоит один раз попробовать, и уже не сможешь от неё отказаться. Приведу небольшой список полезных ресурсов на эту тему:<br />
<ul><li><a href="http://www.mind-map.ru/" rel="nofollow">Интеллект-карты</a></li>
<li><a href="http://www.mindmap.ru/" rel="nofollow">Mind map, Карты разума, ума, памяти, интеллекта и мышления</a></li>
<li><a href="http://xn--%20%20%20-zyhaa3agcopkh5amracn8a0ba9hi2b39ara8082v/" rel="nofollow">Диаграмма связей — Википедия</a></li>
<li><a href="http://habrahabr.ru/tag/mindmaps/" rel="nofollow">mindmaps / Метки / Хабрахабр</a></li>
</ul><div> </div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com4tag:blogger.com,1999:blog-6470399064206765359.post-66780528310848841932010-05-28T10:12:00.007+04:002014-10-28T10:55:41.103+03:00SVG vs FlashРаботая над очередным проектом столкнулся с необходимостью отображения <b>Flash</b>-приложения на мобильных устройствах. Если на <a href="http://www.android.com/" rel="nofollow">Android </a>в ближайшем будущем <a href="http://labs.adobe.com/wiki/index.php/Flash_Player_10.1_for_Android" rel="nofollow">поддержка Flash Player'a</a> ожидается, то как быть с остальными устройствами?<br />
<br />
Ответ пришел незамедлительно: "<b>SVG + Javascript</b>".<br />
<br />
От HTML-кодеров я часто слышу резкие изречения сравнения <b>Flash </b>и <b>SVG </b>как технологий, в пользу второго. О том, что <b>SVG </b>не требует плагинов и ничем не уступает <b>Flash</b>'y. На нем можно рисовать векторные изображения, писать код на JavaScript, делать анимацию и многое другое.<br />
<br />
Уже не первый год <b>SVG </b><a href="http://www.google.ru/search?hl=ru&q=svg+vs+flash&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA+%D0%B2+Google&lr=" rel="nofollow">ставят</a> в конкуренты к <b>Flash</b>'y, хают одно и лелеют другое. И так как у меня появилась такая возможность поработать и с тем и с другим, я хочу сделать небольшой обзор.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Является ли SVG и Flash конкурентами?</span><br />
<br />
Ответ: «Нет». Поясню.<br />
<br />
На мой взгляд <b>SVG </b>не является конкурентной технологией. <b>Flash </b>имеет ряд возможностей, которых нету в первом. К такому мнению я пришел начав миграцию моего <b>Flash</b>-проекта на <b>SVG</b>. Всё-таки кросс-платформенность для flasher'ов немного непривычно.<br />
<br />
Но, <b>SVG </b>- это очень круто, и это действительно перспективная технология со своими преимуществами. Эта мысль меня посетила по окончанию миграции, когда я увидел результат работы <b>SVG</b>-приложения.<br />
<br />
Вообще выбор технологии, должен зависеть от задачи. Например у меня задача стояла, чтобы web-приложение одинаково работало и выглядело на домашних копьютерах и на мобильных устройствах. И теперь используя две технологии (вместо какой-то одной) моё приложение работает на всех устройствах.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Flash и SVG - это скорее друзья :)</span><br />
<br />
Мне не составило особого труда переписать моё приложение с ActionScript на JavaScript, который используется в <b>SVG</b>. Не составило труда перенести статичную графику. Вообще всё прошло гладко.<br />
<br />
Обе технологии дополняют друг друга. Недостатки <b>Flash</b>'a можно с легкостью заменить преимуществами <b>SVG</b>. И наоборот. Использование обеих технологий придаст вашему проекту уникальную гибкость.<br />
<br />
Вот, что я вынес для себя:<br />
<br />
<br />
<table><tbody>
<tr> <td width="100px"></td> <td style="padding-left: 40px;" width="200px"><b>Flash</b></td> <td style="padding-left: 40px;" width="200px"><b>SVG</b></td> </tr>
<tr> <td valign="top">Преимущества</td> <td valign="top"><ul><li>Работа с камерой и микрофоном</li>
<li>Работа со звуком и видео</li>
<li>Загрузка и выгрузка файлов</li>
</ul></td> <td valign="top"><ul><li>Не требует дополнительных плагинов</li>
<li>Работает во всех мобильных устройствах </li>
</ul></td> </tr>
<tr> <td valign="top">Недостатки</td> <td valign="top"><ul><li>Требует плагин Adobe Flash Player</li>
<li>Не поддерживается большинством мобильных устройств</li>
</ul></td> <td valign="top"><ul><li>Не работает в Internet Explorer</li>
</ul></td> </tr>
</tbody> </table><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Вывод</span><br />
<br />
Не нужно привязываться к технологиям.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">P.S</span>.<br />
<br />
Точно такая же ситуация и с HTML5... Но об этом в другой раз.<br />
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com6tag:blogger.com,1999:blog-6470399064206765359.post-45394146587807541222010-05-20T09:58:00.008+04:002014-10-28T10:55:01.224+03:00Создание Excel-документа на ActionScript 3.0Недавно в одном из моих проектов при работе с различными схемами и диаграммами появилась необходимость экспорта данных в распространенный и удобочитаемый формат. Выбор автоматически пал на документы <b>Microsoft Excel</b>. Оказалось:<br />
<div style="background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-size: 12px; margin-top: 6px; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Начиная с 10-ой версии Flash Player можно собирать Excel-документы без участия сервера.</span></div><div><span class="Apple-style-span" style="font-family: 'Times New Roman';"><span class="Apple-style-span" style="font-size: medium;"><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: small;"><span class="Apple-style-span" style="font-size: 12px;"></span></span></span></span></div></div>с чем хочу с вами поделится.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Немного теории.</span><br />
<br />
В качестве <b>Excel</b>-документов я рассматриваю документы созданные в <a href="http://office.microsoft.com/ru-ru/excel/FX100487621049.aspx" rel="nofollow">Microsoft Excel 2007</a> с расширением <b>.xlsx</b>. Именно с этой версии Microsoft открыла свой формат электронных таблиц. И теперь - это не файл с бинарными записями, а .zip-архив с набором .xml-документов.<br />
<br />
Таким образом для создания <b>.xlsx</b>-документов нам необходимо записать данные в .xml-документы, затем собрать их в .zip-архив и в завершении заменить его расширение на "<b>.xlsx</b>".<br />
<br />
<b>Что мы имеем во Flash Player?</b><br />
<ul><li>Полноценная работа с xml-разметкой (пакет классов <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/xml/package-detail.html" rel="nofollow">flash.xml</a>). Мы можем с легкостью записывать наши данные в .xml-документы.</li>
<li>Работа с бинарными данными (класс <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/utils/ByteArray.html" rel="nofollow">flash.utils.ByteArray</a>), с помощью которой можно организовать сборку zip-архива.</li>
<li>Сохранение бинарных данных на компьютер пользователя (класс <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html" rel="nofollow">flash.net.FileReference</a>).</li>
</ul><div>Всё что нам необходимо, мы имеем. Поэтому перейдем к практике.</div><br />
<div><span class="Apple-style-span" style="font-size: x-large;">Запись данных в XML</span></div><br />
Первым делом нужно разобраться с содержимом <b>.xlsx</b>-документа, а именно с .xml-документами. Для этого я в <a href="http://office.microsoft.com/ru-ru/excel/FX100487621049.aspx" rel="nofollow">Microsoft Excel 2007</a> создал новый документ, сделал некоторые записи,<br />
<br />
<img border="0" src="http://2.bp.blogspot.com/_S7Dbp6MOKn8/S_N_JnFOd6I/AAAAAAAAATQ/HqdPMpwPp5o/s320/2010-05-19+10+02+56.png" /><br />
<br />
сохранил, поменял расширение на .zip и увидел такую вот структуру с каталогами и файлами.<br />
<br />
<img border="0" src="http://3.bp.blogspot.com/_S7Dbp6MOKn8/S_OBKvdr6hI/AAAAAAAAATY/CCC-bz4v9kQ/s320/2010-05-19+09+57+06.png" /><br />
<br />
Свои записи (Ivan, Ivanov, Ivanovich) я нашел в файле xl/sharedString.xml. Насколько я понял, это хранилище для текстовой информации.<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">sst</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;"><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> xmlns=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"http://schemas.openxmlformats.org/spreadsheetml/2006/main"</span></span><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> count=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"3"</span></span><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> uniqueCount=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"3"</span></span>></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span>Ivanov<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span>Ivan<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span>Ivanovich<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">t></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">si</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">sst</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span></pre>Далее я открыл файл xl/worksheets/sheet1.xml и действительно в описание столбца увидел ссылку (а точнее индекс) на содержимое из xl/sharedString.xml.<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">...
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">row</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;"><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> r=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"1"</span></span><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> spans=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"1:3"</span></span>></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">c<span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> r=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"A1"</span></span><span class="attribute" style="font-family: Courier, monospace; font-size: 12px;"> t=<span class="value" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"s"</span></span>></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">v></span></span>0<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">v></span></span><span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">c></span></span>
<span class="tag" style="font-family: Courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: Courier, monospace; font-size: 12px;">row</span><span class="tag_internal" style="font-family: Courier, monospace; font-size: 12px;">></span></span>
...</pre>Для начала этой информации нам достаточно.<br />
<br />
Рассматривать подробно все возможности записи .xml-документов внутри <b>.xlsx</b>-файлов я не буду. Ознакомится с ними можно прочитав книгу "<a href="http://share.dewil.ru/doc/OpenXML/OXML_BOOK_RU.pdf" rel="nofollow">OpenXML. Кратко и доступно</a>", автором которой является Воутер Ван Вугт.<br />
<br />
Скажу только то, что благодаря такой открытой структуре <b>.xlsx</b>-документа, вы сможете с легкостью записывать не только текстовую информацию, но и изображения, диаграммы и все остальные объекты <b>Microsoft Excel</b>.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Сборка XML-документов в ZIP-архив</span><br />
<br />
Теперь когда с записью в .xml-документы разобрались давайте попробуем их собрать в архив. Писать архиватор мы не будем, используем готовый. Меньше всего проблем у меня возникло с библиотекой <a href="http://codeazur.com.br/lab/fzip/" rel="nofollow">FZip</a>, так что используем её.<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">...
var zip:FZip = new FZip()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"_rels/.rels"</span>, Templates._RELS)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"docProps/app.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.APP</span>_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"docProps/core.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.CORE</span>_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/_rels/workbook.xml.rels"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.WORKBOOK</span>_XML_RELS)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/theme/theme1.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.THEME</span><span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">1</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/worksheets/_rels/sheet1.xml.rels"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.SHEET</span><span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">1</span>_XML_RELS)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/worksheets/sheet1.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.SHEET</span><span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">1</span>_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/sharedStrings.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.SHARED</span>_STRING_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/styles.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.STYLES</span>_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"xl/workbook.xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.WORKBOOK</span>_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.addFile</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"[content_types].xml"</span>, Templates<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.CONTENT</span>_TYPES_XML)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
var brr:ByteArray = new ByteArray()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
zip<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.serialize</span>(brr, true)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
...</pre><br />
<span class="Apple-style-span" style="font-size: x-large;">Сохранение на компьютер пользователя</span><br />
<br />
Сохранить, собранный архив на локальный диск пользователя, можно при помощи класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html" rel="nofollow">flash.net.FileReference</a>. Начиная с 10 версии <b>FlashPlayer</b>'a у этого класса появился метод save, который перед сохранением показывает диалоговое окно с выбор место сохранения. Вызываем его и в первом параметре пишем имя сохраняемого файла по умолчанию с расширением "<b>xlsx</b>".<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">...
var file:FileReference = new FileReference()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
<span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">f</span>ile<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.save</span>(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"excel_file.xlsx"</span>, brr)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
...</pre><br />
<span class="Apple-style-span" style="font-size: x-large;">Пример</span><br />
<br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="138" id="main" width="400"> <param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/AS3CoderExcel.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/AS3CoderExcel.swf" quality="high" bgcolor="#F0F0F0" width="400" height="138" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com15tag:blogger.com,1999:blog-6470399064206765359.post-6433172453928582622010-04-26T22:32:00.007+04:002014-10-30T10:51:34.454+03:00Создание AIR-приложения во FlashDevelop<div dir="ltr" style="text-align: left;" trbidi="on">
<h2>
Что такое AIR?</h2>
<b></b><br />
<b>Adobe</b>® <b>AIR</b>™ - кросс-платформенная рабочая среда, предоставляющая разработчикам возможность использования технологий HTML, Ajax, Adobe Flash® и Adobe Flex® для создания многофункциональных настольных интернет-приложений.<br />
Подробные ответы можно найти на сайте <a href="http://www.adobe.com/ru/products/air/faq/">Adobe</a>.<br />
<br />
Если проще, то с помощью <a href="http://www.adobe.com/ru/products/air/">Adobe AIR</a> мы можем заставить своё <b>AS3</b>-приложение работать как полноценная настольная программа с доступом к файловой системе, с работой с базами данных SQL, а также другими возможностями, которых не хватает во Flash Player.<br />
<br />
Посмотреть полный список дополнительных возможностей можно в справочнике по языку <b>ActionScript 3.0</b>. Классы, которые помечены иконкой <img border="0" src="http://1.bp.blogspot.com/_S7Dbp6MOKn8/S9XPdLrx4wI/AAAAAAAAAOc/l5U0D92nMMk/s320/2010-04-26+21+31+12.png" /> - логотипом технологии, предназначены для <b>AIR</b>-приложений и являются отличным дополнением к тем, что мы используем во Flash Player.<br />
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: 24px; font-weight: bold;">Создание AIR-приложений</span><br />
<h3>
Немного теории</h3>
<b>AIR</b>-приложения можно собирать использую разные технологии: Ajax (Javascript + HTML) и ActionScript (Flash и Flex). В последней версии <b>FlashDevelop</b> используется вариант с ActionScript и для этого имеется три типа проекта AIR AS3 Projector, AIR Flex 3 Projector и AIR Flex 4 Projector. Мы рассмотрим проект с чистым <b>ActionScript 3.0</b>.<br />
<br />
Создаем новый проект "My First AIR Application":<br />
<br />
<a href="http://lh6.ggpht.com/_S7Dbp6MOKn8/S9cy1LI6HvI/AAAAAAAAAPE/s008OSqpcjQ/s1600-h/AirIcon12x126.png" rel="nofollow"><img alt="AirIcon12x12" border="0" src="http://lh3.ggpht.com/_S7Dbp6MOKn8/S9cy1jgtAYI/AAAAAAAAAPI/8QcfCDKxrXk/AirIcon12x12_thumb4.png?imgmax=800" height="477" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="AirIcon12x12" width="545" /></a> <br />
<br />
Во вкладке "Project", мы увидим директорию проекта.<br />
<br />
<a href="http://lh5.ggpht.com/_S7Dbp6MOKn8/S9cy2Ke1FQI/AAAAAAAAAPM/n_Nju3Q0i20/s1600-h/201004262145529.png" rel="nofollow"><img alt="2010-04-26 21 45 52" border="0" src="http://lh6.ggpht.com/_S7Dbp6MOKn8/S9cy2iMgY1I/AAAAAAAAAPQ/rtjXD1iMbxc/20100426214552_thumb7.png?imgmax=800" height="197" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-26 21 45 52" width="272" /></a> <br />
<br />
С директориями "bin", "lib" и "src" мы уже знакомы из <a href="http://as3coder.blogspot.com/2009/09/as3-flashdevelop.html" rel="nofollow">раннего поста</a>. А вот остальные файлы на не известны. Остановимся на них по-подробнее.<br />
<br />
<b>AIR_readme.txt</b> - текстовый файл с инструкцией на английском языке, о том как компилировать приложение. По сути всё-то, о чем я буду говорить ниже :)<br />
<br />
<b>application.xml</b> - файл с настройками приложения. По умолчанию файл имеет минимум настроек - это имя идентификатор, версия, имя, описание, авторство и внешний вид окна приложения. Также здесь можно задать иконку приложению, причем разных размеров:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/smallIcon.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image32x32</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/mediumIcon.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image32x32</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image48x48</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/bigIcon.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image48x48</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image128x128</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/biggestIcon.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image128x128</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span></span></pre>
можно указать директорию установки приложения и директорию в списке программ:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">installFolder</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>Example Co/Hello World<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">installFolder</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">programMenuFolder</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>Example Co<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">programMenuFolder</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span></span></pre>
можно разрешить устанавливать приложения из браузера:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">allowBrowserInvocation</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>false<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">allowBrowserInvocation</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span></span></pre>
можно привязать к приложению файлы с заданным расширением, задав им свои иконки:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">fileTypes</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">fileType</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">name</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>adobe.VideoFile<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">name</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">extension</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>avf<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">extension</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">description</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>Adobe Video File<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">description</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">contentType</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>application/vnd.adobe.video-file<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">contentType</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/avfIcon_16.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image32x32</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/avfIcon_32.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image32x32</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image48x48</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/avfIcon_48.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image48x48</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image128x128</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>icons/avfIcon_128.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image128x128</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">fileType</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">fileTypes</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span></span></pre>
полный список настроек смотрите в <a href="http://livedocs.adobe.com/flex/3/html/File_formats_1.html" rel="nofollow">официальной справке</a> от Adobe.<br />
<br />
<b>CreateCertificate.bat</b> - исполняемый файл для создания само подписанного цифрового сертификата. Описывать сертификацию приложения в рамках данного материала, я не буду, постараюсь позже написать об этом отдельный пост. Скажу только одно: при установки приложения на компьютер у пользователя появляется диалоговое окно, с пугающими сообщениями:<br />
<br />
<a href="http://lh4.ggpht.com/_S7Dbp6MOKn8/S9cy3FqkXnI/AAAAAAAAAPU/lknTPt_QprQ/s1600-h/201004262154186.png" rel="nofollow"><img alt="2010-04-26 21 54 18" border="0" src="http://lh6.ggpht.com/_S7Dbp6MOKn8/S9cy3ht8pmI/AAAAAAAAAPY/_UCs-b4MC0U/20100426215418_thumb4.png?imgmax=800" height="393" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-26 21 54 18" width="486" /></a><br />
<br />
Избежать этих сообщений можно использую сертификат выданный доверенным центром сертификации, таких как <a href="http://www.verisign.com/" rel="nofollow">VeriSign</a> or <a href="http://www.thawte.com/" rel="nofollow">Thawte</a>. Подробнее о сертификации также есть в официальной <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=distributing_apps_4.html#1037515" rel="nofollow">справке</a>.
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<b>PackageApplication.bat</b> - исполняемый файл для сборки готового приложения. Подробнее <a href="http://livedocs.adobe.com/flex/3/html/help.html?content=CommandLineTools_5.html#1035959" rel="nofollow">здесь</a>.<br />
<span class="Apple-style-span" style="font-size: 19px; font-weight: bold;"><br />
</span><br />
<span class="Apple-style-span" style="font-size: 19px; font-weight: bold;">Теперь практика</span><br />
<br />
В качестве примера напишем приложение, которое выводит на экран и затем пишет все доступные данные о плеере и системе пользователя (данные статического класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/system/Capabilities.html" rel="nofollow">flash.system.Capabilities</a>) в текстовый файл Capabilities.txt на рабочем столе.<br />
<br />
Открываем файл основного класса <strong>Main.as</strong> и пишем туда:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* ...
* @author AS3Coder
*/</span>
package
{
<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Импорт классов
*/</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.filesystem</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.File</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.filesystem</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.FileStream</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.filesystem</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.FileMode</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.display</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.Sprite</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.display</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.StageAlign</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.display</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.StageScaleMode</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.system</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.Capabilities</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.events</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.Event</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.text</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.TextField</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.text</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.TextFormat</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.text</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.TextFieldAutoSize</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
import flash<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.utils</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.ByteArray</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Основной класс приложения
*/</span>
public class Main extends Sprite
{
<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Конструктор
*/</span>
function Main():void
{
addEventListener(Event<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.ADDED</span>_TO_STAGE, onAddToStage, false, <span class="number" style="color: green; font-family: courier, monospace; font-size: 12px;">0</span>, true)<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
}
<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Метод создает текстовое поле, заполняет его данными.
* Открывает поток и записывает содержимое
* тектового поля в файл.
*/</span>
private function create ():void
{
var str:String<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
var txt:TextField<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
var fil:FileStream<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
str = <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">""</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"navHardwareDisable: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.avHardwareDisable</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasAccessibility: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasAccessibility</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasAudio: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasAudio</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasAudioEncoder: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasAudioEncoder</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasEmbeddedVideo: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasEmbeddedVideo</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasIME: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasIME</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasMP3: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasMP</span><span class="number" style="color: green; font-family: courier, monospace; font-size: 12px;">3</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasPrinting: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasPrinting</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasScreenBroadcast: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasScreenBroadcast</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasScreenPlayback: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasScreenPlayback</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasStreamingAudio: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasStreamingAudio</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasStreamingVideo: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasStreamingVideo</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasTLS: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasTLS</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nhasVideoEncoder: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.hasVideoEncoder</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nisDebugger: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.isDebugger</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nisEmbeddedInAcrobat: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.isEmbeddedInAcrobat</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nlanguage: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.language</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nlanguages: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.languages</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nlocalFileReadDisable: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.localFileReadDisable</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nmanufacturer: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.manufacturer</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nmaxLevelIDC: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.maxLevelIDC</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nos: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.os</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\npixelAspectRatio: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.pixelAspectRatio</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nplayerType: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.playerType</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nscreenColor: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.screenColor</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nscreenDPI: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.screenDPI</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nscreenResolutionX: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.screenResolutionX</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nscreenResolutionY: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.screenResolutionY</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nserverString: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.serverString</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
str += <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\nversion: "</span> + Capabilities<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.version</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
txt = new TextField()
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.selectable</span> = false<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.multiline</span> = true<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.defaultTextFormat</span> = new TextFormat(<span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"Courier New"</span>, <span class="number" style="color: green; font-family: courier, monospace; font-size: 12px;">12</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.autoSize</span> = TextFieldAutoSize<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.LEFT</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.text</span> = str<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.x</span> = <span class="number" style="color: green; font-family: courier, monospace; font-size: 12px;">10</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
txt<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.y</span> = <span class="number" style="color: green; font-family: courier, monospace; font-size: 12px;">10</span><span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
addChild(txt)<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
fil = new FileStream()<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
fil<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.open</span>(new File(File<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.desktopDirectory</span><span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.nativePath</span> + <span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"/Capabilities.txt"</span>), FileMode<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.WRITE</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
fil<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.writeUTFBytes</span>(str<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.split</span>(<span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\n"</span>)<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.join</span>(<span class="string" style="color: teal; font-family: courier, monospace; font-size: 12px;">"\r\n"</span>))<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
fil<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.close</span>()<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
}
<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">/**
* Метод обрабатывает событие добавления
* основного клипа приложения на сцену.
*/</span>
private function onAddToStage (e:Event):void
{
removeEventListener(Event<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.ADDED</span>_TO_STAGE, onAddToStage, false)<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
stage<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.scaleMode</span> = StageScaleMode<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.NO</span>_SCALE<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
stage<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.align</span> = StageAlign<span class="preprocessor" style="color: #2b91af; font-family: courier, monospace; font-size: 12px;">.TOP</span>_LEFT<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
//
create()<span class="comment" style="color: grey; cursor: text !important; font-family: courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
}
}
}</span></pre>
Перейдем к настройкам. Попробуем задать окну приложения произвольную иконку. Для этого добавим в директорию “bin” файл изображения иконки, например такую <a href="http://lh6.ggpht.com/_S7Dbp6MOKn8/S9cy4PCaOKI/AAAAAAAAAPc/njQsJCeWbB4/s1600-h/cog3.png" rel="nofollow"><img alt="cog" border="0" src="http://lh5.ggpht.com/_S7Dbp6MOKn8/S9cy4WgIClI/AAAAAAAAAPg/HASpymWhM80/cog_thumb1.png?imgmax=800" height="16" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="cog" width="16" /></a> . Теперь откроем файл с настройками <strong>application.xml</strong> и допишем туда блок:<br />
<span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom: rgb(179,179,179) 1px solid; border-left: rgb(179,179,179) 1px solid; border-right: rgb(179,179,179) 1px solid; border-top: rgb(179,179,179) 1px solid; clear: both; font-family: courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;"><span class="Apple-style-span" style="-webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; border-collapse: separate; color: black; font: normal normal normal 12px/normal tahoma, helvetica, sans-serif; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"><<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>cog.png<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">image16x16</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span>
<span class="tag" style="font-family: courier, monospace; font-size: 12px;"></<span class="title" style="color: teal; font-family: courier, monospace; font-size: 12px;">icon</span><span class="tag_internal" style="font-family: courier, monospace; font-size: 12px;">></span></span></span></pre>
результат мы увидим позже.<br />
<br />
Теперь, когда код написан, добавлены настройки, можно переходить к сборке приложения. И для этого нам необходим сертификат подлинности. Для создания сертификата у нас имеется файл <strong>CreateCertificate.bat</strong>. Но прежде чем запустить сценарий исполнения, необходимо открыть содержимое файла и на 9 строке поменять путь до <strong>Flex SDK</strong>/bin на действительный. Узнать его можно в настройках <strong>FlashDevelop</strong>:<br />
<br />
<a href="http://lh3.ggpht.com/_S7Dbp6MOKn8/S9cy5Ur2kQI/AAAAAAAAAPk/DUGKxN4gEmE/s1600-h/201004272150507.png" rel="nofollow"><img alt="2010-04-27 21 50 50" border="0" src="http://lh3.ggpht.com/_S7Dbp6MOKn8/S9cy6Agb3fI/AAAAAAAAAPo/1PSu6awNLtc/20100427215050_thumb5.png?imgmax=800" height="364" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-27 21 50 50" width="640" /></a><br />
<br />
После выполнения сценария в директории проекта появится файл самоподписанного сертификата:<br />
<br />
<a href="http://lh3.ggpht.com/_S7Dbp6MOKn8/S9cy64bgyPI/AAAAAAAAAPs/kC1MsiPMvL0/s1600-h/201004272152095.png" rel="nofollow"><img alt="2010-04-27 21 52 09" border="0" src="http://lh3.ggpht.com/_S7Dbp6MOKn8/S9cy7pFRN5I/AAAAAAAAAPw/tjMk3zXllAY/20100427215209_thumb3.png?imgmax=800" height="253" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-27 21 52 09" width="272" /></a><br />
<br />
Для окончательной сборки <strong>AIR</strong>-приложения запускаем <strong>PackageApplication.bat</strong>. И увидим ошибку:<br />
<br />
<a href="http://lh5.ggpht.com/_S7Dbp6MOKn8/S9cy8A2BICI/AAAAAAAAAP0/x2LPSo71GSs/s1600-h/201004272154476.png" rel="nofollow"><img alt="2010-04-27 21 54 47" border="0" src="http://lh5.ggpht.com/_S7Dbp6MOKn8/S9cy8lyT9qI/AAAAAAAAAP4/CmuMRm70zeA/20100427215447_thumb4.png?imgmax=800" height="342" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-27 21 54 47" width="677" /></a><br />
<br />
также как в файле <strong>CreateCertificate.bat</strong> нужно прописать действительный путь <strong>до Flex SDK</strong>. Пробуем еще раз. Вводим пароль. И если все правильно, то в директории проекта появляется новая папка “<strong>air</strong>”, в которой лежит наше приложение.<br />
<br />
<a href="http://lh4.ggpht.com/_S7Dbp6MOKn8/S9cy9P6wB0I/AAAAAAAAAP8/VT_JLP8ArG8/s1600-h/201004272158267.png" rel="nofollow"><img alt="2010-04-27 21 58 26" border="0" src="http://lh4.ggpht.com/_S7Dbp6MOKn8/S9cy9kQugMI/AAAAAAAAAQA/ZWkm9mhr2wE/20100427215826_thumb5.png?imgmax=800" height="276" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-27 21 58 26" width="272" /></a><br />
<br />
Для запуска .<strong>air</strong>-файлов на компьютере пользователя необходим плеер <a href="http://get.adobe.com/ru/air/?promoid=BUIGQ" rel="nofollow">Adobe AIR</a>. Если его нет, то нужно его поставить.<br />
<br />
Попробуем запустить полученный .air-файл. Мы увидим стандартный установщик с минимум настроек. После установки мы увидим ярлык нашего приложения. Теперь наше <strong>AIR</strong>-приложение, является полноценной настольной программой. Запустив его, мы увидим в окне приложения ту иконку, которую мы указывали в настройках, а также файл Capabilities.txt на рабочем столе, который создала наша программа.<br />
<br />
<a href="http://lh4.ggpht.com/_S7Dbp6MOKn8/S9cy-K9cfpI/AAAAAAAAAQE/RJTl7wdvSMY/s1600-h/201004272203045.png" rel="nofollow"><img alt="2010-04-27 22 03 04" border="0" src="http://lh5.ggpht.com/_S7Dbp6MOKn8/S9cy-yhG-mI/AAAAAAAAAQI/iEk-SID17Fg/20100427220304_thumb3.png?imgmax=800" height="519" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline;" title="2010-04-27 22 03 04" width="812" /></a><br />
<br />
Вот так легко и быстро мы (web-разработчики) теперь можем создавать полноценные настольные программы.<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com21tag:blogger.com,1999:blog-6470399064206765359.post-82406951122155548582010-04-07T11:27:00.002+04:002014-10-28T18:05:44.093+03:00Работа с JSON в ActionScript 3.0<span class="Apple-style-span" style="font-size: x-large;">Что такое JSON?</span><br />
<div><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"><div style="background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"><div class="quote" style="border-bottom-color: rgb(204, 204, 204); border-bottom-style: dashed; border-bottom-width: 1px; border-left-color: rgb(204, 204, 204); border-left-style: dashed; border-left-width: 1px; border-right-color: rgb(204, 204, 204); border-right-style: dashed; border-right-width: 1px; border-top-color: rgb(204, 204, 204); border-top-style: dashed; border-top-width: 1px; font-size: 12px; margin-bottom: 10px; margin-left: 10px; margin-right: 10px; margin-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;"><b>JSON (JavaScript Object Notation)</b> - простой формат обмена данными, удобный для чтения и написания как человеком, так и компьютером. Он основан на подмножестве языка программирования <a href="http://javascript.crockford.com/" rel="nofollow">JavaScript</a>, определенного в стандарте <a href="http://www.ecma-international.org/publications/files/ecma-st/ECMA-262.pdf" rel="nofollow">ECMA-262 3rd Edition</a> - December 1999. JSON - текстовый формат, полностью независимый от языка реализации, но он использует соглашения, знакомые программистам C-подобных языков, таких как C, C++, C#, Java, JavaScript, Perl, Python и многих других. Эти свойства делают JSON идеальным языком обмена данными.</span></div></div></span></div><span class="Apple-style-span" style="font-size: small;">Взято с сайта </span><a href="http://www.json.org/json-ru.html" rel="nofollow"><span class="Apple-style-span" style="font-size: small;">www.json.org</span></a><span class="Apple-style-span" style="font-size: small;">.</span><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">Зачем он нужен?</span><br />
<br />
Обычно для обмена данными используется <b>XML</b>-формат. Потому что для работы с ним в <b>ActionScript 3.0</b> есть целый пакет классов <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/xml/package-detail.html" rel="nofollow">flash.xml</a>, что облегчает работу с данными. Но имеется один недостаток - это вес данных. В <b>XML</b>-обвязке используются названия узлов и атрибутов, и это в свою очередь значительно увеличивает вес данных при загрузке.<br />
<br />
Так вот, в <b>JSON</b>-формате обвязка данных имеет минимальный вес, несмотря на то, что в нем имеются все возможности <b>XML</b>-формата. Также к плюсам можно отнести то, что почти все современные языки программирования поддерживают его в какой-либо форме.<br />
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">Синтаксис</span><br />
<br />
<b>JSON</b>-объект строится двумя структурами:<br />
<ul><li>Коллекция пар ключ/значение (В нашем понимании - это <b>Объект</b>).</li>
<li>Упорядоченный список значений (<b>Массив</b>).</li>
</ul><div><div><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">{
"firstName": "Ivan",
"lastName": "Ivanov",
"address": {
"streetAddress": "100 Lenin str., apt. 53",
"city": "Moscow",
},
"phoneNumbers": [
"+7 123 4567890",
"+7 098 7654321"
]
}</pre></span></div><div>Подробнее о <b>JSON</b>-формате:<br />
<ul><li><a href="http://www.json.org/json-ru.html" rel="nofollow">Введение в JSON</a></li>
<li><a href="http://ru.wikipedia.org/wiki/JSON#.D0.A1.D0.B8.D0.BD.D1.82.D0.B0.D0.BA.D1.81.D0.B8.D1.81" rel="nofollow">JSON-Википедия</a></li>
</ul>
<br/>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<div><span class="Apple-style-span" style="font-size: x-large;">Работа с форматом в ActionScript 3.0</span></div></div></div><br />
Как мы уже говорили, что почти все современные языки программирования поддерживают <b>JSON</b>-формат. <b>ActionScript 3.0</b> не исключение. Имеется специальная библиотека классов от <a href="http://www.adobe.com/" rel="nofollow">Adobe</a> для работы с различными данными. Называется она <b>as3corelib</b>. Доступна на <a href="http://code.google.com/p/as3corelib/" rel="nofollow">Google Code</a>.<br />
В ней имеется необходимый нам статический класс <a href="http://code.google.com/p/as3corelib/source/browse/trunk/src/com/adobe/serialization/json/JSON.as" rel="nofollow">JSON.as</a><br />
<br />
Чтобы декодировать строку <b>JSON</b>-формата в объект, необходимо вызвать у одноименного класса метод <b>decode</b>.<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var obj:Object = JSON.decode(str);</pre>Для того, чтобы преобразовать объект в строку нужно вызывать метод <b>encode</b>.<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var str:String = JSON.encode(obj);</pre><br />
<span style="font-size: x-large;">Смотрите также:</span>
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/03/actionscript-30.html">Сохранение изображения на ActionScript 3.0</a></li>
</ul>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com6tag:blogger.com,1999:blog-6470399064206765359.post-86885303048546743112010-03-26T10:01:00.003+03:002014-10-28T10:51:15.967+03:00Загрузка и отображение .bmp-изображений на ActionScript 3.0Все мы знаем, что для того, чтобы загрузить изображение во <b>as3</b>-приложение, обычно используется экземпляр класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/Loader.html" rel="nofollow">flash.display.Loader</a>. Но типы загружаемых изображений ограничены. Возможно загрузка только .<b>png</b>, .<b>jpg</b>, .<b>gif</b>, .<b>swf</b>-файлов. А как быть например с .<b>bmp</b>-изображениями? Об этом мы и поговорим.<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">URLLoader.load();</span><br />
<br />
Загружать изображение будем как бинарные данные, с помощью экземпляра класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/URLLoader.html" rel="nofollow">flash.net.URLLoader</a>. Указываем экземпляру формат загружаемых данных <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/URLLoaderDataFormat.html#BINARY" rel="nofollow">URLLoaderDataFormat.BINARY</a>, и вызываем метод <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/URLLoader.html#load()" rel="nofollow">load</a>, где в качестве параметра передаем экземпляр класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/URLRequest.html" rel="nofollow">flash.net.URLRequest</a> с адресом к файлу.<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var loa:URLLoader = new URLLoader()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
loa<span class="preprocessor" style="font-family: Courier, monospace; font-size: 12px;">.</span><span class="preprocessor" style="font-family: Courier, monospace; font-size: 12px;">dataFormat</span> = URLLoaderDataFormat<span class="preprocessor" style="font-family: Courier, monospace; font-size: 12px;">.BINARY</span><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
loa<span class="preprocessor" style="font-family: Courier, monospace; font-size: 12px;">.</span><span class="preprocessor" style="font-family: Courier, monospace; font-size: 12px;">load</span>(new URLRequest(<span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"image.bmp"</span>))<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre><br />
<span class="Apple-style-span" style="font-size: x-large;">ImageDecoder</span><br />
<br />
Так как все изображения сжаты определенными алгоритмами, для того, чтобы их отобразить, необходимо их раскодировать. В прошлом посте мы рассматривали <b>Encode</b>r'ы изображений, и говорили о том, что писать их самому нет необходимости, потому что в сети полно готовых. Такая же ситуация и с <b>Decoder</b>'ами. <a href="http://www.google.ru/search?hl=ru&newwindow=1&q=bmpdecoder.as&lr=&aq=f&aqi=&aql=&oq=&gs_rfai=" rel="nofollow">Ищем</a>. Находим:<br />
<ul><li><a href="http://www.libspark.org/browser/as3/BMPDecoder/src/com/voidelement/images/BMPDecoder.as" rel="nofollow">BMPDecoder.as</a></li>
</ul><div>Использовать их довольно легко. Вызывается метод <b>decode</b>, в единственном параметре передается ссылка на загруженные бинарные данные в виде экземпляра класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/utils/ByteArray.html" rel="nofollow">flash.utils.ByteArray</a> (Те данные, что мы загрузили с помощью <b>URLLoader</b>). После исполнения возвращается экземпляр <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html" rel="nofollow">flash.display.BitmapData</a>, который мы уже можем отобразить используя <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/Bitmap.html" rel="nofollow">flash.display.Bitmap</a>.</div><div><span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var brr:ByteArray = loa<span class="preprocessor" style="color: black; font-family: Courier, monospace; font-size: 12px;">.data</span><span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
v<span style="color: black; font-family: Courier, monospace; font-size: 12px;">ar </span><span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">dec</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">:B</span>MPDecoder = new BMPDecoder ()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
var raw:BitmapData = <span class="keyword" style="color: black; font-family: Courier, monospace; font-size: 12px;">dec</span><span class="preprocessor" style="color: black; font-family: Courier, monospace; font-size: 12px;">.decode</span>(brr)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">; </span>
var bmp:Bitmap = new Bitmap(raw)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
<span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">a</span><span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">d</span><span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">d</span><span class="number" style="color: black; font-family: Courier, monospace; font-size: 12px;">C</span><span style="color: black; font-family: Courier, monospace; font-size: 12px;">hild(bmp</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre></div><div>В сети можно также найти <b>Decoder</b>'ы для других типов файлов. Например для .<b>tiff </b>(Tagged Image File Format), и даже .psd-файлов (Photoshop Document). Так что теперь дело за вами :)<br />
<span class="Apple-style-span" style="font-family: arial, sans-serif; font-size: small;"><span class="Apple-style-span" style="font-family: 'Times New Roman'; font-size: medium;"> </span></span></div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com5tag:blogger.com,1999:blog-6470399064206765359.post-48897196936819138812010-03-26T09:42:00.000+03:002014-10-28T10:49:53.315+03:00Доступен справочник по языку Adobe Flex 4 ActionScript 3.0 на русском языкеНе прошло и <a href="http://opensource.adobe.com/wiki/display/site/2010/03/22/Flex+4+and+Flash+Builder+4+Have+Shipped!" rel="nofollow">недели</a>, как Adobe уже перевела на русский язык официальную <a href="http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/#top" rel="nofollow">справку</a> ActionScript 3.0 под <a href="http://opensource.adobe.com/wiki/display/flexsdk/Flex+4" rel="nofollow">Flex 4</a>. Всегда бы так :)<br />
Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com2tag:blogger.com,1999:blog-6470399064206765359.post-47024202434854924852010-03-25T11:50:00.006+03:002014-10-30T10:53:14.287+03:00Сохранение изображения на ActionScript 3.0<div dir="ltr" style="text-align: left;" trbidi="on">
Частенько бывает необходимость сохранить отображаемый во <b>Adobe Flash Player</b>'е контент в изображение. Как это сделать, мы рассмотрим по пунктам:<br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">BitmapData.draw();</span><br />
<br />
Для того, чтобы снять снимок с любого отображаемого объекта (основная их часть находится в пакете <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/package-detail.html" rel="nofollow">flash.display</a>) в <b>ActionScript</b>, нужно воспользоваться методом <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html#draw()" rel="nofollow">draw</a> у экземпляра класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/display/BitmapData.html" rel="nofollow">flash.display.BitmapData</a>.<br />
<br />
Для этого необходимо создать экземпляр класса <b>BitmapData</b>. В конструкторе указываем размеры нашего снимка. Далее вызываем метод <b>draw</b>, где в качестве параметра передадим ссылку на необходимый нам display-объект (в данном случае, это экземпляр сцены).<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<div style="background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var raw:BitmapData = new BitmapData(stage<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.stageWidth</span>, stage<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.stageHeight</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
raw<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.draw</span>(stage)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre>
</div>
После выполнения метода наш экземпляр заполнится сырыми данными с информацией о каждом пикселе.<br />
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">ImageEncoder</span><br />
<br />
Теперь для того, чтобы наш экземпляр класса <b>BitmapData </b>с сырыми данными стал полноценным изображением, нужно сконвертировать его данные соответсвующим образом и собрать их в файл.<br />
<br />
В качестве файла мы используем экземпляр класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/utils/ByteArray.html" rel="nofollow">flash.utils.ByteArray</a>. В него мы будем записывать сконвертированные данные в виде байтов.<br />
<br />
Изображения бывают разных типов. Наиболее популярные из них <b>.png</b> (Portable Network Graphics), <b>.jpg</b> (Joint Photographic Experts Group), <b>.bmp</b> (Bitmap Picture). Отличаются они по алгоритмам сжатия, поэтому в разных типах результат имеет разное качество. На данный момент <b>Encoder</b>'ов изображений на <b>ActionScript 3.0</b> достаточно, и нет необходимости писать их самим. Поэтому мы воспользуемся готовыми:<br />
<ul>
<li><a href="http://code.google.com/p/as3corelib/source/browse/trunk/src/com/adobe/images/PNGEncoder.as?r=25" rel="nofollow">PNGEncoder.as</a> (Во Flex 4 этот класс входит в <a href="http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/mx/graphics/codec/PNGEncoder.html" rel="nofollow">стандартную поставку</a> от Adobe)</li>
<li><a href="http://code.google.com/p/as3corelib/source/browse/trunk/src/com/adobe/images/JPGEncoder.as?r=25" rel="nofollow">JPGEncoder.as</a> (Во Flex 4 этот класс входит в <a href="http://help.adobe.com/ru_RU/AS3LCR/Flex_4.0/mx/graphics/codec/JPEGEncoder.html">стандартную поставку</a> от Adobe)</li>
<li><a href="http://code.google.com/p/canvas3/source/browse/trunk/source/code/com/adobe/images/BMPEncoder.as?r=18" rel="nofollow">BMPEncoder.as</a></li>
</ul>
В сети также полно <b>Encoder</b>'ов и для других типов изображений.<br />
<br />
Пример использования <b>PNGEncoder.as</b><br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<div style="background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var brr:ByteArray = PNGEncoder.encode(raw);</pre>
</div>
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span class="Apple-style-span" style="font-size: x-large;">FileRerence.save();</span><br />
<br />
Теперь полученный экземпляр класса <b>ByteArray</b> необходимо сохранить в файл на компьютере пользователя. Для решения этой задачи можно воспользоваться методом <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html#save()" rel="nofollow">save</a> экземпляра класса <a href="http://help.adobe.com/ru_RU/AS3LCR/Flash_10.0/flash/net/FileReference.html" rel="nofollow">flash.net.FileReference</a>.<br />
<br />
В версиях <b>Adobe Flash Player</b> раннее 10, 1.5 этого метода нет. Поэтому приходилось отдавать <b>ByteArray</b> на сервер, который сохранял у себя его в файл и отдавал ссылку на него.<br />
<span class="Apple-style-span" style="font-family: Tahoma, Helvetica, sans-serif; font-size: 12px;"></span><br />
<div style="background-color: white; font-family: Tahoma, Helvetica, sans-serif; font-size: 12px; margin-bottom: 5px; margin-left: 5px; margin-right: 5px; margin-top: 5px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">
<pre class="code" style="background-color: #fbf9f5; border-bottom-color: rgb(179, 179, 179); border-bottom-style: solid; border-bottom-width: 1px; border-left-color: rgb(179, 179, 179); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(179, 179, 179); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(179, 179, 179); border-top-style: solid; border-top-width: 1px; clear: both; font-family: Courier, monospace !important; font-size: 12px; margin-top: 6px; overflow-x: auto; overflow-y: auto; padding-bottom: 8px; padding-left: 20px; padding-right: 8px; padding-top: 8px;">var fil:FileReference = new FileReference()<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span>
<span class="number" style="color: green; font-family: Courier, monospace; font-size: 12px;">f</span>il<span class="preprocessor" style="color: #2b91af; font-family: Courier, monospace; font-size: 12px;">.save</span>(brr, <span class="string" style="color: teal; font-family: Courier, monospace; font-size: 12px;">"image.png"</span>)<span class="comment" style="color: grey; cursor: text !important; font-family: Courier, monospace; font-size: 12px; padding-bottom: 0px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; text-decoration: none !important;">;</span></pre>
</div>
<br />
Вот что у меня получилось в качестве примера :)<br />
<br />
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" height="300" id="main" width="400"> <param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="false" /><param name="movie" value="https://sites.google.com/site/as3coder/files/AS3CoderSaveImage.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#F0F0F0" /><embed src="https://sites.google.com/site/as3coder/files/AS3CoderSaveImage.swf" quality="high" bgcolor="#F0F0F0" width="400" height="300" name="main" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed></object><br />
<br/>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- as3coder_into_post -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-0750487850595347"
data-ad-slot="6204164522"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<br/>
<br/>
<span style="font-size: x-large;">Смотрите также:</span>
<br />
<ul style="text-align: left;">
<li><a href="http://as3coder.blogspot.ru/2014/08/emoji.html">Emoji на вашем сайте</a></li>
<li><a href="http://as3coder.blogspot.ru/2014/08/camera-on-javascript.html">Сохранить изображение с камеры на JavaScript</a></li>
<li><a href="http://as3coder.blogspot.ru/2010/08/web.html">Сохранение изображения с Web-камеры</a></li>
</ul>
</div>Farid Shamsutdinovhttp://www.blogger.com/profile/14877548685763682250noreply@blogger.com45