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. 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
  2. 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
  3. Hey guys, I have a pretty interesting challenge. I need to animate the "playhead" of a <video> element. Ie the video.currentTime property. Running currentTime through TweenMax like so doesn't work as setting currentTime takes a little while to update, so it simply jumps to it's destination. I suspect what I want to do can't be done using the native <video> element, but I have to use an image sequence and <canvas> instead, but I wanted to check with you bright fellas before venturing down that path
  4. 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
  5. Just wondering if there is a way to add and play/pause/stop media elements like audio and video to an instance of TimelineLite or TimelineMax and control with the GSAP-JS API? What I was trying to ask was how to sync the media play/pause/reverse with the gsap timeline. Anyone any clues?
  6. 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.
  7. 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.
  8. 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
  9. 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!
  10. 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
  11. Hi guys, I am looking into building an adverting system that would use GS at it's core. I am going to use bottom end android tables as display units and I currently find that animations are jerking due to the low spec CPUs. I know that there is some GPU support in CSS3 but I am not sure how practical or applicable this is to the mobile platform. Having said that I know that most of these low spec tablets do have quite good GPU's for video playback up to 1080p 30fps and I am only looking for 720p 30-60fps. So what I am looking to do is use the 'save to image' function of canvas and either post to the server or use something like PhantomJS in Node to render the frames to a folder then use ffmpeg to stitch them into mp4s at the desired frame rate. This would also allow a host of other effect to be applied programmatically. I know that GS plays nice with KineticJS for canvas rendering and I have altered the codepen example (http://codepen.io/GreenSock/pen/xaDAG) to use the tick event listener as a test. I am however worried that this is not synchronous and would not post to the server fast enough to capture all the frames if run clientside. Should I rather use seek to jump a frame forward at a time and then render the canvas out. Does seek work with the KineticJS plugin? Many thanks in advance, any other approaches welcome.
  12. 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?
  13. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. This video walks you through some common problems that professional animators face every day and shows you how GSAP’s TimelineLite tackles these challenges with ease. Although GSAP is very powerful and flexible, the API is beginner-friendly. In no time you will be creating TimelineLite animations that can bend and adapt to the needs of the most demanding clients and art directors. Watch the video and ask yourself, "Can my current animation toolset do this?" Enjoy. Video Highlights Tweens in a TimelineLite naturally play one-after-the-other (the default insertion point is at the end of the timeline). No need to specify or update the delay of each tween every time the slightest timing changes are made. Tweens in a TimelineLite don't need to play in direct sequence; you can overlap them or easily add gaps. Multiple tweens can all start at the same time or slightly staggered. Easily to rearrange the order in which tweens play. Jump to any point of the timeline to finesse a particular animation. No need to watch the whole animation each time. Add labels anywhere in the timeline to mark where other tweens should be added, or use them for navigation. Control the speed of the timeline with timeScale(). Full control over every aspect of playback: play, pause, reverse, resume, jump to any label or time, and much more. Unlike jQuery.animate() or other JS libraries that allow you to chain together multiple animations on a particular object, GSAP’s TimelineLite lets you sequence multiple tweens on multiple objects. It's a radically different and more practical approach that allows for precise synchronization and flexibility. If you are still considering CSS3 animations or transitions for robust animation after watching this video, please watch it again Check out this Pen! If you are wondering what "autoAlpha" refers to in the code above, its a convenience feature of CSSPlugin that intelligently handles "opacity" and "visibility" combined. Recommended reading: Main GSAP JS page Jump Start: GSAP JS Speed comparison Cage matches: CSS3 transitions vs GSAP | jQuery vs GSAP jQuery.animate() with GSAP: get the jquery.gsap.js plugin! 3D Transforms & More CSS3 Goodies Arrive in GSAP JS
  14. 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); } } }
  15. 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
  16. 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?
  17. 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.
  18. 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!
  19. 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
  20. 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);
  21. 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.
  22. When I show a video on start, the last frame of that video displays for a split second since that is the current data until the Video refreshes. Normally, Video.clear() would be the fix for that, but... ...there is a known bug with Video.clear(), logged in the Adobe system & never getting fixed: https://bugs.adobe.com/jira/browse/FP-178 The workaround seems to be either: show & hide video (which doesn't help since showing the video on start still displays the last frame) or: when clear() is called, destroy & reinstantiate the Video instance. It would be great if the VideoLoader had a clear() method which did the second point above.