Smart AS3 Video Loading with GreenSock LoaderMax – Free Active Premium!

Michael B on Oct 7th 2010 with 17 comments

Tutorial Details

Difficulty: Intermediate
Platform: Platform: Flash (FP 10.1)
Languages: AS3, XML
Software used: Flash Professional CS4+
Estimated Completion Time: 25 mins

This entry is part 2 of 11 in the GreenSock Tweening Platform Session
« Previous Next »

This week’s Active Premium tutorial is a cracker! The best news is that we’re making it available to all Activetuts+ readers to give non-members a taste of Premium goodness. Read on to find out more and download the tutorial.

Download Premium Files

Demo View It Online

This Premium Tutorial is Filled with Creative Tips

In this tutorial we will be using GreenSock LoaderMax‘s VideoLoader to build a simple, lightweight, XML-driven video player that intelligently preloads multiple videos, plays them sequentially (with crossfade transitions), has play/pause/next/back/mute controls and a progress/seek bar.

LoaderMax is a new AS3 loading system from GreenSock that does for loading what TweenMax and TweenLite did for tweening – makes things so much easier and more intuitive.

This tut was written by interactive developer Michael B with further contribution by Jack Doyle, the man behind GreenSock :)

What am I Downloading?

Everyone can download this tut! If you’ve always wanted to know what you get when you download a Premium tut, or purchase a file from the Tuts+ Marketplace, now’s the time to take a peek. Interested in writing for us? This is also a great example of what we’re after.

And don’t forget, for the price of a takeaway pizza you can Join Premium Now and enjoy masses more Premium content from your favorite Tuts+ sites.

Professional and Detailed Instructions Inside

Active Premium Membership

We run a Premium membership system which costs $19 a month which periodically gives members access to extra tutorials, like this one! You’ll also get access to Psd Premium, Vector Premium, Audio Premium, Net Premium, Ae Premium and Cg Premium too. If you’re a Premium member, you can log in and download all the tutorials. If you’re not a member, you can of course join today!

Also, don’t forget to follow @activetuts and @activeden on twitter and grab the Activetuts+ RSS Feed to stay up to date with the latest tutorials and articles.

Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By Michael B

Rollover to read this author's bio or click through to see a full list of posts by this author.

Michael is an interactive developer with an extensive understanding and practical usage of industry leading design standards for media applications. He is experienced in a wide range of media formats that include, broadcast and web video, graphic print and web design, sound design and mixing, DVD authoring and various current web coding languages for UI component applications. While knowledgeable, resourceful and open to learning new concepts, Michael has a keen sense and passion for emerging interactive technologies, their viability, requirements and relationships to each project, as well as assessing their feasibility for usage on future client work. He has demonstrated an ability to lead a project while still working closely with a team, giving it his undivided and enthusiastic attention.

Plus Premium

betraydan

Great ! , nice to see what a premium tut is all about.
http://www.arielgarciadesigndevelopment.com/ Ariel

Nice tutorial, nice and clean video player
Ben Stanley

Awesome! Thanks for the free tut guys :D
livelybrowsers

Thanks for good stuff
Monkey

Is it not posible to save the .fla as a backwards compatible cs3 file? – Some of us dont just steel the latest version and cant justify the expense for the few new features that adobe have aded.

http://codeknow.com michael B

@Monkey ,
the demo of cs5 is free… You can download the trail and down convert the source however you see fit…
hope that helps

michael B

Ben

Thanks for the tutorial, however when I tried following through I got to step 11 and got an error “1118: Implicit coercion of a value with static type com.greensock.loading.core:LoaderCore to a possibly unrelated type com.greensock.loading:LoaderMax” at this line:

var queue:LoaderMax = LoaderMax.getLoader(“videoListLoader”);

I figured it must be something I did but I’m getting the same error when I try and complie the version in the finished folder.

Any ideas where I’ve slipped up? I have the com/greensock in the src directory.

Thanks in advance.
Ben

http://www.greensock.com Jack

Ben, it sounds like you must have a stale version of LoaderMax. In early versions, the data type of getLoader()’s return value was LoaderCore, but in more recent versions it is untyped (*). Make sure you get the latest version at http://www.greensock.com/loadermax/ and you may need to clear your ASO files to make sure your Flash install isn’t keeping a cached stale version around. You could just cast the return value as a LoaderMax to avoid the error of course. Also, if you’re having any trouble it would probably be best to post your question in the forums at http://forums.greensock.com

Josh

Hi, great tutorial!, but i have a problem , when i move from one swf to another , the sound of the video player continue, is some type of bug or what im doing wrong??

http://codeknow.com michael B

Author

You mean your loading swf’s and not flv or other movie types?
Not sure I follow you exactly… please explain..

thanks.
http://www.greensock.com Jack

Josh, when you say “move from one swf to another”, do you mean one video to another? Or are you subloading a swf that has this video player in it and then trying to dump that swf and load another? If that’s the case, make sure you dispose(true) the VideoLoaders so that the NetStreams are properly closed and discarded.

If your videos don’t crossfade properly, you must not be following the tutorial exactly or maybe you don’t have the classes installed. Tough to say without seeing your files, but I can assure you that going to the next/previous video crossfades the audio (as you can see in the demo link above). Feel free to post your files and/or questions in the forums at http://forums.greensock.com

http://www.e11world.com e11world

These are excellent freebies and I just want to thank you very much for this!
ctmanic

What woudl you reccommend for a dipsose function? You have a lot of Event listeners there. I saw your comment : “if that’s the case, make sure you dispose(true) the VideoLoaders so that the NetStreams are properly closed and discarded.” Sounds good, this would be a good function to include.

-ctmanic
ctmanic

I amde a closeAll function like this:
public function closeAll():void
{
if(stage.hasEventListener(MouseEvent.MOUSE_UP)){
stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpScrubber);
}
if(stage.hasEventListener(MouseEvent.MOUSE_MOVE)){
stage.removeEventListener(MouseEvent.MOUSE_MOVE, scrubToMouse);
}
//unload and dispose the videoloaders
var i:int = _videos.length;
while (i–) {
VideoLoader(_videos[i]).unload();
VideoLoader(_videos[i]).dispose(true);
}
TweenMax.killAll();
}

dunno If I need to do more.
fjckls

very nice, thanks!
Nikolai

I am working on implementing the “Smart AS3 Video Loading with GreenSock LoaderMax” covered on http://www.active.tutsplus.com
Here are a few logistics problems I run into.
Here is my present set up. I have a section on my website with a list of around 10 videos represented by the image icons.
Each video is scripted to go to a corresponding labeled section on the main time frame where FLV Playback component would be implemented.

When I am implementing “Smart AS3 Video Loading with GreenSock LoaderMax” what should be my desirable set up?
Do I keep braking the main timeline into labeled sections for each video and implementing the AS3 Video Loading with GreenSock LoaderMax code on every single labeled section, essentially ending up having around 10 (by the number of my videos) different Video Loaders?

Is it better to put the entire video loader coding directly on the main time line or call it in via LoaderMax as a single .swf file?

If I have 10 different video buttons/links and each one of them has to open a corresponding video how would I use the next/prev feature in the video loader. Does it mean that for every single video I have to create a unique XML file where that video is in the number one position and the rest is arranged accordingly?