Как сделать музыкальную открытку без фотошопа

Вторник, 15 Сентября 2015 г. 19:29 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

Как сделать музыкальную открытку без фотошопа

Сегодня я расскажу вам как сделать музыкальную открытку, так как очень много вопросов возникает по этой теме. Например ВОТ ТАК., где плеер включается и выключается нажатием кнопки.

Что же ты осень так долго,без меры
-Льёшь слезинки дождя наугад?
За окном в тучах серое небо.
Кружит в танце свой вальс листопад.

Может быть так прощаешься с летом,
И его возвращения ждёшь?
-Отшумело,сгорело,исчезло...
Дней прекрасных уже не вернёшь!

Кружат в воздухе медленно листья,
Я по саду немного пройду.
Одиноко,тоскливо на сердце
-В позабытом,осеннем саду..

Вот в этой рамке код этой музыкальной открытки. (Для удобства потяните рамку за правый нижний уголок, и код вам откроется в полном размере).

<div align="center"><table background="https://img-fotki.yandex.ru/get/6114/65387414.92b/0_156a63_519d1fcc_XL.gif"><tr><td width="590" height="555"><div align="right"><font size="4"><b><font color="0d004c">Что же ты осень так долго,без меры<br /> -Льёшь слезинки дождя наугад?<br /> За окном в тучах серое небо.<br /> Кружит в танце свой вальс листопад.<br /> <br /> Может быть так прощаешься с летом,<br /> И его возвращения ждёшь?<br /> -Отшумело,сгорело,исчезло...<br /> Дней прекрасных уже не вернёшь!<br /> <br /><br /><br /> Кружат в воздухе медленно листья,<br /> Я по саду немного пройду.<br /> Одиноко,тоскливо на сердце<br /> -В позабытом, осеннем саду..<br /><br /><br /><br /><b><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fwww.yapfiles.ru%2Ffiles%2F657436%2Fpleer131LuIra.swf%3Fmp3%3D%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F7%2F%2F4898%2F4898108_chto_takoe_osen.mp3&flash_width=44&flash_height=44&style=" width=44 height=44 style="width:44;height:44; border:0px outset;" scrolling="no" frameborder="0"></iframe></b></font></b></font></div></td></tr></table></div>

Сделать это совсем несложно. Просто надо знать, что картинка в данном случае ВЫСТУПАЕТ КАК ФОН. То есть, вместо фона, который вы ставите под запись, здесь вставляется картинка. А на фон можно поставить все. И музыку, и текст, и какую то кнопку, и еще картинку.

Теперь попробую показать на рисунках как это делается. Вот в этом окошечке ФОРМУЛА МУЗЫКАЛЬНОЙ ОТКРЫТКИ С ТЕКСТОМ, в которую вам ТОЛЬКО подставить свои значения. В этой формуле уже подставлены значения по редактированию текста (то есть его размер, цвет и расположение) естественно вы все это можете заменять на свои значения.

<div align="center"><table background="АДРЕС КАРТИНКИ"><tr><td width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"><div align="right"><font size="3"><b><font color="0d004c">ваш текст<br /><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fwww.yapfiles.ru%2Ffiles%2F657436%2Fpleer131LuIra.swf%3Fmp3%3D%D0%90%D0%94%D0%A0%D0%95%D0%A1+%D0%9F%D0%95%D0%A1%D0%9D%D0%98.mp3&flash_width=44&flash_height=44&style=" width=44 height=44 style="width:44;height:44; border:0px outset;" scrolling="no" frameborder="0"></iframe></font></b></font></div></td></tr></table></div>

Если вам на открытке совсем не нужен текст, или вы сразу взяли картинку со стихами, то весь этот блог (с текстом) вы можете просто выкинуть. Код МУЗЫКАЛЬНОЙ ОТКРЫТКИ БЕЗ ТЕКСТА в этом окошечке.
<div align="center"><table background="АДРЕС КАРТИНКИ"><tr><td width="ШИРИНА КАРТИНКИ" height="ВЫСОТА КАРТИНКИ"><br /><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fwww.yapfiles.ru%2Ffiles%2F657436%2Fpleer131LuIra.swf%3Fmp3%3D%D0%90%D0%94%D0%A0%D0%95%D0%A1+%D0%9F%D0%95%D0%A1%D0%9D%D0%98.mp3&flash_width=44&flash_height=44&style=" width=44 height=44 style="width:44;height:44; border:0px outset;" scrolling="no" frameborder="0"></iframe></td></tr></table></div>

Аккуратно копируем всю формулу из рамочки! Ставим ее в НОВУЮ ЗАПИСЬ. И подставляем свои значения.

Покажу в рисунках на примере картинки с текстом. Формула выглядит вот так. Все что подчеркнуто красным, вам надо заменить на свои данные.

Формула с уже вставленными значениями выглядит так. (текст я сократила для того что б картинка не выглядела слишком громоздкой)

ВНИМАНИЕ. Размеры картинки имеют очень важное значение. Если вы их поставите неправильно, то ваша открытка выползет за рамки, и это будет выглядеть не красиво. Советую ставить размер у картинки - чуть чуть поменьше, чем они а самом деле, тогда открытка будет смотреться очень красиво.

Теперь поясню некоторые значения. Для того, что б музыка или текст стояли там, где нужно мне, (справа, слева или посредине, я ставлю тег выравнивания. Эти теги ставятся прямо ПЕРЕД КОДАМИ тех значений, которые вы хотите выравнять (например, хотите что б музыка стояла слева, значит перед КОДОМ ПЛЕЕРА прописываете тег выравнивания СЛЕВА). Для тех кто не знает эти коды, я вам их пропишу.

<div align="left"></div> текст, рамка, картинка, музыка у вас будут стоять СЛЕВА

<div align="right"></div> текст, рамка, картинка, музыка у вас будут стоять СПРАВА

<div align="center"></div> ПОСРЕДИНЕ - Рамка, пост, музыка, картинка и прочее.

ТЕПЕРЬ ВНИМАНИЕ. МУЗЫКА, или текст на картинке, может встать не туда, куда вам надо. (Обычно она встает посредине картинки, можно ее ставить справа или слева, теми кодами что я дала). НО ЕСЛИ МУЗЫКУ НАДО ОТПУСТИТЬ НИЖЕ ТО ПЕРЕД ТЕМ, КАК НАЧАЛСЯ КОД МУЗЫКИ СТАВИМ вот этот тег

<br />

Ставьте этих знаков столько, пока вставка музыки не опустится в самый низ. ЧЕМ БОЛЬШЕ картинка (длиннее), тем больше таких знаков надо поставить. Вот так это выглядит. Обратите внимание на мою открытку, последнее четверостишье я (для примера) специально опустила пониже, поставив код опускания вниз. И естественно в самый низ поставила музыку, поставив перед ней тот же код. Если музыка вам нужна в левом углу, то перед ней можно поставить код централизации (слева), коды я вам прописала.

С оформлением картинки разобрались.

И теперь ПОЯСНЯЮ ДЛЯ САМЫХ НОВЫХ НОВИЧКОВ, что касается слов АДРЕС КАРТИНКИ. (остальные это могут пропустить)

Тем кто недавно оформляет блоги, и грузит картинки, на которую будете ставить музыку, через http://www.radikal.ru/. Хорошо посмотрите на формулу. Вместо слов АДРЕС КАРТИНКИ, ставьте код РАДИКАЛ-1, это и есть адрес картинки. Дальше идут ширина картинки, и высота. Это возьмите на радикале, . Она всегда там указана.

Кто работает давно, и ставит картинки прямо из инета, взяв ее адрес (как обычно мышкой встать на картинку, нажать правую кнопку и выбрать КОПИРОВАТЬ ССЫЛКУ НА ИЗОБРАЖЕНИЕ, или СВОЙСТВА, а там адрес картинки. И там же, в свойствах (или информации об изображении) найти размеры картинки.

Я редко доверяю сайтам из интернета, они часто переезжают, закрываются и прочее, поэтому картинки пропускаю через комп, или (чаще) беру в своих альбомах на ВОТ ЗДЕСЬ НА ЯНДЕКС ФОТО. Куда загружаю все нужное мне для работы. (картинки не мои, собраны с инета, с открытых источников. Спасибо автроам за красивые работы)

Теперь начинаем подставлять в формулу. КТО ГРУЗИТ ЧЕРЕЗ РАДИКАЛ
Вместо слов АДРЕС КАРТИНКИ (их стираем), ставим КОД РАДИКАЛА №1, а вместо слов Ширина и высота картинки, ставим размеры. (которые тоже можно взять на радикале)

С ЯНДЕКС ФОТО АДРЕС взять еще проще. Там тоже указаны размеры картинки (ее ширина и высота) В подробностях как взять картинку или ее адрес с ЯНДЕКС ФОТО МОЖНО ПОСМОТРЕТЬ ЗДЕСЬ.

Аккуратно стираем слова АДРЕС КАРТИНКИ, и ставим вместо них адрес. Ваша формула теперь будет выглядеть вот так

РЕДАКТИРОВАНИЕ ТЕКСТА
Ну текст вставить и отредактировать несложно, все делается как обычно, Ставим размер текста, цвет, где он будет располагаться и пишем все, что вы хотите видеть на своей картинке.

Теперь переходим к вставке музыки.

Сначала определитесь, какой плеер вы хотите видеть на своей открытке. В моем примере стоит самый маленький, состоящий из одной кнопки, которая включает и выключает музыку. Вот коды таких плееров.

[flash=25,20,//img1.liveinternet.ru/images/attach/c/1//3795/3795123_player.swf?mp3=АДРЕС МУЗЫКИ.mp3&showslider=0&width=25&height=20&loop=0&volume=100&buttoncolor=ffffff&buttonovercolor=e0b16f&bgcolor1=d49741&bgcolor2=d38c29&bgcolor=d49741]

[flash=44,44,http://www.yapfiles.ru/files/657436/pleer131LuIra.swf?mp3=АДРЕС МУЗЫКИ.mp3]

Или вот такой простой плеер.

[flash=400,30,http://legion-blog.narod.ru/player/player-viral.swf?file=Ссылка_на_песню&skin=http://legion-blog.narod.ru/player/skin/4.swf]

[flash=400,20,//img1.liveinternet.ru/images/attach/c/0/3709/3709068_jwplayer.swf?file=ОСНОВНОЙ КОД&width=400&height=20&backcolor=FF66FF&frontcolor=000000&/]

Можно подобрать красивый плеер по теме вашей картинки. Тогда ваша открытка будет выглядеть так.

Картинка птицы на открытке тоже вставлена, и к ней применена формула движения текста, только вместо текста я вставила картинку анимашку, и птичка тоже побежала (то есть полетела) Так как картинка здесь выступает фоном, то ставим все, что вам хочется.

Подробнее о кодах движения текста или картинки МОЖНО ПОСМОТРЕТЬ ЗДЕСЬ

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

Подробно, КАК ВСТАВИТЬ МУЗЫКУ ИЗ КОМПА В НОВУЮ ЗАПИСЬ МОЖНО ПОСМОТРЕТЬ ЗДЕСЬ

Вот в принципе и все. Сложного ничего здесь нет. Найти подходящую картинку, проставить ее размеры, затем загрузить музыку, и поставить плеер на место.

Зато для вашей фантазии здесь огромное поле. Вставляем текст, картинку и музыку. и получаем

Всем доброе утро!!

Вот код открытки со вставленным текстом, картинкой и музыкой.
<div align="center"><table background="АДРЕС КАРТИНКИ ФОНА"><tr><td width="ШИРИНА" height="ВЫСОТА"><center><br /><br /><br /><font size="6"><font color="9d0a0f">ВАШ ТЕКСТ<br /> <img src="АДРЕС КАРТИНКИ(вставки)" width="ШИРИНА ЕЕ" height="ВЫСОТА" border="0" /><br /><br /><br /><div align="left"><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fwww.yapfiles.ru%2Ffiles%2F657436%2Fpleer131LuIra.swf%3Fmp3%3D%D0%90%D0%94%D0%A0%D0%95%D0%A1+%D0%9C%D0%A3%D0%97%D0%AB%D0%9A%D0%98.mp3&flash_width=44&flash_height=44&style=" width=44 height=44 style="width:44;height:44; border:0px outset;" scrolling="no" frameborder="0"></iframe></div></font></font></center></td></tr></table></div>

Успехов в вашем творчестве.

Серия сообщений "Уроки для блогов":

Часть 1 - Как скопировать текст с сайта, который защищен от копирования.
Часть 2 - Как взять картинку с альбомов Яндекс -фото
...
Часть 38 - Как вернуть пропавшую схему оформления дневника.
Часть 39 - Как новичку не заблудится на ЛиРу
Часть 40 - Как сделать музыкальную открытку без фотошопа

Серия сообщений "Шпаргалки от Галины Шадриной":
Часть 1 - Несколько оригинальных формул и ссылок для дневника
Часть 2 - Бродилка по сайтам для обработки фото
Часть 3 - Как сделать музыкальную открытку без фотошопа
Часть 4 - Создаем свои собственные фоторамки онлайн и не только.п
Часть 5 - Подборка лучших сайтов, со стихами любимых поэтов

Метки: памятка блогеру-новичку

<a href="https://www.liveinternet.ru/users/zoya_11/post371898520/">РљР°Рє СЃРґРµР»Р°С‚СЊ РјСѓР·С‹РєР°Р»СЊРЅСѓСЋ РѕС‚РєСЂС‹С‚РєСѓ Р±РµР· С„РѕС‚РѕС€РѕРїР°</a><br/>РљР°Рє СЃРґРµР»Р°С‚СЊ РјСѓР·С‹РєР°Р»СЊРЅСѓСЋ РѕС‚РєСЂС‹С‚РєСѓ  Р±РµР· С„РѕС‚РѕС€РѕРїР°

РЎРµРіРѕРґРЅСЏ СЏ СЂР°СЃСЃРєР°Р¶Сѓ РІР°Рј РєР°Рє СЃРґРµР»Р°С‚СЊ РјСѓР·С‹РєР°Р»СЊРЅСѓСЋ РѕС‚РєСЂС‹С‚РєСѓ, С‚Р°Рє РєР°Рє РѕС‡РµРЅСЊ РјРЅРѕРіРѕ РІРѕРїСЂРѕСЃРѕРІ РІРѕР·РЅРёРєР°РµС‚ РїРѕ СЌС‚РѕР№ С‚РµРјРµ. РќР°РїСЂРёРјРµСЂ Р’РћРў РўРђРљ., РіРґРµ РїР»РµРµСЂ РІРєР»СЋС‡Р°РµС‚СЃСЏ  Рё РІС‹РєР»СЋС‡Р°РµС‚СЃСЏ РЅР°Р¶Р°С‚РёРµРј РєРЅРѕРїРєРё.
Р§С‚Рѕ Р¶Рµ С‚С‹ РѕСЃРµРЅСЊ С‚Р°Рє РґРѕР»РіРѕ,Р±РµР· РјРµСЂС‹
-Р›СЊС‘С€СЊ СЃР»РµР·РёРЅРєРё РґРѕР¶РґСЏ РЅР°СѓРіР°Рґ?
Р—Р° РѕРєРЅРѕРј РІ С‚СѓС‡Р°С… СЃРµСЂРѕРµ РЅРµР±Рѕ.
РљСЂСѓР¶РёС‚ РІ С‚Р°РЅС†Рµ СЃРІРѕР№ РІР°Р»СЊСЃ Р»РёСЃС‚РѕРїР°Рґ.

РњРѕР¶РµС‚ Р±С‹С‚СЊ С‚Р°Рє РїСЂРѕС‰Р°РµС€СЊСЃСЏ СЃ Р»РµС‚РѕРј,
Р РµРіРѕ РІРѕР·РІСЂР°С‰РµРЅРёСЏ Р¶РґС‘С€СЊ?
-РћС‚С€СѓРјРµР»Рѕ,СЃРіРѕСЂРµР»Рѕ,РёСЃС‡РµР·Р»Рѕ...
Р”РЅРµР№ РїСЂРµРєСЂР°СЃРЅС‹С… СѓР¶Рµ РЅРµ РІРµСЂРЅС‘С€СЊ!

РљСЂСѓР¶Р°С‚ РІ РІРѕР·РґСѓС…Рµ РјРµРґР»РµРЅРЅРѕ Р»РёСЃС‚СЊСЏ,
РЇ РїРѕ СЃР°РґСѓ РЅРµРјРЅРѕРіРѕ РїСЂРѕР№РґСѓ.
РћРґРёРЅРѕРєРѕ,С‚РѕСЃРєР»РёРІРѕ РЅР° СЃРµСЂРґС†Рµ
-Р’ РїРѕР·Р°Р±С‹С‚РѕРј... <a href="https://www.liveinternet.ru/users/zoya_11/post371898520/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>