Categories
MIX08 News

I’m going to MIX08

I'm going to MIX08Thanks to my new friends at Microsoft I am attending the Microsoft MIX08 conference in Las Vegas in March. With the introduction of Microsoft Expression software into my work process, the conference will be a much welcomed opportunity to interact with other adopters and Microsoft staff and broaden my own understanding of the software and it’s abilities.

I’ll be blogging from the event so stay tuned!

For more info on the MIX08 conference, visit the official website.

Categories
Silverlight

Minority Report Screen Using Silverlight and a Wiimote

Turns out there are many interesting applications for the Wiimote other than gaming. And now people are starting to really take advantage of this. Cynergy Labs has created a Silverlight (WPF) application that uses custom gloves with IR bulbs on three fingers for a whole new way of interfacing with the on-screen content. The result is a Minority Report or Microsoft Surface like experience without a touch-sensitive screen. Just wave your hands around and use gestures to control the content. This video shows the versatility of both WPF, Silverlight and the Wiimote.

Categories
CSS Expression Web

Selected Pages – an answer for Beal

In December Beal asked a question in response to my piece on the Natures Carpet site:

How did you make the current page appear selected? I used the include function (leftover from Frontpage) because I didn’t want to make a separate nav for each page. I’d like to have the current page selected in the nav, but I didn’t know how to do it with include.

Sorry for taking so insanely long to answer (I’ve been busy redesigning Dabbler.ca) but here it is:

#nav p a {
color: #A59B8B;
letter-spacing: 0.15em;
padding-right: 8px;
border-right: 10px;
border-right-style: solid;
border-right-color: #ffffff;
text-decoration: none;
}

#nav p a:hover {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

I used two pieces of code to make the current page appear selected in the menu on the NaturesCarpet.com site. I have no idea what this technique is called but it’s pretty self explanatory:

The regular unselected menu items (main items – the child items are slightly different) look like this in the CSS code:To make the current page appear selected I had to make the non-active current page link look like the a:hover stage. To do that I first assigned a name to each page like this:


Then I gave each of the buttons an id:


and finally I set up a specific style in the CSS for the current page set:

body#howto a#howtonav {
color: #A59B8B;
text-decoration:none;
padding-right: 8px;
border-right: 10px;
border-right-color: #d1cac2;
border-right-style:solid;
}

What happens here is the buttons are styled based on the body id so that when you are in the howto page, the howtonav style kicks in and overrides the standard p style.

I’m sure there are other (and possibly better) ways of doing this but for my purposes it worked perfectly. It also gives you the ability to individually style each current page link if you so desire.

To see the code in action, visit NaturesCarpet.com

Categories
Silverlight Video Tutorials

Moving to Silverlight – tips and tricks tutorial

No postings for a while. Sorry. I’m buried in work.

In the meantime I found an excellent video at ThinkSwedish that explains how to transition from Adobe’s MXML and ActionScript 3 to XAML and C#.

Interestingly the ThinkSwedish blog is built on a Flash platform (so I can’t embed the video here) – a concept worth exploring in Silverlight as well.

Video link

Categories
Vista

Adobe Premiere Pro 2.0 on Windows Vista

Upgrading your OS isn’t always a walk in the park and there has been a lot of chatter on the web about Windows Vista screwing up older software and causing all sorts of problems. As a result many people are hesitant when it comes to moving from XP to Vista.

One such issue has arisen when people try to run Adobe Premiere Pro 2.0 (CS2) on their Vista computers. Premiere Pro 2.0 was created well before the release of Vista and as such was not designed to run on the new OS. As Premiere is a fairly heavy and complicated video editing program that uses a lot of services on the computer it should come as no surprise that there would be issues. But as it turns out Microsoft anticipated such problems and created a quick and easy way of circumventing compatibility issues. (This fix btw will most likely work for other programs as well)

The problem we were encountering was that certain windows like the Titler and effects were acting funny. Plainly speaking they were repositioning themselves with every open and moving around in a random manner, often overlapping and hiding rendering the functions unusable. Quite frustrating really. But like I said, there is an easy way of solving this. I’ll take you through it step-by-step:

1. If your buggy program is open, close it

2. Right-click on the startup file (either from the “Start” panel or the desktop or wherever else you start your software from) and click “Properties”

3.Click on the “Compatibility” tab in the window that opens:

Adobe Premiere CS2 compatibility 1

4. Check the “Run this program in compatibility mode for:” box:

Adobe Premiere CS2 compatibility 2

5. Choose the Windows XP version in which the program should run smoothly. In Adobe Premiere Pro 2.0’s case this would be Windows XP (Service Pack 2):

Adobe Premiere CS2 compatibility 3

After doing this the problems with Premiere disappeared (thought we haven’t checked absolutely every little piece of the program so there might be other issues). And like I said, I’m guessing this solution can be applied to other software that is acting up too.

Categories
News Vista

Vista Whoas and Woes

Finally, after 4 years of hard work, one of our trusted workstations finally gave in and decided to die on us. I guess the pre-Core 2 Duo Prescott processor couldn’t handle the workload any more (running PhotoShop CS2, Premiere CS2, Firefox, Opera and a host of other programs at the same time isn’t exactly kind on the processor). So we were forced to get a new system, and with it came the inevitable transition to Windows Vista.

I’m one of those guys who has an aversion for adopting new and untested technology no matter what it is. And when it came to the new Microsoft OS I would rather have waited for the first Service Pack to come out before making the transition. After all there are always some major kinks that have to be sorted out before any new OS can be considered completely trustworthy (something that rings true even in the “infallable” Mac world as the latest release of Leopard has shown). Thus my policy was simple: I’m not switching to Vista until I get a new computer. And with the death of our old workstation my hand was forced.

After installing the new OS and getting the new computer up and running I have a few thoughts and realizations (I’m sure I’ll have more later on – the system arrived on three days ago) that I’d like to share – some good, some bad.

The System Itself
First off I just want to describe the system itself so you get an idea of the baseline. My wife who uses this computer does a lot of video editing, primarily for her lifestyles blog Dabbler.ca . Knowing this we decided to go for an Intel Core 2 Quad processor (the Q6600 I believe) . The system also boasts an ASUS P5K se motherboard, 4gb of ram, two 500GB Western Digital hard drives and a monster CoolerMaster power supply. The only thing we cheaped out on was the graphics card so instead of the store recommended GeForce 8800 we went for a GeForce 8400 with 256mb RAM. Considering we don’t do any 3d gaming the 8800 would be a colossal waste of money and we saved over $360 on the smaller card (which retailed for an astonishing $69!).

The computer came fully assembled but without any software installed. I had three discs in my hand: Windows Vista Home Premium OEM, the ASUS motherboard system disc and the graphics card drivers.

Installation
Installing Vista took a mind-bending 10 minutes. This was quite surprising – installing XP on my old system took at least 4 times as long. And apart from my moronic accidental choice of Canadian French as the system language (which took me almost 20 minutes to rectify – guess I should have just started from scratch) the install was completely unproblematic and went smoothly. Once the OS was up and running I inserted the ASUS disc and installed all the drivers (onboard audio, networking etc). This required two reboots which were done by the computer – I could have just left the house but it only took 7 minutes to complete. Once the networking was in order Vista started downloading updates but the download and install of these was putting a negligible load on the computer and I could easily move on to the next steps. Installing the graphics drivers was just as easy and once installed my weird monitor setup was immediately recognized and set up properly. In XP I always had trouble calibrating the two monitors (one ViewSonic and one LG) but this was all done automatically. I don’t know if I should credit Microsoft or Nvidia for this but it was impressive none the less.

Graphics
This brings me to an interesting point: When Vista came out I read and heard a lot of complaints about how you needed a supercharged graphics card to run all the fancy new visual effects and such. This just isn’t the case. Like I said, the graphics card in this computer was a $69 GeForce 8400 and I had zero problems running the full Aero interface with all the bells and whistles AND rendering out Premiere video while having both PhotoShop, Firefox and numerous other programs in the background.

I did encounter one weird problem with the graphics that took a while to rectify: For some reason the video monitor in Premiere was severely aliased causing all sorts of crazy strobing and line effects in the output. This problem did not appear when playing back video in Windows Media Player or any other application which lead me to believe it had to do with the graphics drivers. After some fiddling I found the problem in the way the graphics card was set up. Because Premiere utilizes the graphics engine in the graphics card to render previews the card needs to be told Premiere is to be considered a 3d application even though it’s not. Once this was done the aliasing problem disappeared.

Networking
Once the system was up and running with all it’s components it was time to install all the external components we have. Most importantly we run a NAS drive as a server and this needed to be set up immediately. The 500GB Western Digital NetCenter comes equipped with a small program called WD EasyLink which I installed from it’s disc. The program went in and went active with no problems and the little WD icon appeared on the bottom right hand side of the screen as it should. On my XP machines I had to mount the two volumes on the drive by mapping them in My Computer so I did so without really paying attention only to find that Vista had already done it for me so I now had two links to each of the drives. Because I’m a curious guy I uninstalled the app and reinstalled it to see if Vista really did find my drives for me and I was pleased to see it did. This bodes well for future expansions of my server system. I will further explore the networking capabilities and functionalities once I find some extra time.

Drivers
Another thing people have been complaining about has been the lack of working drivers and incompatibilities with existing programs. I installed all the programs from the previous system (Adobe Production Studio Premium, Macromedia Studio MX2004, Microsoft Expression Suite, Firefox, DivX and a pile of other nicknacks) without running into a single issue. I am curious to see what happens when I try to install Nero Burning Rom 6 which already had some issues in XP.

The only driver problem I encountered was in installing our Canon N670U scanner. The Vista driver on the Canon site would not open properly and Vista just spat out a message about the archive being corrupted. I tried downloading it several times with the same result. Then I remembered that I’ve seen a similar problem before and I downloaded the scanner driver from a different country’s site (I believe it was New Zealand?). Not surprisingly this driver worked perfectly and the scanner turned up as a TWAIN source in PhotoShop.

Dual Monitor Problem
As I said before the system has two monitors. And with that comes one problem that makes absolutely no sense to me at all: When you right-click on something that is resting on the left-hand monitor, the menu appears in the gadgets bar on the right hand side of the right hand monitor. This problem is persistent and only applies to the secondary monitor. Needless to say it is quite annoying, especially when dealing with drop-down menus. I’ll need to do some further research into whether or not this is a screen driver issue or a bona fide Vista glitch.

Other Hardware
It took me a little bit of time to figure out how to mount and format a blank harddrive on the system – all the menus have changed and things are not where they “ought to be” but the integrated search function made quick work of figuring this out.

All my external components (WaCom Tablet, camcorder, several external hard drives etc) were identified and installed without any fuss.

The only thing I still haven’t figured out is the ReadyBoos function. The computer came with a special high-speed 4gb ReadyBoost USB drive that I plugged in when I fired it up for the first time. I vaguely recall setting up something with it but I was too busy figuring out exactly how the new OS worked to really pay attention. Now I can’t find any reference to ReadyBoost in the help files and I’m a bit lost. I’m sure it just requires some minimal research but here again is that time issue. I’ll get to it eventually.

Conclusion
Overall my first impression of Vista Home Premium is very good. I did not encounter any of the problems I thought I would, all the software and hardware works perfectly and I’ve not seen any plug-and-play issues as of yet in spite of the non-standard setup. I’m sure I’ll have more to say in a week but for now I am very pleased with the transition.

Categories
Expression Design Expression Web Microsoft Expression

NaturesCarpet.com – 2nd Expression project live to the world

Finally, after weeks of designs and redesigns my second Expression-only project went live to the world last week. The site – for Vancouver based carpet retailer Colin Campbell & Sons’ new line called Nature’s Carpet – was entirely designed and coded using Expression Design and Expression Web (apart from the tacky Flash intro which was done in Flash). I think this site is far superior to my first Expression project iZufall.com because this time I knew of some of the pitfalls and I learned some valuable lessons on the way.

You might remember that I had a problem when exporting my Design elements for use in a html environment. Expression Design is a vector based program that does not constrain to true pixels. Coming from a PhotoShop environment I made the stupid mistake of eyeballing my designs when creating iZufall and by the time I discovered my error I was too far in to change things around. As a result there were some whitespace issues with the site.

Not so with Natures Carpet. This time I took the time to set all the margins and sizes using guides before starting on the actual design work. This requires that you know roughly what the site is going to look like but then all my designs start on paper so that’s not too difficult. With all my margins set beforehand it was easy enough to make and export graphical elements that fit snugly in my divs without creating unnecessary white lines where they shouldn’t be.

Unlike the iZufall project I chose to start this one completely from scratch: A blank html doc and a blank css doc. Such an endeavour would have been unthinkable in my pre-Expression days but knowing how powerful the css functionality in the software is I felt comfortable starting from scratch. Setting up all the styles was a tad tedious to start off with but once things got going it was quite pleasant. More than ever before I am now a big fan of anything CSS.

One of the neatest things I built for this site (if I may say so myself) was the nav bar on the left side. As you’ll notice when clicking around the entire nav bar is a simple list with tons of styling. It took me a while to figure out how to make the different levels work properly and how to make the current page appear selected all the time but in the end it all worked really well.

Due to lack of PHP and .NET support on the server side the site remains straight html at the moment but I designed the css code to be compatible with future database implementation so that any transition will be pain free.

I’ll post some examples of how I made the nav bar and current page selections work later on when I am in front of my own computer. For now take a trip around the site and see what you think. I’d love some feedback.

NaturesCarpet.com

Categories
Vista

Networking problem with Windows Vista

I haven’t posted here in a while – too much work (which you should check out btw: Second Expression-only site is up and running – www.naturescarpet.com). More on that later – I promise. Anyways.

A couple of days ago my brother Ole sent me an email complaining that he had a serious networking problem with Windows Vista. He was frustrated to the point of homicide and wondered if I could be of assistance. Seeing as I have decided to hold off on Vista until either a) I get a new computer or b) Microsoft (or someone else) gives it to me for free so I didn’t have much to offer. But that doesn’t mean other people can’t fix his problem. So I asked him to write down a description of his problem and I would post it on this blog. So with no further ado I hereby introduce my brother Ole:

I have a desktop computer that I use as internet gateway for my own network. I usually have it running Windows XP but I recently tried installing Windows Vista and I ran into a problem: I can’t get an IP in Windows Vista out towards the ISP. The network is encrypted by wired-eap (802.1x)

I’ve tried both the network adapters as the external one, neither of them are able to get an IP in Vista. But if I try in Windows XP I get one at once. I normally have one of the cards running as normal with internet connection sharing to the other card but I’ve tried turning it off and I still don’t get an IP.

I got an IP the first time I booted after installation and configured the encryption, then I ran windows update and afterwards I can’t get an ip. When I try to get an IP it sets up the Windows standard no connection IP. I’ve tried uninstalling all the updates, but that didn’t make a differense.
I’ve also tried turning off all firewalls, antivirus and other software that might be stopping it getting an IP, but that didn’t help either. And now I’m out of ideas of how to fix the problem.

Ole

Some pertinent information: Ole is in Norway and is using the Norwegian version of Vista. He is hooked into the University of Oslo network which explains the heavy security which seems to be causing the problem. His computer has an Asus P5K motherboard and the network adapters in question is the embedded one on the motherboard and a pci linksys network adapter.

I find the problem quite puzzling and I’m surprised neither Ole or my other brother Kim have been able to find a solution. So now I hand it over to the people who frequent my blog: Does anyone (some of the Microsoft people maybe?) know what is wrong here? Is it a bug? Was there a bug in XP that let him do something he shouldn’t have been able to? Or is he just being an idiot? These are all questions that need answers.

Categories
Expression Media Encoder Microsoft Expression

Expression Media Encoder Woes

To put videos in a Silverlight application you have to use Microsoft Expression Media Encoder. This program has great potential but there is one annoying little problem that drives me crazy: It’s damn near impossible to get an export to the file size you want.

The problem originates from the 22mb size limit of video files uploaded to Silverlight Streaming. As you can see on this blog my video tutorials are intentionally large to give the viewer a good view of the screen and as a result so are my files. To solve this I tried to muck around with the different settings in the right hand panel. This turned out to be a massive headache:

First off VBR (Variable Bit Rate) crashes the application every time forcing the use of CBR (Continous Bit Rate?) which causes the files to become unnecessarily large. This is not due to my system (I edit videos using Premiere on a daily basis and export them to a variety of different formats) but might have to do with the input file so I’ll leave it pending further testing.

estimated.jpgSecondly the estimated size panel is all over the place. In the 50 or so times I’ve exported something from the program this number has never been anywhere close to the actual final size. The last video I posted had an estimated file size of 68MB while the actual export was 21.9MB. Needless to say this is just a bit confusing. Unfortunately with this estimation being off there is no way of knowing what the actual output file size will be so you are left with random experimentation.

Here is a short list of things that don’t work if you are trying to reduce the size of your file:

  • Changing the video bit rate alone has little to no effect
  • Changing the audio bit rate has minor effects
  • Changing the video size has an effect but only as long as you don’t change the video profile size – this will override the former
  • Using CBR doesn’t work, at least not for me
  • Changing key frame intervals seems to have little effect

The only thing I’ve done that does make a difference is reducing the size of the final output and drastically reducing the bit rate of both audio and video. My original file was 1024 x 768 and I originally wanted to export it at 800 x 600. No matter what changes I made (reduce bit rate, increase key frame interval, reduce quality, reduce smooting, 2 pass encoding, you name it) the file insisted on being either 25MB or 46MB with very little variance between them. The file only landed at 21.9MB when I reduced the video bit rate to 400, the audio bit rate to 48 and the video size (using the Video Profile area) to 600 x 448. This was an acceptable compromise and because Silverlight video is scaleable it was satisfactory.

So, to sum up: It seems (at least for now) that the only variable that has any significant impact on final file size is the video size. This should be changed in the Video Profile area because it allows for locked aspect ratios. Pending further experimentation I therefore advise you to screw around with the size of your video before you touch any of the other variables as they seem to have little impact on the outcome.

Categories
Expression Design Expression Media Encoder Expression Web Microsoft Expression Video Tutorials

Video Tutorial: Editing and Uploading the Zufall Side Buttons


Click here for a full screen version of this video.
Here (finally) is my second video in the Zufall series. It was meant to be a walk-through of the implementation process but then I ran across a small problem and decided to make a video about how I fixed it instead. Zufall part II about Expression Web is still on it’s way but this should tide you over.

In this video I demonstrate how I created the side buttons using Expression Design and how to do some quick alterations to the site in Expression Web using the fantastic CSS features. It’s quick and dirty but should give you a small glimpse of how to do things.

The reason why it’s taken so long for me to post a new video? Expression Media Encoder is damn near impossible to use! I’ll be ragging on this in a separate post once my head cools but just to give you a small taste it took 17 tries to get the video above to export to below the magic 22mb that is required for Silverlight streaming. And it wasn’t for lack of trying. But like I said, more on that later. For now I hope you get something out of my most recent video and be sure to check back for more.

Categories
News

Shooting a Short Film over the weekend so….

I’m shooting a short film for a local film festival over the weekend so I am drowning in prep work. Unfortunately my Expression odyssey is taking the bulk of the hit. I will however be back at it on Monday next week so stay tuned. There is more to come, I assure you ;o)

mor10

Categories
Microsoft Expression Silverlight

Silverlight Posting Issues – Solved

I encountered some weird problems trying to post Silverligth content in my blog and I can’t find anyone outside of blogs.msdn.com who have done it. My problem seems to arise from a combination of complicated scripts from Microsoft and bad parsing from WordPress not paying attention to the code I was posting. Read on to get an idea of what went wrong. The second half of the post still applies tho – the one about the “old” method. Although it seems irrelevant considering.

Using the iFrame method
Below is a Silverlight application posted using the iFrame method. If you do not see the fancy cirlce animation you need to download the Silverlight RC plugin from Microsoft.

The problem I had comes from the code from Tim Sneath’s blog:

iframe src=”http://silverlight.services.live.com/invoke/32/SlLogo/iframe.html” frameborder=”0″ width=”258″ height=”100″ scrolling=”no” />

It seems WordPress isn’t very fond of shorthand endings like /> but prefers the full ending. Thus the program auto inserted the full iframe close command right after the src call causing the remainder of the code to remain outside of the code. This in turn caused havoc on the remaining page.

Here is the correct code:

<iframe src=”http://silverlight.services.live.com/invoke/32/SlLogo/iframe.html” frameborder=”0″ width=”258″ height=”100″ scrolling=”no”></iframe>

iFrame method conclusion
There’s clearly something wrong with how WordPress parses iFrame code. The iFrame itself appears as it should but it ruins the rest of the code making the remaining page disappear. This problem persists regardless of what content is contained within the iFrame itself.
The iFrame method works fine in WordPress as long as you close your <iframe> call with a proper </iframe> call afterwards. Otherwise you end up with a big mess.

Taking the long way round (using the cumbersome original method)
Originally publishing Silverlight apps in a web page was a bit more cumbersome. You can read the full description of the process here. When you post a Silverlight application the “old” way you have to do three things:

Insert script references in the header of the page:

 

<script type=”text/javascript” src=”http://agappdom.net/h/silverlight.js”></script>
<script type=”text/javascript” src=”CreateSilverlight.js”></script>

Insert html where you want the Silverlight application to appear:

 

<div id=”Wrapper_SlLogo” style=”width:258px; height:100px; overflow:hidden;”></div>
<script type=”text/javascript”>
var Wrapper_SlLogo = document.getElementById(“Wrapper_SlLogo”);
CreateSilverlight();
</script>

Create a file called CreateSilverlight.js containing the following script:

 

function CreateSilverlight() {
Silverlight.createHostedObjectEx ({
source: “streaming:/32/SlLogo”,parentElement: Wrapper_SlLogo});
}

If we dissect this process we see what happens:

  1. silverlight.js is called. This file is (as far as I can tell) the Silverlight controller. When you create a Silverlight application the file is put in whatever folder you export to but for web purposes it is recommended you use the one posted on the agappdom.net site.
  2. CreateSilverlight.js is called. This file contains the source and parentElement parameters showing the browser where the application is located and where to put it (name of the wrapper).
  3. The html code creates a wrapper and inserts the object defined in CreateSilverlight.js into it.

For blogging purposes this is pretty much a non-functional process. To make this work in any reasonable manner the source and parentElement parameters have to be defined from within the page itself which means the JavaScript contained within CreateSilverlight.js has to be extracted and somehow inserted into the page itself. Seeing as you don’t have access to the header area in a blog post this means you have to insert the JavaScript in the code itself.

I tried doing this with unimpressive (non-existent) results. I can’t say if this is due to my poor knowledge of JavaScript or if it’s something else. I’m guessing the reason why Microsoft set it up this way to begin with had to do with being able to alter file calls without having to alter pages but that’s just conjecture on my part.

But like I said before: Since the iFrame method works as long as you close your frames properly there is no reason to start screwing around with the more cumbersome old method (unless you really want to that is).