It is currently 29 Mar 2017, 17:58



Templates using AS3 & INVOKE

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

Templates using AS3 & INVOKE

Postby dangb » 15 Nov 2016, 11:22

In order to reduce the number of templates to edit (10 down to 1). I'm looking into how I can form a template and code in all animations to AS with Tweens and use the INVOKE command to show the relevant parts of the template rather than having to use PLAY x template.

Can I just check I have the right idea on this below;
-add all background elements (image files) & dynamic text fields to layers on frame one - convert to Moiveclips and name each instance (apart from UIloaders which will only work from coding which I have working ok already)
-set all elements alpha to 0 using override postInitialize;
Code: Select all
override public function postInitialize():void
      {
         UIloader1.alpha = 0;   
         UIloader2.alpha = 0;
background1.alpha =0;
background2.alpha = 0;
text1.alpha=0;
text2.alpha=0;
'all other elements here
}


add functions to each of the needed displays eg

Code: Select all
pubic function showoneline():void
{
new Tween(UILoader1, "alpha", Strong.easeIn, 0, 1, 60, false);
new Tween(text1, "alpha", Strong.easeIn, 0, 1, 60, false);
new Tween(background1, "alpha", Strong.easeIn, 0, 1, 60, false);
super.Play();
}

public function showtwoline():void
{
new Tween(UIloader1, "alpha", Strong.easeIn, 0, 1, 60, false);
     new Tween(UIloader2, "alpha", Strong.easeIn, 0, 1, 70, false);
new Tween(text1, "alpha", Strong.easeIn, 0, 1, 60, false);
     new Tween(text2, "alpha", Strong.easeIn, 0, 1, 70, false);
new Tween(background1, "alpha", Strong.easeIn, 0, 1, 60, false);
     new Tween(background2, "alpha", Strong.easeIn, 0, 1, 70, false);
super.Play();
}
'etc etc


if that is the right track a couple of questions
- how can I define the total time of the animation?
- currently I use the flash timeline action layer with a stop(); command on the last frame to hold the animation on the screen - how could I do that with code?
-if everything is sent now using 'INVOKE xfunction' in casapr how do I send data to the relvent dymanic text fields, and UIloaders (labled Img1,Img2 etc)
- I've assumed that the 'super.play' command is needed to start the animation for all cases is that correct?
-i'll use the below code to fade out the template below (which seems to work ok already);
Code: Select all
override public function Stop():void
{
new Tween(super, "alpha", Strong.easeOut, 1, 0, 100, false);
        super.stop();
}


any help would be most useful!!

thanks
Dan
dangb
 
Posts: 24
Joined: 11 Jul 2016, 21:42

Re: Templates using AS3 & INVOKE

Postby didikunz » 15 Nov 2016, 12:11

Hi Dan,

It's one way of doing it, if it's the best depend on your use case. I personally tend to separate different graphics into different templates. So I have one for lower thirds and one for the clock for instance. But inside lower third I build it, that it can have one or two lines, if needed. So I have no "one_line_lower_third" and "two_line_lower_third" for instanbce.

The way how I would do it is along theese lines: Put all your different timelines into separate movieClips. Add a "stop();" at the first frame in your action layer. If that frame is clean (nothing displayed) you don't need to set the alpha of the movieClip to zero. Then from your INVOKE functions use "nameOfMovieClip.gotoAndPlay(0);" To play the animation.

Based on this pattern you can also have an in-animation and an out-animation in the same movieClip. Put a stop on the frame where the animation is fully animated in and play from there for the out-animation.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Templates using AS3 & INVOKE

Postby dangb » 15 Nov 2016, 13:28

thanks Didi,

it is pretty much the same graphic - just using a different number of lines (1 up to 10) to show depending on how many records there are to display (a results screen in effect).

As I understand, your method is to animate the elements using the timeline (assume this is the main timeline?), then form different movieclips of each type to show (eg mov1 to include just the first line and text, mov2 to include line1 & line2 plus text lines etc) then added functions like;

Code: Select all
public function one_line(): void
{
mov1.gotoAndPlay(0);"
}
public function two_line(): void
{
mov2.gotoAndPlay(0);"
}


If the above is correct because I also have UIloaders as well - guess I would have to do something like ;

Code: Select all
public function one_line(): void
{
new Tween(UILoader1, "alpha", Strong.easeIn, 0, 1, 60, false);
mov1.gotoAndPlay(0);"
super.Play();
}
public function two_line(): void
{
new Tween(UILoader1, "alpha", Strong.easeIn, 0, 1, 60, false);
new Tween(UILoader2, "alpha", Strong.easeIn, 0, 1, 60, false);
mov2.gotoAndPlay(0);"
super.Play();
}


I think this is wrong as effectively ended up with two play commands?
dangb
 
Posts: 24
Joined: 11 Jul 2016, 21:42

Re: Templates using AS3 & INVOKE

Postby didikunz » 15 Nov 2016, 13:47

I don't know, what you have on the main timeline, or if you need it. I always have only a single frame in the main timeline and do everything from code. Using Tweener or Greensock you can do a lot of fancy animations from code.

If you would also overwrite SetData() you could count how many fields are not empty and run the coresponding movieClip based on this, so you can avoid having to call the different INVOKE's at all. You could have a select case statement in your play() procedure, that stats the clips based on this number.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Templates using AS3 & INVOKE

Postby didikunz » 16 Nov 2016, 10:47

I just realized, that it should read .gotoAndPlay(1); instead of .gotoAndPlay(0);

And in your code, that you posted there are " behind that comand, these are wrong.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Templates using AS3 & INVOKE

Postby dangb » 25 Nov 2016, 07:23

Thanks Didi,

I'll take a look at this again.

Cheers
Dan
dangb
 
Posts: 24
Joined: 11 Jul 2016, 21:42

Re: Templates using AS3 & INVOKE

Postby Ultravibe » 23 Dec 2016, 21:40

Some modifications of Didi's method. I will tell how I do this.
I have 3 files:
handball.fla - flash file with 1 frame. It has no objects. Everything is created by code
handball.as - a description of class "handball" which contains methods (each method for each type of title)
handballControl.as - a description of class "handballControl" which attached to .FLA file to intercept "SetData" XML
The scheme like this: You send the command to Caspar, for example:
Code: Select all
CG 1-5 ADD 10 fight/fight 1 "<templateData><componentData id=\"bigstat\"><data name=\"Alexander\" surname=\"SARNAVSKIY\" country=\"RUS\" flag=\"russia.png\" /></componentData></templateData>"

you attach XML to your command. XML has a few fields (name, surname, country, flag etc.) and values for that fields.
Caspar transfer this data to template that will be ADDed. The trick is to intercept this data, and do some actions depending of what is there. My "interception" is watching "id" parameter and if it has a specific value ("bigstat","personal","lower-third") it calls a specific method from handball.as class. This class can be attached like this:
Code: Select all
var Title:handball = new handball; addChild(Title);

This class has a few "public var" and you can put needed data into it. The methods are used like this:
Code: Select all
Title.Personal();

When id is one of needed values, i'm "remember" this value in TitleType variable and when i need to animate-out i call method from my class depending of what type of title was requested.
As i say before, initially no objects in flash file. All of them is created by Action Script 3.0
I use shape.graphics.lineTo, shape.graphics.drawRect and many more facilities to draw what i need. It seems dificult, but with some experience it is very simple.
User avatar
Ultravibe
 
Posts: 275
Joined: 11 Jan 2015, 09:05

Re: Templates using AS3 & INVOKE

Postby Ultravibe » 23 Dec 2016, 21:51

Here is screenshots of startlist and players lineup
Attachments
example2.png
example2.png (121.43 KiB) Viewed 574 times
example1.png
example1.png (119.89 KiB) Viewed 574 times
User avatar
Ultravibe
 
Posts: 275
Joined: 11 Jan 2015, 09:05


Return to Content

Who is online

Users browsing this forum: No registered users and 2 guests