Как создать красивые скринкасты для ваших веб-приложений? - PullRequest
8 голосов
/ 28 марта 2010

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

Я впечатлен анимацией, когда мышь щелкает мышью и увеличивает изображение под разными углами.

Это делается с помощью Actionscript или есть программное обеспечение, которое облегчит мою жизнь?

Спасибо всем за помощь

Обновление

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

Кажется, они сделали это во Flash Action-скрипте?

Ответы [ 6 ]

5 голосов
/ 11 апреля 2010

Очень мало того, что есть в этом видео, является «скринкастом». Эффекты и анимации почти наверняка сделаны в профессиональном приложении для композитинга - я думаю, это Adobe After Effects.

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

Это может быть не то, что вы хотите услышать, потому что

  1. After Effects стоит дорого , а аппаратное обеспечение, необходимое для его нормальной работы, действительно дорого.
  2. After Effects трудно выучить.
  3. Выполнение поистине ошеломляющей композиции требует много времени, терпения и опыта.

Эти разочарования в стороне, это выполнимо. Помимо того, что я являюсь разработчиком, я являюсь продюсером любительского видео и работал с After Effects. Он чрезвычайно мощный и имеет некоторый программный аспект, когда вы используете выражения для управления поведением элементов.

Вот канал Vimeo, на котором демонстрируются некоторые замечательные эффекты After Effects: http://vimeo.com/channels/aework

Если вы серьезно относитесь к созданию композитов для создания видеороликов, подобных тому, на который вы ссылались, и хотите изучать After Effects, я рекомендую тренинг из http://www.lynda.com. У них есть отличная серия от Чэда Перкинса и меня многому научился у них. Если у вас есть достаточно времени для посвящения, вы определенно можете пройти через все это за один месяц, что стоит $ 25.

3 голосов
/ 28 марта 2010

Довольно хороший бесплатный инструмент - Wink . Работает на Windows и Linux, производит .SWF, позволяя вам комментировать и тонко настраивать движения мыши. Это также позволяет переключаться между управляемым событиями, синхронизированным и ручным захватом. Таким образом, вам не нужно так сильно беспокоиться о репетиции времени, как вы делаете это с другими инструментами. Я немного поработал над этим, и это кажется очень способным Он не имеет высококлассных функций, таких как масштабирование и панорамирование.

Другим коммерческим инструментом является Instant Demo , который я использовал более широко. Это полнофункциональный инструмент (с функцией масштабирования и т. Д.), Простой в освоении и интересный в использовании. Также производит .swf. Это средняя цена, примерно на полпути между Wink (бесплатно) и Camtasia (дорого).

2 голосов
/ 11 апреля 2010

Если вы работаете на Mac, лучшим инструментом является ScreenFlow. Он имеет весь рабочий процесс записи, редактирования и экспорта. Вы можете добавить наложения, увеличить масштаб, где находится мышь, затемнить части экрана и загрузить больше. Это действительно стоит проверить.

1 голос
/ 09 апреля 2010

Лучший инструмент для создания Screencast - TechSmith's - Jing.

0 голосов
/ 12 апреля 2010

Если вам действительно нужна потрясающая демонстрация с пользовательскими эффектами и великолепным дизайном, возможно, стоит нанять разработчика флэш-памяти на неделю или около того:)

0 голосов
/ 05 апреля 2010

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

Я полагаюсь на большинство из них Camstudio , Freez и Wink .

...