It’s no secret that I’m a big fan of Adobe Fireworks and just recently I was reminded why.
I was putting together a small job for a client who needed to put the finishing touches onto his website. He has a video trading website and one of the requirements when listing videos for sale is to include a censorship rating. We have about 9 common labels ranging from G through to R .. and in typical fashion the artwork available was pretty poor and needed to be redeveloped. [more]
Like so many businesses, Creative Space had a web site that simply didn’t reflect the nature and quality of their work. Until now that is.
Creative Space are a Tauranga based architectural studio who had outgrown their previous web site. They needed a new look to aid in a marketing campaign and it needed to be very clean and very sharp .. just like their work.
Sometimes you want to be able to show an object in 3d on the web. If you are looking for a high quality render then the best way that I know is to use pre-rendered footage and import that into flash. Sure it’s not a true 3d environment but the end result is very convincing. Let me show you how I made the example here.
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.
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. [more]
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. [more]
About two years ago I designed and built a nice looking web site for a local motel and holiday park, Accommodation Te Puna. It was Pauline’s (owner) first foray into the internet and the site served her well over that time. But times change and with some more exposure to the internet, Pauline wanted to start putting a bit more time into her website and use it to generate more leads.
Pauline contacted me a couple of weeks ago to make some changes. She’d just been talking to a chap all about search engine optimisation and marketing as well as social media and networks and she wanted to make some changes to her website so she could be a bit more proactive in these areas. Read how redeveloping Pauline’s website helps to generate more leads.
I’ve been a long time reader of the smashing magazine website and ordered the Smashing Book (www.smashingbook.com) the day it was released.
Anyone that’s familiar with smashing magazine knows that it’s packed full with some really useful articles in the web and design industries.
I’ll find some time over the next couple of weeks to get through the bulk of it and let you know what I think. I’ve managed a quick skim through today and so far it’s looking quite promising.
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.
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.
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 the current sentinelmonitoring.com 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.
All bets are off
Aharon Rabinowitz website with some great After Effects tutorials and advice.
Freelance Switch
A great resource for Freelancers everywhere with a superb podcast, Freelance Radio. Available on iTunes so no excuses for missing this one.
Motionworks
John Dickinson is doing a stellar job for anyone interested in After Effects or Motion Graphics in general.
Ponoko
Because being able to upload a design file and get it made into a real product is awesome.
Videocopilot
With his fantastically dry sense of humor and superb motion graphics / vfx knowledge, Andrew Kramer’s site is not to be missed.
It’s no secret that I’m a big fan of Adobe Fireworks and just recently I was reminded why.
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.
