Jump to content


  • Posts

  • Joined

  • Last visited


1 Newbie
  1. Hi guys I'm using TimelineLite to animate an html5 banner and I'm having trouble with one of the lines: here is my code: panel.animate = function () { var _tweenTime = this._tweenTime, _staggerTime = this._staggerTime, _frameTime = this._frameTime, _carTime = 5; this._timeline // frame 1 .to(expTxt0, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .to(expTxt1, _tweenTime, { alpha:1, ease:Power2.easeOut }) // frame 2 .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) .staggerTo([ expTxt2, expTxt3, expTxt4, expTxt5, expTxt6, expTxt7, expTxt8 ], _tweenTime, { alpha:1, ease:Power2.easeOut }, _staggerTime) .to(renaultLogo, _tweenTime, { alpha:1, ease:Power2.easeOut }); // car animation this._timeline.add([ new TweenLite(car, _tweenTime * 2, { alpha:1, ease:Power2.easeOut } ), new TweenLite(car, _carTime, { left:373, top:158, scaleX:1, scaleY:1, ease:Power2.easeOut } ), new TweenLite(wheel0, _carTime, { rotation:"720", ease:Power2.easeOut }), new TweenLite(wheel1, _carTime, { rotation:"720", ease:Power2.easeOut }) ], 0); }; the line in question is the first line under the // frame 2 comment: .to(expTxt1, _tweenTime, { alpha:0, ease:Power2.easeIn }, _frameTime) In actionscript I would expect this to fade the expTxt1 <img> back down (after fading it up on the previous line). I've tried setting overwrite:false (not sure if that's a thing) and switching between using opacity and alpha but i can't think of anything else to do to make the code work. Can anyone see if I'm missing something please? Thanks obie
  2. Hi guys, quick question - I've just grabbed the v12 version of the swc and it no longer recognises calls to the complete() method - has this been removed and if so, what is the accepted procedure to force a timeline to complete please (currently using tl.gotoAndStop(tl.totalDuration))? thanks obie
  3. ah never mind - i got it in main.css img, div { position:absolute; }
  4. Hi guys first of all let me congratulate you on your js engine - it's looking pretty awesome. I have a question about tweening the css properties for top and left - i've implemented it as it seems like it should be but im not getting any result from the positional tweens, although the backgroundColor tween is working correctly. <!DOCTYPE html> <html> <head> <title>Test Animation</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="js/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/easing/EasePack.min.js"></script> <script type="text/javascript" src="js/TimelineLite.min.js"></script> <script type="text/javascript" src="js/TweenLite.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var plus = document.getElementById('plus'); var timeline = new TimelineLite(); timeline.append(new TweenLite(plus, 1, {css:{opacity:"0"}, ease:Quad.easeOut})); timeline.append(new TweenLite(plus, 1, {css:{opacity:"1"}, ease:Quad.easeIn})); timeline.append(new TweenLite(plus, 1, {css:{top:"500px", left:"100px", backgroundColor:"#ff9900"}, ease:Bounce.easeOut})); }); </script> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <div id="banner"> <img id="plus" src="img/plus.png" alt="plus"> </div> </body> </html> I've tried dropping #plus into a div and animating that but that's not working either - is there a css trick i'm missing to be able to do this?
  5. hey jack thanks for the response. Unfortunately the flash is part of a much large cq5 content managed system which has several dynamically created files that are being loaded. UPDATE: i just discovered that if i remove all of the estimatedBytes that it fixes the problem when defaultAuditSize = false. thanks anyway dude - we all love your stuff obie
  6. hey guys Do you know of any reason why setting LoaderMax.defaultAuditSize = false; would cause the load to become unstable or simply not happen? seems to be happening in my swf best obie
  7. hey carl i did try just the content but it can't be cast as a DisplayObject in the duplicateSprite method i'll test the duplicateSprite method with a separate class to make sure that it's all working best a
  8. hey folks i'm trying to duplicate a loaded swf but i don't seem to be able to create a duplicate i'm using the following code: public function getAssetById(assetId:String):DisplayObject { var asset:DisplayObject; if (!_assetCache[assetId]) { _assetCache[assetId] = LoaderMax.getContent(assetId).rawContent; } asset = _assetCache[assetId]; // duplicate bitmap if (asset is Bitmap) { var bmd:BitmapData = new BitmapData(asset.width, asset.height, true, 0); return new Bitmap(bmd, "auto", true); } // otherwise return swf return SpriteUtils.duplicateDisplayObject(asset); } and this is SpriteUtils.duplicateDisplayObject(asset) (taken from http://www.kirupa.com/forum/showthread.php?223798-ActionScript-3-Tip-of-the-Day&p=1939827&viewfull=1#post1939827) static public function duplicateDisplayObject(target:DisplayObject, autoAdd:Boolean = false):DisplayObject { // create duplicate var targetClass:Class = Object(target).constructor; var duplicate:DisplayObject = new targetClass(); // duplicate properties duplicate.transform = target.transform; duplicate.filters = target.filters; duplicate.cacheAsBitmap = target.cacheAsBitmap; duplicate.opaqueBackground = target.opaqueBackground; if (target.scale9Grid) { var rect:Rectangle = target.scale9Grid; // WAS Flash 9 bug where returned scale9Grid is 20x larger than assigned // rect.x /= 20, rect.y /= 20, rect.width /= 20, rect.height /= 20; duplicate.scale9Grid = rect; } // add to target parent's display list // if autoAdd was provided as true if (autoAdd && target.parent) { target.parent.addChild(duplicate); } return duplicate; } if i simply return the asset from _assetCache (which is a dictionary) without duplicating it, it works and traces as a MovieClip but when i try to duplicate it, even though the traces tell me that the duplicate is a movieclip. Note the clip being loaded is a simple vector graphic on the stage of the root of the timeline thanks in advance obie
  9. hey folks There are a couple of problems i'm having with this - the first is how to work out how to find where the tip of each sine curve is and the second is to work out how to rotate each object so that it slides sideways along the sine wave (note file is 800 x 600) here's my code: CarouselTest.as: package { import com.greensock.easing.Sine; import com.greensock.TweenMax; import com.components.CarouselItem; import com.theflashblog.fp10.SimpleZSorter; import flash.display.Sprite; import flash.events.Event; import uk.co.thereceptacle.utils.Trig; public class CarouselTest extends Sprite { public static const SPACING : int = 20; public static const XSPACING: int = SPACING * 5; public static const SPEED : Number = .05; public static const XSPEED : Number = 800 / 360 * 2; public static const RADIUS : int = 400; private var _items:Array; private var _container:Sprite; private var _movePerItem:Number; private var _noOfItems:int; public function CarouselTest() { _items = new Array(); _noOfItems = 200; _movePerItem = 360 / _noOfItems; // my attempt at finding how much each item must move in order to bring it to the front _container = new Sprite(); _container.x = 400; _container.y = 300; _container.z = 200; addChild(_container); var item:CarouselItem = new CarouselItem(); for (var i:int = 0; i < _noOfItems; i++) { item = new CarouselItem(); item.radius = RADIUS; item.angle = (i * SPACING) % 360; item.x = i * XSPACING - 300; item.speed = SPEED; _container.addChild(item); _items.push(item); } moveItems(-1 * _movePerItem); } private function moveItems(direction:int):void { TweenMax.allTo(_items, 5, { angle:direction.toString(), x:(direction * XSPACING).toString(), ease:Sine.easeInOut } ); TweenMax.to(this, 5, { onUpdate:SimpleZSorter.sortClips, onUpdateParams:[_container] } ); } } } CarouselItem.as package com.components { import flash.display.Sprite; import flash.text.TextField; import uk.co.thereceptacle.components.HTMLTextField; import uk.co.thereceptacle.utils.Trig; public class CarouselItem extends Sprite { private var _angle : Number; private var _prevX : Number; private var _prevZ : Number; public var speed : int; public var radius : Number; public function CarouselItem() { graphics.beginFill(0x99ff00); graphics.lineStyle(1); graphics.drawRect( -100, -150, 200, 300); var tf:TextField = new HTMLTextField(); tf.embedFonts = false; tf.wordWrap = false; tf.htmlText = " THIS IS A TEST"; tf.x = -100; tf.y = -tf.textHeight / 2; addChild(tf); } public function get angle():Number { return _angle; } public function set angle(value:Number):void { _angle = value; z = Math.sin(angle) * radius; var deltaX:Number = x - _prevX; var deltaZ:Number = z - _prevZ; var rotate:Number = Math.atan2(deltaZ, deltaX) * 180 / Math.PI; // this is getting close but always rotates the item away from the center and i need it to rotate towards the center on the positive side of the sine wave rotationY = Trig.radiansToDegrees(angle) * -1 - 90; } override public function set x(value:Number):void { _prevX = x; super.x = value; } override public function set z(value:Number):void { _prevZ = z; super.z = value; } } } hope you can help obie
  10. answer i ended up doing something quite similar but using bitmapdata.draw() from the content instead: public function getImageById(id:String):Bitmap { if (!retrievedItems[id]) { retrievedItems[id] = LoaderMax.getContent(id); } var item:DisplayObject = retrievedItems[id]; var bmd:BitmapData = new BitmapData(item.width, item.height, true, 0); bmd.draw(item); return new Bitmap(bmd, "auto", true); } obie
  11. hi folks Does anyone know if it's possible to retrieve multiple copies of the same loaded image as you can with bulkloader? thanks obie