Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

icekomo

Members
  • Posts

    61
  • Joined

  • Last visited

Everything posted by icekomo

  1. I found this pen which solved my issue. I tried to delete the question but had no luck.
  2. Hello all, I have an SVG that looks like this: <svg id="search" xmlns="http://www.w3.org/2000/svg" viewBox="-150 -5 76 69" height="76" width="400"> <path id="searchCircle" d="M56.5 29c0 14.64-11.86 26.5-26.5 26.5S3.5 43.64 3.5 29 15.36 2.5 30 2.5 56.5 14.36 56.5 29z" fill="none" stroke="#fff" stroke-width="3" stroke-miterlimit="10" /> <path id="searchBox" fill="none" stroke="#fff" stroke-width="3.176" stroke-linecap="round" stroke-miterlimit="10" d="M3 2h54v54H3z" /> </svg> And after I SVGMorph the #searchcircle into the #searchBox shape, I would like to animate the width of the search circle, which is what I'm trying to do here. var $circle = $('#searchCircle'); var $box = $('#searchBox'); var tlMain = new TimelineMax(); tlMain.to($circle, 0.25, {morphSVG:$box}) .to($circle, 0.25, {attr:{width:300}}); I can get the morph to happen, but it seems to be ignoring the width property. I have also tried just the normal width: "300px" property as well. Not sure what I'm missing.
  3. This seems like it would be an easy thing to figure out, but I can't seem to find what I'm looking for. I want to animate the width of a div from right to left. It seems that this works left to right by default. TweenMax.from($("#hero-container"),0.5,{width:0}); I tried to change the origin of the div, but that didn't seem to make a difference.
  4. I'm building a off-canvas push menu and everything is working, there are a few aspects I can't seem to figure out. 1. How to disable the scrolling of the content-wrapper. 2. How to only scroll the off canvas menu. Right now it scrolls the height of the website itself. Here is a code pen to show you what issues I'm running into. http://codepen.io/icekomo/pen/LNwEWM Thanks!
  5. Thanks, had no idea I could create a codepen like that. One question I have with the cache function, the x, and y params, don't seem to calculate when the project runs. The example file has an x value of 47.95 and a y of 102. But it doesn't seem to start at a x,y position of 0,0? Does this make sense what I'm asking? I read up on this: http://createjs.com/docs/easeljs/classes/DisplayObject.html#method_cache but it didn't seem to clear up my confussion. Thanks!
  6. Hey Jonathan, I'm building this project out of Flash Pro, which is where my questions is coming from. I'm not sure I can replicate the issue with a codepen, as I'm not able to create movieclips inside the html framework. Does that make sense?
  7. In the example above, it's shown by creating the graphic with javascript, but what about if I was using flash's IDE to create the object (movieclip) and I wanted to change the tint of that. Would I still need to cache the object? I guess that's the only part I'm not 100% sure about. I tried to use this code, but nothing happens: TweenLite.to(instructions.demoColor, 1, {easel:{tint:"#279133", tintAmount:1}});
  8. I'm trying to change the fill color of a movieclip I created using Flash Pro with the canvas tag / Create JS. This is what I'm trying: TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); TweenLite.to(instructions.demoColor, 1, {colorProps:{backgroundColor:"#279133", tintAmount:1}}); But nothing seems to be working. I saw an older post in the from (2012) that was using : TweenLite.to(circle, 3, {y:150, easel:{tint:"#0000FF", tintAmount:0.5}}); That also doesn't seem to do anything. I don't see any errors so I'm guessing this line is just being ignored. Thanks!
  9. I've been catching back up with Flash Pro and Greensock using the new Canvas and WebGL file formats. One thing I noticed is when I try to use relative numbers with Greensock I get unexpected results. In AS3 I would have use something like this TweenLite.to(mc, 1, {x:"500"}); and the mc would have moved 500px to the right of where it was sitting on the stage. When I use the same piece of code in Flash Pro in JS instead of AS3 TweenLite.to(this.mc, 1, {x:"500"}); The mc seems to move to a location that is far more then 500px and not always in the direction that I thought it would move.. Since I'm using Flash Pro I'm not sure I can recreate this in codepen? Again this might be an issue with CreateJs and not GSAP.
  10. Thanks for the help. I knew it wasn't a GASP issue, but really haven't had much luck in figuring anything out. It's really odd, when I use: this.regX = 0; this.regY = 0; It still uses the center point of the movieclip instead of the top left corner. I'll read up on the links you sent me. Thanks again!
  11. I'm not 100% sure this is the correct place to post this. I have a question about Flash Pro CC 2015 when using the canvas file type. When I create a movieclip and set the registration point to the top left corner and place it on the stage. When I change the properties in the Properties panel and set the x and y values to 0 it moves to the top left corner like it should. But when I set these values using javascript this.mc.x = 0 and this.mc.y = 0; It uses the center point of the movie clip. So the top and left half of my mc are off of the stage. I'm not sure why this is. Does it have something to do with how the DOM reads the js file? I would like to have it when I write that code that it does the same thing as it does on the stage when i use the properties panel Thanks!
  12. Has anyone used Loadermax to preload a starling project? I have used Loadermax in the past, but seem to be stumped on how to get it working for a starling project. Does anyone have any suggestions or some sample code they could should me. I am using Flash Pro 6, if that makes a difference. Thanks!
  13. I wanted to give a quick update, I implemented this into my project last night, and it was actually pretty easy, thanks for the help!
  14. I have an instructions screen that I would like to be able to just flick off the screen. I was thinking about trying to implement the ThrowPropsPlugin into starling, but figured I would ask here first to see if anyone has successfully done this, as I know you can't use MouseEvents with starling, so it would have to be changed to the starling touchEvent. Thanks!
  15. I have this code here, the first queue loads up and i can see the onComplete event fire, but the 2nd queue seems to get hung up on 96% and never reaches 100, which then the onComplete is never called. But the swf is still being loaded into the container. Anyone see or know why that might be? queue.append( new XMLLoader("xml/siteXml.xml", {name:"myXML", estimatedBytes:"17408", onprogress:progressHandler, onComplete:loadXml}) ); //starts the load for the swf file, and adds it to this container queue.append( new SWFLoader("my.swf", {onprogress:progressHandler, estimatedBytes:"2936012", onComplete:completeHandler, container:this}) ); //loads the data queue.load();
  16. I have an idea as to why this might be happening.. in the example the text is populated at build.. but for my example.. im trying to use a container (this) and have the content dynamically added, so I think I would have to use the height of (this) somewhere in this code.....
  17. Hello, I am trying to just take apart one of the demo files you have on the site to better understand how everything works. I got most of it working.. but for some reason my demo will only let me pull down and have it slide back to the stop... it wont allow me to scroll up the list of items. (I thought it had to do with a Y issue, but so far no luck.) Below is the code, that is almost identical to the example...just not sure what is causing it not to scroll up.... again I'm trying to get a better understanding how this all works for future projects: public class NameContainer extends MovieClip { private var t1:uint,t2:uint,y1:Number,y2:Number,yOverlap:Number,yOffset:Number; private var bounds:Rectangle = new Rectangle(0,0,640,825); private var blitMask:BlitMask; public function NameContainer() { blitMask = new BlitMask(this,bounds.x,bounds.y,bounds.width,bounds.height,false); blitMask.update(null, true); blitMask.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler); blitMask.bitmapMode = false; } function mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(this); y1 = y2 = this.y; yOffset = this.mouseY - this.y; yOverlap = Math.max(0,this.height - bounds.height); t1 = t2 = getTimer(); this.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); this.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); } function mouseMoveHandler(event:MouseEvent):void { //this.mouseChildren = false; var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) if (y > bounds.top) { this.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { this.y = (y + bounds.top - yOverlap) * 0.5; } else { this.y = y; } blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = this.y; t1 = t; } event.updateAfterEvent(); } function mouseUpHandler(event:MouseEvent):void { this.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler); this.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (this.y - y2) / time; ThrowPropsPlugin.to(this, {throwProps:{y:{velocity:yVelocity, max:bounds.top, min:bounds.top - yOverlap, resistance:300}}, onUpdate:blitMask.update, ease:Strong.easeOut}, 10, 0.3, 1); } }
  18. I have been working on some ipad demos lately and have been using some of the throwProps to achieve some of these effects. Something I was wondering, could you control a tween with a mouseEvent or TouchEvent, and when I say control, let's say we were rotating an object and I wanted that object to rotate with the advancement of the mouse/touch Event. I hope that makes sense, basically tween something that is in relation to the event, being either mouse or touch. Thanks for the help
  19. Hello, I am building a prototype app for work, and have the app set up using loaderMax to load in an xml file with all my data. That all works great, but what I am not able to do is to use an image more then once. here is my AS: I'm not even sure that the way I am doing this is the best way. I load my images, and then place them into an array (brewerImages). private var brewerImages:Array; brewerImages = [LoaderMax.getContent("brewer1"),LoaderMax.getContent("brewer2"),LoaderMax.getContent("brewer3"),LoaderMax.getContent("brewer4")]; I then pass this array to the class that I am using it in. The class I am using this in need to use and index of the array (an image) more then once, which is where I run into problem. I was doing some research and I think that I will need to use the bitmap data for this, but I wasn't able to figure it out. Any help would be wonderful! Thanks!!
  20. Why does this code work in 10.1 but not in 10.2? package classes.main { import flash.display.*; import flash.events.*; import flash.display.MovieClip; import flash.text.TextField; import com.greensock.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; //import com.greensock.loading.display.*; public class Preloader extends MovieClip { public var loader:LoaderMax = new LoaderMax({name:"mainQueue",onComplete:completeHandler,onFail:errorHandler}); public var progressBar:MovieClip = new progBar_mc(); public function Preloader():void { addChild(progressBar); //starts the load for the swf file, and adds it to this container loader.append( new SWFLoader("teset.swf", {onProgress:progressHandler,container:this}) ); //loads the data loader.load(); } public function progressHandler(event:LoaderEvent):void { var perc:Number = event.target.bytesLoaded / event.target.bytesTotal; progressBar.prog_txt.text = Math.ceil(perc * 100) + "%".toString(); progressBar.loadBar_mc.width = perc * 240; trace(perc); } public function completeHandler(event:LoaderEvent):void { trace(event.target + " is complete!"); removeChild(progressBar); } public function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } } }
  21. hmm..very odd.. the only thing that I know is different is that I am using cs5.5. Would that make a difference?
  22. Yeah I saw the xml problem before, fixed it and also took it out until this loader gets fixed. Good eye though! Here are the files. Thanks again!
  23. Carl, I never posted files before, how do I go about doing that, do I just sent them to you directly? I checked and yes my swf is an as3 file. The site will work, but what it wont do is fire the onComplete function of the preloader, so the loader graphic never gets removed, and it seems to get stuck on 99% loaded. Thanks for your help!
  24. Here is the code that I am using....the problem I am having is the complete Event, is not being fired, but it's still loading in my swf file... package classes.main { import flash.display.*; import flash.events.*; import flash.display.MovieClip; import flash.text.TextField; import flash.events.Event; import com.greensock.easing.*; import com.greensock.*; import com.greensock.plugins.*; import com.greensock.loading.*; import com.greensock.events.LoaderEvent; import com.greensock.loading.display.ContentDisplay; public class Preloader extends MovieClip { private var progressBar:MovieClip = new progBar_mc(); public var loader:LoaderMax; private var imagesArray:Array; public var medallionXml:XML; public function Preloader():void { loader = new LoaderMax({name:"myLoaderMax", onError: errorHandler, onFail:errorHandler, maxConnections:1, onProgress:progressHandler, onComplete:dataLoaded}); loader.append( new SWFLoader("medallion.swf", {name:"medallionSWF",onProgress:progressHandler,estimatedBytes:81920,container:this})); loader.append( new XMLLoader("xml/medallion.xml", {name:"medallionXML",estimatedBytes:81,920}) ); XML.ignoreWhitespace = true; loader.load(); addChild(progressBar); } public function progressHandler(event:LoaderEvent):void { var perc:Number = event.target.bytesLoaded / event.target.bytesTotal; progressBar.prog_txt.text = Math.ceil(perc * 100) + "%".toString(); progressBar.loadBar_mc.width = perc * 240; } public function errorHandler(event:LoaderEvent):void { trace("error occured with " + event.target + ": " + event.text); } public function imgCompleteHandler(event:LoaderEvent):void { var imageLoaded:ContentDisplay = event.target.content as ContentDisplay; } public function dataLoaded(event:LoaderEvent):void { trace("loaded"); //addChild(event.target.content as ContentDisplay); //trace(event.target + " is complete!"); TweenLite.to(progressBar,1,{alpha:0,onComplete:removeProgress}); } private function removeProgress():void { removeChild(progressBar); } } }
×