понедельник, 1 ноября 2010 г.

Флеш часы с собственным дизайном для вашего сайта или блога

Доброго времени суток! На блоге Клуб Свободных Художников очередная раздача халявы!!! Сегодня я хочу представить вашему вниманию флеш часы для сайта или блога, дизайн для которых вы можете сделать самостоятельно, не обладая какими-либо навыками во флеш. Данный виджет распространяется совершенно бесплатно, кроме того в движке часов нет никаких сторонних ссылок и кнопок, как это любят делать многие авторы для продвижения своих ресурсов.


Действительно, в Интернете очень много ресурсов предлагают скачать или установить кодом HTML часы для сайта или блога. Обычно, платой за такую услугу является ссылка в скрипте флешки, которая ведет на сайт авторов. Понятно, что кому-то такой вариант совсем не подходит.

Также флеш часы можно просто напросто купить на каком-нибудь микростоке или заказать напрямую. Но на этот раз я предлагаю действительно 100% халяву =) И в моих флеш часах не будет никаких назойливых ссылок, кнопок и прочих маркетинговых штучек. Вам самим решать, рассказывать своим читателям или пользователям об этой флеш полезности или нет. Если уж действительно захочется сделать доброе дело, то просто можно написать статью про эту халяву.

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

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






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



Всё очень просто! Даже совсем неопытному вебмастеру под силу сделать это самому.

УСТАНОВКА ФЛЕШ ЧАСОВ С СОБСТВЕННЫМ ДИЗАЙНОМ


1. Создаем дизайн для часов
Нарисуйте в любой удобной для вас графической программе фон для часов. Не умеете рисовать - сфотографируйте часы и зафотошопте стрелки. Не знаете фотошоп - открутите у часов стрелки перед фотографированием. Получиться должен циферблат, расположенный строго посередине, без стрелок. Для примера смотрим мой вариант.



Изображение должно быть размером 250x250px, формат желательно .jpg (можете поэкспериментировать с другими форматами, по идее должно работать с большинством из распространенных)

2. Загрузите свой дизайн на хостинг или подходящий ресурс(например picasa, narod и т.п.)

Просто загружаем свою картинку куда вам удобнее. В итоге потребуется ее абсолютный адрес в Интернете. Например: http://mysite.ru/images/clock-background.jpg

3. Установите флеш часы на свой сайт или блог с помощью кода вставки

Выберите подходящее место для часов. Используйте опцию "вставка виджета", "добавить гаджет", "HTML/JavaScript" или что-то подобное(все зависит от платформы вашего сайта или блога). Для вставки используйте следующий код:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0 " width="250" height="250"> <param value="http://volkoffroman.narod2.ru/customclock/analog_custom_clock.swf" name="movie"> <param value="high" name="quality"> <param value="link=http://АДРЕС_ВАШЕЙ_КАРТИНКИ" name="flashvars"> <embed pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" src="http://volkoffroman.narod2.ru/customclock/analog_custom_clock.swf" flashvars="link=http://АДРЕС_ВАШЕЙ_КАРТИНКИ" type="application/x-shockwave-flash" width="250" height="250"></embed></object>


Вместо строчки http://АДРЕС_ВАШЕЙ_КАРТИНКИ вставьте адрес, про который говорится в пункте №2.

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

Оригинальный размер флешки 250x250px. При желании его можно менять. Для этого замените значения width="250" и height="250" в коде вставки на подходящие вам. Например: нужны часы 150x150px - пишем width="150" и height="150". При сильном увеличении из-за растрового формата фона могут стать заметны пиксели, поэтому не увлекайтесь особо. Также при уменьшении фон может выглядеть не аккуратно из-за наложения пикселей растровой картинки друг на друга. Для борьбы с этим уменьшите значение dpi фона, сохраняя размер вашего дизайна прежним 250x250px. Сделать это можно через Photoshop: Image -> Image Size -> уменьшаем Resolution(например до 30 pixels/inch), возвращаем оригинальный размер Width:250pixels и Height:250pixels

Чтобы не быть привязанным к оригинальному размеру виджета, можно нарисовать фон непосредственно во флеш (Adobe Flash или Macromedia Flash). В этих программах используется векторная графика. Такие картинки можно масштабировать не ограниченно без потери качества. В итоге должен получиться флеш файл с расширением .swf, который вы можете использовать в качестве фона по аналогии с примером, описанным выше. Так что продвинутым пользователям я бы порекомендовал не заморачиваться с растром. Если есть соответствующие навыки работы, то рисуйте дизайн для часов сразу в векторе.

Удачи вам в ваших начинаниях!

DACASCAS

Для тех, кто знает, что Наруто - это круто: narutokruto.ru

Гордость России - Ессентуки

32 комментария:

  1. Супер! Вставил себе в блог

    ОтветитьУдалить
  2. Как нибудь потом, как время будет, нарисую наборчик бэкграундов разных для этой флешки

    ОтветитьУдалить
  3. Наборчик различных бэкграундов для часов:

    1. http://volkoffroman.narod2.ru/customclock/sample-clock.jpg
    2. http://volkoffroman.narod2.ru/customclock/abstract-clock-2.jpg
    3. http://volkoffroman.narod2.ru/customclock/abstract-clock.jpg
    4. http://volkoffroman.narod2.ru/customclock/clock-static-macromedia.jpg
    5. http://volkoffroman.narod2.ru/customclock/futuristic-clock.jpg
    6. http://volkoffroman.narod2.ru/customclock/gold-clock.jpg
    7. http://volkoffroman.narod2.ru/customclock/toy-clock.jpg

    ОтветитьУдалить
  4. спасибо! очень приятно иметь возможность поставить часы на тот фон, который хочется именно мне.

    ОтветитьУдалить
  5. Пожалуйста, ставьте на здоровье =)

    ОтветитьУдалить
  6. Спасибо вам огромное за урок и формулу,возможностей очень много,я попробовала сделать квадратные из фона своего дневничка,тоже не плохо получилось...Первый шаг сделан и это здорово!!!
    Желаю вашему сайтику процветания,удачи вам во всём,счастья,успехов,здоровья и ЛЮБВИ...С наступающими вас новогодними праздниками!!!

    ОтветитьУдалить
  7. Спасибо вам за отзывы, заходите к Новому Году за подарками. Скорее всего флеш открытку выложу, осталось ее только нарисовать

    ОтветитьУдалить
  8. Анонимный12 июня 2011 г., 13:03

    а у меня не получилось-вместо фона надпись "создай свой дизайн часов"

    ОтветитьУдалить
  9. скорее всего неправильный путь к картинке (http://АДРЕС_ВАШЕЙ_КАРТИНКИ) или её просто нет по этому адресу

    ОтветитьУдалить
  10. а как убрать надпись "создай свой дизайн часов"

    ОтветитьУдалить
  11. Умалат>> Читай внимательно статью, там всё написано

    ОтветитьУдалить
  12. Эх..а у меня то-же не убирается надпись "создай свой дизайн часов"
    Уж вроде всё правильно делаю

    ОтветитьУдалить
  13. А что именно вы делаете правильно? Чтобы понять, в чём ошибка, нужно, так сказать, "увидеть", что вы делаете.

    ОтветитьУдалить
  14. Спасибо за часы, только в момент загрузки сначала загружаются стрелки и "создай свой дизайн часов", а уже потом сверху накладывается мой дизайн, может не надо было Вам писать эту надпись? Как-то не очень солидно получается :-)

    ОтветитьУдалить
  15. Может быть и не надо было... Это происходит либо из-за медленного интернета или из-за того, что ваш дизайн достаточно большой по объёму. Обычно, при быстром интернете и "лёгкой" картинке загружается очень быстро и надпись "создай свой дизайн часов" не видно.

    ОтветитьУдалить
  16. У меня не работают,только картинка((((

    ОтветитьУдалить
  17. Что именно не работает, отображается только одна картинка фона часов?

    ОтветитьУдалить
  18. Анонимный5 мая 2012 г., 23:27

    как цвет срелок изменить

    ОтветитьУдалить
  19. dacascas, с праздником! эээ...прошедшим!!! :))))
    Сделала часики...очень нравится... если вам интересно, то тут можно посмотреть на моём сайте http://odlorikora.ru/
    dacascas, надпись "Создай свой дизайн часов" немного напрягает, но всё же я рада, что вы сделали утипусенький чудо-флеше-код часиков))))

    ОтветитьУдалить
  20. Всем привет! Вы либо не читаете пост, либо просто не у всех получается разобраться, как ставить эти часы на свой блог или сайт. Фон можно поменять, именно поэтому там написано "создай свой дизайн часов". Вместо этой надписи можно поставить любую картинку, хоть свою фотографию

    ОтветитьУдалить
  21. Уж и не знаю, что можно сделать неправильно: нарисовать картинку 250х250 и вставить ее адрес в нужные места, изменив ширину и высоту в коде на нужные. Но все же не хочет работать - не исчезает надпись "создай свой дизайн часов". Помогите, пожалуйста. Что я упустила? Очень уж хочется иметь свои часики))

    ОтветитьУдалить
    Ответы
    1. Странно, у одних получается, а кого-то не получается. Попробуйте поставить вместо ссылки на свою картинку, вот эту ссылку http://volkoffroman.narod2.ru/customclock/sample-clock.jpg
      Если фон у часов появится, значит дело в вашей картинке... И ещё скиньте в комментарии ссылку на свою картинку, может дело в хостинге, на который вы её загрузили.

      Удалить
  22. Спасибо за оперативный ответ. Дело действительно в картинке: я перепробовала все варианты вставки вашей картинки еще вчера - и как ссылку вставляла, и себе загружала - Ваша картинка становится. Я сравнила в фотошопе все возможные параметры своей картинки и Вашей, и по размерам сделала все идентично, кроме того, что у меня не получается изменить ее вес - Ваша меньше. Может быть дело в параметрах сохранения? Надо сохранить именно для веб или еще как-то?
    Насчет ссылки на картинку - я загружаю ее себе на блог, сторонними сервисами не пользуюсь по некоторым причинам. По этим же причинам не могу и Вам ее скинуть - условие заказчика. Что, естественно, огорчает, потому что понимаю, что не видя объект Вы мало чем сможете помочь. Может все же дело и правда в параметрах сохранения...? Очень надеюсь, что Вы хоть что-то еще сможете мне подсказать - где искать причину.

    ОтветитьУдалить
    Ответы
    1. "...я загружаю ее себе на блог..." - а где ваш блог есть, на каком хостинге. Если это blogspot, то возможно ссылка просто не верная (там легко ошибиться, они довольно громоздкие), или движок blogspot'а не даёт флешке эту картинку считать и вставить в часы. Вы пробовали ссылку на свою картинку вставлять в строку браузера, чтобы браузер её загрузил с хостинга и показал? Если браузер нормально картинку так отдельно отображает, то я уже не знаю в чём дело... Но проблема точно не в параметрах или объёме изображения, вы можете её как угодно сохранять из фотошопа, всё равно флеш должен её открыть, даже если она и по весу будет тяжёлая, в несколько мегабайт там, будет просто медленнее загружаться и всё, но отобразиться в итоге картинка должна. А ваш заказчик, видимо, параноик, извините =) Вот он часы со своей картинкой повесит где-нибудь в сети, так в два клика открывается исходный код страницы и картинка через ссылку выкачивается на компьютер. Пускай он её себе куда надо загрузит, а вам просто даст ссылку, чтобы вы уже с ней работали. И ещё дело в том, что допустим завтра я по каким-либо причинам удалю флешку, тогда все коды с часами, которые так в интернете понавставляли в разные места перестанут работать. Если вам так надо, я могу прислать исходник, но чтобы с ним работать, нужно знать Flash. Тогда только вы сможете сделать нормальные автономные часы.

      Удалить
  23. Блог находится на timeweb,картинка отдельно по адресу в браузере загружается, а в часы ни в какую становится не хочет - я уже еще на двух блогах попробовала. Уже не знаю что делать, но Вам выражаю огромную благодарность за то, что откликнулись! Решила освоить какую-нибудь флеш-программу (типа Aleo flash или в адоб полезу), часы в любом случае надо сделать - все в копилочку, лишним не будет. Еще раз спасибо!

    ОтветитьУдалить
    Ответы
    1. Пожалуйста, обращайтесь если что

      Удалить
  24. А как сделать так, что бы часы были не по центру картинки, а в углу?

    ОтветитьУдалить
  25. У меня фон сайта не белый, а фон циферблата круглый в png - как быть с 2-мя омерзительными вещами: с вашей надписью "создай дизайн часов", которая несмотря на мой фон все равно во время загрузки проскакивает, и с белыми уголками? Я подозреваю, что уголки от файла .jpg с вашей надписью. Замените пожалуйста файл .jpg с надписью на прозрачную картинку .png без надписи.

    ОтветитьУдалить
    Ответы
    1. Ваши подозрения ошибочны. В исходной флешке нет никаких растровых элементов. Для размещения флеш виджета с прозрачным фоном, нужен другой HTML код, с указанием специальной команды, чтобы фон установить на прозрачный, вот такой wmode="transparent" . Иначе он по умолчанию будет белый, несмотря на прозрачный png, который вы пытаетесь использовать в качестве фона. Надпись "создай дизайн часов" проскакивает по двум причинам: Первое - у вас возможно медленный интернет, второе - слишком большой объём фона. Поэтому ваш png фон долго загружается во флешку, и вы видите надпись пока происходит процесс загрузки.

      Удалить
  26. На данный момент виджет не работает! Хостинг на narod'е куда-то поехал

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