Monday, 29 October 2012

Why doesn't the Internet Explorer app for Windows 8 support Flash Player and how can I embed my youtube videos?

In this short video, I am going to discuss why the Internet Explorer app for Windows 8 does not display content that requires the Flash player. And what this means for the consumer and content provider alike.

You can read the transcript below.


HTML5 player



Transcript

So how many of you have recently browsed to a site such as my blog using the new Internet Explorer app on Windows 8?

You will have noticed that it doesn't render certain content types. For example, Flash player.

This is a feature. And I don't mean that as a euphemism for "bug".

Microsoft have deliberately kept the Internet Explorer app plug-in free. Relying instead on HTML5.

There are two consequences to this.

Firstly as a consumer, should you browse to a page that requires the Flash player using the Internet Explorer app, you have the option to right-click the page to activate the Windows 8 App bar.

If you click on the Page tools icon, you will have the option to View the page on the Desktop.

This will launch Internet Explorer 10 and navigate you to the same page.

This is not ideal but it is what it is.

I should point out that the Internet Explorer app and Internet Explorer 10 are different programs with different capabilities.

Of course you don't have to use the Internet Explorer app and could always use Internet Explorer 10, Firefox or Chrome anyway.

The second consequence of this feature is for those providing the content.

If you are producing content for the web and suspect that a growing number of your users are likely to use the Internet Explorer app or another program that favours HTML5, you had better start embracing HTML5 yourself.

In the case of my embedded YouTube videos, this couldn't be simpler.

When clicking the Share link in YouTube, you are given a number of Embed options including the dimensions.

If you select the Use the old embed code option, this will provide you with mark up that requires the Flash player to be installed.

However, if you uncheck this box, then HTML5 compatible mark up will be generated.

It is this code that the Internet Explorer app can use. Not to mention any other browser that supports HTML5.

I suppose you might still have to worry about an audience who don't currently use an HTML5 compatible browser.

One option might be to provide one of each.

In fact. I often embed videos twice in my posts. One at the top and another at the bottom.

From now on, I'll make sure that one of them uses HTML5 and the other, Flash.


Flash player
 
 
 




See you soon

Phil Stirpé
"I don't do average!"




Sunday, 28 October 2012

How can you convert an MOD file from your video camera into an AVI file for editing?

In this short video, I am going to show you how simple it is to convert an MOD movie file taken from your video camera and convert it into an AVI file so that you can edit it.

You can read the transcript below.


HTML5 player



Transcript



I use Camtasia Studio a great deal for editing videos and post production.

Unfortunately, Camtasia Studio is unable to open the MOD files produced by my video camera,

In the past, I have opened the MOD file in Movie Maker and then exported it. However, I find this process too time consuming.

I have recently discovered a tool called WinFF.

It is freely downloadable and is perfect for converting your MOD files to AVI.

To convert your MOD file, you simply add it into WinFF and then specify which format you would like to convert to.

Once you have picked your preset such as Widescreen, you are good to go.

Click the Convert button and let it run.

The program shells out to the command line and you will see it report as it converts frame by frame.

Depending on the size of the file, this process could take several minutes so feel free to do something else while you wait.

For example, this 620 MB file took around 10 minutes to convert.

It is worth pointing out here that if you have several files to convert, you could have WinFF convert them all in a batch.

Once completed, you will be prompted to press a key to continue.

As you can see, an AVI file has been produced.

The original MOD file is 612 MB while the newly converted AVI file is only 84.7 MB.

Let me jump into Camtasia Studio to add in the newly converted media.

As it is now in AVI format, Camtasia Studio will quite happily open it so that you can begin editing.

So there you go. Using WinFF, it really is very simple to convert your MOD files into AVI.

There are plenty of other tools available, but this one suits me fine.


Flash player





See you soon

Phil Stirpé
"I don't do average!"




Wednesday, 24 October 2012

The day that I lost my MVP status

I often look for ways to break the ice at the start of a training session or presentation.

My first opportunity tends to be the introductions.

When delivering Microsoft Official Curriculum - MOC courses, it is common to establish your credentials and suitability to train this  particular course.

I made up a slide that introduced me and my Microsoft qualifications.

It looked something like this.


The chances were that someone would ask what MVP stood for.

To which I replied "Mother's Very Proud".

This would always get a laugh.

Good start.

I got by with that gag for years and then one day, Microsoft announced a new form of accreditation, the Most Valuable Professional - MVP.

Introductions have never been the same since.




See you soon

Phil Stirpé
"I don't do average!"


Thursday, 18 October 2012

Great programming analogies No.2. Age of Empires. Part 3


This is the third in a series of posts where I plan to describe my favourite analogy. Age of Empires. In this post, I get started with the Age of Empires analogy in order to describe a class in C# and what properties and methods it will require.

You can read the first part of this series here.

You can read the second part of this series here.




So I am going to write a computer game. I think I'll call it Age of Empires.
 
HTML5 player
It involves the player building up armies and conquering their enemies.
So a key ingredient here is soldiers.
The game is going to be full of soldiers.
So I had better define a class for soldier.
When designing a class, we need to consider what characteristics or properties that we need in order to represent a soldier and distinguish it from others.
After a few minutes of brainstorming I might come up with the following properties:
X and Y location. Where is soldier on the map?
Life points. How much damage can the soldier take before dying?
Sprite. The graphic used to represent the soldier.
Speed. How fast can the soldier move?
Faction. What side does the soldier belong to?

Let's not forget behaviours or methods. i.e. What abilities does our soldier have? Let's put that another way, what will I want to be able to do with a soldier?
An aside. Have you noticed my vocabulary? I am talking about a soldier as if it were a real thing. I am talking about characteristics(properties) that a soldier might have and abilities/behaviours (methods) that soldiers can have.
That's the thing with OOP. You begin to visualise them as things. As objects! And treat them as such.
Yes I know it's just data and code, but the moment you begin think of the objects in your application as objects, things, entities etc., you are pretty much there.

So back on track. I was thinking about some methods for my soldier class.
I came up with:
Move(x,y). Soldier moves to a specified location at a rate based upon its Speed property.
Strike(opponent). Soldier will 'hit' another soldier.

Ah but that requires some more properties:
Strength. Amount of 'damage' done per strike. i.e. how many life points removed from opponent.
Toughness. How many points of damage can be taken when struck by another soldier before life points are removed. e.g. soldier with Strength of 4 strikes a soldier with a toughness of 3 and so inflicts 1 damage point. Reducing opponent's life points by 1 point.
In terms of game play, a soldier would be instructed to "move over here" or "strike this guy".
So I probably need one more method:
Attack(opponent).  Approach nominated soldier and begin striking it.

I guess that's it for now.
So the first draft of the Soldier class would come out as:

UML class diagram.

So how might that look in code?
I have written the class up in C#.
Let's start with the properties. As you can see, I have declare public properties for each of those that I identified in my UML diagram above. I haven't shown all of the private fields that actually store the data.






Here is an example of one of the properties and its associated private fields:



 
I then added the three methods to the class: Attack, Move and Strike.



 
Here is the Strike method that I wrote:




It is passed another soldier instance as a target and is assumed to be "in contact" with it. i.e. stood next to it. The code determines the difference between the Strength of the attacker and the Toughness of the opponent. Should there be an advantage, the difference is removed from the opponent's LifePoints property.
Rather than spend time concentrating on producing compelling graphics, my code simply outputs messages to the Output window so that I (and you) can follow what is going on.

Here is the Move method.




Note that it simply "transports" the soldier to the desired destination. In the actual method, I would determine the most direct path between the Soldier's current location and the required destination. The Move method would then advance (move) the soldier along the path at a rate determined by its Speed property.
During the game, each Soldier will be prompted to "do something" repeatedly. i.e. as long as the game is running, all of the pieces should be doing something. Either advancing to an opponent, striking an opponent or standing still.
Imagine a control loop that continually prompts each Soldier to "do something". Well, if a Soldier was moving toward a distant location, each instruction to "do something" might cause it's Move method to move a little further along it's predetermined path.
Although the Strike method causes the damage to adjacent soldiers, this doesn't reflect what a player might call upon it to do. They are likely to select a Soldier and then right-click on an opponent's soldier. In this case, the Soldier must Move into contact with the opponent and then strike it.
Hence the third method, Attack.



This method, tells the Soldier to Move into contact with the opponent and then Strike.
Note that this method is calling the Move and Strike methods for the current object (Soldier).

Testing. I then wrote a simple WPF program that instantiated two Soldier objects and then instructed one of them to Move to a location and then Attack another Soldier at a second location.




It's early days but I fell that I have made a good start.

I have been able to create a class to represent a Soldier and equip it with the properties and methods that it needs to act and behave as a Soldier.



Flash player


In the next post, I will take my first look at inheritance and explore how the Age of Empires analogy can help explain the purpose and syntax of inheritance.

Training?

If you are interested in UML or C# (we can do all of this in VB.NET too and once I finish the series, I intend to double back and reproduce everything in VB.NET) training, we offer the following courses:







See you soon

Phil Stirpé
"I don't do average!"

Great programming analogies No.2. Age of Empires. Part 2

This is the second in a series of posts where I plan to describe my favourite analogy. Age of Empires. I find this analogy very useful when teaching Object Oriented Programming - OOP. In this post, I will describe the game that my analogy is based on. Age of Empires II - Age of Kings.
You can read the first part of this series here.
Age of Empires II is a game of empire building and conquest.


HTML5 player


The game is set roughly in the Dark, Middle and Renaissance ages. In fact one of your objectives is to advance through the ages. As you do so, new technologies and troop types become available.
You begin with a town hall and some villagers whom you should put to work immediately.
The villagers are able to harvest resources such as food, wood, stone and gold. They are also able to construct various buildings.







Resources are important to the game. You need food to sustain your troops. More food means you can recruit new troops and villagers.
Troops are recruited at special buildings such as Archery ranges and Barracks. To construct these buildings, you must put your Villagers to work with resources that they have already gathered.
Troops not only cost you food, they also cost gold which represents the cost of arming and training them.
Your growing population all need somewhere to live so you must ensure that the villagers are kept busy building enough houses.


Some buildings are used for research in addition to or instead of producing troops. For example. With a Barracks, you can recruit Axemen as well as research newer types such as Spearmen.
Smiths do not produce any troops but allow you to research better types of armour.

As you continue to research and construct new buildings, more types of troop become available. When you research enough technologies and construct enough of the appropriate buildings, you will progress to the next age whereupon all of your buildings take on a more 'up to date' appearance. The next age will also make new buildings and troop types available.



This no doubt sounds like a town planner's or academic's paradise.
Need I remind you that you are not alone? There is a point to all of this constructing, harvesting and researching. That is to build up armies to "go forth and conquer". The reason you are recruiting troops is so that they can go off and fight your opponent’s troops in the hope of winning. The reason that you are researching better weapons and armour is so that your troops are better equipped than you opponent's troops and therefore more likely to win.
If you have played any kind of strategy game, you will no doubt "get the picture".



Hopefully, you will understand the principles enough to follow this series of posts that walk you through the fundamentals of Object Oriented Programming - OOP and C# programming.
If you haven't played this game, then I urge you to find a copy as soon as you can and get playing. It's great fun.

Please forgive the excessive use of bold in this post, I wanted to emphasise those terms I considered important to the analogy going forward.
My intention is to produce a series of short videos to accompany each post to illustrate various concepts, so make sure you look out for them.
You will need to bear with me however as this will take some time to organise and there are other demands on my time. In addition to my day job, there is the family life, horse riding lessons, hobby farming AND did I mention that I have less than two months to finish my dissertation!


Flash player




See you soon

Phil Stirpé
"I don't do average!"

Great programming analogies No.2. Age of Empires. Part 1

This is the second in a series of posts where I plan to share some of my favourite analogies and anecdotes from my training sessions and presentations. This one is an analogy. Age of Empires.

HTML5 player

 
This is one of my oldest and favourite analogies.
Like many analogies, it developed and grew in the retelling until it reached epic proportions.
Many years ago I delivered a Microsoft Official Curriculum - MOC course: M2124 Programming in C#.
It was a great course and covered many of the fundamentals of programming .NET applications using C#.
A great deal of the content was devoted to classes, interfaces, polymorphism etc.
Those chapters began with a discussion about Object Oriented Programming which was a challenging concept to put across for those who hadn't come across it before. The analogy used in the book was that Car was a class. And your car would be an instance of that class.
Well OK. But it's a bit tame and needs a lot of work.
An analogy that I heard others use several times involved dinosaurs.
There was a class called Dinosaur. This was a base class. There were sub classes called Herbivore and Carnivore.
So far so good. We have made a start on inheritance.
"What's next?"
"Nothing. That's it."
"What. No polymorphism? What about interfaces? How do you explain static members?"
"And while we are explaining Object Oriented Programming - OOP techniques with C#, how do you explain / justify constructors and destructors?"
No. Dinosaurs were out. What a poor analogy. If I didn't rate an analogy, my delegates certainly wouldn't
I constantly strive to find an explanation/analogy that successfully communicates the idea that I am trying to put across. Sometimes, I might try a half formed analogy and have no luck with it at all. Other times, some of the group will see where I am going with it and contribute their own ideas. And through that banter and brainstorming, the idea takes shape. It might take a couple of courses before an analogy really comes together.
When I first began thinking about how I might explain OOP concepts to budding C# developers, the only analogy that made sense and could cover most if not all of the aspects was the computer game called Age of Empires. I used to play this game a lot. There have been several editions. My favourite was (and still is) Age of Empires II - Age of Kings (the medieval one). This edition more than any of the others had all the characteristics that I needed for my analogy. No matter what feature of OOP or C# I was trying to explain, I could always manage to explain it in terms of Age of Empires II.







Some years ago, I read an excellent article about tips for giving great technical presentations. The only tip that I disagreed with was where the author cautioned against using computer games for examples. He suggested that they were not real applications. He probably meant Line of Business - LOB applications.
Well I disagree with that one completely. Last time I looked, the computer/video games industry was huge. A much bigger market than accounting or payroll for example.
Furthermore, despite the wide variety of backgrounds and markets of my delegates, I could guarantee that on a computer programming course ALL of my delegates will have played/used computer games. Possibly even Age of Empires! The same couldn't be said for payroll applications.
In the mid 90s, I was Lead Programmer on a game called The Darkening. Well that was its name until the marketing departments at Origin and EA decided to smack Privateer 2 on the cover too.








Now believe me. That was real programming.
It's all about transferable skills. Years later, I employed the same OOP techniques to write Payroll and Computer Aided Design - CAD applications.
Now I have already mentioned that this analogy became an epic. I was able to reference it repeatedly over 3 or 4 days of the course.
It would be impractical to deliver this in a single post (although I do feel an eBook coming on).
Instead, I will deliver it as a series of blog posts.
If you are planning to work through the series, it might be useful for me to begin by giving you an overview of the game.
I'll do that in the next post.

 
Flash player



See you soon

Phil Stirpé
"I don't do average!"


Tuesday, 16 October 2012

How to add a graphical overlay in Camtasia studio

In this video, I will show you how to add a graphic overlay to your videos in Camtasia studio.

This is particularly useful if you wish to brand your videos for example.

I have included the transcript below.


HTML5 player



Transcript


In this video, I am going to show you how to add a graphical overlay to a video in Camtasia studio.

This is a common requirement if you want to brand your videos with a logo for example.

For logos added in this way, it can be desirable to have a transparent background for your logo.

Many graphics programs will enable you to create .png files with transparent backgrounds.

I have discovered Pain.Net which suits me just fine and can be freely downloaded.

I create my graphic which in this case happens to be my domain name and then crop to size.

Paint.Net has a magic wand which allows me to point to a region and then delete it.

By deleting all of the background colour, I am left with the checkerboard appearance indicating transparency.

My graphic is ready to save.

If I open my project in Camtasia studio. I will need to select the Import Media optio to include my graphic overlay.

Once the graphic has been imported, it can be dragged onto the timeline on it’s own track.

By definition, a graphic overlay should be placed on a track in front of the main video.

That is to say, above.

The top most tracks in Camtasia are the front most in the final edit.

When you drag a graphic into the timeline, it is assigned a nominal duration.

If you wish, the graphic can be stretched to fill the entire running time of your video.

For my videos, I like to add a title image to the start and end.

I don’t want my overlay to be placed in front of these segments, so I stretch my graphic overlay to fit between these points.

That means that when the title shots are in view, the overlay isn’t

And for the remainder of the time, the graphic overlay is visible.

The graphic initially appears in the centre of the screen.

This probably wont suit.

In fact, you are more likely to want it in a corner.

I want mine placed in the middle of the bottom edge.

I also want the image smaller and less opaque.

If I drag the image into position and then select the Visual Properties button, I am able to set a number of properties.

I will set my Opacity to 50% or there abouts and reduce its size to 75%.

My overlay is now ready.

If I view my video during the titles at the beginning or end, I cannot see the overlay.

If I view the video anywhere in between, I can see my overlay.

I will probably vary the colour of my overlay depending on the dominant background colour of the video I am editing.

With a corporate logo, this might not be possible.

OK that’s it.

If you want to add a graphic overlay to your videos in Camtasia studio, it really is simple.

I plan to produce many more videos on a wide variety of topics.

Thanks for watching this one.

I’ll see you next time.

 

 

Flash player






See you soon

Phil Stirpé
"I don't do average!"




Sunday, 14 October 2012

Recording and producing video tutorials with Camtasia Studio

Several colleagues of mine have decided to start producing tutorial videos.

Good on em!

I promised some of them that I would produce a short guide to help them get started with Camtasia Studio.

Here is the video.

I have included the transcript below.

I hope you find it useful. There are more tutorial videos in production.


HTML5 player
xx


Transcript



In this short video, I would like to show you how to record and produce video tutorials using Camtasia Studio.

As a Microsoft Certified Trainer or MCT, I am eligible for a free copy of Camtasia Studio, so it makes sense for me to use it.

When installing Camtasia, you are prompted to add a Camtasia toolbar into Powerpoint.

I wouldn't recommend this as I have found it problematic.

The feature begins a recording as soon as you start your Powerpoint presentation.

It then prompts you to stop recording if you press the Esc key. For example, when jumping out of Powerpoint to do a demo. Which I do quite a lot.

For that reason, I do not install this feature.

Furthermore, I have also had Powerpoint crash one me with this feature installed.

To record a session, you will use Camtasia Recorder.

This program will record your whole screen or a predefined region.

It also takes other inputs such as an external microphone and web cam.

Although Camtasia recorder can use a built in Microphone, I find that I get better audio if I use a desktop microphone or headset.

The web cam is useful if you want Picture in Picture.

For instance where the viewer can see a small window with you speaking whilst the main area shows what you are doing on the screen.

I tend not to use this feature as I am usually concentrating on what I am doing on screen and so am looking away from the camera.

It also makes it more obvious to the viewer that you have edited the video as your face shifts on each edit.

I would only use this feature if I made a second recording where I look directly at the camera.

This of course means that I would have to learn my lines and nail them in a single take.

Camtasia can also record system sounds.

Unless you particularly need this feature, I would turn this off as it can be distracting for the viewer.

I would also turn off your own speakers as unexpected noises could be distracting for you.

Before recording, it is worth checking out where Camtasia recorder is storing the recording.

If you spend a long time recording, for example 30-60 minutes, the recordings could be gigabytes in size.

Just make sure you have plenty of storage available.

When you are ready to record, you can click the Record button or press F9.

As I know that I will be doing a fair amount of editing later, I simply start recording and then do whatever it is I wanted to show off.

For instance, I used to get stressed about having an opening slide on screen when I started.

This is simply not necessary.

Once I have begun recording, I would hide the recorder but I am leaving it on screen for this tutorial.

I usually have a plan in mind when I record a tutorial.

In fact, I tend to work out a script in advance.

The script is usually handwritten and sits beside me on the desk.

I am careful to write one clear sentence at a time to remind me to pace myself.

Remember. I can edit out any pauses later.

So I read out a line then pause.

And if I am happy with the way it went, I will continue with the next.

If I feel that I fluffed a line or made a mistake, I simply pause for a second or two and try again.

Now obviously, I am likely to be doing something on screen at the same time.

Well, I have two techniques for this.

The first is to make two recordings.

The first is where I focus on the dialog and take my time.

If I do anything on screen at all it might be as a visual clue that I made a mistake and to edit out this section.

Once I have my dialog in the can, I make another recording where I walk through the on screen action.

I don't bother with dialog for this second recording although I follow my script for order and pace.

Both of these recordings can be edited later. One for video and the other for audio.

The alternative to this technique is to make one recording but whenever I want to repeat a sentence, I put the screen back the way it was.

This isn't always that simple.

One thing to avoid if possible is moving things whilst talking.

Particularly across sentences as this makes editing much more difficult.

When you have finished your recording, you will be offered the choice to save or produce.

I recommend saving the recording and then opening it in Camtasia studio later for editing.

Files save in this way are given the extension .camrec and can be quite large.

Before you begin editing in Camtasia studio, you might want to prepare some additional assets.

For example, I like to add a title to the front and end of my videos.

I create my title screens in Powerpoint and then use Print Screen to capture.

I also like to use a short 5 second or so clip of music as my intro.

Incidentally, I tend to produce my short music clips in Camtasia Studio too.

I also use a graphical overlay (with a transparent background) to brand my videos.

Once you are sure that you have everything you need, it is time to launch Camtasia studio.

Dont worry if you are missing any assets, you can always add them to your project later.

Let's take a look at Camtasia studio.

The first thing to do is load in all the assets.

The assets will include your Camtasia record or recordings.

Any title images and audio and any graphical overlay.

You need to drag your assets onto the timeline.

Before I edit the video, I might drag in my title screen and audio.

I place the title screen on the same track as the video and place the audio on a track by itself.

The title image is assigned a nominal duration, so I stretch it so that it lasts as long as the intro music.

So now I start previewing the video in Camtasia and locate any places where I paused too long or made a mistake.

I can position my timeline at a point before the segment that I wish to remove and then another following.

Once I have two edit points, I can select the segment in between and remove.

This can be a time consuming process but is straight forward.

provided you did a good job when recording.

If you made two recordings, one for video and the other for audio, they can be edited separately.

Make sure that the one you are using for its audio is placed on a lower track.

This is because the upper track or tracks supply the video.

When you think you are ready, you can produce.

I really would recommend sitting through a couple of playbacks from start to finish before you proceed.

Before we produce, we really should save our work or project.

This doesn't mean saving the edited video.

Saving the project simply means saving a project file that contains metadata.

This metadata describes the name and location of each asset and what edits you have specified.

Projects are saved with a .camproj extension and are very small in size.

I wouldn't recommend waiting until you are ready to produce before saving.

It could take an hour or more to do your final editing.

Should anything go wrong such as a crash, you will have lost all of your work.

Make sure you save regularly.

Perhaps every edit or so.

Now when it comes time to produce, you have the option of producing an MP4 file in a variety of formats.

Fr instance, there are options to output as MP4 with a web page with built in player.

If you plan to use your video anywhere other than Youtube then you should choose one of the MP4 alternatives.

My videos are intended just for youtube, so I choose that option.

You must supply your Youtube ID and password which Camtasia can remember if you wish.

You can also enter a title, description and search tags to accompany your video.

Once you confirm, Camtasia will then begin processing your video and uploading to Youtube.

This process could take several minutes depending on the length of video.

Feel free to walk away and get a drink then come back later.

Once the video has been updated, you will be navigated to the Youtube page for your video.

OK. That's it.

In this video tutorial, I have shown you how to record and produce a tutorial video with Camtasia studio.

I hope you have found it interesting and informative.

If you put what I have shown you into practice, then please get in touch and let me know.

I'd love to see what you have done.

I plan to keep on producing tutorial videos on a wide range of subjects.

Thanks for watching this one and I'll see you next time.
 
 

Flash player



See you soon

Phil Stirpé
"I don't do average!"