September 19, 2012

Embed Flash SWF resources inside web part in SharePoint 2010

SWF Flash in SharePoint 2010

If you are looking for a quick and easy guide on how to embed shockwave and flash files (.swf) into web Web parts then look no further!
As it is a bit different to embed .swf files (and other resources) into SharePoint 2010 than it was in SharePoint 2007, I split the procedure into 2 parts: the Visual Studio part and the SharePoint part.

 The Visual Studio Part:

1. Copy the resource file (.SWF) file inside the Visual Studio project folder directly, or put it in a custom folder.

2. Select the .swf file -> properties -> set the build action property into ‘Embedded Resource’

3. Now, construct the resource FILE-PATH as: ProjectName.FolderName.FileName.Extension
My project’s name is: ‘EmbedResources’, and the file ‘Clock.swf’ is directly under the project. Then the FILE-PATH will be: “EmbedResources.Clock.swf”

4. In AssemblyInfo.cs put the following line (use the FILE-PATH from point 3 above):
[Assembly: System.Web.UI.WebResource(FILE-PATH, “application/x-shockwave-flash”)]
[assembly: System.Web.UI.WebResource("EmbedResources.Clock.swf", "application/x-shockwave-flash")]

5. In Web part code file, you can put the following code inside the RenderContents() method:
(use the FILE-PATH from point 3 above)
This.Page.ClientScript.GetWebResourceUrl(base.GetType(), FILE-PATH)
string path = this.Page.ClientScript.GetWebResourceUrl(base.GetType(), "EmbedResources.Clock.swf");

6. To display the flash put the following script:
string str = string.Concat(new object[] {
"<OBJECT classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" codebase=\",0,0,0\" width=", "120", " height=", "120", "> <PARAM NAME=movie VALUE=\"", path,
"\"> <PARAM NAME=wmode VALUE=\"Transparent\"><PARAM NAME=quality VALUE=high> <EMBED src=\"", path,
"\" quality=high wmode=\"transparent\" width=\"", "120", "\" height=\"", "120",
"\" TYPE=\"application/x-shockwave-flash\" PLUGINSPAGE=\"\"></EMBED></OBJECT></p>"

Now install the web part solution into your SharePoint site, but we are not there yet!

 The SharePoint Part:

These are pretty much requirements, make sure you check every point here in order for the swf file to actually run:

1. Install Adobe (formerly Macromedia) Flash or Shockwave player for your browser.

2. Enable Active-X components on your browser

3. SharePoint 2010 is a little bit acts as ‘defensive’ against browser scripts and files. To overcome this, go to Central Admin -> App. Manag. -> Manage Web App. -> SharePoint 80 -> General Settings -> General Settings -> set the Browser File Handling to “Permissive”

Now, you can add the web part to page and enjoy the animations J

Note: For embedding resources inside Sandboxed web part, Joel Jeffery a good post here:

September 8, 2012

Snow on your SharePoint!

How about bringing winter right into your SharePoint site?
I found this cool javascript project made by Scott Schiller here. According to project website, there are 2 files, either one can be used:

snowstorm.js --> is the general code
snowstorm-min.js --> optimized, minified version (~40% smaller 'ice')

Now I summed up the steps required to implement this effect on SharePoint 2010/2007: Before you begin, you have to download the 2 files "snowstorm.js" and 'snowstorm-min.js" from the site, then upload these files into the SharePoint site such as in Style Library or a custom folder in it.
There are 2 methods to run snowstorm effect in SharePoint 2010 and 2007:

Method A: Editing the Master page

Use this method when you want the snow effect over all site pages.

1) Using SharePoint Designer, Open your master page file such as 'V4.master' for SP2010 or 'default.master' for SP2007, or you can a specific master page and name it "snowstorm.master".

2) Within the <head> tag of the master page, add a script reference to the javascript file just above the content place holder named "PlaceHolderAdditonalPageHead" (and above your custom CSS references, if applicable) as follows:

<script src="/Style%20Library/snowstorm.js" type="text/javascript"></script>

3) Save the changes to master page. If this a specific master page then apply it to a specific site page.

Method B: Editing the ContentEditorWebPart

[as done by Shoban in here]
Use this method when you want the snow effect over a specific page such as only the home page.

1) Open your SharePoint page and add a Content Editor WebPart.

2) Edit the HTML Source for the content Editor WebPart, add the following code:

[sourcecode language="javascript"]
<script src="/Style%20Library/snowstorm-min.js"></script>

3) set the Chrome Type for the Web Part as 'None', and set Chrome State to 'Minimized'.

4) Save and Exit Edit mode.

After you finish with either of the methods above, open the site page and enjoy the snow. Thats it!

Note: select a suitable theme or customize one so that the snow particles shows clearly.

The Result..

Do you think there are other cool effects that can be applied to SharePoint? please share ideas.