|
Silverlightru.net - проект о Microsoft Silverlight для профессионалов и любителей. |
Создание анимации
Продолжаем знакомство с возможностями MediaEllement, сейчас мы попробуем создать простую анимацию с использованием видео, на основе, которой в будущем вы сможете создать любую другую подобную анимацию, как перемещения, трансформация, поворот и сочетание, всех анимаций одновременно.
Popularity: 16% [?]
Работа с видео в 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: 17% [?]
Что такое темплейт?
Темплейт – это заранее подготовленный шаблон, определяющий общий вид объекта, который можно применить к множеству объектов, что позволяет достичь гибкости и быстроты управлением внешним видом объектов, чего иногда не позволяет сделать стили.
Стили имеют ограниченные возможности изменения внешнего вида объекта, если хотите полностью изменить внешний вид объекта без применения методы и событий объектов, вам необходимо использовать темплейты.
Popularity: 18% [?]
Стили
Наверно в современном компьютерном мире всем знакомо понятие стиля. Особенно это понятие близко, тем, кто работает и бывает в Интернете. И так Что такое стиль? Стиль – это общее представление объекта в пространстве включающие его визуальные свойства, а также его положение в пространстве или положение относительно его родительского контейнера. И так для чего же нужны стили? Стили нужны для того, чтобы упростить управление свойствами отображения объектов, которые имеют общие свойства. Для этого общие свойства объединяются в один стиль и применяются к определенному типу объектов. Если брать антологию в WEB – это HTML и CSS. Для легкого управления видом страницы используют каскадные таблицы стилей, что не только упрощает разработку, но так же делает код оптимальным, освобождая его от лишних тегов, и позволяет сделать его более понятным.
И так попробуем понять, зачем нужно использовать стили, как их применять, и в чем их преимущество.
Popularity: 21% [?]
Silverlight 1.0 позволяет создавать интерактивные эффекты, и менять свойства объектов используя JavaScript.
Silverlight 1.0 позволяет вызывать JavaScript функции, когда наступает какое либо событие например загрузка объекта или событие при наведении мыши.
Для того, чтобы определить обработчик события необходимо проделать следующие шаги:
1) В вашем XAML файле определить необходимый атрибут для вашего объект, который будет указывать функцию, которая будет обрабатывать событие.
someEvent = ‘YourFunction”, где someEvent - какое-то событие доступное для вашего объекта, а YourFunction JavaScript функция, которая будет обрабатывать ваше событие
2) Необходимо определить вашу функцию (YourFunction) в JavaScript файле
Popularity: 27% [?]
Для того, чтобы начать создавать свои собственные приложения на Silverlight. Вам необходимо для начала запастись необходимыми программными средствами.
1) Для 1.0: SilverLight 1.0
Для 2.0: SilverLight 2.0
Установка плагина Silverlight ни чем не отличается, от обычных windows приложений, только в конце они забыли добавить кнопку “finish”, что немного сбивает с толку и приходиться закрывать обычным крестиком.
Popularity: 31% [?]
Сегодня мы с вами рассмотрим взаимодействие 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"></canvas>
<rectangle width="300" height="80" stroke="Black" strokethickness="2">
cursor="Hand" mouseleftbuttonup="MouseClicked">
<textblock fontsize="22" canvas.left="113.21" canvas.top="26">
foreground="Blue" text="SilverlightRU.net" cursor="Hand"
mouseleftbuttonup="MouseClicked";
</textblock></rectangle>Параметры прямоугольника состоят из следующих значений:
Текстовый блок состоит из следующих значений:
Все что нам осталось добавить, это в нашем html файле следующий код :
<script type="text/javascript">
function MouseClicked(sender, args){
alert("Sender: " + sender.toString());
}
</script>Все тестируем.. и в очередной раз хвалим себя, какие мы молодцы)
Смотреть пример.
Popularity: 88% [?]
Появление Microsoft Silverlight вызывало массу неоднозначных мнений, и в принципе самый главный вопрос, чем оно сможем покарить своих пользователей, что в ней такого особенного, чем отличается от конкурентов???
Что б выяснить основные отличия SilverLight, давайте просто сравним ее с основным конкурентом - Adobe Flash (уже Adobe), итак чем они отличаются друг от друга:
1. SilverLight не требует установки видео кодека для проигрывания видео формата .WMF
Flash требует наличие кодека для проигрывания .WMF видео. Также есть ограничения по проигрыванию других форматов видео.
2. Silverlight поддерживает полноэкранное видео.
Flash не поддерживает масштабируемое полноэкранное видео.
3. Silverlight использует анимационную модель - WPF, которая основывается на времени а не на кадровой анимации.
Flash использует покадровую анимацию.
4. Silverlight не поддерживает GIF и BMP форматы. Поддерживаются только JPG и PNG форматы графических файлов.
Flash на сегодняшний день поддерживает все графические форматы.
5. Silverlight позволяет встраивать текст в свой проект, и устанавливать его с загрузкой объекта.
Во Flash работь со шрифтами довольно сложно.
6. Silverlight использует XAML, и он пока декларативный.
Flash - ActionScript
7. Silverlight не позволяет пока работать с пиксельной графикой, и использовать различные эффекты и фильтры.
Flash позволяет это делать уже с 8 версии
8. Silverlight использует XAML который основывается на текстовой информации, и может быть леко изменен используя простые XML объекты.
Flash использует бинарные (двоичные) формы записи.
9. Silverlight позволяет использовать различные технологии при создании проекта - JavaScript, C#.
Flash позволяет использовать только программные возможности ActionScript.
10. Используя Silverlight Streaming вы можете создать полноценный видеой cайт, используя бесплатный сервис.
Ни один потоковый сервис не доступен бесплатно во Flash.
Popularity: 78% [?]
Ну вот и пришло время практики.. Сегодня мы немного потренируемся и попробуем сотворить чего 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: 88% [?]
Ну что ж, как и обещал, продолжаю публиковать статью о “Введении в SilverLight”.
Начало статьи Здесь….
Ну сегодня нас с Вами ждет немного истории, итак не будем разглагольствовать и начнем.
Когда Tim Berners-Lee в CERN изобрел современную Сеть Интернет, она была предназначена как система, которая позволяла сохранять статические документы, и связывала их в сети. За эти годы наука не стояла на месте, а уверенно шла вперёд. Активные документы можно было создавать по запросу с учетом пользовательской информации или временных параметров. Технологии CGI позволяли это делать. Через какое-то время, возможность создавать документы в Сети получила первостепенную важность, а технология прошла путь от CGI через Java и ASP к ASP.NET..
ASP.NET была средствов, которое позволяло разработчикам создавать быстро и качество Web приложения на стороне сервера и оптимально подобранных инструментов серии Visual Studio.
Самым большим барьером для веб-приложений стал интерфейс пользователя, где технические ограничения помешали предоставить то же удобство, что и клиентские приложения для ПК, работающие с локальными данными.
XMLHttpRequest объект , выпущенный Microsoft как часть Internet Explorer 5 в 2000, открыл дорогу для технологии Asynchronous JavaScript и XML (AJAX), которая позволяла веб-приложениям Сети, обеспечить более динамическую реакцию на пользовательские действия, обновляя лишь небольшие части WEB страниц, не требуя полной перезагрузки контента. Инновационные решения, основанные на AJAX, типа карт Windows Live Local, приблизили веб-приложения к уровню удобства обычных клиентских программ.
Silverlight является следующим шагом в развитии потенциального богатства пользовательского интерфейса, благодаря которому разработчики и ДИЗАЙНЕРЫ могут сделать свои проекты профессиональными, и представить потребителям. Silverlight работает, позволяя ДИЗАЙНЕРАМ выразить свой творческий потенциал и сохранить работу в формате, который будет готов уже непосредственно для работы Интернете. В прошлом дизайнер проектировал сайт, используя средства, которые предоставляли богатые возможности пользователю, но при этом программисты сталкивался с ограничениями работоспособности на различных WEB платформах. В модели Silverlight, дизайнеры могут воплащать свои идеи и оно автоматически сохраняется в виде XAML. XAML впоследствии автоматически встраивается в веб-страницу с помощью среды выполнения Silverlight. В результате дизайнер и программист могут работать над конечным результатом более слаженно, чем когда-либо ранее.
XAML - это XML, является текстовым, не вызывает конфликтов с брандмауэрами, легко проверяемым языком, и при этом описывает различное содержимое. В то время как другие технологии - типа Java Applets, ActiveX, и существующий Flash который может использоваться, чтобы представить более интересно и красочнее содержание сайта, - но они все посылают двоичный запрос браузеру. Из-за этого трудно поддерживать безопасность, не говоря уже о трудности модернизировать, поскольку любые изменения требуют, чтобы все приложение было повторно переустановленно, что неудобно для пользователя и зачастую приводит к торможению веб-страниц. Когда используется Silverlight для того чтобы измененить контент, необходимо сгенерировать новый XAML файл на стороне сервера. В следующий раз, когда пользователь будет просматривать данную страницу, этот новый XAML загрузится, и содержание обновиться без какой-либо переустановки.
В основе Silverlight - расширенный модуль, который обрабатывает XAML и отображает графику в браузере. Плеер для воспроизведения приложений SIlverlight, весит менее чем 2 МБ, и может быть установлен, когда пользователь попадает на сайт, содержащий контент Silverlight. Модуль предоставляет разработчикам доступ к функциям XAML-страницы на языке JavaScript, таким образом, становится возможным взаимодействие с содержимым на уровне страницы и разработчик может, например, создать обработчики событий или управлять содержимым XAML-страницы с помощью JavaScript-кода.
Продолжение следует….
Popularity: 52% [?]