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

Fixing Panoramic Images with Photoshop CS5 Content-Aware in 5 Minutes

Posted by Brusca under Adobe, Design, Nikon D90, Panorama, Photography

The new Photoshop CS5 Content-Aware Fill is a masterpiece. If you are in any kind of design or photography field it is my humble opinion that you should upgrade just for that alone.

Visit my HUB for the full article.

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.

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.

webdu 2008

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

It’s been another whirlwind webdu. As per usual webdu gives anyone with a passion for this kind of work the added motivation to continue to grow and explore new realms as they arise with technology growth within the web world. Sometimes aspects of your work can be demotivating, thankfully there are exciting times ahead.

Flash CS4 has some very nice features. One of them being the use of inverse kinematics. You can now create bone structures to help animate characters from within flash and the bones can be accessed using actionscript.

An example can be seen here at The Flash Blog

New Dreamweaver and Fireworks CS4 beta versions are now available and we got a sneak peek of those at webdu 2008. Some very nice feature like webkit built directly into Dreamweaver.

Google Maps API for Flash. Google have finally released an API for Flash. Meaning we can stop using the Yahoo maps application on the Steve Irwin Day events page and use the much better mapping system from Google, that’s right Yahoo, there is a world outside of the United States.

All in all a good conference, and some very nice new features and toolsets to help us at Australia Zoo deliver RIA’s through the browser and on the desktop.

Now time to sleep!