Записи Друзья Комментарии
Verchitel22
Аватар Verchitel22

 -Рубрики

 -Поиск по дневнику

Поиск сообщений в Verchitel22

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 26.02.2011
Записей: 22024
Комментариев: 36195
Написано: 71834


Как самому сделать весёлый плеер без специальных навыков и программ

Вторник, 05 Марта 2013 г. 09:28 + в цитатник

Думала я думала и решила попробовать научить вас, дорогие мои друзья и те, кто регулярно заходит ко мне в гости, делать для себя и своих нужд вот такие веселые плееры




           

        

Конечно, это совсем не те плееры, которые делаю я в специальной программе, но зато без всяких специальных навыков вы легко сможете сделать свой собственный плеер с нужной вам картинкой и вставить в него свою собственную музыку. Для этого вам достаточно выбрать интересную картинку, лучше анимационную, песню и вид кнопки из числа тех, которые я для вас сделала. И всё…
Итак, давайте начнём… Для лёгкости будем «собирать» плеер с танцующим зайчиком.

Шаг первый. Выбираем понравившуюся картинку – у нас это танцующий зайчик. Если картинка у вас находится не на Яндекс-фотках, то надо её туда загрузить. Думаю, все знают, как это сделать. После чего берём с Яндекс-фотки код нашей картинки – вот он

<a href="http://fotki.yandex.ru/users/fotokollazh-mif/view/422161/"><img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101" title="" alt="" border="0"/></a><br/><a href="http://fotki.yandex.ru/users/fotokollazh-mif/view/422161/">ПосмотретьнаЯндекс.Фотках</a>

 
Но в этом коде много лишнего, поэтому мы его «укорачиваем» и оставляем только нужную его часть, а именно, вот эту (серёдку)

<img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101" title="" alt="" border="0"/>

Можно пойди еще дальше и убрать лишнее и в оставшейся части, но это уже на ваше усмотрение. В идеале нужный код имеет вот такой вид (сравните с предыдущим и увидите, что мы убрали ещё)

<img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">


Итак, первый элемент нашего плеера мы получили – это код картинки

Шаг второй. Выбираем из коллекции понравившуюся кнопку и берём её код – у нас это кнопка вот с таким кодом

<embed src="http://fotokollazh-mif.narod2.ru/Pleery_kn/kn_1_zv.swf?mp3=ССЫЛКА НА ПЕСНЮ" wmode="transparent" width="185" height="45">


Шаг третий. Выбираем музыку, которую хотим поставить в свой плеер. Вот в этой части у большинства, скорее всего, и будут проблемы. Дело в том, что в любой плеер вставляется не ФАЙЛ песни, а ССЫЛКА на эту песню. Чтобы не усложнять данный урок, я не буду здесь описывать, как из любого файла песни получить именно ССЫЛКУ на песню. Я об этом подробно расскажу в следующем уроке. А сейчас мы берем уже готовую ссылку на песню, которая у меня есть. Ссылка имеет такой вид

http://fotokollazh-mif.narod2.ru/Muzyka/barbariki_-_planeta_romashek.mp3


Шаг четвёртый. Теперь мы просто объединяем все наши коды – код картинки + код кнопки + ссылку на песню – в единое целое вот таким образом:
Сначала записываем код картинки

<imgsrc="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">

Под ним записываем код кнопки. Получаем вот такую конструкцию

<imgsrc="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">

<embed src="http://fotokollazh-mif.narod2.ru/Pleery_kn/kn_1_zv.swf?mp3=ССЫЛКА НА ПЕСНЮ" wmode="transparent" width="185" height="45">


Теперь в коде КНОПКИ вместо слов ССЫЛКА НА ПЕСНЮ вставляем нашу ссылку на песню. В результате получим уже вот такой вид нашего общего кода плеера

<img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">

<embed src="http://fotokollazh-mif.narod2.ru/Pleery_kn/kn_1_zv.swf?mp3= http://fotokollazh-mif.narod2.ru/Muzyka/barbariki_-_planeta_romashek.mp3" wmode="transparent" width="185" height="45">


Чтобы плеер стоял посередине, перед началом кода поставим <center>
Получим такой вид 
 
 

<center><img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">

<embed src="http://fotokollazh-mif.narod2.ru/Pleery_kn/kn_1_zv.swf?mp3= http://fotokollazh-mif.narod2.ru/Muzyka/barbariki_-_planeta_romashek.mp3" wmode="transparent" width="185" height="45">

 
 И вот как это выглядит, когда всю эту конструкцию мы вставим в пост (не забываем, что вставлять код в пост надо в HTML-режиме)
 



Как видим, кнопка плеера находится несколько левее самой картинки. Чтобы исправить такой недочёт, мы перед кодом КНОПКИ ставим вот такие символы  &nbsp;
Количество таких последовательных символов мы подбираем сами, исходя из расположения кнопки. В нашем случае надо вставить 11 таких символов. И тогда наш код будет иметь вот такой вид

 

<center><img src="http://img-fotki.yandex.ru/get/2708/130761172.35/0_67111_52a6d802_S.jpg" width="106" height="101">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<embed src="http://fotokollazh-mif.narod2.ru/Pleery_kn/kn_1_zv.swf?mp3= http://fotokollazh-mif.narod2.ru/Muzyka/barbariki_-_planeta_romashek.mp3" wmode="transparent" width="185" height="45">


А сам плеер в посте будет выглядеть так


          
Всё, плеер готов, нажимаем на кнопочку и танцуем вместе с зайчиком.
Пробуйте, у кого будут сложности – пишите… Удачи вам!


Рубрики:  полезные советы
для дневника
уроки фотошопа


Процитировано 31 раз
Понравилось: 10 пользователям
Нравится

Комментировать — К дневнику — Страницы: [1] [Новые]
Sinaida   обратиться по имени Вторник, 05 Марта 2013 г. 10:42 (ссылка)
Благодарю за зайчика. Хороший урок, буду разбираться.
Ответить С цитатой В цитатник
Н_НИНА   обратиться по имени Вторник, 05 Марта 2013 г. 18:18 (ссылка)
спасибо, довольно легко все
Ответить С цитатой В цитатник
Наталья05   обратиться по имени Вторник, 05 Марта 2013 г. 18:31 (ссылка)
Спасибо большое! Буду пробовать!
Ответить С цитатой В цитатник
Перейти к дневнику
VALJ   обратиться по имени Вторник, 05 Марта 2013 г. 19:09 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Перейти к дневнику
Космическая_Гостья   обратиться по имени Вторник, 05 Марта 2013 г. 20:09 (ссылка)
Спасибо, моя хорошая!!!)) нужно будет и мне плеерами заняться на досуге..... если че, то буду к тебе за советами обращаться...)))) цем-цем
Ответить С цитатой В цитатник
Перейти к дневнику

Среда, 06 Марта 2013 г. 11:45ссылка
Verchitel22
Так хочу научиться!Цем -цем!
ОтветитьС цитатойВ цитатникОбратиться по имени
Prudent   обратиться по имени Вторник, 05 Марта 2013 г. 21:39 (ссылка)
спасибо, интересно, надо будет подзаняться:)
Ответить С цитатой В цитатник
Перейти к дневнику
Татьяна_Волкова_Литвинова   обратиться по имени Четверг, 07 Марта 2013 г. 21:58 (ссылка)
С плеером понятно. А вот как кнопки сделать? Проблема. Спасибо за доступный урок.
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 09 Марта 2013 г. 08:48ссылка
Verchitel22
Кнопки делать не умею тоже,а научиться хочется!
Беру пока чужие.
Вот здесь,на Яндексе,посмотри:http://clubs.ya.ru/4611686018427464551/replies.xml?item_no=9595
ОтветитьС цитатойВ цитатникОбратиться по имени
Нина_Гуревич   обратиться по имени Пятница, 08 Марта 2013 г. 08:10 (ссылка)
СПАСИБО
Ответить С цитатой В цитатник
Перейти к дневнику
Любовь_Терехова   обратиться по имени Пятница, 08 Марта 2013 г. 13:59 (ссылка)
Урок прекрасный!!! Большое спасибо, только я не увидела кнопочку, на которую нужно нажать.
Ответить С цитатой В цитатник
Перейти к дневнику

Суббота, 09 Марта 2013 г. 08:50ссылка
Verchitel22
Кнопочки отдельно идут,я брала здесь:http://clubs.ya.ru/4611686018427464551/replies.xml?item_no=9595
ОтветитьС цитатойВ цитатникОбратиться по имени
Перейти к дневнику

Суббота, 09 Марта 2013 г. 20:13ссылка
Любовь_Терехова
Большое спасибо за ссылку!
ОтветитьС цитатойВ цитатникОбратиться по имени
Татьяна_Волкова_Литвинова   обратиться по имени Суббота, 09 Марта 2013 г. 09:05 (ссылка)
Спасибо за урок !
Ответить С цитатой В цитатник
Перейти к дневнику
Татьяна_Волкова_Литвинова   обратиться по имени Суббота, 09 Марта 2013 г. 11:06 (ссылка)
Спасибо!
Ответить С цитатой В цитатник
Милаграс   обратиться по имени Четверг, 05 Марта 2015 г. 14:49 (ссылка)
КАК ЗДОРОВО. СПАСИБО!
Ответить С цитатой В цитатник
Перейти к дневнику
Комментировать — К дневнику — Страницы: [1] [Новые]
 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку


О проекте