Отправляет email-рассылки с помощью сервиса Sendsay

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Раскрутка и продвижение сайта. Лучшие партнерские программы" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Апрель 2005   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
Александр

Статистика

2.334 подписчиков
-9 за неделю
←   Все выпуски   →

WEB дизайн - начинаем с пикселя -баннеры, скрипты, шаблоны №15


Информационный Канал Subscribe.Ru

Рассылка от
Design-Forever.ru

 Выпуск №15    
Сегодня в выпуске:
 - Новости сайта
 - Шаблон №15
 - Графика [вопросы и ответы]
 - Создание изображения с помощью PHP
 - Flash: создание простейшей анимации в примерах

горячая новость

У нас открылся на сайте форум. Теперь все свои проблемы Вы можете писать там. Спрашивайте, общайтесь, спорьте, высказывайте свои мысли...
 Новости сайта
1. Наш ресурс предлагает произвести обмен ссылками. Ознакомится с правилами по обмену ссылками мы предлагаем здесь http://design-forever.ru/links/ 
2. Открылся форум. Общайтесь... Рекламируйте себя, спрашивайте, показывайте, обсуждайте, спорьте. Все в Ваших буквах...
3. На сайте заработал раздел "Анимашки и клипарт". Вы можете посмотреть коллекцию. Коллекция отличается от других, тем что анимашки собраны с зарубежных сайтов и рассылок, поэтому в них есть кое-чего интересного и забавного. Перейти>>>
4. Готовится новый сайт http://wap.design-forever.ru - на данном сайте Вы сможете узнать, как создавать свой WAP сайт, как делать логотипы, картинки, обои для своего мобильного телефона. Следите за новостями, оставайтесь подписчиками. Но хотим сказать, что форум работает и там уже есть примеры кодов для создания своей интернет странички в мобильном телефоне. Форум доступен по адресу http://design-forever.ru/forum/ 
 Шаблон №15 
Шаблон №15 с использованием CSS.

[перейти и скачать]

примечание: в шаблоне используется таблица стилей CSS. Шаблон можно использовать для создания своего интернет магазина.

 Графика [вопросы и ответы]

Как уменьшить размер исходной картинки
Для этого открываем картинку в редакторе (например Photoshop) и в выбираем в меню - размер изображения. Далее устанавливаем нужные размеры. Но не забывайте поставить значок пропорциональности. Нельзя уменьшать размер картинки в одном направлении, например ширину уменьшить, а высоту оставить прежней, в этом случае картинка исказится. Но можно попытаться вырезать нужный фрагмент из картинки, а затем уменьшать её размер.
Источник: http://design-forever.ru 

 Создание изображения с помощью PHP

http://www.phpclub.net/
Brad Bulger
Перевод Листопад Александр

Вступление

Язык PHP (официально: "PHP - гипертекст препроцессор"), встроенный в HTML язык скриптов на стороне сервера. Это мощный язык, позволяющий разработчику обращаться к базам данных различных типов и производителей, работать с массивами, регулярными выражениями, делать сетевые запросы, а также многе-многое другое... и все это можно проделать из HTML-кода! А результат - отдать на клиентскую сторону, в браузер.

Одной из особенностей PHP является возможность создания изображений, как говорится "на лету". Что это значит? Это означает, что скрипт, написанный на PHP выдает после выполнения HTTP-заголовок Content-type: с соответствующим созданному типу изображения значением и после этого выводит изображение, получается как будто веб-сервер выдал изображение как таковое, а не как результат выполнения скрипта.

Применений этой возможности PHP очень много на практике. Самое простое применение - создание счетчиков. Можно создать огромное множество счетчиков, различных оттенков, с использованием различных TrueType шрифтов. Самый яркий пример - http://www.topping.com.ua/ - украинская система рейтинга сайтов Интернет.

Необходимые компоненты

Прежде всего для создания изображений с выдачей пользователю в браузер необходим веб-сервер. Лучше всего для этого подойдет веб-сервер Apache. Далее - нужно получить самую свежую версию PHP, можно тут: http://www.php.net/downloads.php, а также все необходимые компоненты:

  • gd [gd-1.8.3.tar.gz]
  • t1lib [t1lib-1.0.1.tar.gz]
  • jpeg-6b [jpegsrc.v6b.tar.gz]
  • libpng [libpng-1.0.6.tar.gz]
  • freetype [freetype-1.3.1.tar.gz] (библиотека для прорисовки TT шрифтов)
Внимание! Номера версий указаны на момент написания данной статьи и могут устареть на момент чтения.

После установки всех библиотек и т.д. по местам нужно собрать модуль PHP. После этого остановить (если запущен) веб-сервер и запустить заново или запустить свежесобранный httpd, предварительно подправив под свои нужды конфигурационный файл httpd.conf. После этого веб-сервер с модулем PHP и возможностью создания изображений "на лету" готов! Можно пользоваться.

Создание скрипта

Скрипт PHP выглядит так:

 <? header("Content-type: image/png");
   $img = imagecreate(400,80);
   $black = ImageColorAllocate($img, 0, 0, 0);
   $green = ImageColorAllocate($img, 0, 255, 0);
   $white = ImageColorAllocate($img, 255, 255, 255);
   $trans = ImageColorTransparent($img, $white);
   ImageFill($img, 0, 0, $white);
   ImageString($img , 2, 10, 10, "Laa is so happy to see you!", $black);
   ImageTTFText($img, 18, 0, 45, 45, $green, "arial8.ttf", "$text");
   ImagePng($img);
   ImageDestroy($img); ?>

Теперь подробнее о методе создания и самом скрипте.

Первая строка выдает HTTP-заголовок Content-type: image/png, который объявляет браузерам о том, что тип последующей информации является графическое изображение формата PNG.

Следующая строка возвращает идентификатор изображения $img, который PHP будет ассоциировать с изображением размером 400 пикселей по горизонтали и 80 по вертикали.

С третьей по пятую строку происходит ассоциирование цветов из палитры RGB (red-green-blue) с переменными PHP. Функция ImageColorAllocate должна быть вызвана для ассоциации любого цвета, который может быть использован в будущем изображении.

Функция ImageColorTransparent использует два аргумента - идентификатор изображения и цвет из палитры RGB (переменная PHP). В результате будущее изображение будет создано с прозрачным цветом указанным в переменной (второй аргумент). К сожаленью эта функция применима только с GIF-изображениями, но этот формат начиная с версии 1.6 в gd не поддерживается. Это связанно с тем, что Unisys владеет патентом LZW-компрессии.

ImageFill - заполнение изображения $img цветом $white начиная с позиции "0, 0" - верхний левый угол. Я только сам не понял зачем указывать координаты? По логике нужно указывать только изображение и цвет... ну да ладно. Думаю разработчики постарались сделать функции избыточными - вдруг кому пригодится... :-)

Функция ImageString прорисовывает строку текста (5-ый аргумент) цвета $white в позиции "10, 10" (3-, 4-ый аргументы) стандартным шрифтом с фиксированной шириной символов. Эта функция имеет мало возможностей прорисовки текста в изображениях, но эти возможности можно расширить с помощью функции ImageLoadFont.

Функция ImageTTFText прорисовывает текст в изображении с помощью TrueType шрифтов, которые разработчик может самостоятельно подключить. Второй аргумент указывает размер шрифта, используемого для прорисовки. Третий - угол наклона будущего текста относительно горизонтали. (Используя угол 90°, разработчик получает текст, написанный снизу вверх, т.е. вертикально.) Далее - 4- и 5-ый аргументы предназначены для указания координат начала строки текста (точнее: левого нижнего угла первой буквы текста, что противоположно поведению функции ImageString, которая использует координаты для указания верхнего правого угла первой буквы текста). Следующие аргументы, которые используются - это цвет текста, шрифт (путь к файлу шрифта) и собственно текст.

Две последнии функции (ImagePng и ImageDestroy) выдают изображение браузеру и удаляют его из памяти соответственно. Аргументом в обоих случаях выступает идентификатор изображения. Помимо функции ImagePng допустимо использование функции ImageJpeg с предварительным указанием этого в HTTP-заголовке (Content-type:).

 Flash: Создание простейшей анимации в примерах

http://mweb.ru/
Автор: ils
Известно, что во флеше используются два вида анимации: первый это движение (Motion), второй – морфинг (Shape). Они имеют свои особенности, которые мы сейчас и рассмотрим:

Движение (Motion). Для создания движения передвигаемый объект не может быть простой графикой. Это основная особенность “движения”, т.е. если вы нарисуете прямоугольник, то не сможете просто заставить его двигаться, для этого его необходимо преобразовать в символ (Symbol), который и будет перемещаться по листу.

Нарисуйте в верхнем левом углу прямоугольник (Rectangle Tool, <R>), затем выделите его, используя для этого инструмент Arrow Tool (чёрная стрелка) в группе Tool, или просто нажав на клавиатуре <V>. Обратите внимание, что выделять объект необходимо целиком, захватывая в область выделения, иначе вы выделите не весь объект, а только его часть. После того как весь объект станет выделенным, нажмите по нему правой кнопкой мыши и в контекстном меню выберете “Convert to symbol…”. Также, преобразовать объект в символ можно, выбрав в верхнем меню команду “Insert> Convert to symbol…” или нажать <F8>. Перед вами появиться одноимённое окно. Здесь вам надо задать имя будущему символу (Name), тип символа (Behavior), а так же точку регистрации объекта (Registration). Задайте любое имя, тип символа выберете Graphic, а точку регистрации оставьте по умолчанию. Нажмите “OK”. После этого наш прямоугольник готов для создания движения.

Выше нашего рабочего листа располагается так называемая Временная линия (Timeline), она и служит инструментом по созданию анимации. Слева в этом окне находится список слоёв анимации, ну а справа сама линия времени, в которой и задаётся длительность фильма.

Выберите в линии времени, например, 20-й кадр. Нажав на нём правой кнопкой мыши, выберите “Insert Keyframe” (Insert>Keyframe, <F6>). Затем вернитесь на первый кадр и в нижнем окне Properties, в раскрывающемся списке Tween, выберите Motion, после этого на протяжении всей нашей анимации, с 1 по 20 кадр, протянется стрелка. Теперь нам останется только “поставить” наш символ в то место, куда он должен будет двигаться. Выделите 20 кадр и перетащите прямоугольник в правый нижний угол. Щёлкните по пустому месту рабочего листа и нажмите <Enter> для просмотра непосредственно в рабочей области, или <Ctrl+Enter> для публикации в клип и его просмотра во флеш плеере. Только не забудьте сохраниться перед публикацией, т.к. созданный клип будет помещён в туже папку, где и исходник.

Это был длинный путь по созданию анимации. Есть более короткий, но предыдущий путь более информативен и даёт более широкое понятие по принципу построения анимации в движении. Далее описываемый путь делает за вас некоторую работу – это преобразование объекта графики в символ и установка типа анимации.

Вновь создайте прямоугольник, только теперь вам не надо преобразовывать его в символ, а просто выделите первый кадр анимации и выберете в меню Insert>Create Motion Tween. И он сам преобразует объект в символ и задаст определённые свойства анимации. И вам останется только задать длительность фильма, указав количество кадров, также как это делалось выше, и поместить наш прямоугольник в ту точку, куда он должен двигаться.

Усложняем задачу: Теперь давайте усложним движение нашего прямоугольника. Заставим его двигаться с ускорением и вращаясь вокруг собственной оси. Выделите первый кадр, созданной ранее анимации, и в окне Properties ниже параметра Tween, в раскрывающемся списке Ease задайте -100 для ускорения или 100 для замедления движения. А в раскрывающемся списке Rotate задайте CW для движения по часовой стрелке или CCW для движения против часовой стрелки.

Наш прямоугольник можно заставить двигаться не только от точки “А” в точку “Б”, но и по определённой траектории. Ну а это ещё проще сделать. Просто нажмите правой кнопкой мыши в окне Timeline по слою, где находиться наш прямоугольник, и в контекстном меню выберите Add Motion Guide (Insert>Motion Guide). После этого у нас появится новый слой с названием “Guide: Имя слоя”, в первом кадре которого нам надо карандашом (Pencil Tool, <Y>) нарисовать траекторию движения прямоугольника. Нарисуйте, например, зигзагообразную кривую. А затем поместите наш прямоугольник на начало траектории в первом, и в конец в последнем кадре. После этого он будет двигаться по заданной нами траектории, которая после публикации не будет видна.

Мы разобрались с движением. Конечно, можно задавать более сложные условия анимации, но пока это всё – в ближайшее время надеюсь выложить статью о масках, работой с цветом и ещё кое о чём. Ну а пока разберёмся с противоположенным способом анимации – морфингом… (в следующей рассылке...)
http://subscribe.ru/
http://subscribe.ru/feedback/		 Подписан адрес:
Код этой рассылки: comp.design.webbanner		 Отписаться
В избранное