Как конвертировать swf (flash) в html5


Сейчас технология flash активно вытесняется с сайтов в интернете. Ей на смену приходит html5. В последних версиях андроид отсутствует поддержка данной технологии, наличие flash-элементов для поисковиков – это уже показатель того, что страницу некорректно будут отображать мобильные устройства. Однако, работать с flash удобно – с помощью этой мультимедийной платформы быстро и легко создаются баннеры, небольшие ролики, интерактивные элементы, игры, можно смотреть потоковое видео - возможностей немало. Мы сейчас не будем говорить о том, хуже или лучше приходящий на смену флешу html5,а просто покажем, как можно конвертировать один в другой.

Итак, у нас есть ролик в формате swf, необходимо вместо него получить код для ставки на страницу. Для этого воспользуемся одним из продуктов от гугла – идем сюда. Здесь загружаем свой ролик или баннер - что там у вас есть; далее ставим галочку, что соглашаемся (честно говоря, я не знаю, с чем там надо соглашаться, но думаю, что ничего серьезного и криминального) и жмем “Upload”. Далее наблюдаем кнопку «View conversion», нажав её попадаем на новую страницу, где и есть наш преобразованные ролик. Если все в порядке, то можно сохранить ролик. Сам гугл предлагает так:

To save: Right click the "VIEW CONVERSION" button & hit "Save link as..."
Однако у меня не получилось сохранить ссылку с помощью правой клавиши, поэтому я просто посмотрел исходный код страницы. В нем нам нужно то, что идет после тегов <title>, а заканчивается – закрывающим тегом </body>. Ну и еще выкидываем содержимое тега style. То есть берем это:

<script type="text/javascript" src="https://www.gstatic.com/swiffy/v7.4/runtime.js"></script>
    <script>
      swiffyobject = {"as3":true,"frameRate":30,"frameCount":1,"backgroundColor":-1,"frameSize":{"ymin":0,"xmin":0,"ymax":6000,"xmax":6000},"fileSize":951,"v":"7.4.1","internedStrings":["PACKAGE","specials","methods"],"version":29,"tags":[{"label":"Main","type":15},{"strings":["","","void","flash.events","Event","TimerEvent","Main","flash.display","Sprite","_sprite","_vx","Number","_vy","_timer","flash.utils","Timer","init","onTimer","stage","addEventListener","ADDED_TO_STAGE","removeEventListener","graphics","beginFill","drawCircle","endFill","x","y","addChild","timer","start","Object","EventDispatcher","DisplayObject","InteractiveObject","DisplayObjectContainer"],"ints":[0,1],"namespacesets":[],"methods":[{"code":"0DBH","traits":[],"params":[],"optionals":[],"type":0,"locals":1,"exceptions":[]},{"code":"0DDQSQBgDhIIAADQTwwAEAwAAF0PYAJmENBmDE8PAkc\u003d","traits":[],"params":[],"optionals":[],"type":1,"locals":1,"exceptions":[]},{"code":"0DBdEWACZhDQZgxPEQLQXQVKBQBoBtBmBmYSJeZmJGRPEwLQZgZmEiQAKiQUTxQD0GYGKWASTxUA0GYGJGRhFtBmBiXIAWEXXRjQZgZPGAHQXQskBUoLAWgK0GYKLB3QZg1PDwLQZgpPGQBH","traits":[],"params":[2],"optionals":[{"kind":"#1","value":3}],"type":1,"locals":2,"exceptions":[]},{"code":"0DDQZgbQZgZmFtBmB6BhFtBmBtBmBmYX0GYJoGEX0GYGZhclmAIOBQAA0CT/aAnQZgZmFyQUDAUAANAkAWgJ0GYGZhYlmAIOBQAA0CT/aAfQZgZmFiQUDAUAANAkAWgHRw\u003d\u003d","traits":[],"params":[3],"optionals":[],"type":1,"locals":2,"exceptions":[]},{"code":"0DBlAGAaMGAbMGAcMGAdMGAeMGAFMGAFWAAdHR0dHR1oBEc\u003d","traits":[],"params":[],"optionals":[],"type":0,"locals":1,"exceptions":[]}],"classes":[{"init":1,"supertype":5,"traits":[{"kind":"#1","name":6,"type":5,"value":0,"writable":true},{"kind":"ints","name":7,"type":8,"value":1,"writable":true},{"kind":"ints","name":9,"type":8,"value":1,"writable":true},{"kind":"#1","name":10,"type":11,"value":0,"writable":true},{"kind":"#2","name":12,"value":2},{"kind":"#2","name":13,"value":3}],"ns":4,"cinit":0,"ctraits":[],"name":4}],"multinames":[{"ns":1,"kind":7,"name":2},{"ns":2,"kind":7,"name":4},{"ns":2,"kind":7,"name":5},{"ns":1,"kind":7,"name":6},{"ns":3,"kind":7,"name":8},{"ns":5,"kind":7,"name":9},{"ns":5,"kind":7,"name":10},{"ns":1,"kind":7,"name":11},{"ns":5,"kind":7,"name":12},{"ns":5,"kind":7,"name":13},{"ns":6,"kind":7,"name":15},{"ns":5,"kind":7,"name":16},{"ns":1,"kind":7,"name":17},{"ns":1,"kind":7,"name":18},{"ns":1,"kind":7,"name":19},{"ns":1,"kind":7,"name":20},{"ns":1,"kind":7,"name":21},{"ns":1,"kind":7,"name":22},{"ns":1,"kind":7,"name":23},{"ns":1,"kind":7,"name":24},{"ns":1,"kind":7,"name":25},{"ns":1,"kind":7,"name":26},{"ns":1,"kind":7,"name":27},{"ns":1,"kind":7,"name":28},{"ns":1,"kind":7,"name":30},{"ns":1,"kind":7,"name":31},{"ns":2,"kind":7,"name":32},{"ns":3,"kind":7,"name":33},{"ns":3,"kind":7,"name":34},{"ns":3,"kind":7,"name":35}],"uints":[0],"scripts":[{"init":4,"traits":[{"kind":"classes","name":4,"slot":1,"value":0,"writable":true}]}],"type":18,"namespaces":[{"kind":"#0","name":1},{"kind":"#0","name":3},{"kind":"#0","name":7},{"kind":"PROTECTED","name":6},{"kind":"PRIVATE","name":0},{"kind":"#0","name":14}]},{"references":[{"name":"Main","id":0}],"type":19},{"type":2}]};
    </script>
    <div id="swiffycontainer" style="width: 300px; height: 300px">
    </div>
    <script>     
      var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),
          swiffyobject, {});      
      stage.start();
    </script>
Корректно ли конвертирует этот сервис? Я проверил на двух роликах, в одном не поддерживается загрузка музыки, а во втором случае шарик стал двигаться быстрее, иногда вообще, как сумасшедший носиться - посмотреть можно здесь – Движение круга в замкнутой плоскости на флеш as3 (это как раз код преобразования этого ролика). В целом надо еще пробовать, но мне кажется более-менее – для простых баннеров пойдет. Вот так можно несложно конвертировать swf (flash) в html5.
Автор этого материала - я - Пахолков Юрий. Я оказываю услуги по написанию программ на языках Java, C++, C# (а также консультирую по ним) и созданию сайтов. Работаю с сайтами на CMS OpenCart, WordPress, ModX и самописными. Кроме этого, работаю напрямую с JavaScript, PHP, CSS, HTML - то есть могу доработать ваш сайт или помочь с веб-программированием. Пишите сюда.

тегизаметки, flash, html5




Отправляя сообщение я подтверждаю, что ознакомлен и согласен с политикой конфиденциальности данного сайта.




Обзор языков программирования
Урок 3. Работа с базой данных в Yii2
Победа