Loading Dynamic Images in Flash

#1
I have read a couple of posts in here about calling up Dynamic Images but noticed it wasn't covered in any of the wiki pages that I saw. I am trying to call up dynamic team logos for a sports results page. With other software I have tried this is relatively easy but for some reason I was having trouble understanding how to do it with Caspar.

If there is a simple tutorial or documentation I missed I'm sorry, any help would be appreciated.

Re: Calling Up Dynamic Images

#2
There is no tutorial, but an example: https://www.dropbox.com/s/w44mdokaortu9 ... rdnete.zip You do ghat in Flash using a UILoader component an a little bit of ActionScript. In the example Zip you find a template, that is used to show pictures of members of a parlament. The trick is, that the your client needs to send the filename of the picture encoded as file-URL.
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

Re: Loading Dynamic Images in Flash

#4
Hello Didi,

I tried your Abgeordnete example, tried to make it a Abgeordnete.ft but Flash (Template generator v2.0.1 beta) is complaining about the following:

Code: Select all

||Generating CasparCG Flash template, version 2.0.0||

 +-----------------------------------------------------

 +Verbose tracing is activated (+), this can be turned off in the Settings tab.

 +Added parameter: id="Pic" type="string" info="Filename of Picture"

 +Added parameter: id="Vorname" type="string" info="Vorname des Abgeordneten"

 +Added parameter: id="Name" type="string" info="Name des Abgeordneten"

 +Added parameter: id="Text1" type="string" info="Funktion des Abgeordneten"

 +Added parameter: id="Text2" type="string" info="Funktion des Abgeordneten"

 +Added parameter: id="Text3" type="string" info="3. Zeile"

 +Scanning the main timeline for keyframes with labels...

 +Scanning elements...

 +Scanning the library for movie clips and bitmaps...

 + >Found a movie clip, scan it's timeline...

 +Scanning a timeline for caspar components...

 +Scanning elements...

 + >Found a movie clip, scan it's timeline...

 +Scanning a timeline for caspar components...

 +Scanning elements...

 + >Adding a caspar component instance Name1:CasparTextField

 + >Adding a caspar component instance Name2:CasparTextField

 + >Adding a caspar component instance Funktion1:CasparTextField

 + >Adding a caspar component instance Funktion2:CasparTextField

 + >Adding a caspar component instance Funktion3:CasparTextField
***Error***
 All dynamic TextFields need to have an instance name. If you want to create a text that is static, please choose static for the text field type.

***Info***
 The process was terminated.
This problem (not to be able to generate the .ft file) i also noticed when compiling the loading dynamic images example from the wiki.
Can you help me with this problem?
I did not change anything to your fla and as file!

Re: Loading Dynamic Images in Flash

#5
Hi Hans,

I don't know, what the problem is, I work with Flash CS 4 and the Template Generator V 2.0.0 Beta. With this it runs like a charm...

Sometimes it can happen, that one creates a textfield by clicking around, bit I just checked the templates in question not finding anything like that. There are five dynamic textfields Name1, Name2, Funktion1, Funktion2 and Funktion3 and nothing else...

Regards Didi
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

Re: Loading Dynamic Images in Flash

#9
I managed to get data on the screen with the command listed, but the image did not show,
can anyone find the error I made?

Code: Select all

CG 2 UPDATE 1"<templateData><componentData id=\"Text1\"><data id=\"text\" value=\" Alpha\"></data> </componentData><componentData id=\"Text2\"><data id=\"text\" value=\" Beta\"></data> </componentData><componentData id=\"Text3\"><data id=\"text\" value=\" Project X\"></data> </componentData><componentData id=\"Name\"><data id=\"text\" value=\" Movie Director \"></data> </componentData><componentData id=\"Vorname\"><data id=\"text\" value=\"Mister X\"></data> </componentData><componentData id=\"Picture\"><data id=\"text\" value=\"file:///C:/Caspar Server 2.0.4/Server/media/CLIENTS LOGO/CLIENT_14.png\"></data> </componentData></templateData>"

Re: Loading Dynamic Images in Flash

#13
Hi Kevin,

there is a better download and tutorial here:
http://casparcg.com/wiki/Content_/_Medi ... h_Template
At the top of this paragraph all source files of the example template are presented for download, and it is free of a proprietary copyright, the other was not.

Hope this helps.
Didi
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

Re: Loading Dynamic Images in Flash

#14
I did find that after I posted this. I'm a long way from understanding however. Got a gig in a couple weeks that I'm just going to accept non-dynamic graphics for and try and pick up the pieces after that. Thanks for following-up with me and I'm sure to have some questions when I start digging into things.

Kevin

Re: Loading Dynamic Images in Flash

#15
Hi Didi,

Thanks a lot for putting this together. I'm still having some trouble understanding how everything works. Here's what I'm doing right now to test this.
  • - Leave everything as is, but change the "File URL for Home Flag" to the location of my image (file:///C:/Users/Public/Documents/sockeye-logo.png)

    - Run the Template Generate and put the resulting .ft file into the templates folder of the CasparCG Server

    - Load the template in CasparCG Client and click the "+" button and enter name = "Image1" and value = "Team1Image"

    - Play the template
This doesn't appear to work. Can you help me out with what I'm doing wrong?

Thanks,

Kevin

Re: Loading Dynamic Images in Flash

#16
Hi Kevin,

where do you change the file URL, in the code? You should be able to send the file URL from the client. So the variable name (insted of the default f0) is Team1Image and the value is the URL. The same applys to Team2Image.
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

Re: Loading Dynamic Images in Flash

#17
I see. Thanks Didi! I was putting the URL in the .as file. Confused about how that gets processed.

I've got it working now, but I'm getting really low quality results from the rendered image. I tried saving the files as 8-bit & 24-bit PNGs with and without transparency as well as in JPG, but it always comes out looking extremely low resolution and pixelated. I then went back into original Flash file and tried changing the render mode on the UILoader from "Cache as Bitmap" to "Original (No Change". No luck with any of these things.

Again, I must be missing something, but I just can't seem to suss it out. Any advice on how to get the image to look sharp like the original?

Thanks,

Kevin

Re: Loading Dynamic Images in Flash

#20
I'm using the dynamic image capabilities to run a scoreboard display and whenever we push updated data to the display the image seems to flicker, like it takes a short time to load the image in. We haven't experienced this with some other software we use so I wanted to see if maybe there was something wrong I was doing or if there was a way to cache the images so the load time was minimal.

Re: Loading Dynamic Images in Flash

#21
This is totally a matter of your actionscript. If you have a dynamic image component, and just tells it to change source, it will unload the old image before starting to asynchronous load the new one. You will see a small flicker as described.

The best way is to add some logic to you code. Have a loader of the new image finish loading before changing the content. Maybe you can do a quick-and-dirty fix with two keyframes overlapping, manipulating alpha and swap images back and forth. Then you should be able to make it with minimum scripting. Otherwise you'll need to program some loading logics.
Jesper Stærkær
Independent Consultant at SuperFly.tv

Re: Loading Dynamic Images in Flash

#22
I also face this problem. So I tested this code and found working fine.
Action script checks if image url is same or different. If same; it will not do anything with update command, and so no flicker.

Code: Select all

if (oldimage!=newimage)
					{
						mc1.loader1.source = newimage;
						oldimage = newimage;
					}
Full code is here.

Code: Select all

package 
{
	import se.svt.caspar.template.CasparTemplate;
	public class main extends CasparTemplate
	{

		var newimage:String;
		var oldimage:String;
		public function main()
		{
		}

		override public function SetData(xmlData:XML):void
		{
			super.SetData(xmlData);

			for each (var element:XML in xmlData.elements())
			{

				if (element. @ id == "loader1")
				{
					newimage = element.data. @ value;
					if (oldimage!=newimage)
					{
						mc1.loader1.source = newimage;
						oldimage = newimage;
					}

				}
			}
		}


	}
}

Re: Loading Dynamic Images in Flash

#26
Thanks for your answer Didi,

in your app is this entry: <parameter id="Text1" type="string" info="Funktion des Abgeordneten" />
I have: <parameter id="Team1Image" type="string" info="file:///g:/andre1.jpg" />

I have tried info="file:///andre1.jpg" /> in the same Directory and with a link from Internet info="http://www.walkomedia.de/bilder/transporter.jpg" />

I can`t see the picture.

It is no AMCP tag but an XML tag.


Without the " and / I get an error.

Greetings
Jens

Re: Loading Dynamic Images in Flash

#28
Hello guys, it's my first time here in the forum of CasparCG, first of all I would like to thank you for the fantastic work you put out.

I have some problems getting the dynamic images to load, I have followed every step carefully on Didi's tutorial, I get the dynamic text to show but not the images.

Here are some screenshots

https://www.dropbox.com/s/xw2n2gkhs94e2 ... .50.09.jpg
https://www.dropbox.com/s/m3d1bbil3vrzj ... .50.24.jpg
https://www.dropbox.com/s/yen39nwhvz6qr ... .50.33.jpg


my .fla file
https://www.dropbox.com/s/cg1y2l2whuym0 ... istics.fla

my .as file
https://www.dropbox.com/s/bkv6g3bbzivfq ... tistics.as

I have triple-checked everything and still don't know where the mistake can be

I would be very grateful if somebody could spend a coulpe minutes of their time and check it out. I have tried escaping all the " in the .as file but then i get a whole bunch of compiling errors so I think that's not the problem.

thank you very much in advance

Re: Loading Dynamic Images in Flash

#29
The missunderstanding is with "customParameterDescription". This is a description of the parameters you give the template from within Caspar and NOT the value itself. So you need to send your filename, like your text variables, from your client. That is the whole sense of loading the image dynamicly, that you can send it from your client and not hard code it into your template...
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

Re: Loading Dynamic Images in Flash

#30
didikunz wrote:The missunderstanding is with "customParameterDescription". This is a description of the parameters you give the template from within Caspar and NOT the value itself. So you need to send your filename, like your text variables, from your client. That is the whole sense of loading the image dynamicly, that you can send it from your client and not hard code it into your template...
oh... now it ALL makes MUCH more sense. I just got it working. Thank you so much for taking the time to answer to so many questions (i've been browsing the forum for a while). It is much appreciated!

Re: Loading Dynamic Images in Flash

#31
Hi Didi,

Thanks for this tutorial! I've got images loading dynamically, which is great!

What i'm struggling with, is animating them. I've modified the template you've provided (basically deleted a bunch of stuff I don't need, and resized the UILoader windows to suit my images, but I can only get the template to play 1 frame! It loads up on the start frame, and doesn't do anything from there. (I've animated the images to zoom in from the 1 side.)

What am I doing wrong?

Re: Loading Dynamic Images in Flash

#32
I've been fiddling with this still for a while. What I've noticed is that when I add keyframe in a layer which contains a UIloader, it adds another instance of UIloader ... possibly a flash (user) issue. I can still only get the first frame of any file to play...

Re: Loading Dynamic Images in Flash

#33
Kibim wrote:I've been fiddling with this still for a while. What I've noticed is that when I add keyframe in a layer which contains a UIloader, it adds another instance of UIloader ... possibly a flash (user) issue. I can still only get the first frame of any file to play...
See this http://casparcg.com/forum/viewtopic.php?f=12&t=2715 for the exact same problem.
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

Re: Loading Dynamic Images in Flash

#35
Hi.
With great interest I read this whole conversation because a year later after you guys I am trying to do the same... to load external images into flash templates and to display them with Caspar CG - but I cant get it to work.
Since you figured it out already could you please post the correct AS that does work? (Preferably Flash CS6).

Does anyone know of a different way of doing it instead of Action Script in Flash - which is really annoying.

Thanks!

Re: Loading Dynamic Images in Flash

#38
Here i found some examples of how to load images with UILoader. But you should create this object manually by draging it to the stage. I create all objects by script and I use flash.display.Loader class to load images. They are loading, but when i try to resize them with .scaleX and .scaleY properties - quality became weird. How to resize them correctly?

Re: Loading Dynamic Images in Flash

#42
Hi,

I too have troubles with dynamic images. I've have created al lot of templates even one's that load dynamically from an XML. But When I try do something really simple it just fails. I've downloaded the Volleyball example placed the .ft and .as is the templates folder. Run it with casparCG client. text-data is showing but no image.

I have an image (BEL.png) in a folder directly on C => C:/images/BEL.png
In the Caspar Client I set 'Image1' as Key and 'file:///C:/images/BEL.png' as value, and using next() the data changes but no image shows up.

I've replaced the value with 'C:/images/BEL.png', 'images/BEL.png' tried placing the images in different directories, but now image is showing up.

Can anyone tell me what I'm doing wrong?

Kind Regards,

Patrick

Re: Loading Dynamic Images in Flash

#45
Is it possible that the TeamStatistics.as file isn't doing what is supposed to do?

I've edited the code and added a function to something on next(). But that doesn't fire either when I give a next command in casparCG Client.

Code: Select all

package
{
	import flash.display.MovieClip;
	import se.svt.caspar.ICommunicationManager;
	import se.svt.caspar.IRegisteredDataSharer;
	import se.svt.caspar.template.CasparTemplate;
      
	public class TeamStatistics extends CasparTemplate
	{
		private const customParameterDescription:XML = 	
		<parameters>
	   		<parameter id="Team1Image" type="string" info="File URL for Flag Home" />
	   		<parameter id="Team2Image" type="string" info="File URL for Flag Guest" />
		</parameters>;
		
		override public function SetData(xmlData:XML):void 
		{			
		   for each (var element:XML in xmlData.children())
		   {
			  if (element.@id == "Team1Image") 		
			  {
				  Image1.source = element.data.@value.toString();
			  }
			  if (element.@id == "Team2Image") 		
			  {
				  Image2.source = element.data.@value.toString();
			  }
		   }
		   super.SetData(xmlData);		
		}
		
		override public function Next():void {
		  Team1Player2.text = "Write Something";
		}
	}

}

Re: Loading Dynamic Images in Flash

#48
d3aak117 wrote:in the sample tam statistic how could call or loading the Image in caspar CG client
actually I face this problem >> the text show on but I couldn't put the Images
You mean this: http://casparcg.com/wiki/Content_/_Medi ... h_Template? The variables are called Team1Image and Team2Image and the filenames need to be formatted as URL's as it's written there.
Grab1.PNG
Grab1.PNG (6.53 KiB) Viewed 4300 times
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

Re: Loading Dynamic Images in Flash

#49
didikunz wrote:
d3aak117 wrote:in the sample tam statistic how could call or loading the Image in caspar CG client
actually I face this problem >> the text show on but I couldn't put the Images
You mean this: http://casparcg.com/wiki/Content_/_Medi ... h_Template? The variables are called Team1Image and Team2Image and the filenames need to be formatted as URL's as it's written there.
Grab1.PNG
thank you so much it's work with me finally :)

Who is online

Users browsing this forum: Google [Bot] and 1 guest

cron