Скоро ми се наложи за един проект да направя флаш-банер под Linux, като използвам само OpenSource продукти. Отначало малко се стреснах, но след кратко ровене с "чичо" открих няколко изключително интересни инструмента, които намалят в пъти времето за работата с Flash-редактори. Най-простичкия и гениален инструмент, който ми се наби на очи е
swfmill.
swfmill е един изключително лесен за работа Flash компилатор. С тази елементарна OpenSource програмка могат да се създадат невероятни красоти, стига да ви дойде музата и да имате някоя идея в главата. Програмата по принцип се използва за създаване на Flash-библиотеки с картинки, шрифтове и символи, и т.н. Но спокойно може и е напълно достатъчна да се използва за създаване на простички Flash анимации.
За да покажа пример как се ползва програмката си обработих 1 изображение с Gimp:
След това разбрах документацията на програмката, че трябва да имам файл с инструкции, какви кадри да съдържа Flash-анимацията:
http://swfmill.org/doc/using-swfmill.html
Създадох си собствен текстов XML-файл за 2 кадъра със следното съдържание:
<?xml version="1.0" encoding="iso-8859-1" ?>
<movie width="460" height="110" framerate="12">
<background color="#ffffff"/>
<!-- Ресурсите, които ще ползваме за анимацията -->
<clip id="bg" import="winter.jpg"/>
<textfield id="tbox" width="400" height="50" size="45" text="ALOOOHA PI40V3!" color=" #fffc02"/>
<!-- Край на ресурсите -->
<frame><place id="bg" name="bg" x="0" y="0" depth="0"/></frame><!-- Кадър 1 - фон -->
<frame><place id="tbox" name="tb" x="20" y="20" depth="1"/></frame><!-- Кадър 2 -->
</movie> |
Според документацията, ако сложа по-нисък параметър за дълбочина "depth", тогава това изображение ще седи като фон на по-високите слоеве в останалите кадри. Т.е. ако искам да сложа фон още в първия кадър, тогава задавам depth="0". А на останалите кадри слагам depth="1" или "2" и т.н.
Картинката, компилатора swfmill.exe и xml-файла banner_00.xml ги поставих в една директория и от Prompt-a изпълних следната команда:
swfmill.exe simple banner_00.xml banner_00.swf |
Резултата беше флаш-файла banner_00.swf, който можете да видите тук:
indexx.html
Целия сорс код плюс готовия файл можете да изтеглите от тук:
http://nediko.info/razni/swfmill_and_mtasc/banner_00.zip
Супер тарикатски инструмент. Нека да видим с малко повече заиграване и мързел с няколко реда на bash какво можем да постигнем. С малко фантазия и още 2-3 картинки накарах снега да вали :). Все повече започва да прилича на истински банер. Ето това е разширената версия на горната анимация:
indexx.html
Целия сорс код плюс готовия файл можете да изтеглите от тук:
http://nediko.info/razni/swfmill_and_mtasc/banner_01.zip
То това всичкото много гот, но как да накараме банера да представлява линк, който да накликаме и да ни отвори друга страница? Демек как да стане това чудо класически банер? Е, много лесно! Файловете, които създаваме с swfmill, лесно можем да ги "зареждаме" с един друг конзолен инструмент, който пък е толкова нагъл, че може да компилира ActionScript :)! Това е компилатора mtasc (между другото има и още по-печен - haXe).
Преди всичко ще направя библиотека от анимацията, която създадох, т.е. ще компилирам още един swf-файл, който е неизпълним и само съдържа предишното филмче. За целта си създавам нов xml (libs.xml):
<?xml version="1.0" encoding="iso-8859-1" ?>
<movie width="460" height="110" framerate="12">
<background color="#ffffff"/>
<frame>
<library>
<clip id="Banner" import="banner_01.swf"/>
</library>
</frame>
</movie> |
Компилирам новия libs.xml до swf:
swfmill.exe simple libs.xml banner.swf |
Така създадох библиотеката banner.swf, която съдържа филмчето от banner_01.swf.
Сега ще потърся AS2 код, който да е подходящ за банери и който ми е необходим за контролиране на събитието кликане върху анимацията. Ето този код мисля, че е подходящ (нищо не разбирам от AS2 и AS3, а и не са ми интересни, затова налучквам :) ):
class Test extends MovieClip{
function Test(target){
Object.registerClass ("Banner", MovieClip );
target.__proto__ = this.__proto__;
target.__constructor__ = Test;
this = target;
_root.attachMovie ("Banner", "myPicVar", 1);
}
static function main (){
var TestInstance:Test = new Test( _root );
_root.myPicVar.onPress = function(success){
getURL("http://download.bg/");
}
}
} |
Запазвам този код в файла banner_01.as и го компилирам със следната команда:
mtasc -v -swf banner.swf -main banner_01.as |
Е, вече май си имам готово банерче :)! Да видим какво се получи:
indexx.html
Това вече си е един истински изродски банер, който ни отвежда до началната страница на download.bg :)!
Целия код на банера, включително и с инструментите за компилиране, може да се изтегли от тук:
http://nediko.info/razni/swfmill_and_mtasc/banner_01-AS2.zip
За да си спестя време в писане на простотии и повтаряеми редове използвах bash и seq от UnxUtils Примерен код за bash:
for i in `seq 0 100`; do echo '<frame>...</frame>'>>count.txt; done; |
Наздраве! Дано ви е харесало урочето за безплатните OpenSource банери!
Отговор
За печат
Коментар