Quick Tip: Activating jQuery from Flash

Posted by

Calling a javascript function from within Flash is pretty simple. Here’s how you can use it to run some jQuery effects .

I used this technique when creating the Snowberrybeauty.com website. With this website the background was entirely done in flash with the HTML elements stacked over the top.

For the homepage of the site I hid most of the HTML elements with CSS … then just before the Flash intro has finished playing, I called the javascript function below. This faded in the HTML elements just as the intro came to a stop.

Here’s what you need.

1. In your web page set up a javascript function to fade in the desired elements.

function showHtmlElements(){
$('#element1').fadeIn(1000);
$('#element2').fadeIn(1000);
}

2. In flash, when you want to activate the function, just use some simple actionscript like this.

getURL("javascript:showHtmlElements();")

That’s all there is to it. Easy.

Site Launch: Snowberry Beauty

Posted by

Snowberry Beauty is a fantastic looking site and it’s made all the more impressive by adding animation to key components with jQuery.

Snowberry Beauty originally had their website designed and built entirely in flash. The only problem was that it was horrendously difficult to manage and their original flash developer was no longer available.

They were in a bit of a bind so I suggested that they rebuild their website with HTML, that way any web developer worth his salt should be able to maintain it. It would also be more searchable and quite simple to develop an administration interface so that they could add new items and articles as required.

They were very particular about the look of the site, and rightfully so as I am guessing they paid a fair amount for it originally, so what about all the gorgeous animation that was done in flash? Well … We can do that in HTML these days. Enter jQuery.

I was the sole developer on this project it presented a number of challenges. I like challenges and two of them I will mention here were the animation and the custom typeface.Read More  »

Super simple email marketing with Mailcall.co.nz

Posted by

Most businesses could really benefit from a solid email marketing solution. It’s an extremely handy tool to have in your arsenal and its so effective and affordable that you just can’t ignore it.

I’ve talked to a lot of people who agree that email marketing should be really beneficial to their business. Many of them have given it a go by trying to use Outlook to handle their email marketing. While you can technically send a stack load of email to people with Outlook let me tell you why it’s a very bad idea and complete waste of time and money.Read More  »

3D animated clouds in Flash CS4 from a photo

Posted by

I’ve recently been putting together an opening sequence for a website I’m developing for a local architect. While I was putting this together it got me thinking that it would be quite nice to animate the clouds moving slowly through the scene. I wanted the effect to look convincing but I don’t want to have to render a 20 second video sequence because it would make the file size too large. Enter Flash.

I remembered a video tutorial I watched over at Aharon Rabinowitz’s web site, www.allbetsareoff.com.
The tutorial is “Creating 3D Cloud Motion From a Still Image“. Aharon’s tutorial is designed for Adobe After Effects and the end result is very effective so I thought I’d try something similar in Adobe Flash CS4.

You can view the final effect here (the animation is quite subtle) then follow on for a step by step breakdown of how the effect was achieved.

3d animated sky in flash cs4

View 3d sky animation

Read More  »

Motion graphics logo reveal for Sentinel

Posted by

As well as operating my bread & butter freelance web design business I have recently been devoting more time to learning motion graphics techniques and finding some practical applications.

I developed the logo reveal piece that you can see below for an upcoming server and website monitoring product called ‘Sentinel’.

Sentinel is primarily a web based service that scans your website or server to check if specific services are running.

I wanted to visualize the scanning process and imagined a futuristic robotic style eye that scanned objects with a beam of orange light (yes I possibly have watched too many sci-fi movies).

This was created using Adobe After Effects with Fractal noise, CC Sphere, and a little bit of Trapcode Form. It was also created by lots of learning and the great resources from Andrew Kramer’s www.videocopilot.net and John Dickinson’s www.motionworks.com.au. If you are at all interested in motion graphics then I highly recommend checking out their sites.

I also made another version of the scanning effect and used it as the background animation for sentinel beta website. It takes a few seconds to load as it’s about 150KB.

To do this I rendered out an FLV from After Effects, used it as the basis for a Flash movieclip and then overlayed the text that I wanted to appear. I changed the blend mode on the text so that it would only appear during the brightest parts of the underlying animation and then rendered out a .swf movie. From there I inserted the swf into a web page, set the wmode to ‘opaque’ and then stacked the html elements over the top. Pretty straightforward but very effective.

Web design qualifications. Do they matter?

Posted by

Not so long ago I had a prospective client ask me what my web design qualifications were. I thought about it for a moment and replied “Err none actually”.

I rattled off all the years of experience I had. How I got into the internet in 1996 and went on to work with some of the big names in New Zealand’s internet industry. I explained how myself and a couple of friends revolutionized the web hosting model in New Zealand with the launch of iSERVE limited back in 2001 and how I ended up doing a stint of teaching at a tertiary institution and, more recently, was involved in starting a small web and interactive design company.

All of this accounted for absolutely nothing in the eyes of this prospective client. He wanted to see a piece of paper that said “Mark Shingleton has completed web design 101 and now knows how to build web sites”.

Read More  »

Motion graphics entry for Motionworks challenge

Posted by

Though I’m primarily a web designer I have recently become interested in motion graphics … and I have to admit it sure is a lot of fun.

One of the web sites that I frequent is www.motionworks.com.au. Motionworks is run by John Dickinson and one of the many resources that he has is a great interview series called ‘Unplugged’.

John decided to get the community involved in submitting concepts for a new opener for the series and has issued a challenge.Read More  »

Cross browser testing with Adobe Browser Lab

Posted by

Cross browser testing is one the realities of creating web sites & web applications and it’s one of those things that can be a bit of a headache from time to time.

My setup here is pretty standard. I have a newish iMac for my day to day work as well as a Windows laptop. On the mac I run Firefox and Safari while on the laptop I have IE6, IE7 & IE8. That covers me pretty well for the majority of browsers but sometimes I’m working off site, my laptop is playing up or I need to show a client how something looks in IE6 vs Firefox 3 … enter Adobe Browser Lab.Read More  »

Time tracking & billing with Harvest

Posted by

harvestRecently I was looking for a solution to handle my invoicing, a job which we all no doubt both love and loath .

Most invoicing systems that I have encountered are smaller parts of large accounting systems and designed with accounts people in mind. But for someone like myself, who is most definitely not an accounts person, they can leave me somewhat confused and cold. I just want it to be simple.Read More  »

Dropbox. File syncing that works

Posted by

dropboxForget iDisk, forget FTP, Dropbox is the easiest way to store, share and sync your files on the internet.

I was pretty content with using email to send files to clients and had tried to use iDisk or a thumb drive to make my files relatively portable. All was well and good until my thumb drive went through the washing machine, my iDisk stopped syncing and my client’s mail server rejected my attachment because it was too large.Read More  »