суббота, 28 января 2012 г.

О блоге. Как вставить 3D флэш галерею в blogger

Всем привет!!
Кто еще не заметил, прошу зайти ко мне в гости в студию лепки.



Мы переоделись!  



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

Сначала пыталась разобраться с галереей, который предлагает Blogger, но это не то, что мне было нужно. Не стала я детально разбираться и пошла в просторы интернета искать нужную мне галерею.

Что я искала от галереи:
- Добавлять фотографии, какие я хочу
- Возможность добавления ссылки для перехода на др страницу
- Красивый, стильный внешний вид
- Возможность добавления в Blogger

ПРИСТУПИМ




1. Для начала тебе понадобится скачать программу Aneesoft 3d flash gallery.

C помощью этой программы ты и создашь свою галерею. Программа очень простая и не требует специальных навыков программирования.

2. Открываем скаченную программу и сразу можно добавлять фотографии.


Совет:  Используйте фотографии квадратной или прямоугольной формы. Прозрачный слой, сделанный в фотошопе не сохранится прозрачным в данной программе.




Нажимай на кнопку Add Photo и выделяй нужные файлы, можно выделить сразу несколько.


Увеличивается, при нажатии на фото

3. Теперь можно немного корректировать фотографии, удалять их и добавлять ссылки.

Для того что бы добавить ссылку, выделите фотографию и нажмите на кнопку  Add Caption.

Тебе предлагается придумать название фотографии, можно написать описание, добавить ссылку, выбрать будет ли открываться ссылка в том же окне или новом, а если поставите галочку на Apply this URL to all photos, то данная ссылка распространится на все фотографии, которые вы залили.

Увеличивается, при нажатии на фото

☀ Совет:  При добавлении ссылки, обязательно надо написать заголовок (Title).



В этой вкладке больше ничего не сделаешь. Переходим ко второму шагу, самому прикольному.

4. Балуемся, выбираем внешний вид нашей галереи.
Тебе предлагается аж три тематики:

Cool - в переводе "Прикольная"  
3D Shape - "Объемные формы"
3D Wall - "Объемные стены"

 Выбираешь, понравившийся внешний вид и теперь можно немного его доработать, через настройки - Settings.

На этой же страничке программа показывает предпросмотр твоей галереи. Вот как ты ее видишь, так она и будет выглядеть. Т.е. все изъяны фона, которые ты видишь, надо убирать.

Можно залить обои, замостить ими фон нельзя.
Достаточно сложно подобрать размер обоев так, что бы они заполнили собой все пространство. На фото ниже, видно, что пространство заполнено не все, виден красный фон по бокам.

Увеличивается, при нажатии на фото

Для этого выберете более или менее подходящий цвет в Background color. Иначе никак.
Я выбрала светло серый, через Custom...

Получилось лучше:

Увеличивается, при нажатии на фото

Напоследок можно добавить музыки. Я этого не делала.

Тут всё, переходим к заключительной части - публикации.

5. Тут пришлось попотеть.
Я буду рассказывать только про то, как вставить нашу галерею в Blogger.

Сначала можно нажать play и посмотреть что у нас получилось.
Если все устраивает, то жмем слева на кнопку SWF - это значит, что ваш файл сохранится как флэш файл, с расширением *.swf

Теперь этот файл нужно сохранить на сервере в интернете так, что бы ты могла получить ссылку на данный файл обязательно в конце с названием файла. Например:

http://lana-rabota.narod2.ru/005.swf  - это правильная ссылка ( в конце я вижу название своего файла 005.swf)

https://docs.google.com/leaf?id=0BzOJ0mDAeeqINmEzZTZjOGUtYTRkNy00ZDIyLThmYjItZDAxNTkzYTUxYzdk&hl=en_US   - это неправильная ссылка, такой абракадабры быть не должно и нигде не вижу название своего файла 005.swf


Если ты знаешь что такое FTP, то заливай свой файл туда, должно сработать.

Если для тебя FTP просто набор букв, то я предлагаю тебе следующий вариант, но не единственный, но им воспользовалась я. Делюсь.

Тебе нужен аккаунт в почте яндекса.

Зайти в него, как если бы проверяла почту.

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

После того как ты  зарегистрировала сайт, надо нажать на кнопку Редактировать как на фото ниже.




6. Теперь нам надо добавить наш заветный файл.
Слева вверху выбираем "Управление файлами" как показано на фото ниже





Далее жмешь на кнопку Загрузить файл и выбираешь сохраненную галерею в формате *.swf

Файл появится в окне. Нажми на файл и выбери "Открыть".
Галерея откроется в новом окне. Не бойся размеров, она откроется во всю страницу, это можно будет отредактироать. Сейчас главное скопировать адрес, из адресной строки.

7. Заключительная часть. Нам остается добавить галерею в Blogger.

Галерея добавляется через html код.
Давай подготовим его.

-------------------------------------------------------------------------------

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="450">
    <param name="allowFullScreen" value="True" />
    <param name="movie" value="Yourfilename.swf" />
    <param name="quality" value="high" />
    <embed src="Yourfilename.swf" quality="high" allowFullScreen="true"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="450">
</object>



-----------------------------------------------------------------------------------



Выше я отделила образец кода.
Красным места, которые надо заменить.

Yourfilename.swf меняешь на скопированную адресную строку.
Например: http://lana-rabota.narod2.ru/005.swf 

циферки меняешь, подгоняешь. поставь например
width=300
height=200



☀ Совет:  Обрати внимание, что при выборе размера width и height можно полностью убрать цвет фона, который нам мешал изначально (я про него писала в п.4)



И так у тебя есть html код.

Его можно вставить непосредственно в html страницы или добавить отдельным гаджетом HTML/JavaScript через функцию Дизайна.

И получится у вас красивая галерея, как у меня на сайте lana-studio.ru 


Надеюсь моя статья вам пригодилась.

Если захотите ею поделиться с друзьями не забудьте сослаться на мой блог 

7 комментариев:

  1. боже мой...как ты с этим разобралась )))))) для меня это очень сложно даже по твоему мк)))))

    ОтветитьУдалить
    Ответы
    1. я всегда любила компьютеры и мне как то дано в них разбираться )))

      на самом деле все просто, там главное скачать программу =)

      если надумаешь делать, пиши, я помогу

      Удалить
  2. Спасибо за интересную информацию! Надо поразбираться - пока не очень понимаю, надо ли оно мне;-)

    ОтветитьУдалить
  3. Классно, но мне самой все равно в этом не разобраться! Надо звать мужа на подмогу ))) Спасибо за МК!!!

    ОтветитьУдалить
  4. Ланусь,ты как всегда с полезными советами!!!спасибо!!!беру на заметку :)

    ОтветитьУдалить
  5. Оооо! Ланусь, мне пригодится, я люблю такие штуки! =) Пасибо!

    ОтветитьУдалить
  6. Спасибо огромное!!!! Долгое время пыталась сделать, но никак не получалось. А прочитав твою статью, я быстро всё сделала))) Еще раз огромное преогромное спасибо!!!!! :)

    ОтветитьУдалить

Ко мне на "Ты". Меня зовут ЛАНА =)