|
Silverlightru.net - проект о Microsoft Silverlight для профессионалов и любителей. |
Создание анимации
Продолжаем знакомство с возможностями MediaEllement, сейчас мы попробуем создать простую анимацию с использованием видео, на основе, которой в будущем вы сможете создать любую другую подобную анимацию, как перемещения, трансформация, поворот и сочетание, всех анимаций одновременно.
Popularity: 10% [?]
Работа с видео в SilverLight
Сегодня разговор пойдет о видео файлах и работе с ними. Silverlight имеет очень широкие возможности создания простых видео плееров, и интересных интерактивных эффектов с использованием видео. После появления Silverlight стало возможным отображать высококачественное потоковое видео, чем в то время не мог похвастаться Flash, но с приходом Flash 9 ситуация выровнялась. Но так ли это на самом деле давайте посмотрим.
И так приступим, к созданию простого приложения, которое будет отображать наше видео. Чтобы создать такое приложение вам необходимо использовать Blend Studio, а также необходимо, чтобы был установлен видео плеер Windows Media Player не ниже 10 версии, иначе Blend Studio не даст вам создавать видео (MediaElement будет выдавать соответствующее предупреждение), к сожалению, в данный момент MediaElement поддерживает только три видео формата wmv, asx, asf и два аудио mp3, wma. Думаю в будущем будет обеспечен более богатый набор видео форматов. Но пока Blend Studio при попытке использовать не соответствующий формат, и даже иногда с некоторыми файлами *.wmv вылетает с Exception – ом, думаю этот баг они тоже исправят в будущих версиях. Ну пока посмотрим как все это работает.
Popularity: 12% [?]
Вот для того, чтобы не расслабляться, небольшая подборка уроков по SilverLight, так что качаем и учишься работать с новой технологией:
Popularity: 82% [?]
Ну вот и пришло время практики.. Сегодня мы немного потренируемся и попробуем сотворить чего Silverlight-оского ;)
Начало статьи тут….
Итак начнемс, вы уже должны были скачать и установить Expression Blend, если Вы этого не сделали, то смотрим тут, что и как необходима скачать и установить.
Запускаем Microsoft Expression Blend, кликаем New Project, и конечно выбираем SilverLight Application, указав папку в которой будут храниться исходники.
Выберите ОК, и новый проект будет создан.
Структура вполне стандартная, и думаю кто работал с различными графическими редакторами, как Flash, разобраться будет не сложно. Единственное в верхнем углу расположено меню доступа к основным файлам проекта.
Т.е. проект содержит по умолчанию HTML страницу, код JavaScript содержащейся на этой странице, XAML документ.
Silverlight.js содержит код загрузки и иллустрирует пример управления SilverLight. Он представлен как часть Silverlight SDK.
Default.html - стандартная Web страница. Она содержит три ссылки на JavaScript, указывающие на Silverlight.js, Default.html.js , и Scene.xaml.js (который содержит обработчик событий определенных в XAML).
Итак мы займемся с вами созданием UI для Video Player.
Добавьте любой видео файл к вашему проекту. Чтобы сделать это, щелкните правой кнопкой мышки на Project Files в верху экрана, и выберите Add Existing Item… Выбираем любой видеофайл (Добавляем WMF и версия Microsoft Windows Player должна быть не ниже 10) и нажимаем ОК
Файл появится в Project Explorer, и, Медиа элемент будет добавлен на главную страницу. Вы можете теперь просмотреть ваш проект в браузере, который воспроизведет ваше видео! Также можно остановить автоматическое воспроизведение видео, редактируя XAML. Выберите XAML (из двух:Design&XAML) таблицу, откроется окно редактирования XAML. Просто нужно лишь отредактировать тег MediaElement, и установите атрибут AutoPlay=False.
Запускаем - смотрим, все работает!
Добавьте два текстовых блока на поле с текстом Play и соответственно Stop и назовите их Play_txt и Stop_txt, после этого ваш XAML файл дожен выглядеть следующим образом (что самое удобное, ошибки видны сразу на панели Errors).
<canvas>
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480"
Background="White"
x:Name="Page";
<mediaelement x:name="You_Roll_wmv" width="352">
Height="288" Source="You Roll.wmv"
Stretch="Fill" Canvas.Left="134"
Canvas.Top="94" AutoPlay="False";
<textblock x:name="Play_txt" width="40" height="25" canvas.left="106">
canvas.top="411" text="Play" textwrapping="Wrap";
<textblock x:name="Stop_txt" width="38" height="25" canvas.left="167">
canvas.top="411" text="Stop" textwrapping="Wrap";
</textblock></textblock></mediaelement>
</canvas>Затем добавьте описание обработчика событий для блоков текста в XAML. Для этого используется свойство MouseLeftButtonDown (интуитивно понятно, что действует по нажатию левой клавиши мыши).
Итак для Play_txt добавляем действие DoPlay, для Stop_txt - DoStop, и соответственно участок с текстом в XAML выглядет следующим образом:
<textblock x:name="Play_txt" width="40" height="25">
canvas.left="106" canvas.top="411" text="Play" textwrapping="Wrap"
MouseLeftButtonDown="DoPlay">;
<textblock x:name="Stop_txt" width="38" height="25" canvas.left="167">
canvas.top="411" text="Stop" textwrapping="Wrap"
MouseLeftButtonDown="DoStop">;
</textblock></textblock>Теперь когда пользаватель щелкнет мышкой по одному из текстовых блоков, мы сможем обработать это событие при помощи JavaScript. Обработка Событий в JavaScript записывается здесь Page.xaml.js.
Так как мы определили функции по нажатию, как DoPlay и DoStop, запишим их соответсвенно в Page.xaml.js. Код должен выгдедеть следующим образом:
function DoPlay(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("YouRoll_wmv");
theMedia.Play();
}
function DoStop(sender, eventArgs)
{
var theHost = document.getElementById("SilverlightControl");
var theMedia = theHost.content.findName("YouRoll_wmv");
theMedia.Stop();
}
Все можем тестировать. Нажимаем на текстовый блок Play - ролик начинает проигрываться, нажимаем на Stop - останавливается. Поздравляю мы сделали первый проект при помощи Silverlight!!!
Popularity: 86% [?]