AS3 Banner Template


/ Published in: ActionScript 3
Save to your folder(s)

This is an AS3 version of the banner template I created a while back in AS2. The code has been placed in the accompanying banner.as file, with the exception of a little bit of code within the dynamically-centering button you'll see placed on the stage.

Just like the AS2 version, this is: An empty FLA to be repurposed for creating other banners of varying size. Clickable area is resized automatically to fit the stage size, and a sample button with rollover states is included.

I removed the frames-based animation; you can just add your own as you feel.

(Uses Tweener from http://code.google.com/p/tweener/ )


Copy this code and paste it in your HTML
  1. package {
  2.  
  3. import flash.events.*;
  4. import flash.display.*;
  5. import flash.net.*;
  6. import flash.utils.*;
  7. import flash.text.*;
  8. //import flash.media.Sound;
  9. //import flash.media.SoundChannel;
  10. //import flash.media.SoundTransform;
  11. //import flash.media.SoundMixer;
  12.  
  13. import flash.filters.GlowFilter;
  14. import flash.filters.BlurFilter;
  15.  
  16. //import com.MRM.*;
  17.  
  18. import caurina.transitions.*;
  19. import caurina.transitions.properties.*;
  20. CurveModifiers.init();
  21.  
  22. public class banner extends MovieClip {
  23.  
  24. var dropWidth:Number = 3; // This will put this many pixels between the frame and the MASK/DROPSHADOW elements.
  25. //var loops:Number = 0; // do not change
  26. //var loopsMax:Number = 1; // how many times animation will loop
  27. //var loopDelay:Number = 2000; // time to delay before looping, set in milliseconds
  28.  
  29. var glowIn:GlowFilter=new GlowFilter(0xFFFFFF,0.75,20,20,2,2);
  30. var glowOut:GlowFilter=new GlowFilter(0xFFFFFF,0,10,10,2,2);
  31. var blurIn:BlurFilter = new BlurFilter(2.0, 2.0, 1)
  32. var blurOut:BlurFilter = new BlurFilter(0.0, 0.0, 1)
  33.  
  34. // animation function variables
  35. var pauseHere:Number; // change on each frame; determines how long you want to wait at any particular frame.
  36. var gap:Number; // a delay in between each step of an animation on each frame.
  37.  
  38. var bumpSpeed:Number = .25;
  39. var spinSpeed:Number = .25;
  40. var moveSpeed:Number = .25;
  41. var FADESPEED:Number = .5;
  42. var BLURSPEED:Number = .5;
  43. var BUMPSIZE:Number = 1.25;
  44.  
  45.  
  46. public function banner() {
  47. //init
  48. ColorShortcuts.init();
  49. FilterShortcuts.init();
  50.  
  51. // draw a border
  52. var myBorder:Shape = new Shape();
  53. myBorder.graphics.lineStyle(1,0x00000000);
  54. //myBorder.graphics.beginFill(0xff00ff00);
  55. myBorder.graphics.drawRect(0+dropWidth, 0+dropWidth, stage.stageWidth-(2*dropWidth), stage.stageHeight-(2*dropWidth));
  56. myBorder.graphics.endFill();
  57. addChild(myBorder);
  58.  
  59. // size the dropshadow
  60. solid_mc.x = 0 + dropWidth;
  61. solid_mc.y = 0 + dropWidth;
  62. solid_mc.width = stage.stageWidth - 2*dropWidth;
  63. solid_mc.height = stage.stageHeight - 2*dropWidth;
  64.  
  65. // size the mask
  66. mask_mc.x = 0 + dropWidth;
  67. mask_mc.y = 0 + dropWidth;
  68. mask_mc.width = stage.stageWidth - 2*dropWidth;
  69. mask_mc.height = stage.stageHeight - 2*dropWidth;
  70.  
  71. // set button actions
  72. cta_invis_mc.buttonMode = true;
  73. cta_invis_mc.addEventListener(MouseEvent.MOUSE_DOWN,clickItem);
  74. cta_invis_mc.x = 0;
  75. cta_invis_mc.y = 0;
  76. cta_invis_mc.width = stage.stageWidth;
  77. cta_invis_mc.height = stage.stageHeight;
  78.  
  79. makeButton(cta_manual_mc, overItem, outItem, clickItem);
  80. makeButton(cta_centering_mc, overItem, outItem, clickItem); cta_centering_mc.setText("DYNAMIC TEXT");
  81.  
  82. }
  83.  
  84.  
  85.  
  86.  
  87.  
  88.  
  89.  
  90.  
  91. // GENERAL BUTTON OVER/OUT/CLICK FUNCTIONS
  92.  
  93. private function makeButton(which_mc:MovieClip, overFunction:Function, outFunction:Function, clickFunction:Function):void {
  94. which_mc.buttonMode = true;
  95. which_mc.useHandCursor = true;
  96. which_mc.mouseChildren = false;
  97. which_mc.addEventListener(MouseEvent.MOUSE_OVER, overFunction);
  98. which_mc.addEventListener(MouseEvent.MOUSE_OUT, outFunction);
  99. which_mc.addEventListener(MouseEvent.CLICK, clickFunction);
  100. }
  101.  
  102. private function overItem(e:Event) {
  103. Tweener.addTween(e.currentTarget, {_filter:glowIn, scaleX:1.05, scaleY:1.05, time:0.2});
  104. //e.currentTarget.gotoAndStop(2);
  105. // switch (e.currentTarget.name) {
  106. // case "mc_dock_beef" :
  107. // break;
  108. // }
  109. }
  110.  
  111. private function outItem(e:Event) {
  112. Tweener.addTween(e.currentTarget, {_filter:glowOut, scaleX:1, scaleY:1, time:0.2});
  113. //e.currentTarget.gotoAndStop(1);
  114. }
  115.  
  116.  
  117. private function clickItem(e:Event) {
  118. trace(e.currentTarget.name);
  119. // switch (e.currentTarget.name) {
  120. // case "tv01_mc" :
  121. // break;
  122. // }
  123. }
  124.  
  125.  
  126.  
  127.  
  128.  
  129.  
  130.  
  131.  
  132.  
  133.  
  134.  
  135.  
  136. // ANIMATION (CUSTOMIZED TWEENER) FUNCTIONS
  137.  
  138.  
  139. // init hides a movieclip and sets its alpha property to 0. This is useful for entering a new frame where the elements need to animate in.
  140. private function init(which_mc):void {
  141. which_mc.alpha = 0;
  142. which_mc.visible = false;
  143. }
  144.  
  145. // fades a movieclip in or out.
  146. // syntax: fade(mymovieclip_mc, "out", .5, -1);
  147. private function fade(which_mc:MovieClip, method:String, myDelay:Number, newSpeed:Number):void {
  148. var thisSpeed:Number;
  149. if (newSpeed >= 0) thisSpeed = newSpeed; else thisSpeed = FADESPEED;
  150.  
  151. switch(method)
  152. {
  153. case "in" :
  154. Tweener.addTween(which_mc, {alpha:100, time:thisSpeed, delay:myDelay});
  155. which_mc.visible = true;
  156. break;
  157. case "out" :
  158. Tweener.addTween(which_mc, {alpha:0, time:thisSpeed, delay:myDelay, onComplete:function() { which_mc.visible = false; } });
  159. break;
  160. }
  161. }
  162.  
  163. // bump increases a movieclip's scale temporarily then returns it to normal
  164. // syntax: bump(mymovieclip_mc, 0, -1);
  165. private function bump(which_mc:MovieClip, myDelay:Number, factor:Number):void {
  166. var baseScale:Number = which_mc.scaleX;
  167. if (factor < 1) factor = 1;
  168. Tweener.addTween(which_mc, {scaleX:BUMPSIZE * baseScale * factor, scaleY:BUMPSIZE * baseScale * factor, time:bumpSpeed, delay:myDelay});
  169. Tweener.addTween(which_mc, {scaleX:baseScale-(BUMPSIZE*baseScale*.1), scaleY:baseScale-(BUMPSIZE*baseScale*.1), time:bumpSpeed, delay:myDelay + bumpSpeed});
  170. Tweener.addTween(which_mc, {scaleX:baseScale, scaleY:baseScale, time:bumpSpeed, delay:myDelay + (bumpSpeed*2), transition:"easeInOutQuad" });
  171. }
  172.  
  173. // blurs a movieclip in or out.
  174. // syntax: blur(mymovieclip_mc, "out", .5, -1);
  175. private function blur(which_mc:MovieClip, method:String, myDelay:Number, newSpeed:Number):void {
  176. var thisSpeed:Number;
  177. if (newSpeed >= 0) thisSpeed = newSpeed; else thisSpeed = BLURSPEED;
  178.  
  179. switch(method)
  180. {
  181. case "in" :
  182. Tweener.addTween(which_mc, {_filter:blurIn, time:thisSpeed, delay:myDelay});
  183. break;
  184. case "out" :
  185. Tweener.addTween(which_mc, {_filter:blurOut, time:thisSpeed, delay:myDelay});
  186. break;
  187. }
  188. }
  189.  
  190.  
  191.  
  192.  
  193.  
  194. }
  195. }

URL: http://dl.getdropbox.com/u/316550/code-AS3_banner_class_template.zip

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.