New Media Fun

Ever needed to convert a PowerPoint presentation to a Flash SWF file? Well, Open Office Impress is your solution!

Simply, open your PowerPoint file in Impress, choose to export the presentation. When the dialog box appears, change the file format to Macromedia Flash (SWF). Impress then creates a flash file that has all your slides and includes functionality to advance by clicking on a slide.

Impress does a fine job and for most people that would be good enough in most situations. A recent project the presentation flash file was almost 2 MB and I wasn’t satisfied with the usability of just clicking on the slide. I used SWF Decompiler to extract the SWF file into a FLA file that would allow me to customize the presentation.

Once inside the flash file, I removed the hidden layer that allowed the user to click on the presentation. Each slide takes up 3 key frames, I reduced the keyframes to one per slide, this will be helpful when using ActionScript to advanced the slides. In the first keyframe of the actions layer, include stop(); to prevent the presentation from animating through all the slides.

Just be aware that when you are using SWF Decomplier some graphics and/or text might get altered or blocked from being created.

I then created a simple Flash holder that has a loader and a control module to allow the user to click through the presentation and go fullscreen.

You can see this work in action at Curriculum Commons.

If you haven’t heard about HTML5 Boilerplate yet, I recommend you watch this video and then try it out for yourself.

Go to HTML5 Boilerplate

I have been creating a form that I want to validate. However if the user clicks on the enter key it submits the form before it is finished. I found a simple jQuery script that does exactly what I need:

I modified this from Code Snippets.

A while ago I discovered that Google offered a tool on Google Code that lets you compress/optimize the code to almost half the size of the original script.

I had always noticed that a lot of libraries such as jQuery, Moo Tools and various plugins have regular and optimized versions. It wasn’t clear to me how this compression was achieved. Then I stumbled upon Closure Tools by Google.

The Closure Compiler compiles JavaScript into compact, high-performance code. The compiler removes dead code and rewrites and minimizes what’s left so that it downloads and runs quickly. It also also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain. You can use the compiler with Closure Inspector, a Firebug extension that makes debugging the obfuscated code almost as easy as debugging the human-readable source.

I was able to successfully use the complier to apply simple compression to my code. There is an advance setting, however, my code isn’t good enough for that level of optimization yet.

You can try the complier yourself at Google Code.

I was dealing with an array full of years (2009, 2009, 2010, 2010, 2009, 2010), and I wanted to easily remove duplicate entries in the array.

I found that jQuery had a .unique() function that removes duplicates. However, there if the duplicates are not in a sequential order, it will miss some of the items in the array.

This returns 2009, 2010, 2009, 2010. The function missed a couple of the duplicates. This is simply fixed by sorting the array and then passing it into the unique function.

This should then return 2010, 2009. Hope this helps.

!! UPDATE !!
I hate Internet Explorer. I just discovered that the .unique() function works with DOM objects and because IE sucks, it doesn’t work properly. So, I had to replace the .unique() with the following code:

More code, but it works in all browsers now.

Thanks to Developer Snippets for the code

Impulse Studios have an updated Cheat Sheet for jQuery 1.4.

Here is the PDF

Or a handy HTML version at Future Colors.

Today, I needed to create a swap image for a left hand navigation. I am already using jQuery and I didn’t want to use Dreamweaver’s clunky image swap code. After some searching I found a great and simple snippet of code that will allow me to swap images all the images in the navigation with only 4 lines of code while using jQuery.

Be sure to have a naming convention with your images. Images for off states will be xxxxxx_off.jpg and the hover state xxxxxx_on.jpg. Also add the class “img-swap” to the images.

Big thanks to Design Chemical, click on the link to see their example.

I have become a big fan of using BulkLoader. It is a great class library that allows me to load many different types of files in a controlled and organized fashion. However, it isn’t clear on how to load CSS.

I assumed I would be able to use a “getCSS” function, but there isn’t one coded into the class structure.

To get around this I used the loaded CSS file as a String and then used the parseCSS() function to convert the String into a usable CSS Object.

Hope this can be helpful for others.

Here is a list of handy character codes I use on a regular basis:

• ampersand (&): &
• non-breaking space ( ): #&160;
• copyright sign (©): ©
• degree sign (°): °
• fraction one quarter (¼): ¼
• fraction one half (½): ½
• fraction three quarters (¾): ¾
• en dash (–): –
• em dash (—): —
• left single quotation mark (‘): ‘
• right single quotation mark (’): ’
• left double quotation mark (“): “
• right double quotation mark (”): ”
• horizontal ellipsis (…): …

For a complete list of Common HTML Codes

Not used very often these days, but every now and then you need to automatically re-direct visitors to a different URL as seamlessly as possible.

This can be achieved easily by inserting: