Jump to content

Search the Community

Showing results for tags 'Video'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. Hi all, I am trying to find a way to export the timeline animation to a mp4(compressed) video. Does someone know how this can be done? Will really appreciate your inputs and suggestions. Thanks
  2. Hi. Maybe a simple question. But how do I start and stop a HTML5 video from a button in an HTML5 ad? I have looket in the forum but found nothing so simple Regards Olle
  3. Hi I posted on the forum a few days ago with a problem about synchronizing audio/ video with animation and scrub bars. That issue has been solved and the codepen is here: http://codepen.io/dipscom/pen/rryZaQ Thanks a lot for that, it was a great help. Now I am trying to place my tweens on a timeline at exact points and it isn't working correctly. I have audio, animation and scrub bars all synchronized and working correctly but I want to put tweens at specific points in the timeline so the animation matches the music or narration correctly. I have tried absolute positioning and labels but without success and I was hoping someone could help me with this. The codepen is here: http://codepen.io/anon/pen/RGgJrA In this codepen for example I want the first tween to start at 1 second and the second tween at 2 seconds. Why isn't this working? Many thanks Pebble
  4. Hi I recently joined and have read some very helpful posts and have got an audio file playing in synchronization with a timeline. What I need specifically is audio with a scrub bar being synchronized with a series of animations which have their own scrub bar. In the code I have put together I have the audio playing and the animations running for the duration of the sound file and I have a scrub bar for the audio and animation which are synchronized together. The problem I have is that the animations are not moving smoothly but are shaking back and forth. I think this is to do with the rate at which they are being updated and I believe things can be improved by using the TweenLite.ticker or the TweenMax.ticker but I am not sure of the best way to implement them. Can you help me to smooth out the movement of these animations. The codepen is here: http://codepen.io/anon/pen/GjWJKA Many Thanks Pebble
  5. Recently, we have moved our bespoke animations away from using DOM elements to using Canvas, due to memory issues when running on low to medium powered devices such as Chinese Android "sticks" and Google ChromeBit. Everything went smoothly, until we introduced videos. We have found a bug where a video plays on the first load of the page, but then after subsequent refreshes, the video will not play. Instead it just shows the very first frame. What is peculiar is that the video is loaded into its DOM element (used by Canvas to grab the video) and the frame even shows on the Canvas itself, but viewing the network logs in Chrome Inspector, the video is not shown in the logs as being loaded. Image assets are shown, as are the JS files, but no video, despite it being on the page. After some very brief digging, there does seem to be some kind of timing issue in the code. Assets are added to "sub" timelines which in turn are added to a main timeline. It appears that the sub timelines are firing their onStart callback before the code has chance the load the videos into the DOM element (looking at the code with my colleague, the order looks correct) Is there any reason why a (sub) timeline would start prematurely, before the main timeline is told to play?
  6. Hello, I am about to start doing a landing page with a 10 second video. But the thing is, they wanna add 3d elements to the video so i have to do it with stepped ease or something and make it move by mouse scroll. On the video, a guy jumps off the cliff with a snowy enviroment and when his fall ends he drops in to a cave and landing page itself fadein/scale up. So, I have few ideas but i wonder, how would you make this ? Simply: How to play video frames by mouse scroll with highest performance & quality ? Just wanna see how would you do, thanks.
  7. I'm trying to use scrolling to control video, all is essentially good, but it can be a bit jerky. I thought if i tween the playhead position rather than jumping to the current position it'd be much nicer. However it seems to wait until the tween is complete, then updates the displayed frame, making it much worse.. This is all happening within a much larger framework, so i'm just copying in the relevant snippet here; self.addScrollListener = function() { $(window).bind('scroll',self.updateTimelineByScrollPosition); } self.current_percent = 0; self.updateTimelineByScrollPosition = function() { var current = $(window).scrollTop(); var max = $(document).height() - $(window).height(); var pos = ( current / max ) * 100; var seek_time = self.time * pos; TweenMax.to( self, 0.5, { current_percent: pos, onUpdate: self.tweenUpdatePlayhead }); } self.tweenUpdatePlayhead = function() { self.jplayer_div.jPlayer( "playHead", self.current_percent ); }; Note I'm using jPlayer for the video, but I have tried doing this by setting the currentTime directly on the <video> element. Thanks, Andy
  8. Hello, I am looking for an example to animate something as this https://drive.google.com/open?id=0Bzx7LDFcZwmMYnhabVY0ZjRwc2M ​ I would like to have the 2 parts of the image open and let appear a video which has started when the 'doors' have oppened by 50%. My question is that the 2 images should not only open but also disappear, as if they enter behind the display. With which API could I obtain this effect ? Thanks for help CS
  9. Hello, I'm trying to loop a video and the video loops, but not at the end of the video, it's cut at approx 50% of the video. The video is 4 seconds long and at the half it just jumps to the end and starts the loop again. Any idea in how to prevent that? I'm loading the video with this line: var lVideoPlayer:VideoLoader = new VideoLoader("assets/myVideo.flv", {name:myVideo.flv,container:videosParents[_videoNdx], autoPlay:false, requireWithRoot:this.root, deblocking:1, repeat:(_videoNdx==1?-1:1),onComplete:_onConnect }); I would need perfect seamless loop, but hopping that way is hard. At the same time, the video triggers 2 events, right now I'm tracking that events using VideoLoader.PLAY_PROGRESS but perhaps it would be more efficient using cues? Well, thank you in advance, Toni
  10. Hello and thanks for this great library. I have a little problem with the video repeat function of videoloader. I load multiple video and I had set repeat:-1. The video loops to infinity but between the loops I have a freeze time about 2 seconds. This is the code I use: Any Ideas? I had tried both with gsap 12 and Tweening platform 11. Thanks in advance for your time!
  11. Hello guys, I am not sure if I am asking in the right place. I wanted to know if GreenSock is the right plugin to do what apple is doing like the attached reference. http://www.apple.com/ipad-air/ I am able to play forward with pauses but not in reverse with pauses. However, if I am right at the end of the video I can play in reverse all the way. We tried this using a .mov with h264 compression. Is it because it is a streaming format? How is apple doing this? Thanks all.
  12. Hi, i realise this is way too similar to this thread: http://forums.greensock.com/topic/4683-mp3loader-making-a-perfect-loop/ but since this is about a video, not an audio (and therefore, I don't have the "repeat" property), I thought I'd ask. My idea is to loop a video that I've loaded using VideoLoader, but I want it to be a seamless loop. My first (and obvious) approach was adding a listener for the VIDEO_COMPLETE event on the video, and then play the video again from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; video.gotoVideoTime(0); video.playVideo(); } but this doesn't make it seamless, it freezes on the last frame of the video for a second or two, and then starts again. My second approach was adding a listener for the PLAY_PROGRESS event, and when the video reaches a certain sufficient point, start it from 0: var video:VideoLoader= LoaderMax.getLoader([videoId]) as VideoLoader; video.addEventListener(VideoLoader.PLAY_PROGRESS, onVideoComplete); protected function onVideoComplete(event:LoaderEvent):void { var video:VideoLoader= event.target as VideoLoader; if(video.playProgress >= 0.95){ video.gotoVideoTime(0); video.playVideo(); } } this made it better, but the same problem stays, it freezes (now not on the last frame, but on one of the last ones) and then starts all over. Is there a way to have a smooth loop, or another approach to make it smoother than these two I've tried? Thanks!
  13. Hi, I am building a page that builds multiple 'scenes' horizontally in the content area. Only one scene is visible in the area at a time. Users can drag the scene container to get to other scenes. I've done this using Draggable. For the most part, it has worked great. However, some scenes have a large video in them. When running on the iPad (chrome and safari), if the user touches the video and attempts to drag the container in order to move to the next scene, it does not drag. I've tried adding data-clickable="false" to the video tag but it still doesn't work. This all works on the desktop as far as I've tested it. Here is a code pen sample of what I'm talking about. You can drag the grey container box, but if you try to drag over the video, the container won't move. http://codepen.io/anon/pen/yohqG I'm using iOS 7.1, but the same thing happens in an older version as well.
  14. Hi guys, I was wondering if is possible use the LoaderMax to load a video, than get this content and send it to a another video player, like the FLV Playback from flash. How can I do that? It's possible? Tnx a lot
  15. http://dev.option5.net/CNCT/CNCT13004/video.html I've built a custom video player built on the use of VideoLoader. However, the loader progress isn't working. It appears to be working; the loader bar grows in width based on a LoaderEvent.PROGRESS dispatch. But when I test the actual network usage in Chrome (dev tools), it shows the video is loading long after the loader bar goes to 100%. Any ideas?
  16. Hello, I found a problem when playing video from videoloader. Often, after the full video playback, the repeat playback video from this videoloader by function gotoVideoTime (0, true) starts playing video from the 2 seconds. For example, ask to see written for this example: https://dl.dropboxusercontent.com/u/8131769/videoTest.zip
  17. I'm bulk loading videos and then playing them. That part works. But after a video has been played once it will play back very fast almost every time after that. I have no idea why. Any help appreciated. package { public class VideoClass extends MovieClip { private var vid1_vid:ContentDisplay; private var vid1_ldr:VideoLoader; private var vid2_vid:ContentDisplay; private var vid2_ldr:VideoLoader; private var vid3_vid:ContentDisplay; private var vid3_ldr:VideoLoader; //store video paths private var vid1_BT:String; private var vid2_BT:String; private var vid3_BT:String; private var videoArray:Array = new Array(); public function VideoClass(_videoArray:Array) { videoArray = _videoArray; for (var i:uint = 0; i < 7; i++) { if (i == 0) { vid1_BT = videoArray[i]; } else if (i == 1) { vid2_BT = videoArray[i]; } else { vid3_BT = videoArray[i]; } } //activate the loaders we need LoaderMax.activate([ImageLoader, SWFLoader, VideoLoader]); var urls:Array = [vid1_BT, vid2_BT, vid3_BT]; var queue:LoaderMax = LoaderMax.parse(urls, {maxConnections:1, //onProgress:_progressHandler, onComplete:_queueCompleteHandler //onChildComplete:_childCompleteHandler }, {autoPlay:false}); queue.load(); } private function _queueCompleteHandler(event:LoaderEvent):void { //vid1 video vid1_ldr = LoaderMax.getLoader(vid1_BT); vid1_vid = LoaderMax.getContent(vid1_BT); vid1_vid.x = vid1_vid.y = 0; //vid2 video vid2_ldr = LoaderMax.getLoader(vid2_BT); vid2_vid = LoaderMax.getContent(vid2_BT); vid2_vid.x = vid2_vid.y = 0; //vid3 video vid3_ldr = LoaderMax.getLoader(vid3_BT); vid3_vid = LoaderMax.getContent(vid3_BT); vid3_vid.x = vid3_vid.y = 0; vid1_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); vid2_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); vid3_ldr.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideoComplete, false, 0, true); } public function addVideo(_vid:String) { switch (_vid){ case "vid1": addChild(vid1_vid); vid1_ldr.playVideo(); vid1_ldr.gotoVideoTime(0); break; case "vid2": addChild(vid2_vid); vid2_ldr.playVideo(); vid2_ldr.gotoVideoTime(0); break; case "vid3": addChild(vid3_vid); vid3_ldr.playVideo(); vid3_ldr.gotoVideoTime(0); break; } } private function onVideoComplete(e:*) { var vid = e.target.content; removeChild(vid); } } }
  18. I have two videos of identical length that I need to play in sync. Occasionally they do loop in sync but are most often offset by some small amount. Unfortunately this is very noticeable in my application. example: video1.addEventListener(VideoLoader.VIDEO_COMPLETE, function():void { video1.gotoVideoTime(0, true); video2.gotoVideoTime(0, true); }); Any suggestions, please?
  19. I'm looping through all the items of my XML and use LoaderMax to load my SWFs onto stage, and trigger a function to generate video items and text items. This looks like this: for each (var item in Main.XMLLiveItems.items.*) { if (item.@type == "static") { Main.queue.insert(new SWFLoader("media/"+item.@name, { name:item.@id, container:area, alpha: 0, onComplete: itemLoaded }),item.@level); } else if (item.@type == "text") { createTextAsset(item); } else if (item.@type == "video") { createVideoAsset(item); } } However, this messes up the levels since LoaderMax loads the queue after my textassets and videos have been loaded onto stage. I can't add the text assets or the video assets to my stage (called area) when specifying the index, because the number of children is still zero when the createTextAsset and createVideoAsset functions are called. I've tried to first use 'applyFullXML' and then add the textfields and videoloaders as a child to the placeholders. This turned out the way I wanted, except the textfields did not scale properly (using the scaleWidthAndHeight property) since they were now a child of a sprite. I am currently not sure what to do so was hoping for a push in the right direction. Thanks again.
  20. Hi, Flash AS3 GS v.11 I am trying to play MC's that contain video in between displays of text only. I have made 3 frame based movies to represent the FLV's embedded into the MC's. I need to play the whole thing backwards and forward. I will have a slide control. Some versions will have TL labels. I am just modeling this to understand the behaviors so I can model the most used versions my non-programmer's who will add captions to the FLA. The movies will be named in sequence in the libray (nice for 'For loop'). The captions and all other text will be Strings from the localization Strings panel. The SWF will have a slider control with time display. I will use addCallback to change text on a MC textfield and change the alpha with a Tweenlite to make it visible or not. The time and framerates do not match. Old flash issue. I need MC to stop on the last frame - not stop early or late so transitions work Using labels is not working as I expect. Do I create TL nested movieclips? Can I mix frame control (nested TL) and time control (main TL)? import com.greensock.*; import com.greensock.easing.*; import flash.display.MovieClip; import fl.controls.Button; import flash.events.Event; import flash.events.MouseEvent; var first_btn:Button;// = new Button; var second_btn:Button;// = new Button; var third_btn:Button;// = new Button; var play_btn:Button;// = new Button; var stop_btn:Button;// = new Button; first_btn.addEventListener(MouseEvent.CLICK, goToHandler); second_btn.addEventListener(MouseEvent.CLICK, goToHandler); third_btn.addEventListener(MouseEvent.CLICK, goToHandler); play_btn.addEventListener(MouseEvent.CLICK, playHandler); stop_btn.addEventListener(MouseEvent.CLICK, stopHandler); var mc:Array = new Array; mc[0]= new MC2 as MovieClip; mc[1]= new MC3 as MovieClip; mc[2]= new MC4 as MovieClip; var timeLine:TimelineMax=new TimelineMax({paused:true,onComplete:done});//paused:true, timeLine.addLabel("first", timeLine.duration); timeLine.addCallback(addMovieFromLibrary,0.5, [(mc[0])]); timeLine.addLabel("second", timeLine.duration); timeLine.addCallback(addMovieFromLibrary,0.5, [(mc[1])]); timeLine.addLabel("third", timeLine.duration); timeLine.addCallback(addMovieFromLibrary,0.5, [(mc[2])]); function done():void{ trace ("done"); } function addMovieFromLibrary(mc:MovieClip){ mc.stop(); mc.x = 16; mc.y = 16; mc.alpha = 0; addChild(mc); timeLine.append(TweenMax.to(mc, 0.5, {alpha:1})); timeLine.addCallback(mcPlay,0,[mc]); timeLine.append(TweenLite.delayedCall((mc.totalFrames/stage.frameRate), removeMovie,[mc]), -0.25); } function removeMovie(mc:MovieClip){ timeLine.append(TweenMax.to(mc, 0.5, {alpha:0}), -0.25); mc.stop(); removeChild(mc); trace("Remove Child Next"); } function mcPlay(mc:MovieClip){ mc.play(); } function goToHandler(e:MouseEvent):void{ trace(e.target.label); timeLine.gotoAndPlay(e.target.label); } function playHandler(e:MouseEvent):void{ trace(e.target.label); timeLine.play(); } function stopHandler(e:MouseEvent):void{ trace(e.target.label); timeLine.stop(); } Test_main_timeLine-gs.zip
  21. Hi, I am developing a flash piece with two views of the same video (one large, one smaller with a caption overlay). Im just wondering if anyone has any ideas on how to program it so I can switch seamlessly between the two views and have the same video at the same time, playback state etc. Ive tried using two separate video streams and keeping track of currentTime etc but its a bit of a hack and doesn't work that well. Is there a cleaner way I can add the same video loader container to multiple display containers and just code the controls once? i.e. videoLoaderVars.container(this); videoLoaderVars.container(another clip);
  22. Hello, I am new to Greensock`s LoaderMax class. I have a new project which is a videoplayer with thumbnails below, on x axis. I just want to ask if what will be the XML structure for the project. Should I go for the VideoLoader and ImageLoader nodes or just a generic XML. If there are tutorials regarding this, could you guys post it here. Thank you in advance.