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).

Categories
Expression Design Microsoft Expression Silverlight Video Tutorials

iZufall Project – From Concept to Design using Expression Design


It took way too long but now it’s here: My first video tutorial covering the overall design process of the iZufall.com website using Microsoft Expression Design. In the video I cover the overall design idea, how to import vectorized graphics form Adobe Illustrator and some other neat little things in the program.

Staying true to the Microsoft Expression experience the video is a Silverlight application hosted on Microsoft Silverlight Streaming. As you can see from my previous post I had some difficulties actually creating, uploading and posting the application but then a little bird tipped me off to this article that explains how to post Silverlight Streaming apps using iFrames and now it works splendidly.

So, without further ado, here is the first video. If you want a larger version to see all the small intricacies click here to openn a separate window. I advise you to do so so you can see what I’m doing.

Just a note: You’ll need to install the Silverlight RC plug-in to be able to play my video. It’s a small 2mb download that is completely safe, free and platform independent. You can download Silverlight by clicking here.

Categories
Expression Media Encoder Microsoft Expression Silverlight

Posting a Silverlight Application – Major Headache

As I promised I’ve made an in-depth video tutorial on how I created the iZufall.com website using Microsoft Expression Design. The video itself was easy enough to make but I spent several hours today trying to conform it to the stats required to be able to upload it to the Silverlight Streaming Server.

Turns out publishing to the Silverlight Streaming Server and posting Silverlight applications isn’t all that easy. Here’s a “quick” run-through:

Step One: Create a Video
Easy enough. You can use anything to create the video and export it to whatever standard format you want.

Step Two: Conform the Video Using Microsoft Expression Media Encoder (EME)
Should be easy enough. Simply import the video file into EME and tweak the settins until you get the desired result. Only here you have to watch what you are doing. Turns out the Silverlight Streaming Server only accepts wmv files that are less than 22mb. My tutorial is huge (800×600) and over 13 minutes long (because I can’t stop talking). My first export (which took 20 minutes) totaled at 32mb so I was 10 over. With tweaking I managed to get it down to 23mb and finally 17.something. This tedious process took about 3 hours because the estimated size EME projects is completely off the charts wrong (the first time it estimated 70mb, the second 34 and the final one 26).

Anyway, when the video is exported EME spits out a list of files under the export folder. This list consists of the following (in alphabetical order):

  • BasePlayer.js
  • Default.html
  • MicrosoftAjax.js
  • player.js
  • player.xaml
  • PlayerStrings.js
  • preview.jpg
  • Silverlight.js
  • StartPlayer.js
  • YourVideoFile.wmv

The files are under a time stamped folder with a cryptic name like (in my case) “MORTEN 06-08-2007 1.24.08 PM”. I’m sure you can change this but I’m lazy.

Step 3: Upload Your Application to Silverlight Streaming Server
Once you’ve finished and tested your application you can post it on the Silverlight Streaming Server which allows you to post up to 4gb of free content. First you go to silverlight.live.com and create an account and then you log in. Once inside you can upload your application. But wait! Your application isn’t like a Flash .swf file… it’s a whole whack of files! So it’s not as easy as it seems after all.

As is typical I did not read any of the info and just zipped the whole export folder and tried to upload it directly. After waiting for an awfully long time (there is no bar telling you the progress of your upload or if it’s uploading at all) the project was created and I got a message that my archive was missing a file called “manifest.xml”. Serves me right for not reading the manual I guess. Turns out you have to build an xml file called “manifest” and put it in your archive to get your application to work. God knows why this xml file isn’t auto generated by EME since it is the same for all Silverlight Applications but alas it’s not so you have to make it yourself. The script is as follows:

<SilverlightApp>
<version>1.0</version>
<loadFunction>StartWithParent</loadFunction>
<jsOrder>
<js>MicrosoftAjax.js</js>
<js>BasePlayer.js</js>
<js>PlayerStrings.js</js>
<js>player.js</js>
<js>StartPlayer.js</js>
</jsOrder>
</SilverlightApp>

In addition the archive should not include all the files from the export. The proper zip archive should include the following:

  • manifest.xml – The file you have just created in the previous step
  • player.xaml – The XAML file correcponding to your Silverlight application
  • *.wmv — Video file(s)
  • *.jpg — Image file(s), thumbnails for the chapter markers and the preview
  • *.js – All the scripts in the Output folder EXCEPT Silverlight.js

Confused yet? I know I was. Anyway. Once this is done you can upload the zip archive and the application will appear on the server.

Step Four: Posting Your Application
Again, if you are used to the relative simplicity of posting Flash content on a site you’ll be frustrated by how complicated it is to publish Silverlight apps. Once the project is uploaded you get a whole pile of code you have to use. I cut the below section straight out of the Manage Application page:

There are three steps required to add this Silverlight application to your web page.

1) Add the following script references to the page header section.

2) Insert the following HTML where you want the application to appear in the body of the page.

3) Save the following script in a new file named “CreateSilverlight.js” and place it in the same directory on the server as the page.

I believe there is an easier way of doing this – I vaguely recall seeing something about using iFrames but I have to do some more research before I can confirm it.

Final Thoughts

Since it took me so long to compress the project and upload it I had to leave my computer to go to my other job so I haven’t been able to test the last step and actually post the video tutorial yet. Hopefully I’ll be able to do this some time tonight so you can take a look at the final product and read my experiences actually posting an app.

For now I’ll just say this: Creating and publishing Silverlight applications seems unnecessarily cumbersome. I know this is just the beginning but for now this is not user friendly in any way. I’m assuming that publishing applications on your own server is easier (and I’ll test this tomorrow) but using the Silverlight Streaming Server is way too complicated for the novice user.

When I have this video and the second half where I demo how I the project went from design to functional website using Expression Web I’ll make another video walking through the process of creating and publishing a simple Silverlight application using Silverlight Streaming Server to make life a little easier for the next person that wants to try it out.

Here are some useful links to sites I used when figuring this whole thing out:

QuickStart: Package a Video File using Expression
Using the Silverlight Streaming Administration Site

That’s all I got for now. Stay tuned for the video tutorial :o)

Categories
Expression Design Expression Web Microsoft Expression

Zufall is Live! First project using only Microsoft Expression Suite is on line

iZufall.com

When I promised Microsoft I was going to use their new Expression Suite exclusively when designing my next project I wasn’t really sure what I was getting myself into. A colleague put it quite bluntly: “Are you a masochist?” I don’t think so and after finishing the Zufall project I have to say my early fears were largely unfounded.

I will blog more extensively on the experience in using Expression Design and Expression Web to create this site (which by the way is for a neat little game called Zufall which is like a Magic 8-ball for your life) and create a couple of videos of the process so you can really see how these programs work and how I use them, but for now I’ll just leave you with some basic comments.

The entire site is based on a style sheet built from scratch using Expression Web. This is quite a milestone for me. In the past I’ve shied away from the CSS and often altered existing scripts rather than startig my own. But Expression Web’s ingenious live CSS functionalities make style sheet building a breeze and the result is rock solid (I hope). I had some issues with the classic Internet Explorer vs. the rest of the browsers when it came to margins, borders and such but I found a way of working around this using divs (something that is surprisingly easy in this program).

Bad edgesAs I’ve mentioned before there are some issues with exporting from Expression Design. The bad edges and artifacting problem is persistent and as a result all the graphics on the page are huge lumbering PNG files rather than small nimble JPGs (thus the slow load speeds). I managed to work my way around the worst of it by putting some lines behind the logo (see image) but you can still see the rough edges if you look closely. It is worth noting that upon hearing of my exporting problems Microsoft contacted me and asked for my files to see if they could reproduce them. The are currently working on fixing the exporting problems and it will be interesting to see if they are able to solve them for the next build of Expression Design.

top lineAnother problem I’ve mentioned before is that Expression Design lets you export ridiculous sizes that don’t actually exist. Because Design is a vector based program it doesn’t conform to standard pixel widths and that means that if you’re not careful (i.e. if you do what I did) you end up designing a page with graphics that don’t really fit. This causes some annoying problems that will anger picky people like me best illustrated by the two grabs I’ve attached here. Notice how there is a small line between the curve graphic and the rest of the page? Button lineOr the line between the button and the white area? These were both caused by Design exporting graphics that were for instance 124.39 pixels wide. Of course the .39 does not compute in any rational sense when it comes to the web so lines appear. To remedy this problem one has to be very careful when laying out the designs so everything works on a pixel-by-pixel basis (or design the whole thing for Silverlight).

Take a moment and visit the site (www.izufall.com) to see how it looks on your computer and drop me a comment if you find anything you like / wonder about / hate / think doesn’t work.

More to come…

Categories
Microsoft Expression

Microsoft listens – and the future looks bright(er)

I’ve been swamped trying to finish the Zufall project and the final project launch is only days away (Sunday to be exact) so I haven’t really had time to post my anything here in a while. But that’s going to change!

Qixing from Microsoft took the time to meet with me today and go over what I’ve experienced with the program package so far. She suggested I start making screen videos to go with my posts as tutorials and demos so other people understand what’s going on and see the overall design and development process from the “inside”. This is something I’ve been thinking about doing for a long time but I never really had a reason to. Now that I know Microsoft is paying attention everything is changing.

Most of my knowledge in design, coding and implementation comes from watching and reading tutorials on the web and I figure it’s time I pay it forward by posting my own stuff so others can learn from my experiences and take things even further. So as soon as the Zufall project is done and off my plate I’ll start posting videos, instructional articles and commentary to really give whomever reads this blog the full picture.

First on the agenda would have to be a SilverLight video player to post the instructional videos so stay tuned for that one coming up hopefully some time next week.

Categories
Expression Design Microsoft Expression

Color Picker / Dropper Issues Resolved, Kinda

NOTE: I’m going to start saying Color Dropper instead of Color Picker.

After the email I got from Dan at Microsoft I went back to retest the color dropper issue I found yesterday. Here are my results:

Dan told me that while the color dropper in the normal tools panel is an “object colour picker” the one in the bottom corner of the swatch area is a “screen colour picker” and that my problem probably occurred while using the latter one. This is because the screen color dropper uses the native colour profile of the computer rather than a forced one like Adobe’s software does. Some testing proved this to be true: When I used the color dropper in the tools panel the colours matched while when I used the one in the swatch panel they caused the same problems as before. I take this to mean that since I use the Pantone Huey and therefore have a properly calibrated monitor the screen colours Expression Design perceives are off from the originals. That makes absolutely no sense to me but at least we now know the reason for the problem.

But this, as my old philosophy professor used to say, begs a question: If screen calibration equipment and their colour profiles cause Expression Design to misinterpret colours what is the point of having the swatch color dropper at all? One would assume that this software is directed primarily towards professionals and a lot of us use calibration equipment to avoid colour problems in our projects. This “feature” if that is what it is makes the color dropper useless. I also noticed something else that is even more confusing: In the Options pane you can actually force your tools panel color dropper to use that same useless screen colour rather than the actual colour.

At the end of the day (literally – it’s 7:43pm) I am left with one burning question: What exactly am I supposed to use the screen colour for? Especially when I have the option of picking the true colour with the tool panel color dropper?

A side note: It took me a couple of seconds to figure out how to use the tool panel color dropper because it doesn’t work like what I was used to nor as the swatch color dropper. While the ‘norm’ is to select the item you want to change the colour of and then use the color dropper to pick the colour the tool panel color dropper works quite literally like a dropper: You go to whatever object contains the colour you want, click and hold the mouse to “suck up” the colour and “drop” it into the object you want to change the colour of. If you just click on the original colour nothing happens. Confusing as hell.

I’ll write a post on this and other non-standard button and object functions later on when the list grows large enough to warrant one. In the meantime be advised that Design does not work like other programs.

Categories
Expression Design Microsoft Expression

Corrections, Corrections, Corrections (even a genious makes mistakes)

Last week I posted an article where I complained about a few things in Expression Design. Some of my claims were questioned by Microsoft and I’ve found that on one count I was actually wrong (well, sort of wrong anyway). I’m a stickler for details and I think it’s important that everything said here is correct so here goes:

Vector Effects
In my post I claimed that the effects didn’t always work when you started messing around with the vectors. I stand by the fact that when I was working with the program I experienced this exact problem but I have been unable to reproduce the issue so therefore I say I was wrong pending further investigation. I have altered my original post to reflect this new development.

Deleting Sub-Layers

I also described an annoying issue caused by the inability to select individual objects under a layer through the layers pallet. I realize I was not clear in my description of the problem I was experiencing so let me clarify: Yes, you can select individual objects through the layers pallet but there are two vital functions that are not available but need to be:

1. You can’t toggle each object visible/invisible – this function is only available per layer. In my case this forces me to make new layers for each object and kind of defeats the purpose of the sub layers. Might be just me being old school but that’s the way it is.

2. You can’t select an object under a layer and delete it using the trash can function. If you do you end up deleting the whole layer. To delete one object alone you have to select it and then use the Del button. I find this very annoying, probably because I’m used to being able to delete objects individually from Adobe Illustrator.

These two features should be added to the program simply to make it easier to use and accommodate old Illustrator geezers like myself.

Categories
Expression Web Microsoft Expression

Expression Web – CSS Heaven (sort of anyway)

I’m using a style sheet (CSS) at the bottom of the Zufall site to make it easy for the owners to update once it’s done. I’ve used CSS in the past with varying degrees of luck / frustration due to the somewhat tricky cross referencing you have to do: When you have a separate CSS document you have to constantly open the document, change the code, save and then go back and reload the HTML document to see if what you did was what you wanted. For someone with limited understanding of CSS code this is quite frankly a nightmare.

Not so with Expression Web. The guys at Microsoft have struck gikd with the CSS linking between style sheet and actual document. Instead of editing the style sheet separately you can edit it directly from your HTML document through the styles panels for instant results. If you make changes they also appear in the CSS document and the program will even remind you to save changes in both documents if you close or preview what you’ve just done. This interconnectivity between document and style sheet makes the work of the designer much less tiring.

Another neat feature is the manual div positioning. Rather than having to code in where the divs appear you can set the div positioning to manual, drag your divs to wherever you want on the page and the style sheet will automatically make the changes.

As if that wasn’t enough the preview panel for the CSS code is a stroke of genious. When you are modifying your CSS code you get a preview of what you are doing in real time. There is also a small preview panel in the bottom right corner (by default) that will show you what the style does before you apply it.

My knowledge of CSS has been limited – especially because designing the code in the past was unnecessarily time consuming and quite frankly annoying. And I can honestly say that I have learned more about CSS code in the two weeks I’ve been using Expression Web than the rest of my time as a web designer (just to make this clear: I’m a designer, not a coder). If I were to pick on anything it would be that the program often seems sluggish when altering the style code (no doubt due to the cross referencing that goes on) and that if you use undo a lot you have to remember that the program keeps track of your actions per document and not per actual action unlike for instance Macromedia Flash. So if you make one change in the CSS file and one in the HTML file and then click Ctrl+Z twice you will undo whichever two steps you did in the open document and not your two last steps.

Coding in CSS as a whole still is a can of rotten worms because of the weird differences between Internet Explorer and the rest of the browsers. I’ll post some screen shots and examples of this tomorrow.