На этом уроке мы продолжим рассказ о работе с видео. Сегодня мы попробуем создать простейший МедиаПлеер, который позволит нам проиграть видео (аудио файл). В нашем примере мы будем использовать видео файлы. Сразу скажу, что урок требует минимального знания C#, большинство моментов я объясню, за разъяснением синтаксиса языка, обращайтесь к соответствующим источникам и справочным средствам.

(more…)

Popularity: 32% [?]

Создание анимации

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

(more…)

Popularity: 44% [?]

Silverlight 1.0 позволяет создавать интерактивные эффекты, и менять свойства объектов используя JavaScript.

Silverlight 1.0 позволяет вызывать JavaScript функции, когда наступает какое либо событие например загрузка объекта или событие при наведении мыши.

Для того, чтобы определить обработчик события необходимо проделать следующие шаги:

1) В вашем XAML файле определить необходимый атрибут для вашего объект, который будет указывать функцию, которая будет обрабатывать событие.

someEvent = ‘YourFunction”, где someEvent - какое-то событие доступное для вашего объекта, а YourFunction JavaScript функция, которая будет обрабатывать ваше событие

2) Необходимо определить вашу функцию (YourFunction) в JavaScript файле

(more…)

Popularity: 52% [?]

Сегодня мы с вами рассмотрим взаимодействие SilverLight и JavaScript. Рассмотрим это на простом примере, мы создадим просто текстовое поле и текстовый блок. При нажатии будет вызываться функция JavaScript и выскакивать сообщение, что мы в данный момент нажали.
Итак заходим сново уже в привычный для нас интерфейс Expression Blend, создаем новый проект. Затем создаем текстовый блок и прямоугольник ввиде окантовки к нашему тексту… В итоге xaml должен выглядеть следующим образом:

<canvas>
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="300" Height="80"
Background="White"
x:Name="Page"&gt;</canvas>

<rectangle width="300" height="80" stroke="Black" strokethickness="2">
cursor="Hand" mouseleftbuttonup="MouseClicked"&gt;
<textblock fontsize="22" canvas.left="113.21" canvas.top="26">
foreground="Blue" text="SilverlightRU.net" cursor="Hand"
mouseleftbuttonup="MouseClicked";
</textblock></rectangle>

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

• Width и Height, соотвественно длина и высота прямоугольника;
• Stroke - тут выставляем цвет контура прямоугольника, в примере - Черный;
• StrokeThickness - тут выставляем значение толщины линии;
• Fill - тут задаем значение цвета заливки, в нашем примере данный параметр отсутствует, так как нам нужно чтоб был виден текстовый блок;
• Canvas.Left и Canvas.Top - положение прямоугольника на рабочей области, по умолчанию оба значения имеют координаты (0;0).

Текстовый блок состоит из следующих значений:

• FontSize - размер нашей гарнитуры;
• Foreground - цвет текста;
• Text - текстовое содержание нашего блока;
• Canvas.Left и Canvas.Top - положение текстового на рабочей области, по умолчанию оба значения имеют координаты (0;0).
• MouseLeftButtonUp - в обоих случаях событие по нажатию левой клавиши мыши.

Все что нам осталось добавить, это в нашем html файле следующий код :

<script type="text/javascript">
function MouseClicked(sender, args){
   alert("Sender: " + sender.toString());
}
</script>

Все тестируем.. и в очередной раз хвалим себя, какие мы молодцы)
Смотреть пример.

Popularity: 86% [?]

Ну вот и пришло время практики.. Сегодня мы немного потренируемся и попробуем сотворить чего 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"&gt;;
<textblock x:name="Stop_txt" width="38" height="25" canvas.left="167">
canvas.top="411" text="Stop" textwrapping="Wrap"
MouseLeftButtonDown="DoStop"&gt;;
</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: 90% [?]