Jump to content
GreenSock

muxa

Adobe Animate CC Draggable and Sortable DataGrid with ScrollPane

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hello Everyone,

 

i am learning my way to move from Flash to HTML5 . GreenSock Forum is an amazing place . thank you all

 

i was stuck for a few days trying to understand the Draggable and trying to integrate with Adobe animate cc  in order to build Simple scroll-able Data grid

 

I've done that with flash before but in the attached project Draggable always returning "Can't Tween a Null Object object ...

 

var root = this,
    t;

 t.from(root.ExampleMC, 1, {y:"500", ease:Back.easeOut}); // working fine

Draggable.create(root.ExampleMC); // returns error of null object

 

Any help is highly appreciated

 

i wanna add basic square to act as a holder of all rows and be able sort and load and scroll up and down same as any data grid

 

Please review attached simple example

 

Thanks

Grid2_testing.zip

Link to comment
Share on other sites

Sorry, Draggable wasn't designed to work with Animate CC. 

Draggable works by modifying the CSS properties of the thing you are dragging. Draggable needs a DOM element (like a <div> or <img>) as its target. 

Adobe Animate renders everything inside an HTML5 <canvas> which is ultimately just a single bitmap representation of the objects you design in Animate.

 

Blake has done some demos where he overlays an invisible DOM element on top of a <canvas> and passes that DOM element into Draggable. When the Draggable updates he re-renders the canvas. Discussion here: Adobe Animate CC renders to the HTML5 <canvas>.  I'd imagine its possible to do something similar in Animate but I'm guessing it could be a little tricky to figure out.

Link to comment
Share on other sites

I actually just made a demo using Pixi...

See the Pen 50e73afa5b9cd1f7141695524da09df4 by osublake (@osublake) on CodePen

 

I'm pretty sure you could do the same in AnimateCC as it does maintain a reference to all your objects, I just don't know how to use it. In Pixi you can define a hit region on a display object, and in the onPress callback I test to see if the mouse coordinate are inside a hit region. If it is, then I can apply the position of the draggable to the display object in the onDrag callback.

 

.

  • Like 2
Link to comment
Share on other sites

Thanks for you reply and the examples

 

I tried to integrate PIXI example with adobe animate its working but very slow there is an error please review attached picture

In Adobe animate CC we can create square symbol Movie clip  then attach any item from Library to it

 

My question can we make the item we attached drag gable inside the square symbol not inside the canvas ?

can we add nice scroll bar http://manos.malihu.gr/jquery-custom-content-scroller/

to the items list and make them sortable ?

 

i managed to create the attached example with adobe animate but still i can't attach slider or make the grid row move inside the bounds of the MC

 

 

GridRowlib = new lib.GridRow();

var dragger = new createjs.Container();
dragger.addChild(GridRowlib);

 

 

Any ideas are highly appreciated

 

Thanks

 

 

 

post-9658-0-81950500-1485278405_thumb.jpg

grid2.zip

Link to comment
Share on other sites

Dear OSUblake,

 

Please can you tell me if  its possible to make something like this :- http://zimjs.com/code/bits/view/scrollbar.html

 

using GreenSock draggable ?

 

Thanks

 

 

I actually just made a demo using Pixi...

See the Pen 50e73afa5b9cd1f7141695524da09df4 by osublake (@osublake) on CodePen

 

I'm pretty sure you could do the same in AnimateCC as it does maintain a reference to all your objects, I just don't know how to use it. In Pixi you can define a hit region on a display object, and in the onPress callback I test to see if the mouse coordinate are inside a hit region. If it is, then I can apply the position of the draggable to the display object in the onDrag callback.

 

.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×