New Release of ERTE for SharePoint now supports localizations.

The new version is released. If you've downloaded the first release, just download the new one from CodePlex and replace the .js file in the /_catalogs/masterpage gallery in your site collection. The project is still under Beta, so if you find some bugs please let me know.

The new version now supports localizations. The current version is published with English (LCID 1033) and Slovene (LCID 1060) translations. If the script can't find localization for your language, it will use english by default.

To add your own localization, add under "//Localization arrays" the translated following line:

var erte1033 = new Array("Please inputtt details","Alt Text","This will be displayed in RSS feeds","Embed Code","Paste your Embed code here","Insert","Close"); //english

and change the LCID and language at the end. If you don't know the LCID of your SharePoint site, open it in Internet Explorer, in the address bar type javascript:alert(L_Menu_LCID) and press enter. The alert window will tell you the LCID. The final translated version (example for Slovene language) will look like this:

var erte1060 = new Array("Vnesite parametre","Besedilo","Besedilo bo izpisano v RSS-viru","Embed koda","Prilepite Embed kodo v polje","Vstavi","Zapri"); //slovene

If you've localized the texts, I'd be happy to add them to the new release, so we could have as full version as possible. Please publish the translation under comments on my CodePlex HomePage.

Oznake ponudnika Technorati: Flash,SharePoint,Rich text,Embed,ERTE,CodePlex

Adding Flash animation in SharePoint Blog and other lists pt. 2

This post continues the topic from my first part about embedding Flash videos in SharePoint Blogs where we've learned how to embed one Flash animation or video (or have a lot of work for publishing each flash).  The problem arises if we want to embed more videos and have them displayed automatically.

Since SharePoint is very strict about filtering a LOT of the code out, I've devised a way of passing all the parameters needed for swf object through ID. And how to recognize divs for the swfobject? Using CSS class name.

Here's what we need to do:

1. Have te swfobject.js uploaded to the site.

2. Add the following javascript at the end of the page (or in a Content editor webpart below the posts or list items:

<script type="text/javascript" src="swfobject.js"></script>

<script type="text/javascript">

function embedFlashes() {
    var myLayers = document.getElementsByTagName('div');
    if (myLayers.length>0) {
        var myFlashes = new Array()
        for (i=1; i<myLayers.length; i++) {
            if (myLayers[i].className == 'flashcontent') {
                myFlashes.push(myLayers[i].id)
            }
        }
        var so = new Array()
        for (j=0; j<myFlashes.length; j++) {
            tempParam = myFlashes[j].split('::')
            so[j] = new SWFObject(tempParam[0], tempParam[1], tempParam[2], tempParam[3], tempParam[4], tempParam[5]);
            for (p=6; p<tempParam.length; p++) {
                detail = tempParam[p].split('=')
                so[j].addVariable(detail[0], detail[1])
            }
            so[j].write(myFlashes[j])
        }
    }
}

embedFlashes()
</script>

3. Now in the content you need to edit the HTML code of the body and insert the layers in the following format (note - input parameters are separated by double colon.:

<div class="flashcontent" id="[url_of_swf_file]::[unique_id]::[width]::[height]::[minimum_flash_version]::[background_color]::[flashvar1=flashvar1_value]::[flashvar2=flashvar2_value]...">[Alternate_content]</div>

Let's reuse the sample from previous post and some color coding. To embed

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

Insert the following html to the blog post body:

<div class="flashcontent" id="http://www.youtube.com/v/Z2yNzw00mpA&rel=1::video01::425::355::8::#FFFFFF">Please view this post on my website to display the video.</div>

The rest of parameters are made up - video ID is video1, it requires flash 8 and background color is #FFFFFF - white. Let's do another sample with flashvars - the same video on MSN Video. The Embed code is:

<embed

src="http://images.video.msn.com/flash/soapbox1_1.swf" quality="high" width="432" height="364" base="http://images.video.msn.com" type="application/x-shockwave-flash"
allowFullScreen="true" allowScriptAccess="always" pluginspage="http://macromedia.com/go/getflashplayer" flashvars="c=v&v=d41e1dfd-919b-4d57-89c9-736f9c75db14&ifs=true&fr=msnvideo&mkt=en-US&brand="></embed>

To embed this video you'd use the following HTML code:
 

<div class="flashcontent" id="http://images.video.msn.com/flash/soapbox1_1.swf::MSNVideo01::432::364::8::#FFFFFF::c=v::v=d41e1dfd-919b-4d57-89c9-736f9c75db14::ifs=true::fr=msnvideo::mkt=en-US::brand=">Please view this post on my website to display the video.</div>

And the result:

 

Yeee, working!

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

Adding Flash animation in SharePoint Blog and other lists pt. 1

UPDATE: This is an outdated method. There is a much easier way. See ERTE on Codeplex or ERTE on my new blog.

SharePoint's rich text field is much better than in version 2.0. It even enables to edit the HTML source. But one thing I don't understand is why it filters out the HTML code so much that we can't even embed the Flash animations or videos into the content. This is a major drawback for SharePoint Blog.

Fortunately I've come up with a nearest thing to a remedy. It's using Deconcept SWF object. It will replace an "alternative" content in a layer with a flash animation (this is also a good way to bypass the "Click to activete this control..." issue in IE). 

Let's say we have a blog and a video to embed for example - this one from YouTube. A simple way of doing it - if you have only one video in the page is:

1. Create a document library and upload the swfobject.js (downloaded from author's website) to it (or just upload it to the root of your website with SharePoint Designer).

 

2. Add a blog post and in the body edit the HTML code and insert the following code:

<div id="flashcontent">Please check this post on my website to view the video</div>

3. In the blog homepage and in the post details page (post.aspx), add a Content editor webpart and edit the source. Enter the following code:

<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var so = new SWFObject("http://www.youtube.com/v/Z2yNzw00mpA&rel=1", "mymovie", "425", "355", "8", "#FFFFFF");
    so.write("flashcontent");
</script>

For comparison I'm pasting also the YouTube's embed code and I'm color coding it to match the script:

<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/Z2yNzw00mpA&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/Z2yNzw00mpA&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object>

For more details on the script and how to add flashvars. Just be sure to have the right path to swfobject.js and to have the right ID of the div and in the script (in the case above: "flashcontent".

This is the result:

 

Unfortunately in the RSS is still showing the alternate content.

 

This is the method of adding only one video per page. You'd need multiple div ids and you't always need to add to the script below. Fortunately I've prepared a way of automating this. More about this... Stay tuned for my next post.

Technorati tags: SharePoint JavaScript Flash SharePoint Blog

Another great .flv flash video player

In one of my previous posts I've already explained how to publish your own video on web pages (still a bit difficult in SharePoint blog :( because it gets filtered out). I've come across another very good .flv flash video player. It's published under creative commons licence and it's free for non.commercial use. What I also like about it is

• that it has an online wizard for creating the embed code with all the configuration you need.
• supports playlists
• highly configurable
• supports image previews 
• etc...

Below is a sample video..
 

Windows Vista and Flash problem

Even though I've had Flash player installed in my Windows Vista, there was a funny error. In some cases I could see the flash videos and in some cases no (like on SoapBox or YouTube. I've found the solution to the problem.

Below is the recording on how to fix the problem. 

Video: How to fix Flash problem in Windows Vista

Technorati tags: flash, windows vista, problem, display, video, fix, soapbox, youtube

Create comics online

Lately I'm noticing lots of sites passing information in a new way - with the aid of comic books! I like the Idea! Below you have some samples:

The Meatrix

The Enchanted Office

Genuine Fact Files

Creating (static) comics is no problem for mac users, While there also exists some programs for Windows I've found a very nice online service that lets you create simple comics - online. You can even create comics anonymous. But registration brings benefits, like strip blogging, Here is a simple example that I've created in minutes.

Embed videos in your page

Google Video, SoapBox, YouTube and some others nowadays offer you a grrrreat way to publish your videos online and embed them in your site. But each embedded video has the logo of the service provider. You can also embed your own streaming video with all the free tools.

Step 1. Record and edit the video. For editing you can Windows Movie Maker is a super tool. Here you can learn a lot about Movie Maker.

Step 2. Encode your video into flv. For encoding I've discovered a great free tool: Riva flv encoder. With this tool it's really simple to encode the flw so if you can't afford Flash with video encoder, this is a super alternative.

Step 3. Upload your .flv. Use your website space to upload the flv video.

Step 4. Embed a free video player. Jose found a very nice looking online flv embedable player on Advanced Flash Components. We're also using the commercial version on www.prazniki.net. Here's a link to the free embedable flv player. There you also find the instructions on how to embed the player into your website.

Below is a sample for one of the videos that I've edited on the fly some time ago for B4Learning - now is Piflar's Web.

Technorati tags: web design, multimedia, video, embed, flash, flv

Update to previous post - offline active content

If you'll be making the offline version of a website and you're thinking to include the active content like Flash or JavaScript (or both) you can surely use the Mark of the Web, which I've described in the previous post.

There is a catch though. You can't make the mark of the web for pictures. So if you'll be linking from your web pages directly to some images it won't work! The Internet Explorer security will block it.

The only way I could link "directly" to the image was to put the image into an empty page, equip the page with "mark of the web" comment and then link to that page.

If anyone knows a better way to resolve this, I'd be more than happy to read about it. You can let me know in the comments.

Technorati tags: web design, Flash, JavaScript, Service Pack, Security, Offline

Active content blocked when having page offline

Another issue when making offline web pages is the Windows XP service pack 2 issue, which blocks active content like javascript or flash animations.

When viewing offline page that contains flash animation or JavaScript with Internet explorer you can run into a problem. A yellow security bar or a notification about blocking active content.

Microsoft has an official workaround for this, named "Mark of the Web comment". Here's also description of it in Adobe's site.

To make it short. If you don't want your users to be troubled with this, just add the following to the top of your html code:

<!-- saved from url=(0013)about:internet -->

or

<!-- saved from url=(0022)http://www. yoururl .com -->

(the number in brackets represents the length of your URL - including http://)

This tells Internet Explorer to treat the page like Internet zone for which usually has the permissions for active content.

Technorati tags: web design, Flash, JavaScript, Service Pack, Security, Offline

Special characters (č, ž, š) in Flash (updated)

Coming from Slovenia I have to face with the problem of slovenian characters in the web applications. Usually FrontPage or SharePoint designer take good care about that for me. The problem arises when I need to use Flash that reads external file.

Example: I need to embed a flash that will read the text that will say "Študija".

If I include in the text file the word Študija, Flash will not recognize this character (at least in most cases). I've found, that you have to use special codes for characters like č, ž, š, etc. But which? After some time searching the net and combining knowlege, I've come up with a table of codes for the following characters:

č: %C4%8D
Č: %C4%8C
š: %C5%A1
Š: %C5%A0
ž: %C5%BE
Ž: %C5%BD
ć: %C4%87
Ć: %C4%86
đ: %C4%91
Đ: %C4%90
ä: %C3%A4
Ä: %C3%84
ő: %C3%B6
Ő: %C3%96
ű: %C3%BC
Ű: %C3%9C
ß: %C3%9F

So in my case instead of Študije I have to use %C5%A0tudije to have Flash spell out the correct word.

Update: Thanks to Jose here's a list of other special characters to use. There are no č, ž, š in that table so it's a nice complement to this post.

http://www.adobe.com/go/tn_14143

What to do if users don't have flash?

Not everybody has Flash installed. It's quite easy and free to install it, but still there are some cases that simply someone viewing your website might not have Flash player installed. You can put an alternative content for users that don't have flash player installed. So instead of your flash animation you still can display HTML.

This is super, because if you have your whole site built in Flash you can still make HTML substitute for the ones without the player.

Thanks to Deconcept's SWF Object script file...

Simple to integrate and simply works :)

Click to activate and use this control?

If you're keeping your computer secure and up-to-date with updates, you've probably noticed that in Internet Explorer you have to first click on the flash animation or any other object (such as movie, etc) to be able to interactively use it.

Here's a screenshot of what I have in mind.




I understand that Microsoft is trying to protect us from unwanted actions in our computer but if as a web developer this bothers you, I've found a solution.

Here's one from Macromedia:

http://www.adobe.com/devnet/activecontent/articles/devletter.html

And personally I like the solution that I've found on Amara Software site:

http://www.amarasoftware.com/flash-problem.htm

And the flash works... Until next update :)

Having problems with your flash animation?

Here's a problem that I've had:

I'm working on a website and I received a flash animation to put it it. The problem was that the site also included DHTML menu with layers. The problem is, that the menu layers don't want to display above flash animation.

A screenshot of the problem:





The solution is very simple: Just add <PARAM NAME="wmode" VALUE="transparent"> to the flash object tag, like shown below:





And voila. Works for me: