BRUSCA

Hints and tips on Designing for Web 2.0 Websites

Posted by Brusca under Adobe, Design, Dreamweaver, Fireworks, Flash

A Web 2.0 site is supposed to charm its visitors with its simplicity and ease of use. So, if you’re designing a Web 2.0 site, remember it has to be very interactive and user friendly.

Read on at HubPages

HTML5 Video Playback…

Posted by Brusca under Adobe, Apple, Design, Dreamweaver, Flash, Video, iPhone

I just finished up watching the latest Diggnation and was quite surprised to hear Alex Albrecht and Kevin Rose claim there was no reason to use the flash video playback anymore. As you can imagine I was astounded at this notion. Video playback through the Flash player on the web has been a major part of my focus for more than 5 years now and the next best options are not even close.

I for one have not yet delved into building HTML5 pages yet, so I thought I would do a quick test. As a quick test I spent 5 minutes adding a video tag to an HTML page and linked a video to it, excellent! Fast and easy, what everybody likes. So I tested this on Safari first, knowing this browser seems to support HTML5 the best, and no worries there. Next Firefox 3.6, see the resulting screen shot below. Turns out FF supports the video tag but not the H.264 codec. So because of this you cannot use alternative content, like say the flash plugin just in case your browser does not support that specific tag. You just get a big grey box. Check out how the video presents in your browser http://www.brucelevick.com/html5.html.

So without even getting to the most commonly used browser on the market there is already a big issue of the different codecs supported in different browsers (Flash plays the same codecs no matter what the  browser), with no control that I can see if one of these codecs is not supported. As for IE, the most commonly used browser, no support whatsoever for the video tag. Yes I certainly should ditch my Flash video playback (sarcasm if you didn’t pick up on it.) . I will say one thing that at least with browsers that have no support you can implement alternative content. Until IE supports some other codec the others don’t, then HTML5 video playback is going to be a nightmare to manage.

Check out how your browser measures up. http://html5test.com/

Also check out the “limited” attributes the HTML5 video tag has. http://www.w3schools.com/html5/tag_video.asp. Don’t even get me started on the comparisons to the Flash video functions.

Sorry for the rant, I just find this very frustrating to hear industry geeks make ridiculously uninformed statements, and that the (video playback) wheel is being reinvented so to speak. Lets not go back 10 years and go through that same teeth pulling revolution we went through 10 years ago. I can’t go through that client heartache implementing elements working on one browser and not the other, not again. HTML5 video playback… not for a while.

Recent Projects

Posted by Brusca under Design, Dreamweaver, Fireworks, Flash, Photography, Tanzania, Video

Currently I am continuing to develop the Australia Zoo TV project. This is a very exciting project and has a lot of potential to do well and delivers some great video content, spreading the message of Conservation. www.australiazoo.tv. Developing the website, filming the Rescue Unit, editing and producing the episodes has been a huge challenge, but one I have fully enjoyed.

Carpet Python

Another recent project is for a very good cause. Humanidee (www.humanidee.org). I met Dee through the fodder of Twitter after my trip to Tanzania. Dee has set up Humanidee to help people in need all over the world. Currently Dee is in Tanzania volunteering and helping out The Tanzania Albino Centre in Arusha.

Humanidee.org

Using Online Video to Market Your Business

Posted by Brusca under Australia Zoo, Design, Flash

Recently a colleague (Yvette Adams @ www.thecreativecollective.com.au) invited me to speak at a monthly meeting in the local region called “Web Wednesday”. The focus of this meeting was how to market and build your business by using online video. I have made a point to focus heavily on online video in the past 4-5 years as there has been a big shift over that period and it is still evolving. With the continuing advancements of broadband, the Flash player and Flash Media Server and sites such as www.youtube.com, www.vimeo.com and content providers www.hulu.com and www.revision3.com now is the time to start moving your business into the world of online video.

I could talk in detail about a lot of the points in the following SlideShare presentation for hours but this presentation was more geared towards touching on the important elements of online video and related marketing techniques. We even got a mention in the Sunshine Coast Daily.

Check out the SlideShare power point article below for more details and links to some awesome examples. I think I will blog in detail about some of these examples in the near future.

Sunshine Coast Daily article

Blast from the Past – Andy’s Art Attack

Posted by Brusca under Animation, Design, Flash

When I started the process of developing my web design skills to compliment my pre press experience around 1996-7 there really wasn’t a lot to go on in terms of online resources for advice, learning and inspiration to develop your skills in this area. There certainly was nothing in terms of classes and university courses. Of course these days online resources are a dime a dozen and there are many design blogs out there discussing best practices and showing off some amazing designs. Over the course of the past 12-13 years, many courses and subjects have flourished in the industry of web design and web development, making their mark on university campuses around the world, creating jobs that did not exist only a matter of a few years ago.

In 1997 web design resources were seldom, I  soon discovered a website called AndyArt.com (now Scream Design), or Andy’s Art Attack created by Andy Evans of Utah. In 1997 this was for me the benchmark in web design, cleverly placed and animated gifs with rollovers with a 3D look and feel. It was something to behold and at the time there was nothing around to match the way Andy had carefully sliced and animated the individual images. Of course then I downloaded FutureSplash (bought out by Macromedia and now Adobe Flash), and the rest is history (a blog for another day).

Andy's Art Attack was one of the only online resources around in the 90's

Andy’s site grew into a plethora of FREE images, tips and tutorials on how to get the best results for designing for the web. He even had a CD rom for sale which I purchased by faxing payment details to the Untied States, and I still have it to this day. I couldn’t believe my luck in finding this awesome resource and it really catapulted my transition into screen design and inspired me from early on. Andy inspired me and helped me transition into full time commercial website design and development and I am happily still going strong to this day. So if you’re out there somewhere Andy, cheers my web Brother.

The CD Rom I purchased in 1997, started me on my way to transitioning to screen design

Tutorials was something of hige value back in the day

Update: New post and the old website

New Actionscript 3 Australia Zoo Banners

Posted by Brusca under Adobe, Australia Zoo, Flash

We just launched the new home page for the Australia Zoo website. This has some very nice features. New flash banners and an Ajax accordion to help deliver fresh daily content.

Below are some examples of the flash banners and a flow of how the display object works loading in the flash banners.

The home page flash banner loads in external (swf) banners and can currently take 1,2 or 3 banners rotating through. Each banner can have sound but is not critical and is developed to handle both regardless.

The initial swf stage file is only 24kb and loads each banner individually on a Timer() function. The stage is set to scale and will align the externally loaded banners to the center of the stage upon loading and if the stage is re sized.

Banner 1 of the new Australia Zoo Banners

Whale watching banner, from the new Australia Zoo banners

Showing the display objects and how they load the flash banners

Above you will see the displayObject layout for loading in the external banners. As mentioned the banners load in on a Timer() function and iterate through the length of a banner array, which is being passed through the swf object embedded in the page. This allows us to develop banners and add them dynamically without having to alter a core file.

If an individual banner has an existing sound file, this is also loaded externally to the swf file and stops the Timer() function until the sound has completed playing. Once sound is completed playing the timer will start and continue to rotate through the banners.

Also displayed at the bottom left of the banners are banner buttons, allowing a user to click through to a banner at anytime.

There is some more work to be done on fine tuning these. Creating AS3 packages, making the banners even more modulated. Allowing for the sound to be turned off permanently using stored objects so upon multiple refreshes the sound is switched off.

Check them out here www.australiazoo.com.au.

Simple AS3 Particles using TweenLite

Posted by Brusca under Adobe, Flash

Particles in AS3 using the TweenLite engine. Code is below, very easy to follow.

//import the tween classes
import gs.TweenLite;
import gs.easing.*

//create the container and particles
var particleCotainer:MovieClip = new MovieClip();
var particleArray:Array = new Array();
var particleArrayb:Array = new Array();
var maxParticles:Number = 200;

//add the particle container to the display
addChild(particleCotainer);

//create the function to add the particles
function addParticle(e:Event)
{

var dot:Particle = new Particle();
var dotb:Particle = new Particle();
particleCotainer.x = stage.stageWidth/2;
particleCotainer.y = stage.stageHeight/2+120;
dot.scaleX = dot.scaleY = Math.random() * .8 + .2;
dotb.scaleX = dotb.scaleY = Math.random() * .6 + .1;
dotb.xMovement = Math.random() * -200;
dotb.yMovement = Math.random() * -200;
dot.xMovement = Math.random() * 200;
dot.yMovement = Math.random() * -200;
particleArray.push(dot);
particleArrayb.push(dotb);
particleCotainer.addChild(dot);
particleCotainer.addChild(dotb);
dot.cacheAsBitmap = true;
dotb.cacheAsBitmap = true;

//create the movement for each particle
TweenLite.to(dot, 2, {y:dot.yMovement, x:dot.xMovement, alpha:.5, rotation:90});
TweenLite.to(dotb, 2, {y:dotb.yMovement, x:dotb.xMovement, alpha:.5, rotation:-90});
TweenLite.to(dot, 8, {y:200, alpha:0, rotation:90, delay:1.5, overwrite:0, ease:Strong.easeIn});
TweenLite.to(dotb, 8, {y:200, alpha:0, rotation:-90, delay:1.5, overwrite:0, ease:Strong.easeIn});

}

//create the timer to call the function. Runs every 100 milliseconds
var myTimer:Timer = new Timer(100);
myTimer.addEventListener(TimerEvent.TIMER, addParticle);
myTimer.start();

Australia Zoo Daily Video Diaries

Posted by Brusca under Adobe, Fireworks, Flash

www.australiazoo.com.au/our-animals/daily-video-diaries/

One of the more recent projects at Australia Zoo has been the inclusion of Daily Video Diaries.

On a daily basis a short 60 second video is displayed, explaining a fact or answering a question sent in by a fan or animal lover. Every single episode has the option to comment and is proving to be a good addition to the Australia Zoo website.

As we say at Australia Zoo, “Conservation through Exciting Education”. Not only can you get this at the Zoo 364 days of the year, you can also get it online.

The Daily Video Diaries are a small preview to the Chat to a Keeper section we do a on a monthly basis. The chats have more details and are generally around 10 minutes in length.