Return to Starling Playback Library

Controlling animations, what is possible and what not?

Questions related to Starling playback library should be asked here.

Controlling animations, what is possible and what not?

Postby Gigi Marzullo » March 21st, 2017, 11:28 pm

Hello,

Our current workflow dream would be to get .swf out of graphic artists and make content and animations a little bit variadic (dynamic) based on external data configuration.
Out of an animation we would like to manipulate:

- translation (also the motion path later on)
- scaling
- rotation
- opacity
- color
- change text/pictures dynamically (loading a picture externally, not from atlas)

Is it possible to touch all these properties out of a gafmovieclip/gaftextfield?
Do you support videos at the moment?


I have been studying a bit the code and noticed you apply transformations on a frame to frame basis, but without making the difference from previous frame, you reset the object and then apply the next frame matrix into it.
At the moment I am trying to rotate an object manipulating the matrix instances inside the frame, it does work if I change the matrix in every frame, the resulting animation is rotated, I didn't manage to change the registration point though. I attempted to rotate a picture centering its rotation point. If I just rotate the frame matrix, it will rotate the whole animation.

Here is the approsch I've been trying to use.
Code: Select all
   public class App extends Sprite
      {
      [Embed(source="../../GAF/GAFtry.zip", mimeType="application/octet-stream")]
      public static const Zip:Class;
   
      private var gafMC: GAFMovieClip;
      
      public function App()
         {
         var converter: ZipToGAFAssetConverter = new ZipToGAFAssetConverter();
         converter.addEventListener(Event.COMPLETE, this.onConverted);
         converter.convert(new Zip());
         }
   
      private function onConverted(event: Event): void
         {
         var converter: ZipToGAFAssetConverter = event.target as ZipToGAFAssetConverter;
         converter.removeEventListener(Event.COMPLETE, this.onConverted);
         
         var gafTimeline: GAFTimeline = converter.gafBundle.getGAFTimeline("GAFtry");

         
         var frames:Vector.<CAnimationFrame> = gafTimeline.config.animationConfigFrames.frames;
         var length:int = gafTimeline.config.animationConfigFrames.frames.length;
         for(var i:int = 0; i < length; ++i)
            {
            trace(frames[i].instances[0].getTransformMatrix(new Matrix(), 1));
            var m:Matrix = frames[i].instances[0].getTransformMatrix(new Matrix(), 1);
            var tx = m.tx;
            var ty = m.ty;
            m.translate(-90.5, -70.5);
            /*m.tx -= 90.5;
            m.ty -= 70.5;*/
            m.rotate(1.5708);
            m.translate(90.5, 70.5);
            m.setTo(m.a, m.b, m.c, m.d, tx, ty);
            frames[i].instances[0].update(frames[i].instances[0].zIndex, m, frames[i].instances[0].alpha, frames[i].instances[0].maskID, frames[i].instances[0].filter);
            trace(" -->" + m);
            }

         gafMC = new GAFMovieClip(gafTimeline);
         //gafMC.loop = false;
         gafMC.play();
         
         this.addChild(gafMC);
         trace("done!");
         }
      }
   }
Attachments
GAFtry.zip
(4.34 KiB) Downloaded 157 times
User avatar
Gigi Marzullo
 
Posts: 20
Joined: March 10th, 2017, 4:42 pm

Re: Controlling animations, what is possible and what not?

Postby Gigi Marzullo » March 22nd, 2017, 3:31 am

After some more thoughts I could make it work with an in place rotation of 90 degs. I realized had to translate, retranslate based on every frame mx, my, not just the first, otherwise the whole clip is turned.
I was wondering if this would be the right approach to make my animations dynamic based on external data (not GAF data). It comes handy because the changes I might have to apply to the original animation are simple, and the workflow from Animate CC can be maintained to avoid animation hand coding, placing objects etc..., but also to add some dynamicity to the animation itself, this use case is very important for us.
Currently I am experimenting, but yes if you could give me hints that'd be great. I am sure they'd be interested in buying GAF, it's a great tool. To achieve this I was not required to change any code in the starling GAF player.

Code: Select all
public class App extends Sprite
      {
      [Embed(source="../../GAF/GAFtry.zip", mimeType="application/octet-stream")]
      public static const Zip:Class;
   
      private var gafMC: GAFMovieClip;
      
      public function App()
         {
         var converter: ZipToGAFAssetConverter = new ZipToGAFAssetConverter();
         converter.addEventListener(Event.COMPLETE, this.onConverted);
         converter.convert(new Zip());
         }
   
      private function onConverted(event: Event): void
         {
         var converter: ZipToGAFAssetConverter = event.target as ZipToGAFAssetConverter;
         converter.removeEventListener(Event.COMPLETE, this.onConverted);
         
         var gafTimeline: GAFTimeline = converter.gafBundle.getGAFTimeline("GAFtry");

         
         var frames:Vector.<CAnimationFrame> = gafTimeline.config.animationConfigFrames.frames;
         var length:int = gafTimeline.config.animationConfigFrames.frames.length;
         for(var i:int = 0; i < length; ++i)
            {
            trace(frames[i].instances[0].getTransformMatrix(new Matrix(), 1));
            var m:Matrix = frames[i].instances[0].getTransformMatrix(new Matrix(), 1);
            //var oldTx = m.tx;
            //var oldTy = m.ty;
            m = rotateAroundExternalPoint(m, new Point(m.tx + 90.5, m.ty + 70.5), 180);
            //m.translate(90.5, 70.5);
            m.setTo(m.a, m.b, m.c, m.d, m.tx, m.ty);
            frames[i].instances[0].update(frames[i].instances[0].zIndex, m, frames[i].instances[0].alpha, frames[i].instances[0].maskID, frames[i].instances[0].filter);
            trace(" -->" + m);
            }

         gafMC = new GAFMovieClip(gafTimeline);
         //gafMC.gotoAndStop(1);
         gafMC.play();
         
         this.addChild(gafMC);
         trace("done!");
         }
   
   private function rotateAroundExternalPoint(m:Matrix, pivot:Point, angleDegrees:Number):Matrix{
         var mat:Matrix = m.clone();
         mat.tx -= pivot.x;
         mat.ty -= pivot.y;
         mat.rotate(deg2rad(angleDegrees));
         mat.tx += pivot.x;
         mat.ty += pivot.y;
         return mat;
         }
      }
User avatar
Gigi Marzullo
 
Posts: 20
Joined: March 10th, 2017, 4:42 pm

Return to Starling Playback Library

Who is online

Users browsing this forum: No registered users and 1 guest