Spiderian

Hey, when I zoom in it zooms to the top left. I can scroll back to where I was centered, but is there a way to change the registration point? When I zoom in to a specific spot by moving top:-x, left:-x it crops off the top left. Would a better way, than changing the registration point, be appending the bounding box? I tried a couple suggestions with adding draggable, but in all the demos it required something for only paid members. Any ideas would be greatly appreciated. Thanks!

Alright, I have problems with interactivity. In an attempt to rectify that I am trying out draggable. I have been unable to find a starting from scratch tutorial so, I just read a lot of notes on it and got it to kind of work. I think there might be a problem with my layout, but since I just kind of jumped in I am not sure how to set up my markup to work with this. A brief description of my project; I am building interactive maps. They have multiple floors meaning multiple layers. The navigation has to stay put, but I want to be able to zoom in and drag the map around to scroll it. It has to remain in my #canvas and get clipped if it exceeds those bounds. My problems; after I zoom in it drags to show the hidden portions of the map, but then snaps back to center. After I drag the map, it changes the z-index of the draggable #images to 1001, and every drag after increases that number by 1. My markup: #canvas { position: absolute; background-color: black; width: 1080px; height: 1080px; overflow: hidden; } .mapLayer { width: 1080px; height: 1080px; position: absolute; overflow: hidden; } #images { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 1080px; height: 1080px; z-index: 0; } #key { position: absolute; } #legend { position: absolute; top: 170px; left: 33px; } #buttons { position: absolute; top: 830px; left: 24px; width: 300px; z-index: 5; } .btn { position: relative; margin-top: -4px; } #chooseview { position: absolute; top: 800px; left: 24px; } #zoom { position: absolute; top: 40px; left: 40px; display: block; width: 50px; z-index: 5; } .zoom { width: 50px; height: 50px; } My code: window.onload = function() { var images = document.getElementById('images') var canvas = document.getElementById('canvas') var btn01 = document.getElementById('btn01'); var btn02 = document.getElementById('btn02'); var btn03 = document.getElementById('btn03'); var btn04 = document.getElementById('btn04'); var zin = document.getElementById('zin'); var zout = document.getElementById('zout'); var you = document.getElementById('you'); var fl01 = document.getElementById('fl01'); var fl02 = document.getElementById('fl02'); var fl03 = document.getElementById('fl03'); var fl04 = document.getElementById('fl04'); var st01 = document.getElementById('st01'); var st02 = document.getElementById('st02'); var animateFl01 = new revealFl01(); var animateFl02 = new revealFl02(); var animateFl03 = new revealFl03(); var animateFl04 = new revealFl04(); var animateZin = new ZoomIn(); var animateZout = new ZoomOut(); //: This is to hide layers on start. TweenLite.to(you, 0, {opacity:1}); TweenLite.to(fl01, 0, {opacity:1}); TweenLite.to(fl02, 0, {opacity:1}); TweenLite.to(st01, 0, {opacity:1}); TweenLite.to(fl03, 0, {opacity:0}); TweenLite.to(fl04, 0, {opacity:0}); TweenLite.to(st02, 0, {opacity:0}); //: These are button functions to show and hide layers. function revealFl01() { this.tweenCount = 0; this.animate_Fl01 = function(){ TweenLite.to(you, 0.25, {opacity:1}); TweenLite.to(fl01, 0.25, {opacity:1}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl01(event){ animateFl01.animate_Fl01(); } function revealFl02() { this.tweenCount = 0; this.animate_Fl02 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl02(event){ animateFl02.animate_Fl02(); } function revealFl03() { this.tweenCount = 0; this.animate_Fl03 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:1}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl03(event){ animateFl03.animate_Fl03(); } function revealFl04() { this.tweenCount = 0; this.animate_Fl04 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl04(event){ animateFl04.animate_Fl04(); } function ZoomIn() { this.tweenCount = 0; this.animate_Zin = function(){ TweenLite.to(you, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl02, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl03, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl04, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st02, 0.25, {height:2000, width:2000, left:-540, top:-540}); this.tweenCount++; }; } function animate_Zin(event){ animateZin.animate_Zin(); } function ZoomOut() { this.tweenCount = 0; this.animate_Zout = function(){ TweenLite.to(you, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl02, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl03, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl04, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st02, 0.25, {height:1080, width:1080, left:0, top:0}); this.tweenCount++; }; } function animate_Zout(event){ animateZout.animate_Zout(); } btn01.onclick = animate_Fl01; btn02.onclick = animate_Fl02; btn03.onclick = animate_Fl03; btn04.onclick = animate_Fl04; zin.onclick = animate_Zin; zout.onclick = animate_Zout; Draggable.create(images, {type:"scroll", edgeResistance:0.85, bounds:(canvas)}); }; Unfortunately my images are proprietary so I can't put up a working version yet. If anyone has seen a tutorial about this, has ideas on how to scroll the clipped off part, or if anyone knows where I screwed this up please let me know.

I figured it out. It was easy. I put slightly varied versions of this code in blank Move Clips. Then I just slapped them on layers in between my foreground, mid-ground and background. It worked awesomely.

I want to duplicate my snow animation and fit it between the two layers I have set up. This way I will have a foreground snow and a background snow. So I want to keep my current snow on top and make a duplicate layer of it between MC_BG and MC_FG. I tried wrapping the snow in a function and adding it as a child at level 1, but I probably did it wrong. Any Help will be appreciated. import com.greensock.*; import com.greensock.easing.*; addChildAt(MC_BG, 0) addChildAt(MC_FG, 2) var tl:TimelineMax=new TimelineMax({paused:false}); function createFlake(offset) { //create a flake (attach symbol in library with Class flake) and position on stage var flake:Flake = new Flake(); flake.y=-50; flake.x=randomRange(-10,1090); flake.alpha=0; addChild(flake); //create timeline for each flake var nestedTl:TimelineMax = new TimelineMax(); //how much wiggling / zig zagging var wiggle:Number=randomRange(15,35); //zig or zag? wiggle=Math.random() > .5?- wiggle:wiggle; //how fast and big var speed:Number=randomRange(5,15); //fade and grow nestedTl.insert(TweenMax.to(flake, .5, {alpha:randomRange(.5,1), scaleX:speed, scaleY:speed})); //go down nestedTl.insert(TweenMax.to(flake,speed, {y:800})); //zig zag nestedTl.insert(TweenMax.to(flake, speed*.15, {x:String(wiggle), repeat:Math.floor(randomRange(1,4)), yoyo:true, ease:Sine.easeInOut})); tl.insert(nestedTl, offset);

That's exactly how I want it too look. Now I just need to find a tutorial for layering. THANKS FOR ALL THE HELP, YOU'RE THE BEST CARL!

Awesome! thanks Carl. I only have two small questions; Is there a way to duplicate this effect between layers, for example between the sky and buildings, and between buildings and a window for the frame? The second question: is there a way to start it off with more than just one flake? I was playing with the for (var count:Number = 1000; count<20000; count++) { createFlake(); } It made it a little denser, but it always started slow with only 1-3 flakes. I'm trying to make it look like heavy snow just short of a blizzard. I suppose I could delay my other animations and just clip off the front when it's warming up.

The bubble script looks like it would do the trick but when I try and see how it works I get two errors: Scene 1, Layer 'actions', Frame 1, Line 33 1067: Implicit coercion of a value of type Function to an unrelated type Number. Scene 1, Layer 'actions', Frame 1, Line 53 1119: Access of possibly undefined property currentProgress through a reference with static type com.greensock:TimelineMax. But at least I know what kind of tutorials to look for. Thanks

Hi, I am new to particle generation animation, and I was wondering if I could use TweenLite to make the movement more fluid with eases. If I don't need TweenLite or can't use it any alternative would be appreciated. I did a few tutorials and came up with this code for a snowing animation. I think I could ease with a sin function, but I'm not sure of where to put it in my math and I would rather use the default ease in TweenLite package { import com.greensock.TweenLite; import com.greensock.easing.*; import flash.display.MovieClip; import flash.events.Event; import flash.utils.Timer; import flash.events.TimerEvent; public class Snow extends MovieClip { private var flakesVector:Vector.<MovieClip> = new Vector.<MovieClip>(); private var timer:Timer = new Timer(2000); public function Snow(speed:int = 3, flakesNumber = 150):void { for(var i:int = 0; i < flakesNumber; i++) { var flake:Snowflake = new Snowflake(); flake.vel = (Math.random() * speed) + 0.5; flake.xSpeed = Math.floor(Math.random() * (0.5 - -0.5 + 1)) + -0.5; flake.scaleX = (Math.random() * 1) + 0.3; flake.scaleY = flake.scaleX; flake.x = Math.random() * stage.stageWidth; flake.y = Math.random() * stage.stageHeight; addChild(flake); flakesVector.push(flake); } addEventListener(Event.ENTER_FRAME, fall); timer.addEventListener(TimerEvent.TIMER, changeMovement); timer.start(); } private function fall(e:Event):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.x += flakesVector.xSpeed; flakesVector.y += flakesVector.vel; if(flakesVector.y > stage.stageHeight) { flakesVector.x = Math.random() * stage.stageWidth; flakesVector.y = -flakesVector.height; } } } private function changeMovement(e:TimerEvent):void { for(var i:int = 0; i < flakesVector.length; i++) { flakesVector.xSpeed *= -1; } } } }