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.

Categories
Expression Design Microsoft Expression

Color Picker Issues – Possible Explanations

After my post on the color picker issue last night I got an email from Dan at Microsoft with a possible explanation:

I have a couple of questions that might help narrow down the issue:
– Are you using the “Color eyedropper” on the color picker? This one picks the screen color. There is another “Color dropper” on the tool bar that picks the object color and is likely to give you better color fidelity in color correct environments.
– Are you using a system color profile? On Vista, under Control Panels, there is a control panel called Color Management. Could you check if you are using a custom profile other than sRGB?
The drawing surface of Expression Design uses the system color profile by default. Programs like Adobe Photoshop or Illustrator ignore the system color profile unless you specifically turn on proofing.
There is also another known bug with the Color eyedropper where it records colors by one digit (so 255, 0, 0 would be recorded as 254, 0, 0). This however, does not seem to be what you are seeing.

I was using the Color eyedropper when the error described in my earlier post occurred. But even if this dropper picks the screen colour it is still very inaccurate because the colour picked doesn’t match the screen colour either.

I am using a system color profile generated by Pantone’s Huey device.

I am not at my regular computer at the moment but I will check all of the above later on today to get to the bottom of this. Stay tuned …

Categories
Expression Design Microsoft Expression

Color Picker Issues

The color picker in Expression Design is so inaccurate it’s pretty much useless!

Now that I got your attention let me explain: I was working on the Zufall project when I discovered that the colours of several of my elements didn’t match. I found this to be very odd as I had made a sort of colour pallet to start off with and used the colour picker to match all the colours to one another. Upon closer inspection I was mortified to discover that the colour picker wasn’t matching colours at all. It was generating seemingly random shades (or in some cases hues) of the colour I was picking. I tested it with several different colours and found that there are only two colours that stay the same when “picked”: black and white. All other colours are violated in some way or other.

Testing the Problem
To figure out what was going on I created a project with a table like set of boxes: Original colours on the left, picked colours on the right. I chose all the original colours from the standard colour swatch in Expression Design, copied the box and put the copy to it’s right and picked the colour from the original box. As you can see from the graphic below (exported as a PNG to avoid the artifacting problem I’ve discussed earlier in the blog) There is a distinct difference between the original colours and the picked ones. The reds and yellows seem to get “weaker” while the blues change all together. You’ll notice that the picked version of the dark/indigo blue looks more like the original purple than it’s parent. And no, I didn’t accidentally pick the wrong colour here. This is the result you get every time.

My Theory
It seems to me that the colour picker has a tendency of leaning to the left in the colour spectrum so that reds become oranges, oranges become yellow, yellows become green, greens become blue, blues become indigos, indigos become violets, and violets become red. Why this is happening is beyond me but regardless it is a problem that must be addressed. With a dysfunctional colour picker the whole program is in big big trouble.

The Proof

Bad Colour Picker