Использование графики. Загрузка графических изображений на телефон.
Совсем недавно у Вас был телефон с монохромным экраном, который имел размер дисплея всего примерно 100х50 точек. Вы загружали черно-белые логотипы, открытки и были этому рады. Сейчас телефоны уже имеют достаточно большие дисплеи и передают уже 65000 цветов, а у более новых моделей, используется свыше 200000 цветов. Поэтому Вы можете загружать к себе на телефон картинки уже высокого разрешения, которые будут у Вас показываться почти без потери качества.
Раньше телефоны понимали только определенный формат, который назывался WBMP. Есть множество программ, которые конвертируют стандартные BMP,GIF и JPEG файлы в формат WBMP. Кстати, редактор SantanaBuilder автоматически конвертирует всю графику в формат WBMP. Так, что если Ваш телефон оснащен еще монохромным дисплеем, то тогда Вам придется наслаждаться только лишь двух цветными картинками низкого качества и маленького размера. Я не буду останавливаться подробно на этом формате, а перейду сразу к цветным изображениям, благо сейчас купить телефон с цветным экраном стоит совсем недорого, как это было, скажем пару лет назад.
Есть два варианта использования графических изображений:
1. Вы вставляете рисунок на свой WAP сайт. Например, это будет Ваш логотип, название раздела или гиперссылка в виде картинки.
2. Вы храните у себя на сайте картинки, чтобы использовать например для обоев, MMS сообщений или других целей (к примеру это фотографии Ваших друзей).
Эти два варианта имеют существенные отличия.
Разберем по порядку:
Вариант 1.
Многие телефоны имеют ограничения на размер загружаемой страницы. А если еще страница будет содержать картинку, то объем загрузки увеличивается. Плюс ко всему пользователь платит за то, что видит картинку на сайте, которая скажем ему и не нужна вовсе. Поэтому основное требование к изображению, она должна быть, как можно меньше по объему файла. Поэтому в качестве картинок на сайте, как правило, нужно использовать GIF файлы, содержащие не более 16 цветов, а лучше всего 2-3 цвета. Например, слово из трех букв напишите тремя цветами и не увлекайтесь больше.
Это я все отношу, к примеру, создания логотипа для сайта или скажем легкой навигации.
Давайте поподробнее рассмотрим пример, как можно сделать логотип для сайта с легкой анимацией. Для этого нам понадобится программа Adobe ImageReady, которая поставляется вместе с Photoshop.
Создадим в ней новое изображение размером 75х18 пикселей, разрешение должно обязательно стоять 72 точки на дюйм, палитра RGB. Выберите из коллекции шрифтов какой-нибудь интересный шрифт и напишите что-нибудь. К примеру, слово "welcome". Здесь есть одна тонкость, нужно чтобы шрифт был не сглаженный. Для этого в атрибутах шрифта поменяйте параметр на “none”, файл будет иметь значительно меньший размер, чем если бы шрифт был сглаженный. Установите цвет, подходящий размер, а также можете выбрать начертание шрифта - полужирный, курсив, подчеркнутый.
Придадим анимацию. Например, надпись будет менять цвет в такой последовательности: красный->синий->черный.
Для этого создадим еще дополнительно 2 надписи. Чтобы сделать на основе готовой надписи, нужно продублировать 2 раза слой, выберите в меню “Layer” команду “Duplicate Layer”. Данную команду повторите два раза.
Теперь в окне слоев мы видим уже три слоя с надписью "welcome". Поменяем для двух новых слоев цвет надписи. В одном слое сделаем надпись синей, в другом черной. Для этого выделяем слой в окне слоев и меняем атрибуты цвета.
В данный момент мы видим три слоя. Самый верхний слой закрывает два остальных нижних. Чтобы придать анимацию, нам следует создать дополнительно еще два кадра. В каждом кадре будет затем показываться один слой, остальные два слоя показываться не будут (я не считаю фон отдельным слоем, в дальнейшем мы его удалим).
Чтобы создать новый кадр в окне “Animation” кликните на иконку “Duplicates current frame” два раза. В результате у Вас получились 3 кадра. Во всех кадрах отображается только верхний слой.
Нашей следующей задачей стало убрать в каждом кадре два ненужных цвета, т.е. два слоя с надписями и показывать только один слой.
Выделим первый кадр и в окне “Layers” спрячем два верхних слоя. Чтобы это получилось нужно кликнуть на иконку “Indicates layer visibility” ("глаз"). В итоге мы скроем этот слой. Тоже нужно сделать еще для одного слоя, в итоге у нас остается только один слой с надписью.
 |
 |
 |
Остается нам задать промежуток времени, через которое должно происходить смена одного кадра на другой. Установим для каждого кадра - 1 секунду.
Анимация готова. Удалим слой с фоном. Для этого в окне “Layers”, выделите слой “Background” и кликните на иконку “Delete Layer”. Дело в том, что сой задается по умолчанию белый. Вы конечно можете задать слой другим цветом. Но какой будет цвет фона у пользователей на их мобильном Вам заранее не известно, да и фон будет отличаться, у каждой моели свой цвет. Поэтому лучше создавать изображение с прозрачным фоном, в данном случае будет только отображаться надписи.
Завершающим этапом конечно является создание файла. Для этого в меню выберем команду File->Save optimized As... Укажите название файла и директорию куда сохранять. После этого у Вас будет создан файл, например welcome.gif.
Перейдем теперь к основному. Для вставки в wml картинки предназначен тэг <img />. Как Вы видите, / - добавлен в конец тэга, так как у него нет закрывающего тэга.
<img src=”welcome.gif” alt=”welcome” align=”top” height=”75” width=”18” />
Что мы увидим на экране – рисунок, загруженный с этого же каталога с именем “welcome.gif”, альтернативный текст “welcome”, выравнивание “по верху”, размеры “100х20 пикселей”. Здесь Вы можете опустить такие параметры, как выравнивание и размер, но вот параметром alt пренебрегать не следует. Многие телефоны все-таки еще не поддерживают графические форматы, многие пользователи отключают функцию показа картинок в браузере.
Покажите посетителям, что здесь у Вас стоит графическое изображение.
Чтобы использовать графическое изображение в качестве гиперссылки:
<a href=”main.wml”> <img src=”enter.gif” alt=”Вход на сайт” /></a>
А теперь давайте разберемся, что нужно, чтобы картинка загрузилась на Ваш и телефон, а потом Вы её будете использовать по своему назначению.
Конечно, Ваш телефон должен обязательно поддерживать загружаемые файлы. Еще у большинства моделей есть ограничение на размер принимаемого файла. Поэтому если картинка не грузиться к Вам, то попытайтесь разобраться сначала с техническими характеристиками Вашей модели.
Чтобы загрузить картинку к Вам на телефон, нужно просто перейти по простой гиперссылки на нужный Вам графический файл. Например:
<a href=”moyafotografia.jpg”>Моя фотография.</a>
После нажатия на эту ссылку, Ваш телефон начнет соединяться с этим файлом и если он поддерживает этот формат, то начнет грузить к себе в память. После загрузке сообщит Вам, что изображение принято и расположено там-то.
Запомните еще один Важный момент, не ошибайтесь в названиях файла. Даже если Вы пропустите одну букву или неверно укажите, файл не будет найден, и соответственно грузиться не станет.
Но если Вы вдруг захотели сделать коллекцию картинок на сайте. Для этого надо воспользоваться следующей методикой – в страницу Вы вставляете маленький вариант картинки, которая в свою очередь будет гиперссылкой на большую загружаемую картинку. Данная методика позволяет экономить на загружаемых байтах в телефон. Если картинка посетителю не приглянулась, он её полностью грузить не будет.
В принципе это все должно Вам было давно знакомо, если Вы уже делали свои сайты в HTML, ведь там тоже используется правило, чтобы страница грузилась быстрей, нужно оптимизировать всю используемую на странице графику. Многие крупные WAP порталы стараются ограничиваться только лишь текстом, без использования графики.
