+ Reply to Thread
Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12

Cue points and Flash CS3

This is a discussion on Cue points and Flash CS3 within the Tutorials forums, part of the Flash English category; This tutorial will be certainly interesting for those of you, who like me a few years ago was spending hours ...

  1. #1
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Cue points and Flash CS3

    This tutorial will be certainly interesting for those of you, who like me a few years ago was spending hours searching Mr Google for articles or tutorials which would explain how to use videos FLV and cue points.
    If you are not sure of the potentiality behind the use of cue points, I recommend you to read and follow carefully what I will show you next.
    Using cue points, we can synchronise videos FLV and action scripting. To explain myself better, let us think of a video to which we would like to apply effects at a determinate time.
    A classic example could be a video, which reproduce an action at each goal of a football match. At the precise moment of the goal, we could add an animation to the video downloaded progressively via Flash. We can attach a MovieClip from the library, call a function, retrieve values and use them in our animation"in brief; we could whatever Actionscript allows us to do inside the video.
    Even more, I will use an XML file, loaded naturally in Flash with the XML Class of Flash CS3 , into which I will write the values of the cue points (time, name and type). I will then tell Flash what to do at the precise moment the cue point is reached during the reproduction of the video.

    It is a lot easier to do then explain"so let us get into it. Follow me"

    I found on the web a cute video to which I will apply the example of the cue points. Maybe the theme of the video is not best-suited but it renders the idea very well.

    I convert the video (WMv format to FLV) using the Adobe Flash CS3 video encoder, without adding any cue points.
    In this example, I will use 5 cue points, but we can add some more if needed.

    I create a FLA and save it as "main.fla", into which:
    - I drag on stage an instance of the FLVPlayback component and name it "player" with the following values in the property panel:

    configurazione del componente FLVPlayback di Flash CS3

    The point of this tutorial is to view a carton type speech balloon each time a cue point is reached inside the FLVPlayback component, I create 5 MovieClip in library named "mc_cloud_1 ', ' mc_cloud_2 ', ' mc_cloud_3 ', ' mc_cloud_4 ', ' mc_cloud_5 ' .
    To each one of those MovieClip, I add a speech balloon with a simple fade in and out motion tween and some appropriate text to the moment the respective cue point is reached.
    Finally, I associate to those MovieClip the correspondent classes (the "old" linkage id used with the method attachMovie in AS 2.0) named Cloud1, Cloud2, Cloud3, Cloud4, Cloud5,

    added automatically by Flash (you can read more about it in the article attachMovie and addChild )
    Now, we are ready to create 2 AS files, which will run everything smoothly.

    First, I create a Document Class, an AS file saved as "Main.as", implemented the following way:
    Code:
    package
    {
    	import flash.display.MovieClip;
    	import flash.text.TextField;
    	import flash.utils.Timer;
    	import fl.video.MetadataEvent;
    	import flash.events.TimerEvent;
    	
    	public class Main extends MovieClip
    	{
    		private var xml:LoadingXML;
    		
    		public var cuePoints_array:Array;
    		public var parameters_array:Array;
    		public var clouds_array:Array;
    		
    		private var cloud:MovieClip;
    		
    		private var timer:Timer;
    		
    		private var id:int=0;
    		
    		public function Main()
    		{
    			init();
    		}
    		
    		private function init():void
    		{
    			stage.frameRate=31;
    			
    			cuePoints_array=new Array();
    			parameters_array=new Array();
    			clouds_array=new Array(Cloud1,Cloud2,Cloud3,Cloud4,Cloud5);
    			
    			loadXML();
    		}
    		
    		private function loadXML():void
    		{
    			xml=new LoadingXML(this);
    		}
    		
    		public function addCuePoints():void
    		{
    			for(var i:int=0;i < cuePoints_array.length;i++)
    			{
    				player.addASCuePoint(cuePoints_array[i]);
    			}
    			addingListener();
    		}
    		
    		private function addingListener():void
    		{
    			player.addEventListener(MetadataEvent.CUE_POINT,go);
    			player.play();
    		}
    		
    		private function go(m:MetadataEvent):void
    		{
    			player.stop();
    			executeCue(m.info.name);
    		}
    		
    		private function executeCue(s:String):void
    		{
    			cloud=new clouds_array[id];
    			addChild(cloud);
    			info_txt.appendText('cue point name: '+s+'\n');
    			goNext();
    			
    			switch(id)
    			{
    				case 0:
    				cloud.x=230;
    				cloud.y=180;
    				break;
    				
    				case 1:
    				cloud.x=170;
    				cloud.y=140;
    				break;
    				
    				case 2:
    				cloud.x=170;
    				cloud.y=140;
    				break;
    				
    				case 3:
    				cloud.x=170;
    				cloud.y=140;
    				break;
    				
    				case 4:
    				cloud.x=230;
    				cloud.y=180;
    				break;
    			}
    		}
    		
    		private function goNext():void
    		{
    			timer=new Timer(1500,1);
    			timer.addEventListener(TimerEvent.TIMER,takeOffCloud);
    			timer.start();
    		}
    		
    		private function takeOffCloud(t:TimerEvent):void
    		{
    			cloud.play();
    			id++;
    		}
    		
    		public function restartPlayer():void
    		{
    			player.play();
    			removeChild(cloud);
    		}
    	}
    }
    Next, I use the LoadingXML class (already used frequently in other articles on this site), an AS file, implemented the following way:
    Code:
    package
    {
    	import flash.display.MovieClip;
    	import flash.display.Loader;
    	import flash.events.Event;
    	import flash.net.URLLoader;
    	import flash.net.URLRequest;
    	import flash.xml.*;
    	import flash.geom.ColorTransform;
    	
    	public class LoadingXML extends XMLDocument
    	{
    		private var _fla:MovieClip;
    		
    		private var cue:Object;
    		private var parameter:Object;
    		
    		public function set fla(m:MovieClip):void
    		{
    			_fla=m;
    		}
    		public function get fla():MovieClip
    		{
    			return(_fla);
    		}
    		
    		public function LoadingXML(m:MovieClip)
    		{
    			fla=m;
    			this.loadXML();
    		}
    		private function loadXML():void
    		{
    			var loader:URLLoader=new URLLoader();
    			loader.addEventListener(Event.COMPLETE,completeHandler);
    			
    			var request:URLRequest=new URLRequest('http://www.flepstudio.org/swf/videos/cue_points/cue_points.xml');
    			try 
    			{
    				loader.load(request);
    			} 
    			catch(error:Error) 
    			{
    				trace('Impossibile caricare il documento.');
    			}
    		}
    		private function completeHandler(event:Event):void
    		{
    			var loader:URLLoader=URLLoader(event.target);
    			var result:XML=new XML(loader.data);
    			var myXML:XMLDocument=new XMLDocument();
    			myXML.ignoreWhite=true;
    			myXML.parseXML(result.toXMLString());
    			var node:XMLNode=myXML.firstChild;
    			var firstLength:int=int(node.childNodes.length);
    			for(var i:int=0;i < firstLength;i++)
    			{
    				cue=new Object();
    				var secondLength:int=int(node.childNodes[i].childNodes.length);
    				for(var j:int=0;j < secondLength;j++)
    				{
    					if(j==0)
    						cue.time=Number(node.childNodes[i].childNodes[j].firstChild.nodeValue);
    					if(j==1)
    						cue.type=node.childNodes[i].childNodes[j].firstChild.nodeValue;
    					if(j==2)
    						cue.name=node.childNodes[i].childNodes[j].firstChild.nodeValue;
    					/*if(j==3)
    					{
    						parameter=new Object();
    						var thirdLength:int=int(node.childNodes[i].childNodes[j].childNodes.length);
    						for(var z:int=0;z < thirdLength;z++)
    						{
    							var forthLength:int=int(node.childNodes[i].childNodes[j].childNodes[z].childNodes.length);
    							for(var w:int=0;w < forthLength;w++)
    							{
    								if(w==0)
    									parameter.name=node.childNodes[i].childNodes[j].childNodes[z].childNodes[w].firstChild.nodeValue;
    								if(w==1)
    									parameter.value=node.childNodes[i].childNodes[j].childNodes[z].childNodes[w].firstChild.nodeValue;
    							}
    						}
    						_fla.parameters_array.push(parameter);
    					}*/
    				}
    				_fla.cuePoints_array.push(cue);
    			}
    			_fla.addCuePoints();
    		}
    	}
    }
    I will then create an XML file into which I will add the values of the cue points.
    I would like you to pay attention to the 3 tags
    Attached Files

  2. #2
    Junior Member Settled In affirmallchance is on a distinguished road
    Join Date
    Feb 2008
    Posts
    2
    Rep Power
    0

    Re: Cue points and Flash CS3

    Hello, I appreciate your site, thank you from Korea!

    I am confused here:

    A MovieClip instance to which is assigned the root passed by the Main.as Class
    private var _fla:MovieClip;

    Is _fla the main timeline?

    Also, what are you doing with the set / get funtions?

    Sorry if my questions are too simple, I am new to AS3...

    Again, thank you!

  3. #3
    Administrator Living At The FlepStudio! Flep is on a distinguished road
    Join Date
    Jul 2007
    Posts
    5,762
    Rep Power
    11

    Re: Cue points and Flash CS3

    Hi and welcome

    Yes, _fla is the MainTimeLine.

    Anyway, you also can use Event.ADDED_TO_STAGE and you do not need to pass the _fla.

  4. #4
    Junior Member Settled In affirmallchance is on a distinguished road
    Join Date
    Feb 2008
    Posts
    2
    Rep Power
    0

    Re: Cue points and Flash CS3

    Hi Flep,

    Thanks for your response. I am very interested in this player you have created and would very much like to understand it well. So I have a few more questions.

    QUESTION 1

    You have:

    private function loadXML():void

    in both the Main class and LoadingXML class. I assume they can be named differently since they are both set to private and neither are being called by the other class.

    Is this correct?

    QUESTION 2

    Is there any relationship between these 'm's?

    executeCue(m.info.name);
    in the Main class

    And...

    public function LoadingXML(m:MovieClip)
    in the LoadingXML class?

    These are probably very simple answers but I get confused with how things are connected in different classes especially when they have the same names but are not related with each other.

    I hope you can clear this up for me.

    Again, thank you Flep and I really appreciate your great site!!!

  5. #5
    Junior Member Settled In edoconnell is on a distinguished road
    Join Date
    Feb 2008
    Posts
    1
    Rep Power
    0

    Re: Cue points and Flash CS3

    Hello,

    This is fantastic. I have been trying to make a similar project of mine more modular and this is a huge step towards that, particularly with the ability to create the cue points via XML, which will spare me a lot of time in the future working with some of my teammates who need to move cue points around but are terrified of opening Flash.

    One persistent need that I have not been able to figure out is how to have one control pause both the loaded video and whatever swf is currently playing, and then allow them to restart again, also in synch.

    Would you happen to have an idea of how this could be accomplished in the context of your project? Even a hint would be greatly appreciated. I have also scoured the internet with Google, looking for answers to this problem, and have come up short.

    Thanks again for a marvelous piece of work.

  6. #6
    Junior Member Settled In shortbus is on a distinguished road
    Join Date
    Apr 2008
    Posts
    1
    Rep Power
    0

    Re: Cue points and Flash CS3

    Just wanted to chip in my thanks for this tutorial. I based an xml-powered movie with corresponding slideshow project on your code here and it worked out great. Thanks!

  7. #7
    Junior Member Settled In codo is on a distinguished road
    Join Date
    Apr 2008
    Posts
    28
    Rep Power
    0

    Thumbs up Re: Cue points and Flash CS3

    He Fillipo,

    Thanks man!!!

    Cor
    The Netherlands

  8. #8
    Junior Member Settled In kurdt_the_goat is on a distinguished road
    Join Date
    Nov 2008
    Posts
    1
    Rep Power
    0

    Re: Cue points and Flash CS3

    Hello

    Thank you very much for this tutorial, i'm very much a flash novice but since you provided the source files i can easily work through your demo, which is more than i can say for plenty of other tutorials on this subject!

    I need to make a modification however, but i'm unsure how to achieve it, could you help?

    I'm trying to apply the effect to a video of the earth rotating; i want the captions to appear when X country is in view. The difference is, i don't want the video to pause while the captions appear - i just want it to keep going, and the captions to disappear after the set interval like normal.

    Is this possible? Your help is greatly appreciated!

  9. #9
    Junior Member Settled In lilbuckeye is on a distinguished road
    Join Date
    Jan 2009
    Posts
    2
    Rep Power
    0

    Re: Cue points and Flash CS3

    I have been searching for some code to make something similar with our video.
    I want to have the speech bubbles appear at different cue points but I would also like to have them as links that someone can click on to open another browser window.
    Any thoughts on how I would modify this code? or examples I could use?

  10. #10
    Junior Member Settled In blackrain is on a distinguished road
    Join Date
    Feb 2009
    Posts
    1
    Rep Power
    0

    Re: Cue points and Flash CS3

    Hi Flep

    Awesome tutorial, just one question though, i need to keep the video flowing and have no pauses when the speech bubble appears. i tried lowering the timer pause but the pausejust got bigger. is there a way to remove the pause.

    this affects the soundtrack so i am keen to find a solution.

    many thanks fro a great piece of work.

    Mark

+ Reply to Thread
Page 1 of 2 1 2 LastLast

LinkBacks (?)

  1. 3 Weeks Ago, 12:35
  2. 04-04-13, 10:40
  3. 11-02-13, 12:04
  4. 30-01-13, 13:36
  5. 01-12-12, 08:12
  6. 15-11-12, 12:23
  7. 05-09-12, 07:38
  8. 16-08-12, 17:29
  9. 09-08-12, 19:43
  10. 07-08-12, 09:05
  11. 31-07-12, 07:40
  12. 21-06-12, 11:02
  13. 19-06-12, 14:08
  14. 18-06-12, 03:47
  15. 11-06-12, 07:47
  16. 04-06-12, 08:49
  17. 03-05-12, 10:54
  18. 17-04-12, 07:34
  19. 04-04-12, 17:42
  20. 24-03-12, 22:07
  21. 19-03-12, 15:18
  22. 18-03-12, 12:34
  23. 05-10-11, 05:00
  24. 07-03-11, 07:39
  25. 22-11-10, 11:25
  26. 09-09-10, 11:24
  27. 27-07-08, 16:07
  28. 05-07-08, 02:27
  29. 29-06-08, 19:41
  30. 03-06-08, 17:35
  31. 25-04-08, 15:25
  32. 22-04-08, 17:38
  33. 12-04-08, 20:48
  34. 02-10-07, 14:11

Similar Threads

  1. Cue Points
    By Nickhouse in forum Flash Italiano
    Replies: 1
    Last Post: 30-01-10, 13:16
  2. Cue points e Flash CS3
    By Flep in forum Articoli e tutorials
    Replies: 7
    Last Post: 07-12-09, 09:19
  3. cue points
    By IsRaF3L in forum Flash Italiano
    Replies: 5
    Last Post: 30-10-09, 14:03
  4. cue points to pause .flv
    By rhetrick in forum Flash Italiano
    Replies: 0
    Last Post: 13-10-07, 04:55
  5. Replies: 0
    Last Post: 27-09-07, 08:20

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts