Think2Loud » Flash

Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin

Josh — Wed, 10 Sep 2008 03:09:36 +0000

The first thing you need to do is get jQuery set up and running. Once you have that done, I recommend the jQuery Flash Plugin for embedding your Flash movies, but you can use any method you like. Now you need to download and include the jQuery FlashResize Plugin.

With the plugin included and ready to use, we need to get it running. You will need to have an element to use as your placeholder. The body tag can be used, but I always use a container element, usually a div.

<body>
     <div id="flash-scroll">
          <p>Html to be replaced by 100% Flash.</p>
     </div>
</body>

With the HTML set up for the scroll bars, you simply need to add the call to the FlashResize plugin in the document.ready function. The plugin only has two parameters minWidth and minHeight. If you don’t specify a value, then the Flash container is set to 100% and no scroll bar is added.

So just set the parameters to your minimum values and that’s it. As you can see below, the Flash has been set to a minimum of 800 by 750.

$(document).ready(function() {
	$('#flash-scroll').flashResize({
  		minWidth: 800,
  		minHeight: 750
	});
});

If you would like to see this plugin in action, check out the demo.

.zip .js only Demo

Add Scroll Bars to Full Browser Flash with a Simple jQuery Plugin

Function Override for AS3?

Josh — Fri, 22 Aug 2008 04:30:41 +0000

Where I work it’s hard to get everyone on the same page, so it is nice to have some classes written that they can pull from. It certainly makes my life easier when they ask for help because everything is broken. Now I have this great class that is sometimes pulled into an FLA on the TimeLine. By default, the gallery rotates the image after 4 seconds. What if someone wanted to completely change the rotation or fire other events when the first photo tweens in?

To solve this issue, here is what I did: I am not sure that this is the best way, so if you have a better way, please send it to me. Once my class was finished, I decided I needed to expose part of it to the TimeLine. I created a private variable that was of type Function. Then I used “get” and “set” functions to change that variable.

variable setup:
private var _galleryTweenFunction : Function = defaultImageRotation();
then I added the “get” and “set” functions to my class:
public function set galleryTweenFunction ( newFunction:Function){ _galleryTweenFunction = newFunction; }

public function get galleryTweenFunction (){ return _galleryTweenFunction; }

My class is set to call galleryTweenFunction when it’s time to rotate the images. It passes two MovieClips to the function, one being the photo to fade in and the other the photo to fade out. So now the function can be changed by someone on the TimeLine without having to edit the class.

Changing the function on the TimeLine looks something like this using TweenMax:
var myGallery:gallery = new gallery(); myGallery.galleryTweenFunction = function(fadeIn:MovieClip,fadeOut:MovieClip){ TweenMax.to(fadeIn,2,{alpha:1}); TweenMax.to(fadeOut,2,{alpha:0}); }

I also have a get and set for another function that is used to run events when the first photo begins–it transitions in. The class calls this function when the first photo is loaded and ready for animation. It passes the MovieClip the photo is in. So then someone can also just override this function.
myGallery.showFirstImage = function(FirstImage:MovieCliip){ doSomeStuff(); TweenMax.to(FirstImage,1,{alpha:1}); }

This worked great for me. I hope it can help you out as well.

Function Override for AS3?

A List of Tweening Classes for Flash

Josh — Sun, 17 Aug 2008 03:59:27 +0000

Since we are getting ready to finally make the switch to ActionScript 3 at work, it is nice to have a version that is written for both AS3 and AS2. This will hopefully allow for fewer issues as we make the transition to AS3.

TweenLite and TweenMax are written by GreenSock. TweenMax is the one that I have been using lately. I also really like the ease of use and the tiny file size of TweenLite. These are ActionScript 2 & 3 ready. (Just make sure you download the right one.)
Fuse Kit from mosesssupposes.com is a great setup for tweening. I have used this many times and like working with it. The only issue is that it is ActionScript 2 only.
Tweener: I have not yet used this. However, some of my friends have used it and love it. I am hoping to test it out very soon. This one is also good for ActionScript 2 & 3.

If you are not already using one of these, I would highly recommend you check them out. If you have something you like better, please drop me a line so I can check it out.

A List of Tweening Classes for Flash