July 27 2007: Microsoft decides... "Today is a good day. Today we endeavour to bring down ISP's globally.. ." =). Below is a subset of the release list for the 27th of July. (If you're a Gungan and develop on a Mac, there are additional links for you on Tim Sneath's blog)
Silverlight 1.0 RC
Silverlight 1.1 Alpha Refresh
Visual Studio 2008 Orcas Beta 2
ASP.NET Futures CTP
Silverlight 1.0 SDK / Silverlight 1.1 SDK
Expression Blend August Preview
Expression Media Encoder Template Updater
Brad Abrams & Tim Sneath (again) are the blogs to refer to for details regarding these releases. For a list of breaking changes that have been made to Silverlight since Silverlight 1.0 Beta, Joe Stegman's blog is a great place to start!!
Alternatively, if you can get hold of the latest SDK, it contains documentation with the complete list of changes / enhancements. Just to give you a quick heads-up on the importance of reviewing this doco... you can no longer reference "Sys.Silverlight.createObject(...)".
It will now be "Silverlight.createObject(...)"
I know!!.... MASSIVE!!
For those that work with me, I will have DVD's containing the above software on my desk on Monday. So come by and grab a copy.
BTW if you were at the Silverlight demo that took place at our office, and couldn't remember who that hairy evangelist bloke was. His name is Michael Kordahi, and you can find his blog here. I'm sure I found video's from Remix up on his blog... but they seem to have gone AWOL... Perhaps his stream wasn't ready for 1.0 RC... *eep*.
albo
Sunday, July 29, 2007
It's a Release FRENZY!
Monday, July 23, 2007
Expression Web vs. Visual Studio 2008
Today I was asked of the differences between Expression Web and Visual Studio 2008. I took a guess at the direction Microsoft was heading with this product, in short, I compared it to Front Page, or a Dreamweaver in functionality... Thats a massive generalisation, but until Microsoft is paying me millions to say differently, im sticking to it.
Someone who is/was getting paid millions by Microsoft is Mikhail Arkhipov. I've picked up 2 of his blog posts which cover some of the significant differences between the products Expression vs. Visual Studio and Visual Web Developer, and What is not in the VS Orcas Web designer compared to the Expression Web?.
cheers.
Someone who is/was getting paid millions by Microsoft is Mikhail Arkhipov. I've picked up 2 of his blog posts which cover some of the significant differences between the products Expression vs. Visual Studio and Visual Web Developer, and What is not in the VS Orcas Web designer compared to the Expression Web?.
...another interesting article that pits Expression Web against Dreamweaver (I can almost hear the symphony of disgruntled Adobe fans groaning) Microsoft's Expression Web Designer vs. Adobe's Dreamweaver First look: Let the rumble begin."Primary difference is in a set of tools provided in each product. Visual
Studio and VWD come with full set of code tools that always have been part of
the Visual Studio: compilers, code intellisense, debugger, class libraries,
testing tools, etc. On the other hand, Expression has different design surface
with more advanced CSS and visual layout tools, Direct Style
Application, imaging tools, spell checker, site management with link fixup
and more." Mikhail Arkhipov
cheers.
Sunday, July 22, 2007
Silverlight Media Player with Ad Overlays: Part 1
Tim Sneath has a very nice walkthrough on creating basic ad overlays. To summarise, he demonstrates how to embed a video, and wire up an event handler to display an ad overlay when a user clicks the video. You can find his walkthrough here: More Fun with Silverlight Video: Ad Overlays
Tim Heueur, using very similar methods, walks you through creating text based overlays that appear when a 'Marker' is encountered. A 'Marker' is simply a point in time along the timeline of a video. You can code around these markers, and wire event handlers to perform custom operations when they occur. You can find his walkthrough here: Silverlight: Creating Video with Timed Overlays
What I am going to 'attempt' is to create a fairly simple media player with a play list. The play list will be populated from an RSS feed (e.g. The ninemsn top 10 most popular videos), and some type of contextual advert will scroll over the video while its playing. The ad chosen to appear will be selected based on keywords in the description field for the video. So basically if a user selects a video related to technology, an advert that is also related to technology will be displayed.
The media player itself should scroll through the list of videos 1 by 1, at an interval of 10 seconds or so. To achieve this I will need to tile media elements, and every 10 seconds, provide some type of funky animation to slide the current video out of the view port, and slide the next video on the playlist into the view port. (Thanks to my dazzling design talent I'm sure this will absorb most of my time)
Finally, As the videos are shuffled I do not want the next video to play automatically, but instead display a static image related to the content. The image is intended to provide a visual clue as to the content of the video, this is so the user doesn't need to begin streaming unless they want to view the whole piece.
Side Note: I've encountered some issues recently while executing a number of my projects on my local web server. Hopefully these problems don't inhibit my progress too much.
Getting Started:
I'm pretty keen to have a good play with Expression Blend 2 May Preview, so the first thing I'm going to do is open up blend and create a new project.
Creating Media Elements:
By default the tool for creating a Media Element is not visible on the toolbar, you can add it by clicking on the chevron symbol, and searching for "Media":
For this implementation I'm going to need 5 Media Element tiles. The animation I will create will allow the tiles to scroll up, or scroll down, therefore I need to tile them vertically. 5 seems like a lot, however I intend to have a 3d animation, and for each animation sequence 4 tiles will used. When scrolling up, the upper 4 tiles will be visible, and when scrolling down the bottom four tiles will be visible.
You can see the configuration of the Media Elements in the following screenshot. I currently have my main canvas selected (blue border around the canvas). As you can see its slightly larger then the Media Element, the space at the bottom is where my playlist will be.
For the time being, all my Media Elements are pointing to the same local source. It's actually a video of a butterfly that comes as a sample with Vista. Until I work out reading the playlist from a feed, this silly butterfly video will have to do =)
Creating the Playlist:
Next I need to create my playlist. You can see in the following screenshot, its just a number of rectangles and text blocks. I will need to create some animations, and wire up some event handlers, so when a user clicks on the media name, or the scroll bar the media swap animation will begin. We will also need to create some animations for the playlist entries. So when a user clicks the Up/Down arrows, the media name showing will also change to coincide with the next video.
Adding Images:
The playlist is quite ugly in its current state, so I added some colour and images to brighten in up. Again the tool to add images is not in the toolbar by default, so you will need to add it manually as we did for the Media Element tool.
My playlist now looks like this:
Ad Overlay:
What you may have noticed on the screen shot earlier, is the white text that extends to the right of the canvas. This is my sample ad, I have created an animation that once you click play on a video, this text will begin to scroll across the top of the video. I created this animation using the same process detailed in Tim Sneath's walkthrough More Fun with Silverlight Video: Ad Overlays.
Creating Animations:
As mentioned earlier, I want to have a 3d animation for the shuffling of the videos. What I'm aiming for is when a user clicks on one of the directional arrows, to have the current video recess into the background fractionally, then slide up or down and out of view. As the current video slides out of view, the next video will slide into view. The next video will also be recessed slightly, and once it reaches the centre of the view port, it will move toward the viewer (or look as such) until it occupies the entire view port area.
The following images show how the animation will look mid transition, first on the work surface, and then executing in the browser:
Work surface:
In a browser:
The animations themselves are very simple to create, how complex / difficult you make it is up to you. Because I've chosen to use 5 slides, I need to create 5 animations, 1 for each slide configuration. Silverlight is fantastic in that I do not need to create different animations for both the up and the down actions. All I need to do is create 1 animation for each slide configuration.
When a user clicks up or down, we need to only call the animation that leads into the configuration we want to be in, Silverlight will handle the direction the Media Elements move. The only caveat in doing the animation this way, is that you must not specify the locations of the Media Elements at the start of your Timeline. e.g. If you specify that Media Element 1, must start at TOP=360px, and will end at TOP=0px, then the element will only ever move downwards. Where, if you don't specify a starting position, and only specify that Media Element 1 will end at TOP=0px, then Silverlight will move it from where ever its currently located, and in any direction it needs to. (If that wasn't clear enough I apologise, I'm still hung over thanks to Craig)
Firing an animation:
Actually firing an animation is a piece of cake. First, what I need to do is wire up an event handler to the Up/Down arrows in the play list. This is also very simple as you can see from the following code snippet:
this.MediaUp = this.control.content.findName("MediaUp");
this.MediaUp.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaUp));
this.MediaDown = this.control.content.findName("MediaDown");
this.MediaDown.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaDown));
I setup these events in my onLoad handler, you can also add references to event handlers in the XAML itself.
The code to fire an animation looks something like this:
this.control.content.findName("VideoChange" + reqState).Begin();
The names of my animations are "VideoChange1", "VideoChange2", "VideoChange3", "VideoChange4", and "VideoChange5". "reqState" is how I identify which animation the user needs to see.
Bugs/ Issues:
I found the Text Blocks that I created where causing errors when the project was executed. "ErrorCode: 2012". It appears that XAML being output for the Text Block isn't recognised by Silverlight i.e. 'Language="en-au"'. Until I work out a real solution, all I've done to get around it is remove the bold text below.
<TextBlock Width="152" Height="88" Canvas.Left="-304" Canvas.Top="176" TextWrapping="Wrap">
<Run Language="en-au">Media Name 1</Run>
</TextBlock>
Final:
I'm tired and hung over, and can't wait to hit the sack. Hopefully in the next post I'll get to show the Silverlight "Downloader" object. The "Downloader" object is modelled after the XMLHttpRequest API's, so they should be good fun to play with.
If you want any more information, more code, or has any questions or suggestions please give me a yell @ allan.waddell@hotmail.com (or any of my multitude of email addresses). Have fun.
Tim Heueur, using very similar methods, walks you through creating text based overlays that appear when a 'Marker' is encountered. A 'Marker' is simply a point in time along the timeline of a video. You can code around these markers, and wire event handlers to perform custom operations when they occur. You can find his walkthrough here: Silverlight: Creating Video with Timed Overlays
What I am going to 'attempt' is to create a fairly simple media player with a play list. The play list will be populated from an RSS feed (e.g. The ninemsn top 10 most popular videos), and some type of contextual advert will scroll over the video while its playing. The ad chosen to appear will be selected based on keywords in the description field for the video. So basically if a user selects a video related to technology, an advert that is also related to technology will be displayed.
The media player itself should scroll through the list of videos 1 by 1, at an interval of 10 seconds or so. To achieve this I will need to tile media elements, and every 10 seconds, provide some type of funky animation to slide the current video out of the view port, and slide the next video on the playlist into the view port. (Thanks to my dazzling design talent I'm sure this will absorb most of my time)
Finally, As the videos are shuffled I do not want the next video to play automatically, but instead display a static image related to the content. The image is intended to provide a visual clue as to the content of the video, this is so the user doesn't need to begin streaming unless they want to view the whole piece.
Side Note: I've encountered some issues recently while executing a number of my projects on my local web server. Hopefully these problems don't inhibit my progress too much.
Getting Started:
I'm pretty keen to have a good play with Expression Blend 2 May Preview, so the first thing I'm going to do is open up blend and create a new project.
Creating Media Elements:
By default the tool for creating a Media Element is not visible on the toolbar, you can add it by clicking on the chevron symbol, and searching for "Media":
For this implementation I'm going to need 5 Media Element tiles. The animation I will create will allow the tiles to scroll up, or scroll down, therefore I need to tile them vertically. 5 seems like a lot, however I intend to have a 3d animation, and for each animation sequence 4 tiles will used. When scrolling up, the upper 4 tiles will be visible, and when scrolling down the bottom four tiles will be visible.
You can see the configuration of the Media Elements in the following screenshot. I currently have my main canvas selected (blue border around the canvas). As you can see its slightly larger then the Media Element, the space at the bottom is where my playlist will be.
For the time being, all my Media Elements are pointing to the same local source. It's actually a video of a butterfly that comes as a sample with Vista. Until I work out reading the playlist from a feed, this silly butterfly video will have to do =)
Creating the Playlist:
Next I need to create my playlist. You can see in the following screenshot, its just a number of rectangles and text blocks. I will need to create some animations, and wire up some event handlers, so when a user clicks on the media name, or the scroll bar the media swap animation will begin. We will also need to create some animations for the playlist entries. So when a user clicks the Up/Down arrows, the media name showing will also change to coincide with the next video.
Adding Images:
The playlist is quite ugly in its current state, so I added some colour and images to brighten in up. Again the tool to add images is not in the toolbar by default, so you will need to add it manually as we did for the Media Element tool.
My playlist now looks like this:
Ad Overlay:
What you may have noticed on the screen shot earlier, is the white text that extends to the right of the canvas. This is my sample ad, I have created an animation that once you click play on a video, this text will begin to scroll across the top of the video. I created this animation using the same process detailed in Tim Sneath's walkthrough More Fun with Silverlight Video: Ad Overlays.
Creating Animations:
As mentioned earlier, I want to have a 3d animation for the shuffling of the videos. What I'm aiming for is when a user clicks on one of the directional arrows, to have the current video recess into the background fractionally, then slide up or down and out of view. As the current video slides out of view, the next video will slide into view. The next video will also be recessed slightly, and once it reaches the centre of the view port, it will move toward the viewer (or look as such) until it occupies the entire view port area.
The following images show how the animation will look mid transition, first on the work surface, and then executing in the browser:
Work surface:
In a browser:
The animations themselves are very simple to create, how complex / difficult you make it is up to you. Because I've chosen to use 5 slides, I need to create 5 animations, 1 for each slide configuration. Silverlight is fantastic in that I do not need to create different animations for both the up and the down actions. All I need to do is create 1 animation for each slide configuration.
When a user clicks up or down, we need to only call the animation that leads into the configuration we want to be in, Silverlight will handle the direction the Media Elements move. The only caveat in doing the animation this way, is that you must not specify the locations of the Media Elements at the start of your Timeline. e.g. If you specify that Media Element 1, must start at TOP=360px, and will end at TOP=0px, then the element will only ever move downwards. Where, if you don't specify a starting position, and only specify that Media Element 1 will end at TOP=0px, then Silverlight will move it from where ever its currently located, and in any direction it needs to. (If that wasn't clear enough I apologise, I'm still hung over thanks to Craig)
Firing an animation:
Actually firing an animation is a piece of cake. First, what I need to do is wire up an event handler to the Up/Down arrows in the play list. This is also very simple as you can see from the following code snippet:
this.MediaUp = this.control.content.findName("MediaUp");
this.MediaUp.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaUp));
this.MediaDown = this.control.content.findName("MediaDown");
this.MediaDown.addEventListener("MouseLeftButtonDown", Sys.Silverlight.createDelegate(this, this.handleMediaDown));
I setup these events in my onLoad handler, you can also add references to event handlers in the XAML itself.
The code to fire an animation looks something like this:
this.control.content.findName("VideoChange" + reqState).Begin();
The names of my animations are "VideoChange1", "VideoChange2", "VideoChange3", "VideoChange4", and "VideoChange5". "reqState" is how I identify which animation the user needs to see.
Bugs/ Issues:
I found the Text Blocks that I created where causing errors when the project was executed. "ErrorCode: 2012". It appears that XAML being output for the Text Block isn't recognised by Silverlight i.e. 'Language="en-au"'. Until I work out a real solution, all I've done to get around it is remove the bold text below.
<TextBlock Width="152" Height="88" Canvas.Left="-304" Canvas.Top="176" TextWrapping="Wrap">
<Run Language="en-au">Media Name 1</Run>
</TextBlock>
Final:
I'm tired and hung over, and can't wait to hit the sack. Hopefully in the next post I'll get to show the Silverlight "Downloader" object. The "Downloader" object is modelled after the XMLHttpRequest API's, so they should be good fun to play with.
If you want any more information, more code, or has any questions or suggestions please give me a yell @ allan.waddell@hotmail.com (or any of my multitude of email addresses). Have fun.
Wednesday, July 18, 2007
And they wonder why the adoption of internet banking has plateaued
Ok, time to pay some bills. Open up my institutions web site, click login, enter my details.... now, they have this security feature where you need to type in the text 'exactly' as it appears.
Now this text isn't clear text, no, it's a combination of uppercase, lowercase, wobbly, squiggly, sideways, downways, every which ways, multicoloured text. Funny because the keys on my keyboard all look so.... normal. What the heck is 'exactly' supposed to mean?!?!?!
So I enter my member number, password, and my interpretation of this hybrid english, click "Login".... check out its bloody response....
Is someone there taking the piss?!?!
Perhaps they should change their slogan to "Credit Unions... Well we have to be cheap, your too 'DuMb' to have a highly paid career...aren't you...you 'DuMb' bastard".
Catchy huh =)
Now this text isn't clear text, no, it's a combination of uppercase, lowercase, wobbly, squiggly, sideways, downways, every which ways, multicoloured text. Funny because the keys on my keyboard all look so.... normal. What the heck is 'exactly' supposed to mean?!?!?!
So I enter my member number, password, and my interpretation of this hybrid english, click "Login".... check out its bloody response....
Is someone there taking the piss?!?!
Perhaps they should change their slogan to "Credit Unions... Well we have to be cheap, your too 'DuMb' to have a highly paid career...aren't you...you 'DuMb' bastard".
Catchy huh =)
Tuesday, July 17, 2007
First Silverlight App's
I haven't got very long 2nite, so I need to keep this relatively brief...
10:06pm - I recreate the first silverlight app I created..... except its no longer in a static html page, instead its embedded on the dev optusZOO portal as an optional module. I wonder if the exec producer will want to publish this one.....
10:20pm - My lovely girlfriend arrives home, 2 gourmet pizzas in one hand, and a tiramisu for desert in the other
10:50pm - I've finished my dinner (it was lovely btw), and also recreated the 2nd silverlight app I had created. A dodgy looking (but funcitonal) inline WMV player, again, integrated into the optusZOO portal
I think the ninemsn design jobs are fairly safe =S
There is very little required to create these very simple app's. 3 steps infact:
1. Create a standard html file, and include the silverlight.js from the silverlight SDK available here
2. create a basic xaml file containing the layout elements, you can create this in VS2008, Blend, or notepad. For my first app I named this file "Demo1.xml". It is not a necessity to use .xaml as the file extension, as you can see in my example below I merely used the .xml file extension. This was my preference as my text editor recognises files with the .xml extension and performs all my indenting.
3. within your page, make reference to the 'Sys.Silverlight.createObjectEx()' function. In this call you specify the location of the xaml file "Demo1.xml", and pass a reference to the div where you want the silverlight app to be rendered. These are not the only parameters required, however at this point im trying to express how very easy it is to get started.
As I mentioned in my first post, there are a lot of very good blogs available. The information for these two app's I picked up from tutorials on Dave Campbell's "Getting Started" blog, and the WPFE.chm (help file?!?!) contained in the silverlight1.1 SDK package.
Thats all for now, if you would like any more information on these app's plese let me know. Also in the future I will more detailed in my explanations, i'm under some time contraints this evening unfortunately.
nite =)
10:06pm - I recreate the first silverlight app I created..... except its no longer in a static html page, instead its embedded on the dev optusZOO portal as an optional module. I wonder if the exec producer will want to publish this one.....
10:20pm - My lovely girlfriend arrives home, 2 gourmet pizzas in one hand, and a tiramisu for desert in the other
10:50pm - I've finished my dinner (it was lovely btw), and also recreated the 2nd silverlight app I had created. A dodgy looking (but funcitonal) inline WMV player, again, integrated into the optusZOO portal
I think the ninemsn design jobs are fairly safe =S
There is very little required to create these very simple app's. 3 steps infact:
1. Create a standard html file, and include the silverlight.js from the silverlight SDK available here
2. create a basic xaml file containing the layout elements, you can create this in VS2008, Blend, or notepad. For my first app I named this file "Demo1.xml". It is not a necessity to use .xaml as the file extension, as you can see in my example below I merely used the .xml file extension. This was my preference as my text editor recognises files with the .xml extension and performs all my indenting.
3. within your page, make reference to the 'Sys.Silverlight.createObjectEx()' function. In this call you specify the location of the xaml file "Demo1.xml", and pass a reference to the div where you want the silverlight app to be rendered. These are not the only parameters required, however at this point im trying to express how very easy it is to get started.
As I mentioned in my first post, there are a lot of very good blogs available. The information for these two app's I picked up from tutorials on Dave Campbell's "Getting Started" blog, and the WPFE.chm (help file?!?!) contained in the silverlight1.1 SDK package.
Thats all for now, if you would like any more information on these app's plese let me know. Also in the future I will more detailed in my explanations, i'm under some time contraints this evening unfortunately.
nite =)
Monday, July 16, 2007
Silverlight? Or is it still more of an incandescent glow?
In ‘light’ of all this new technology that’s being released, and all the buzz words flying around, I thought I’d post some information that might help in getting setup to develop using Silverlight.
If you would like to target Silverlight 1.1 Alpha you will need the following (This is also my current config):
Microsoft Visual Studio codename "Orcas" Beta 1
Microsoft Expression Blend 2 May Preview
Microsoft Silverlight Tools Alpha for Visual Studio codename “Orcas” Beta 1
Microsoft ASP.NET Futures (May 2007) (Haven’t really explored it yet)
Microsoft Internet Explorer Developer Toolbar
I’ve found a number of decent blogs & sites on the topic, these are just a few to get you started:
http://blogs.msdn.com/tims/ (legend)
http://blogs.msdn.com/Silverlight_SDK/
http://msdn2.microsoft.com/en-us/library/bb188743.aspx
http://blogs.msdn.com/mharsh/rss.xml (thanks for adding this one paul)
And let’s not forget the main vein: http://www.microsoft.com/silverlight/
I don’t have much time this evening, not enough to post anything fancy anyway, I just needed to quickly kick off this blogging doo dah.
If you work with me @ ninemsn please come past if you would like a copy of VS2008 Orcas Beta 1, I have a few copies floating around.
I’ll post more on the interesting projects I’m working on as I get some time. Have fun!
If you would like to target Silverlight 1.1 Alpha you will need the following (This is also my current config):
Microsoft Visual Studio codename "Orcas" Beta 1
Microsoft Expression Blend 2 May Preview
Microsoft Silverlight Tools Alpha for Visual Studio codename “Orcas” Beta 1
Microsoft ASP.NET Futures (May 2007) (Haven’t really explored it yet)
Microsoft Internet Explorer Developer Toolbar
I’ve found a number of decent blogs & sites on the topic, these are just a few to get you started:
http://blogs.msdn.com/tims/ (legend)
http://blogs.msdn.com/Silverlight_SDK/
http://msdn2.microsoft.com/en-us/library/bb188743.aspx
http://blogs.msdn.com/mharsh/rss.xml (thanks for adding this one paul)
And let’s not forget the main vein: http://www.microsoft.com/silverlight/
I don’t have much time this evening, not enough to post anything fancy anyway, I just needed to quickly kick off this blogging doo dah.
If you work with me @ ninemsn please come past if you would like a copy of VS2008 Orcas Beta 1, I have a few copies floating around.
I’ll post more on the interesting projects I’m working on as I get some time. Have fun!
Subscribe to:
Posts (Atom)
