Случайны выбор дневника Раскрыть/свернуть полный список возможностей


Найдено 1268 сообщений
Cообщения с меткой

уроки флеш - Самое интересное в блогах

Следующие 30  »
Зоя_Крайсик

КАК СДЕЛАТЬ ФЛЕШ КНИЖКУ

Воскресенье, 14 Августа 2016 г. 18:37 (ссылка)

Это цитата сообщения меня_зовут_Любаша_К Оригинальное сообщение

Как сделать флеш книжку

Счетчик посещений Counter.CO.KZ - бесплатный счетчик на любой вкус!


Здравствуйте...

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




Читать далее

урок провела
Любаша К

Метки:   Комментарии (1)КомментироватьВ цитатник или сообщество
rss_semenova_irina

Создание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками

Среда, 30 Июня 2016 г. 01:14 (ссылка)


Это цитата сообщения Marina-Rozina Оригинальное сообщениеСоздание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками


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

розы

Это моя анимация, сделанная в фотошопе с помощью фильтра Alien Skin Xenofex 2.
Исходник картинки вот

png

В качестве кнопочек Play и Stop я возьму такие картинки
1 2

Вы можете взять любые другие кнопочки. Например, выбрать из моего альбома на Яндекс фото. Описание альбома здесь.
У меня из картинки получился вот такой плеер






1. Открываем русскую портативную версию программы Sothink SWF Quicker 5.3.511. Внизу должна быть открыта закладка – "Свойства".



Если вы не видите каких-то панелей, выберите наверху в меню пункт "Окно", а в открывшемся списке кликните по пункту "Восстановить панели".

3

Изменим размер сцены, выставим размеры нашей картинки. Размер готового плеера будет именно такой. После ввода нужных размеров не забываем нажать клавишу Enter, только тогда размер сцены изменится. Двигая ползунки, можно расположить рабочее поле по центру.



Если рабочее поле слишком большое, можно изменить масштаб, чтобы его было видно целиком.

5




2. На "Временной шкале" создадим 5 слоёв. Для этого 4 раза нажмём на значок "Вставить слой".

6

Переименуем слои, чтобы не путаться. Для переименования дважды щёлкнем мышкой по имени слоя, и в открывшемся окне напишем новое имя.



8

Назовём слои "Статика", "Play", "Анимация", "Stop" и "Скрипт".

9




3. Импортируем нашу анимацию.

Выбираем в меню пункт "Вставка" и нажимаем вкладку "Новый символ".

10

Откроется окно

11

В открывшемся окне в поле "Имя символа" пишем слово "картинка", чтобы потом не запутаться. Выбираем тип символа – Видеоролик.

12

Нажимаем кнопку "OK". После этого мы попадаем с основной сцены в окно редактирования вновь созданного символа – "картинка". Сюда и будем импортировать нашу анимацию. Нажимаем на кнопку "Импорт".

13

В открывшемся окне Импорта находим папку с нужным файлом, выбираем файл и нажимаем кнопочку "Открыть".

14

Появится сообщение о том, что на Временной шкале необходимо добавить недостающие кадры.

15

Нажимаем кнопку "Да". Файл импортируется в "Библиотеку". Все кадры анимации появятся на "Временной шкале" и в "Библиотеке" программы. Кроме того, в "Библиотеке" будет присутствовать "Символ 2" – покадровый видеоролик анимации.



В палитре "Трансформация" для картинки настраиваем параметры – в координаты X и Y заносим 0, иначе потом картинка при включении плеера будет сдвигаться. Не забываем нажать клавишу Enter после введения нулей.

17

Теперь переходим на основную Сцену, нажав на вкладку "Сцена 1" над "Временной шкалой".

18




4. На основном рабочем поле "Сцена 1" выделяем первый слой "Статика", а в палитре инструментов делаем активным инструмент "Выбор".

19

В "Библиотеке" я ищу первый кадр импортированного анимированного файла, у меня он называется "Корзина-роз-1-2 1". Вы можете, если хотите, взять любой кадр, это на ваше усмотрение. Именно такая картинка будет у нас при выключенном плеере.
Все символы в "Библиотеке" отсортированы по алфавиту. Если у вас там много кадров и нужного не видно, покрутите в "Библиотеке" полосу прокрутки справа и найдите его.

20

Сейчас имена в "Библиотеке" отсортированы по убыванию. Почему-то в моей версии программы самый последний символ не отображается. Возможно, у вас то же самое. Тогда нажмите на значок рядом со словом "Символ".

21

Все символы в "Библиотеке" будут отсортированы по возрастанию, и нужный кадр появится в самом верху. Щелчком мыши выделяем его.

22

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



Идём в палитру "Трансформация". Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. Если размер задан нечётным числом, то значение координаты получится не целым. Не забываем нажать клавишу Enter после выставления значений координат.

24

Теперь щёлкните мышкой по самой картинке на рабочем поле, чтобы выделить её – вокруг картинки появится синяя обводка.

25

Нам нужно задать имя для этой картинки. Для статичной картинки это сделать нельзя, её необходимо сделать символом – видеороликом.
На панели "Свойства" щелкаем по надписи "Преобразовать в символ".

26

В открывшемся диалоговом окне преобразования в символ выставляем следующие параметры. Тип символа – Видеоролик, точка регистрации – посередине, "Имя символа" – "fon1".

27

Нажимаем "OK". Теперь в графу "Имя" вводим "fon1". На самом деле "Имя символа" в предыдущем окне и значение в графе "Имя" могут быть разными, но я делаю их одинаковыми, чтобы не запутаться.

28

Всё, с первым слоем закончили. Чтобы случайно не сдвинуть картинку, закроем слой замочком, щёлкнув на слое "Статика" в клеточку рядом с глазком видимости слоя. В клеточке появится замочек.

29




5. Делаем активным слой "Play".

30

Импортируем файл с картинкой-кнопочкой в "Библиотеку". Так как я взяла в качестве кнопочки статичную картинку, то импортируем её сразу. Для этого наверху в меню нажимаем на пункт "Файл" и выбираем вкладку "Импортировать в библиотеку".

31

В открывшемся окне Импорта находим папку с нужным файлом, выбираем файл и нажимаем кнопочку "Открыть". Можно импортировать сразу несколько файлов. Я так и делаю, сразу импортирую кнопочки пуск и стоп.

32

Файлы с картинками-кнопочками импортировались в "Библиотеку".

33

Перетаскиваем мышкой файл с кнопочкой пуск из "Библиотеки" на слой "Play". Не забывайте, что активным должен быть инструмент "Выбор".



Теперь решайте, в каком месте вы поместите кнопочку, и какой у неё будет размер. Можно расположить её на самой картинке или на свободном от картинки месте, главное, чтобы она была на выделенном белым цветом рабочем поле. Двигайте её мышкой или меняйте значения координат X и Y. Размер кнопочки можно поменять, изменив масштаб в палитре "Трансформация". Не забудьте нажать клавишу Enter после введения всех значений в палитре "Трансформация". Я поместила кнопочку внизу справа и сделала её поменьше, задав масштаб 80%.

35

Если вдруг поля в палитре "Трансформация" стали серыми, и вы ничего не можете в них занести, щёлкните мышкой по самой кнопочке на рабочем поле, чтобы выделить её – вокруг кнопочки появится синяя обводка. Теперь вы опять можете изменять значения в палитре "Трансформация".

36

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

37

Снова щёлкните мышкой по самой кнопочке на рабочем поле, чтобы выделить её.
Зададим имя для кнопочки. Так как кнопочка тоже представлена статичной картинкой, её необходимо сделать символом – видеороликом. На панели "Свойства" щёлкаем по надписи "Преобразовать в символ".

38

В открывшемся диалоговом окне преобразования в символ выставляем следующие параметры. Тип символа – Видеоролик, точка регистрации – посередине, "Имя символа"" – "play_bt". "Имя символа" можно и не менять, а оставить то, которое предложила программа.

39

Нажимаем "OK". Внизу на панели "Свойства" для вновь созданного символа "play_bt" в графу "Имя" вводим "play_bt".

40

Всё, кнопочка Play создана. Чтобы случайно не сдвинуть её, закроем слой замочком.




6. Делаем активным слой "Анимация".

41

Находим в "Библиотеке" нашу анимацию – видеоролик "картинка" – и выделяем её.

42

Мышкой перетягиваем её на рабочее поле.



Идём в палитру "Трансформация". Для выравнивания по центру координата X должна быть равна половине размера ширины картинки, а координата Y должна быть равна половине высоты картинки. Ставим те же значения, что и в пункте 4. Не забываем нажать клавишу Enter после выставления значений координат.

24

Теперь щёлкните мышкой по самой картинке на рабочем поле, чтобы выделить её – вокруг картинки появится синяя обводка.

43-2

Зададим имя для этой картинки. Для анимации (видеоролика) это можно сделать сразу. В графу "Имя" вводим "fon2".

44

Для этого слоя мы сделали всё. Закрываем его замочком, чтобы случайно не сдвинуть нашу анимацию.




7. Делаем активным слой "Stop".

45

Делаем всё то же самое, что и для кнопки Play.
Если вы ещё не импортировали картинку-кнопочку стоп, импортируйте её в "Библиотеку", как в пункте 5.
У меня кнопочка уже в "Библиотеке", поэтому я просто нахожу её там.
Перетаскиваем мышкой файл с кнопочкой из "Библиотеки", на слой "Stop".



Теперь решайте, в какое место вы поместите кнопочку Stop, и какие у неё будут размеры. Я люблю, чтобы кнопочки Play и Stop располагались в одном и том же месте. Всё равно в готовом плеере будет видно то одну, то другую.
Так как кнопочки у меня одинакового размера, в палитре "Трансформация" я задала масштаб 80% и те же самые значения координат X и Y, что и для кнопочки Play. Не забудьте нажать клавишу Enter после введения всех значений в палитре "Трансформация".

35

Снова щёлкните мышкой по самой кнопочке на рабочем поле, чтобы выделить её – вокруг кнопочки появится синяя обводка.

47

Нам нужно задать имя для кнопочки. Так как кнопочка тоже представлена статичной картинкой, её необходимо сделать символом – видеороликом. На панели "Свойства" щелкаем по надписи "Преобразовать в символ".
В открывшемся диалоговом окне преобразования в символ выставляем следующие параметры. Тип символа – Видеоролик, точка регистрации – посередине, "Имя символа" – "stop_bt". "Имя символа" можно и не менять, а оставить то, которое предложила программа.


48

Нажимаем "OK". Внизу на панели "Свойства" в графу "Имя" вводим "stop_bt".

49

Всё, кнопочка Stop создана. Чтобы случайно не сдвинуть её, можно закрыть слой замочком.




8. Делаем активным последний слой "Скрипт".

50

В палитре "Свойства" переходим на вкладку "Действие". Открываем эту вкладку.

51

Копируем и вставляем в это поле следующий скрипт:


fon1._visible = true;
fon2._visible = false;
stop_bt._visible = false;
play_bt.onRelease = function ()
{
myMP3 = new Sound();
myMP3.loadSound(mp3, true);
fon2._visible = true;
fon1._visible = false;
play_bt._visible = false;
stop_bt._visible = true;
};
stop_bt.onRelease = function ()
{
fon1._visible = true;
fon2._visible = false;
play_bt._visible = true;
stop_bt._visible = false;
myMP3.stop();
};


Производим проверку скрипта на наличие ошибок, нажав на зелёную галочку над ним.

52

Если скрипт написан правильно, появляется такое сообщение:

53

Закрываем это окно.




9. Тестируем плеер, нажав на кнопку "Предварительный просмотр" (зелёный треугольник).

В открывшемся окне просмотра вначале картинка должна быть статичной и видна кнопка Play.



Нажимаем на кнопку Play, картинка становится анимированной и появляется кнопка Stop.

55-1

Если кнопки меняются при нажатии, значит у вас всё верно. Закрываем окно просмотра.




10. Хочу рассказать ещё об одной тонкости.

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



Хотелось бы, чтобы скорость анимации была такой же, как на исходной картинке или хотя бы близкой к ней. Что здесь можно сделать?
Закройте окно просмотра, опять откройте внизу закладку "Свойства" и щёлкните мышкой по рабочему полю. В "Свойствах" вы увидите окошко "Частота кадров".

57

Если вы будете уменьшать значение в этом окне, анимация будет двигаться медленнее, увеличивать – быстрее. Только после ввода нового значения не забывайте нажать клавишу Enter. Таким образом, изменяя частоту кадров, вы в каждом конкретном случае сможете подобрать нужную скорость для анимации.
Вот мне показалось, что наиболее подходящей для данной анимации является "Частота кадров" равная 9.

58




11. Сохраняем наш проект.

Я очень советую вам сохранять проекты ваших плееров. Если вы захотите потом что-то изменить в плеере, гораздо легче это будет сделать в проекте, чем переделывать всю работу заново.
Итак, сохраняем наш проект – нажимаем на пункт "Файл" и выбираем вкладку "Сохранить", или просто нажимаем Ctrl+S.

59

Задайте проекту имя и сохраните его. Проекты сохраняются с расширением .sqf

60




12. Сохраняем плеер в формате флеш на компьютер.

Нажимаем кнопочку "Экспорт".

61

В названии должны быть только латинские буквы. Плеер, как и все флеш, сохраняется в формате .swf

62




13. Заливаем флеш-плеер на сайт.

Я люблю заливать плееры на ЯП
Здесь вы получите уже готовый код для Лиру.
Можно залить плеер на Лиру – поместить плеер в черновик своего дневника и потом посмотреть код. Но тогда вам придётся самостоятельно подставить размеры плеера в код.
К готовому плееру можно подгружать любую музыку в формате .mp3


Формула для размещения плеера с музыкой на страничке Лиру выглядит следующим образом:






Например, для этого моего плеера вы можете прочитать его код в окошке:
" />

В последнее время я делаю плееры несколько иначе. Почему и как, объясню во второй части урока.




При написании урока использовались материалы уроков:
Урок 1
Урок 2

Серия сообщений "* уроки Sothink SWF Quicker":
Часть 1 - Делаем музыкальную флеш открытку в программе Sothink SWF Quicker
Часть 2 - Делаем элементарный плеер сами в программе Sothink SWF Quicker
...
Часть 18 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 1 Создание часового механизма.
Часть 19 - Создаем аналоговые часики в программе Sothink SWFQuicker. Часть 2. Дизайн для часиков.
Часть 20 - Создание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками

Серия сообщений "Sothink SWF Quicker.":
Часть 1 - Создаем таймер обратного отсчета в программе Sothink SWFQuicker
Часть 2 - Делаем элементарные часики.Начинаем учиться созданию flash
...
Часть 32 - Как сделать красивый текст в программе Sothink SWF Quicker
Часть 33 - Создаем плеер в Sothink SWF Quicker
Часть 34 - Создание плеера с кнопками из картинки с анимацией. Часть I – Создание плеера с двумя кнопками

http://www.liveinternet.ru/users/semenova_irina/post393651672/

Метки:   Комментарии (0)КомментироватьВ цитатник или сообщество
НАТАЛИЯ11

Размеры flash и Отсебятина

Суббота, 28 Мая 2016 г. 09:19 (ссылка)










Размеры flash и Отсебятина 



 



Мы, девчонки, как вороны и сороки, любим всё блесящее. А ещё картиночки, цветочки...  blush2



Кстати о блестяшках. Оказывается, птички приносят их в гнездо и часто перебирают, любуются. Смех! А может быть, мы не от Евы, не от инопланетян, как сейчас часто предполагают в околонаучной сфере, а от этих птичек? grin 



 



Есть тут одна заковырка: тащут блестящее вОроны, чтоб сделать подарок самочке. Не хочется думать, что мы какие-то не такие. Пардон, касаюсь европейских ценностей. Вдруг обидятся? Но мы, лапотники, как-то в преобладающем большинстве придерживаемся традиционной ориентации. yahoo



 



А теперь почти серьёзно, но правдиво о размерах flash:



 



Далее... Размеры flash и Отсебятина
Метки:   Комментарии (3)КомментироватьВ цитатник или сообщество
daf53

Создание анимированного плеера в Sothink SWF Quicker

Вторник, 05 Апреля 2016 г. 07:56 (ссылка)


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



Видеоурок сделан по текстовой версии урока Ларисы Гурьяновой : http://www.liveinternet.ru/users/3354683/post306377022. Некоторые моменты упрощены для лучшего восприятия новичками.



Итог урока таков:

 






 



Смотрим урок в качестве 1080 в полный экран



 



 







 

Метки:   Комментарии (20)КомментироватьВ цитатник или сообщество

Следующие 30  »

<уроки флеш - Самое интересное в блогах

Страницы: [1] 2 3 ..
.. 10

LiveInternet.Ru Ссылки: на главную|почта|знакомства|одноклассники|фото|открытки|тесты|чат
О проекте: помощь|контакты|разместить рекламу|версия для pda