Flash облако с изображениями и текстом

Мы часто сталкиваемся на сайтах с такими модулями, как облако тегов. Обычно это либо текстовая информация, либо изображения. Понадобилось мне совместить эти варианты в один. Поискав в интернете, нашел одно более менее нормально решение — XML driven Flash Tag Cloud

Модуль хорош собой, но есть и некоторые недостатки, которые пришлось подправить, благо исходники автор прилагает.

Модуль довольно гибко настраивается через xml файл, вплоть до размера текста, его цвета. Проблема заключается в том, что изображение у нас масштабируется в зависимости от ширины текста, что не очень-то и удобно, т.к. задача была поставлена — вывести отдельно текст, отдельно изображение.

Поставленные задачи:

  • Сделать независимый вывод изображений и текста
  • Добавить возможность указания размера изображения
  • Поправить проблемы с кодировкой, т.к. русский язык выводится не совсем правильно
  • Убрать обводку при наведении мыши
  • Разместить текст под изображением и оцентрировать его

Для всех манипуляций понадобится Macromedia Flash. Для начала скачиваем исходники модуля.

Для нормальной отладки открываем сам файл исходника source/text_and_image_cloud.fla и классы source/com/OneElement.as, source/com/ImageCloud.as

Честно говоря, с флэшем знаком на уровне выполнения простых лабораторных работ, но в разобраться довольно просто.

В ImageCloud.as нам особых изменений делать не нужно.

Для начала нам надо инициализировать считать значение высоты и ширины картинки из xml файла. Будем указывать их как атрибут iw для ширины и ih для высоты.

После строки:

просто дописываем

затем допишем эти параметры в инициализацию объекта класса OneElement:

переходим к файлу OneElement.as, в котором формируется блок текста с изображением. Ниже приведу весь листинг кода с моими комментариями для удобного ознакомления

В исходнике из библиотеки можно удалить ненужные шрифты, что я и сделал, оставив только times new roman. А проблема с русским текстом решилась сама по себе после компиляции swf файла.

В итоге получаем вот такой модуль.

В примере внесены четыре объекта — текст, изображение, с измененными размерами, эта же картинка, но в оригинальном размере и векторное изображение.

Как видите, растровые изображения мерцают, избавиться от данного эффекта не получилось. Флэш нормально анимирует лишь векторные изображения, которое я добавил в качестве примера.

Так выглядит конфигурационный файл cloud_data.xml