Jump to content
Search Community

mspanish

Members

  • Posts

    86

  • Joined

  • Last visited

 Content Type 

Posts posted by mspanish

    Draggable and select element

    in GSAP

    Posted

    I am having some trouble with a Windows 8.1 tablet, using Chrome on the Desktop. Sounds ridiculous to even ASK you to test in this situation!  And furthermore the behavior is really strange; I get the mouse events for the elements inside of my draggable div when I use my stylus, but not my finger. If I remove the draggable they work fine with both the stylus and the finger.

     

    But, when I tried on IE 11 in the 'formerly known as Metro' side of Win8.1,  - then the mouse events are in fact picked up with the stylus and my finger.

     

    Same with IE 11 on the Desktop for Win8.1.

     

    Don't have FF or anything else for testing on this machine (Samsung PC tablet).

     

    I have these set to clickable divs, but I have thought of playing around with buttons, a links, etc to see if that makes a difference.

    Anybody wanna help reproducing Animate.css w/ Greensock?

    in GSAP

    Posted

    Ok for me the CodePen is working in IE 10 Desktop version, just not the mobile Win8 "app" IE version.

     

    Not sure what is the problem with IE 10's RT version - or whatever they are calling it - something with skewY not being fully supported?

     

    Anyway hopefully we can gather some good Pens and Fiddles on this thread so that people can jump into animating with Greensock even faster!

    Anybody wanna help reproducing Animate.css w/ Greensock?

    in GSAP

    Posted · Edited by mspanish

    Hey Carl, great to hear from you! Hope the kids are doing great. We had our last this October, she's now nearly 4 months and smiles most of the day. I guess God can be generous if you are crazy enough to have a 3rd! I was super delighted to see that you are officially part of Greensock now - what a great team. Congrats to all of you. I enjoyed reading the About Us page, what a wonderful group of guys. It's wonderful to see you mention your faith in your bios as well (not sure if faith should be Faith or not). I've not exactly cranked out the apps this year like I did last year, but instead I've dedicated the past 5 months or so to learning JS, playing around with SVG and about a billion JS libraries/frameworks, lol. The problem is a person could spend all day learning new things, every day! I've been building a kind of boilerplate in Visual Studio's Blend, rewiring everything w/out using the Win8 specific JS stuff, WinJS. While you can't avoid it completely for some things, I'm pretty close to the point there my apps will be easily ported to IOS and Android, with minimal impact. I'm using Knockout and some other very cool JS plugins, and of course Greensock. Still just can't beat it for ease of use and massive feature set. Such great work has gone into it. Anyway about the plug and play idea - I was hoping this thread might produce some posts from the community - if 10 or 20 people could throw up a solution they've found, we'd have a pretty nice list going. So here's my first contribution - the smooth Greensock powered Flip Card.

     

    I've put it on CodePen - you can check it out here!

     

    See the Pen DsCEt by mspanish (@mspanish) on CodePen

     

    Let me know if you can't reach the Pen by this address

    Anybody wanna help reproducing Animate.css w/ Greensock?

    in GSAP

    Posted

    I've got a project where I'm using Animate.css a lot, due to the fact that they are super easy to plug in, and the quality of these animations is very good. For anybody not familiar, Animate.css is just a pre-done CSS file that you can plugin really easily by just adding these animation classes to your element. The guy has a nice page showing what each animation looks like, so you don't have to spend all of the time experimenting yourself. 

     

    But...Greensock would of course be better! For a slideshow like I'm doing now using TimeLineMax, I've found that trying to integrate Animate.css is really a challenge. While probably doable with a couple more hours of tweaking, I think I'd rather replace them with Greensock versions.  I'd be happy to post what I come up with here.  Is there anybody else who might like to have a list of Greensock compatible replacements for some of these? Or just even a master list of animations sort of like Animate.css has,  people can use to plug in animations quickly? Seems like a worthy idea anyway!

     

    best wishes

    Stacey

    Delete textField with TransformManager?

    in TransformManager (Flash)

    Posted

    Hey and thanks in advance to anybody who can help - I just want the Delete key to work for deleting textFields that have the TransformManager applied to them.

     

    I have hasSelectableText set to false, but the fields still won't delete properly. They have no selectable text in them either. Is there some other setting I've missed? I've also had no luck scaling them - where the TEXT actually scales too - as just scaling the invisible field is of no use to me.

     

    manager4 = new TransformManager({targetObjects:[theWord], allowMultiSelect:true, handleSize:6, lineColor:0xCDD7F5, hasSelectableText:false, paddingForRotation:24, lockScale:true, allowDelete:true, hideCenterHandle:true, autoDeselect:true });

    Duplicate a MovieClip instead of Bitmap?

    in Loading (Flash)

    Posted

    Hey Carl - sorry been out sick, missed this reply.

     

    Thanks a lot for that link, it might be the missing piece to something I"m trying to do in order to eliminate a lot of wasted re-loads in my app!

     

    Hope life is treating you good over there in the big Apple :) Still buried in snow here, but going to Disneyland next week w/ the kids should really be a treat. We've never done anything like that so we are really psyched.

     

    have a great day,

    Stacey

    Image Cloning code

    in Loading (Flash)

    Posted

    Ok I had some thumb resizing going on that I didn't realize - so now the bitmap thumbs aren't too bad.

     

    But I'd still like to send over a COPY of the SWF to the subject, rather than the thumbnail SWF - otherwise the user can only put 1 of those items on the screen, 1 time - they can't ever access that item again without reloading all of the thumbs. So I need to find a way to create a duplicate of the ContentDisplay object on the fly, whenever the user clicks on it.

    Duplicate a MovieClip instead of Bitmap?

    in Loading (Flash)

    Posted

    Hello - I've got a grid of thumbs which I use to dress a subject. Right now onClick I'm tweening the actual thumb over to the subject, which leaves a blank space in my grid, and means I have to keep reloading the thumbs. Bad solution. Loading 2 SWFs (1 for the thumb and 1 to actually use to dress the subject) is not a good option right now as I don't want to rewrite all of the XML, which only has 1 swf per image.

     

    I'm loading the thumbs via getContent from the imageLoader - and while I've found some nice code to duplicate these as bitmaps - the bitmaps look terrible compared to the original SWFs. How about casting these thumbs as MCs, then duplicating those? Has anybody done something like that? I tried using the makeCopy function that Jack posted, but kept getting an argument number error, even though I was passing it via my MouseEvent.

     

    If anybody has done something like this, I'd be delighted to see it!

     

    thanks a lot

    Stacey

    how to fire event when getContent complete?

    in Loading (Flash)

    Posted

    Hello guys! I am having a bit of trouble timing something, as I'm not sure how to listen for a getContent = completely loaded event.

     

    Here is my code adding the image to the stage:

     

    var thumb:ContentDisplay = LoaderMax.getContent(thumbnailBigArray);

     

    I need another event to fire ONLY when the rawContent is available.

     

    thanks a ton in advance!

    Stacey

    Adding a mask when loading via getContent?

    in Loading (Flash)

    Posted

    Hey Carl - thanks for that - hope you are doing great over there in the big city :)

     

    I actually figured out the problem was trying to use just 1 mask loaded as a SWF for a whole array of thumbs. This is probably as UNelegant as it gets, but here was my solution:

    I call this after all the thumbs are loaded - and it's working pretty sweet now.

     

    var loader3

     

    function addThumbMasks():void {

    trace('thumbMask function thumbArray = ' + thumbArray.length);

    for (var i:int = 0; i < thumbArray.length; i++) {

    loader3 = new SWFLoader($.subject + '/' + windowType + '_mask' + '.swf', {x:5, y:5,height:thumbHeight-35,width:thumbWidth-35,scaleMode:"proportionalInside"});

    loader3.load();

    maskLoadersArray.push(loader3);

    }

    TweenMax.delayedCall(.1,onLoadSWF);

    }

     

    var mcArray:Array = [];

     

    function onLoadSWF():void {

     

    for (var i:int = 0; i < thumbArray.length; i++) {

    var mc:MovieClip;

    mc = maskLoadersArray.rawContent; //the root of the child swf

    mcArray.push(mc)

    }

    TweenMax.delayedCall(.1,addMasksNow)

    trace('mcArray check ' + mcArray)

    }

     

    function addMasksNow():void {

    for (var i:int = 0; i < thumbArray.length; i++) {

    if (thumbArray!= null && mcArray != null) {

    thumbArray.addChild(mcArray); //add the ContentDisplay to the display list even before raw content is loaded.

    thumbArray.mask = mcArray

    thumbArray.visible = true;

    }

    }

    }

    Adding a mask when loading via getContent?

    in Loading (Flash)

    Posted

    I know this has something to do with .content vs .rawContent, but I can't seem to get a mask working on a loaded image! Since these thumbs are in a grid that the user uses to drag onto another object, I need the mask to load onto the thumb itself - but I'd rather mask whats INSIDE the thumb and not the thumb itself... anybody see the error here? Thanks in advance!

     

    Here is my code:

     

    var thumb:ContentDisplay = LoaderMax.getContent(thumbnailBigArray);

    thumb.scaleMode = "proportionalInside"

     

    grid_holder.addChild(thumb);

     

    thumb.width = thumbWidth;

    thumb.height = thumbHeight;

    thumb.x = (i % thumbCols) * (thumbWidth + padding) + 10;

    thumb.y = int(i / thumbCols) * (thumbHeight + padding) + 0;

     

    if (needsMask == "yes") {

     

    var loader3 = new SWFLoader($.subject + '/' + windowType + '_mask' + '.swf', {x:5, y:5,height:thumbHeight-35,width:thumbWidth-35});

    thumb.addChild(loader3.content); //add the ContentDisplay to the display list even before raw content is loaded.

    thumb.mask = loader3.content;

    loader3.load();

    }

    thumbArray.push(thumb);

    Making Scale/Rotate arrows BIGGER?

    in TransformManager (Flash)

    Posted

    thanks very much - I had figured out how to apply the Matrix, but not that you could just leave the values blank - I had them filled in like this:

     

    thumbArray[e].transform.matrix = new Matrix(0,0,1,1,1)

     

    I'll send you a SWF when I'm done with all of this, it's quite a mix of your TransformManger, TweenMax, and some other stuff thrown in!

    Making Scale/Rotate arrows BIGGER?

    in TransformManager (Flash)

    Posted

    Hi Jack - still having a bit of trouble, - sorry about that!

     

    Can you be more specific about how to transform an object back to its original settings?

     

    Something like this?

     

     

    thumbArray[e].transform(x:0, y:0, scaleX:1, scaleY:1, rotation:1)

     

    How do I actually call the transform() function - as the above is not exactly right!

    Drag to garbage to delete item?

    in TransformManager (Flash)

    Posted

    Hello and sorry as this is the kind of question where you are asking somebody to do your coding for you... (sheepish look...)

     

    I've got a delete all thing working fine - although since I move my mc's once they are dragged onto the stage, I found it easier to just get the numChildren of that mc and remove them that way.

     

    But for my "delete just this 1 thing" setup - what I'd really love is to add a little garbage can that the child can drag the items into - that way I can add a fun little sound or something, and kids are pretty familiar with this type of setup for deletion. I see I'll have to use a hitTest or collision detection - but if anybody has done this and has an exact piece of code that works with the TransformManager - I'd be really thankful!!

    • Like 1

    Making Scale/Rotate arrows BIGGER?

    in TransformManager (Flash)

    Posted

    Ok what I came up with for mobile use of the TransformManager -

     

    I adjusted all 3 functions in the TransformManager.as -

     

    function _createScaleCursor

     

    added to the bottom so it reads:

     

    s.scaleX = 10;

    s.scaleY = 10;

    return s;

     

    function _createRotationCursor

     

    added to the bottom so it reads:

     

    s.rotation = -45;

    s.scaleX = 10;

    s.scaleY = 10;

    return s;

     

    function _createMoveCursor

     

    s.scaleX = 5;

    s.scaleY = 5;

    return s;

     

    Then in the code of my project, I added this:

     

    var manager:TransformManager = new TransformManager({targetObjects:[mc], constrainScale:true, lockRotation:false, allowDelete:false, autoDeselect:true, paddingForRotation:30, handleSize:35, hideCenterHandle:true});

    TransformManager.customizeScaleCursor(null, false, 70, 70, false);

    TransformManager.customizeRotationCursor(null, false, 70, 70, false);

     

    My handles are set to 35, and the paddingForRotation to 30 - this tests really well even on a phone - giving a pretty decent distinction between scaling and rotating, with the elements nice and big so you don't feel like the user will be asking "why can't this thing just pinch and zoom?"

     

    Hope this helps somebody :)

1
2
3
Page 2 of 4  
×
×
  • Create New...