Jump to content
Search Community

retropunk last won the day on April 16 2015

retropunk had the most liked content!

retropunk

Members

  • Posts

    181

  • Joined

  • Last visited

  • Days Won

    1

 Content Type 

Posts posted by retropunk

    Greensock in Adobe Animate - 3d flip

    in Banner Animation

    Posted

    Hi, have you tried the new version of Animate CC (previously Flash Pro) ?

    If not you should try it right away. As a Flash user I think you will be very happy with Animate CC.

     

    Tons of new features, text to outlines is one of them. No more keeping copies for future editing.

     

    Take a look asap!

     

    - Patrick

    • Like 1

    Newbie - fromTo using css

    in Banner Animation

    Posted

    be careful with those trailing commas. When I work in "use strict" mode the commas would error out.

    Also, like flysi300 said you don't need to wrap the CSS anymore.

    t1.from(h, 2, {
 marginTop: 400,
 opacity: 0,
 ease: Bounce.easeOut
});
t1.from(para, 2, {
 marginTop: 400,
 opacity: 0,
 ease: Bounce.easeOut
}, "-=1.3");

    Animate CC GSAP Starter File Needed

    in GSAP

    Posted

    Yeah the file I shared is from an idea we are working on to standardize banner production.

    We do a lot of DOM creation too but being able to build canvas ads in Animate CC with GSAP is just excellent. When I can combine timeline animation with coded animation its a perfect day.

     

    Using Profiles in the Publish Settings of Animate CC makes it simple to modularize typical parts of a banner. Who remembers digging around in the Flash Configuration folders in order to customize the HTML wrapper (blurghh)...so happy to see something like this come along. This feature will be huge for people once they wrap their head around it. 

     

    Concerning the clickTag code - in my experience with Standard Banners, as long as the clickTag vars are in the Global Scope you're good. I keep all my other JS wrapped in a closure or a nice Module Pattern...yummy

    I also don't like clogging up my divs with JS clickTag code even if it is small. Just my preference.

     

    I am hoping expand and improve templates like this for banners, apps, sites etc...

    I have another template I am working on that uses PixiJS for sprite sheet animation and certain particle effects. I know OSUblake will appreciate it. I will share that too when its ready.

     

    I'm can't tell you how excited I am to see Animate CC and GSAP (and many other frameworks) working so nicely together. It's gonna be a kickass year!

    • Like 2

    Animate CC GSAP Starter File Needed

    in GSAP

    Posted

    Hey guys, we have been experimenting with Animate CC and GSAP. It's been a lot of fun. Feels like the old days.  :x

    I'm attaching a starter template for a banner that also shows a few other things.

     

    Using GSAP with Animate CC is awesome.

     

    Publish Profiles

    Check the Publish Settings > Profile

    You will see Standard and Double Click RM. This allows you to customize the HTML wrapper for the project.

    You can then go under the Advanced tab and export a profile to create your own and then import it.

    Ideally you would create templates with profiles. it has already sped up production for us.

     

    For banners its best practice to keep all assets in the same folder. In Publish Settings you can set the Export Image assets to ./

    This keeps everything in the root. Not everyone needs this but when you do it's really helpful.

     

    Side note:  We've talked to Adobe about merging the JS and JSON in the HTML file. If this happens it will really make Animate CC and GSAP the ultimate tool for creating banners again!

     

    Retina Export

    This is a simple script that allows you to take advantage of retina screens. It won't automatically res up your graphics but your text to text outlines will look nice and crisp. What we are doing right now is working at 100% but exporting the graphics at 2x and scaling them down in Animate CC. This is one technique...I'm sure there are other ways. Happy to hear what you come up with. Kevin Newman wrote a post about it a while back (2014).

    His code is more robust and he goes into more detail. Definitely worth the read Check it out

     

    In the attached file you will see imports for GSAP and some other goodies. Like defining the border outline and rollover/clickTag code.

    Of course you can easily use GSAP to animate elements on the stage. I have a timeline animation for the button but it can be whatever you want.

     

    Please let me know if you find this useful and please share back your profiles!

     

    Thanks guys!

    - Patrick

    BannerMaster.fla.zip

    • Like 5

    progress() is triggering onComplete handler?

    in GSAP

    Posted

    Welcome to the forum. GSAP is a massive library and could be daunting if you start cold.

    But don't worry this forum is one of the best around with some amazing contributing coders.

     

    Check out this previous post from Carl on this very type of animation

    http://greensock.com/forums/topic/11441-slotmachine-with-js-and-gsap/?p=46464

    It shows a version of a slot machine by Chris Gannon that uses GSAP.

     

    Also, if you are new to GSAP check this out too.

    http://greensock.com/get-started-js

     

    Hope this helps

    - Patrick

    • Like 4

    SVG Gotchas!

    in GSAP

    Posted

    This is really great thread idea.

    I especially love to see how others tackle the same issues I come across everyday. 

    Chris has a few SVG posts that I found useful. The Knockout Mask one was a good one.

    Looking forward to more posts guys.

     

    - Patrick

    DrawSVGPlugin and follow/Pathfinding

    in GSAP

    Posted

    Hey guys, so I am attempting this effect using the DrawSVGPlugin

    http://videohive.net/item/electronic-chipset-2/11212198?s_phrase=circuit%20board%20animation&s_rank=15

     

    It's not bad so far but I am curious how I could go about finding the front and tail of the SVG element that is animating.

    This way i could have another element follow the path or trail behind it.

     

    Just wondering if anyone has tried anything like this.

     

    Thanks!

    - Patrick

     

    See the Pen a067ea2d530383f0f14501035d94891b by SnapToPixels (@SnapToPixels) on CodePen

    Physics2DPlugin for snow animation

    in GSAP

    Posted

    Ha ha...I don't need to pump it up that much. But its comforting to know that I can. Your snow is nuts!

     

    Thanks for catching the rotation, I thought I removed that. I didn't realize the radians though. That will be useful of course.

     

    Pixi a monster library. I've been reading through the docs tonight and I am falling in love...

    Also looking at CloudKids GitHub again...things are getting serious around here. :)

     

    I appreciate the sharing. Simply awesome.

     

    btw - how did you do the shadow on the snowflakes? Or am I seeing things because I am sleepy?

     

    haha nevermind, I see it in the sprite :)

    Time for sleep

     

    Talk soon!

    Physics2DPlugin for snow animation

    in GSAP

    Posted

    yeah Starling is excellent. I use it with Feathers, Spine and GSAP to build AIR apps on iOS/Android.

    I've been working on a childrens book using these. It's so fun.

     

    Also Spine can be used with just about every popular framework.

     

    The particle engine I use with Starling is this one. It's for AS3 of course which seems to scare people these days. But if you do AIR like I do, it's brilliant.

    http://www.flintfabrik.de/pgs/starling/FFParticleSystem/

     

    Here is the homepage

    https://github.com/shin10/Starling-FFParticleSystem

    • Like 1

    Physics2DPlugin for snow animation

    in GSAP

    Posted

    It's always a good time to play with Pixi! And remember that CloudKid particle emitter I showed you?

     

    Let it snow!

    https://cloudkidstudio.github.io/PixiParticlesEditor/#snow

     

    Rain is fine too...

    https://cloudkidstudio.github.io/PixiParticlesEditor/#rain

     

     

    SWEET! Thats awesome! I dod remember you sending those links for CloudKid...definitely on my list.

    I have a Particle Designer tool from 71Squared but I don't recall if I can use it with Canvas. I bought it a long time ago to use with Starling. ;)

     

    Thanks for that link...the UI is fantastic. I love the WebGL/Canvas toggle...simple love it

     

    - P

    Physics2DPlugin for snow animation

    in GSAP

    Posted

    I know it's common in canvas animations to just update a value on each requestAnimationFrame instead of using a tween, but I doubt you'll notice any performance problems. I can't say for certain, but it might actually be faster using a tween because you can do all the calculations up front. That's how I did the star explosions with the Physics2D Plugin.

     

    See the Pen avbPON?editors=001 by osublake (@osublake) on CodePen

     

    I also like to use GSAP's ticker because it keeps everything in sync and makes sure the engine updates my values before I do any rendering. Here's a demo where I use regular tweens combined with a typical canvas update method to change the position. You can get several thousand animations going before noticing any slowdown.

     

    See the Pen vNwRdO?editors=001 by osublake (@osublake) on CodePen

     

    nice, thats excellent.

    I think I am coming to the same conclusion. That original pen was something I forked with the intention of controlling it with the GSAP ticker for that reason.

    This also might be a perfect time to play with Pixi too! Thanks for the reminder :)

     

    Patrick

    Physics2DPlugin for snow animation

    in GSAP

    Posted

    well, it was more about the GSAP vs Canvas demo.

    I started a similar one based on the GSAP Physics demo.

     

    I forgot how easy the GSAP Physics plugin is to use. Although Canvas seems more performant.

     

    Thanks for the response, I'll post my demo later

     

    P

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