И насполедок хочу сказать, что в самом Themes Creator есть свои средства уменьшения размеров файлов. Они работают только с PNG (вот еще один довод в пользу этого формата). Если поставить в меню Tools настройку "Enable color reduction filter", у каждого элемента в PNG внизу можно будет поставить флажок Dither. При сохранении Themes Creator обработает все эти файлы, уменьшив в каждом количество цветов до максимального, которое поддерживают экраны мобильников. Никакой потери качества на мобильнике при этом заметно не будет, а вес уменьшиться очень заметно. Можно посмотреть, на сколько уменьшился вес каждого элемента, выбрав Tools -> Color reduced image size info. Вот мы вместе и посмотрели, какие есть форматы, где их применять и как сделать вес темы меньше. Вес темы очень актуален, главное - не переусердствовать, чтобы не пошло в ущерб качеству.
Глава 4.GIF-анимация. § 4.1 Введение. Форматы. Программы. Использование в теме. Всем добрый день.Вот и дошла очередь до моего раздела.Респект Malcolm’у за отличную "мат.часть" по устройству GIF. Как уже стало понятно GIF-анимация – это набор кадров,которые сменяют друг друга через определенный интервал (который можно изменять).Кроме GIF-анимации,существует и MNG, и APNG, и SWF (флэш-анимация).
Кроме этого, существует SVG- анимация - Scalable Vector Graphics (масштабируемая векторная графика), работающая по схожему с Флэшем алгоритму на основе xml,т.е. "писать" анимацию можно в обычном блокноте, главное знать правильные коды. SVG, как ни странно, поддерживается гораздо большим числом моделей, нежели Flash и обладает многими преимуществами перед SWF (скажем просто мизерный вес в пределах нескольких килобайт). Останавливаться подробно на этом формате не стану в силу его не очень широкого (пока что) распространения. Подробно о нем можно почитать в Википедии: ru.wikipedia.org/wiki/SVG
Вернемся, всё-таки, к старичку GIF. Существует огромное количество программ,позволяющих создавать GIF-анимацию. Если вы пользователь PhotoShop (а очень желательно,чтобы вы им были,если собираетесь заняться дизайном), то у вас есть встроенный редактор Image Ready (на мой вкус он сложноват). Лично я пользуюсь: - Easy GIF Animator–позволяет сохранять анимацию и в SWF тоже. Скачать: depositfiles.com/files/8401195- JASC Animation Shop–крайне удобен и интуитивно понятен.Последующие примеры будут рассматриваться именно в нем.Скачать: depositfiles.com/ru/files/qdsa99wcl В темах анимация используется на Standby и во всех Highlights. Ни Desktop,ни Popup никакие другие фоны анимацию проигрывать не будут. Хотя в Креаторе всё красиво работает. На Highlights старайтесь ставить анимацию маленького веса, т.к. она может подвисать. Вводная часть завершена.Желающие могут скачать программы и пока что потренироваться работать в них.До завтра!
§ 4.2 Анимируем картинку. Варианты. Примеры. Итак, перейдем, собственно, к процессу (готовьтесь к трате трафика). Скажу сразу, я выделяю 2 "типа" анимаций: <b>- Анимированная картинка - Мультипликация (в следующей лекции)</b> Поясню.Под "Анимированной картинкой" я понимаю анимашку, сделанную из одной-двух картинок с добавлением эффектов или каких-либо дополнений.Примерами таких анимаций могут служить: letyi.do.am/_ld/0/12.gif (эффект Gaussian Blur) или скажем letyi.do.am/_ld/0/13.gif (добавлены блики),или letyi.do.am/_ld/0/14.gif (две картинки просто несколько раз меняются с разным интервалом).
Такие анимации самое простое,что можно сделать.Чтобы добавить эффект к картинке надо просто "перетащить" картинку в прогу (я использую Jasc AnimationShop),затем в строке команд (самая верхняя строчка) выбрать Effects-->Image Effect появится окошко,где можно выбрать эффект и отрегулировать время показа кадров.В других программах принцип такой же. Так же вы можете сделать простую анимашку из двух (трех, четырех, скольких хотите) кадров, используя "Эффекты смены кадров".Например такие: letyi.do.am/_ld/0/15.gif или letyi.do.am/_ld/0/16.gif Эффекты смены кадров можно найти в Effects-->Image Transitition и тоже выбрать то,что вам понравится.Очень советую не просто применить эффект,например вот так: letyi.do.am/_ld/0/17.gif т.к. неизбежно будет "скачок" при включении первого кадра,а делать "круговую" анимацию,скажем так: letyi.do.am/_ld/0/18.gif чтобы переходы были плавными.Выглядит это лучше.
Итак,подведу небольшой итог. Анимировать картинку очень просто,достаточно добавить к ней эффект.В любой программе такие эффекты есть (где-то больше,где-то меньше),так что тут дело вкуса.Так же можно сделать простую анимашку с меняющимися изображениями (эффектов смены так же много).Однако не стоит делать просто тупо мелькающие картинки,если уж взялись делать анимацию,сделайте что-нибудь красивое! До завтра!
§ 4.3 Мультипликация. Технология. Примеры. Вот это уже куда интереснее (готовьтесь к трате трафика)!Но,в то же время,и сложнее. Мультипликация – это создание движущихся изображений,образованных путем смены кадров с меняющимся положением объектов.Т.е. это не просто "мелькание" или там "слайдшоу" это маленький (ну или большой) мультик у вас на экране. Мультипликацию нельзя сделать просто применив эффект,нужно рисовать каждый кадр в отдельности,а уж потом "собирать" их все в программе. Вот например: letyi.do.am/_ld/0/19.gif если вы откроете эту анимацию в редакторе,то увидете 8 кадров,которые сменяют друг друга.Каждый кадр-это новое положение крыльев.Собрав все кадры вместе создается иллюзия полета.
Прежде чем начать рисовать кадры,продумайте,что вы хотите получить,как это должно выглядеть.Очень полезно будет нарисовать на бумаге (хотя бы схематично) каждый кадр,тогда будет гораздо легче рисовать,вы не собьетесь,не пропустите нужное положение и т.д. Так же важно,чтобы положение объектов в анимации изменялось постепенно.Т.е. можно сделать и вот такой полет: letyi.do.am/_ld/0/20.gif но выглядит это не красиво,и нет ощущения движения.Не забывайте и о времени показа каждого кадра!Если кадры будут меняться медленно,то анимация будет прерывистой,будет видно каждый кадр и иллюзии движения не будет.Если же поставить слишком маленькое время,то анимация получится очень быстрой и будет не естественной и не красивой.Обычно,я ставлю время кадров 0,1 секунды.
Рисовать кадры рекомендую в PhotoShop,создавая каждый кадр на отдельном слое (а еще лучше в отдельной группе слоев).Тогда вы сможете проследить последовательность и точно подогнать положение объектов. Кадров,естественно,может быть столько,сколько вашей душе угодно,например вот тут всего 4 кадра: letyi.do.am/_ld/0/23.gif вот тут letyi.do.am/_ld/0/21.gif всего 6 кадров, а вот в этой: letyi.do.am/_ld/0/22.gif их 92,так что смотрите сами.Всё зависит от вашей фантазии,старания и усидчивости.Пожалуй, усидчивость тут главное!
Всё выше сказанное касается и анимации для Хайлайтов,за тем лишь исключением,что длинные тяжелые анимации могут,во-первых,не пойти,во-вторых, в них просто нет смысла, навигация внутри телефона довольно быстрая, окна сменяются быстро и вы просто не успеете увидеть большую анимацию до конца, вполне достаточно нескольких кадров, как например вот тут: letyi.do.am/_ld/0/24.gif
§ 4.4 Общие рекомендации. По поводу оптимизации веса анимации уже говорилось Malcolm’ом в предыдущей главе, так что на этом останавливаться не буду. Скажу лишь одно,не пытайтесь сжать анимацию до минимума.Вы неизбежно потеряете в качестве,а значит пропадет и необходимое восприятие.Если делаете большую красивую анимацию, лучше сделайте её качественно и предупредите людей о её большом весе, кому это действительно интересно - не пожалеют трафик. Не стоит делать слайдшоу (просто смена картинок).А уж тем более,если картинки разного стиля,цветовой гаммы,тематики. Не уподобляйтесь подросткам, которые в восторге от мелькания 3 фоток голых баб.
13 дек 2008 в 20:10
Вот мы вместе и посмотрели, какие есть форматы, где их применять и как сделать вес темы меньше. Вес темы очень актуален, главное - не переусердствовать, чтобы не пошло в ущерб качеству.