punchcreative

I fixed the server issue, and the pin for the contaiener does the job. This is not scroll hijacking I hope? THANKS!

Hi, I tried to recreate my question in codepen (first try in a while) but the svg (json file) is not showing. https://codepen.io/pnchcrtv/pen/NWBdPGO On the test site that I was referring to I did try pinning. Thing is that it works with pinning, but I'd like to see the row below while the svg is playing. The pinning pushes it down as it adds padding I will try and figure out why my json is not showing/loading. But thought to give a sign of appreciation ahead. Thanks, Erik

Hi, I have a row (green background) with two columns. The left column is static text, the right column is a lottie animation. https://punchcreative.net/punchsite/ I'd like the row to wait with scrolling until the svg is animated fully. Now the animation works but the rows beneath the 'green' row are scrolling over it. I looked at some examples but can't figure it out. Snap maybe or hold the rows beneath? If someone can point in the right direction I'd be thankful Erik Here's the code I used <div class="container introductie"> <div class="row"> <div class="col-md-6 d-sm-block"> <?php echo $content['introductie']['tekst']; ?> </div> <div id="intro_animatie" class="col-md-6 visual d-block align-items-end mx-0 px-0"> <!-- animatie wordt opgeroepen in document ready met jQuery --> </div> </div> </div> function LottieScrollTrigger(vars) { let playhead = {frame: 0}, target = gsap.utils.toArray(vars.target)[0], speeds = {slow: "+=2000", medium: "+=1000", fast: "+=500"}, st = {trigger: target, pin: true, start: "top top", end: speeds[vars.speed] || "+=1000", scrub: 1}, animation = lottie.loadAnimation({ container: target, renderer: vars.renderer || "svg", loop: false, autoplay: false, path: vars.path }); for (let p in vars) { // let users override the ScrollTrigger defaults st[p] = vars[p]; } animation.addEventListener("DOMLoaded", function() { gsap.to(playhead, { duration: vars.duration || 0.5, delay: vars.delay || 0, frame: animation.totalFrames - 1, ease: vars.ease || "none", onUpdate: () => animation.goToAndStop(playhead.frame, true), scrollTrigger: st }); // in case there are any other ScrollTriggers on the page and the loading of this Lottie asset caused layout changes ScrollTrigger.sort(); ScrollTrigger.refresh(); }); return animation; } $(document).ready(function () { gsap.registerPlugin(ScrollTrigger); ScrollTrigger.create({ trigger: "#intro_animatie", start: "top top", end: "+=100%", pin: true }); LottieScrollTrigger({ target: "#intro_animatie", path: "animatie/cv-animatie-web.json", speed: "medium", start: "top top", end: "+=100%", pin: false, markers: true, scrub: true }); }

you're not the only one i have a video loaded in an mc on the stage when i remove the children in that mc on an menuClick the sound is still playing therefor i think i'll have to close the netstream of the loaded video before removing is form mc the way to target the loaded video and it's netstream is not very clear to me http://forums.greensock.com/viewtopic.php?f=6&t=4545

can you please explain me what to do to stop the netstream in a VideoLoader which is in an mc contentWindow

still have a problem to access content in a loader on the stage this time i want a netstream to be closed in the main class i use a xmlloaded listener to select a proper loader for the upcoming content public function XMLLoaderComplete(event:LoaderEvent):void { _XML_sheet = XML(LoaderMax.getContent("sheetData")); appSteps[2] = _XML_sheet.@label; if (_XML_sheet.@nextSheet != "") { appSteps[1] = _XML_sheet.@nextSheet; contentWindow.addEventListener(MouseEvent.CLICK, nextStepClick, false, 0, true); } else { appSteps[1] = ""; navBalk.fwd.enabled = false; navBalk.fwd.removeEventListener(MouseEvent.CLICK, nextStepClick); } if (appStepBack.length == 0) { navBalk.back.enabled = false; navBalk.back.removeEventListener(MouseEvent.CLICK, backStep); } else { navBalk.back.enabled = true; navBalk.back.addEventListener(MouseEvent.CLICK, backStep, false, 0, true); navBalk.fwd.addEventListener(MouseEvent.CLICK, nextStepClick, false, 0, true); } //trace("terug = " + appSteps[0], "huidig = " + appSteps[2],"volgende = " + appSteps[1],"back = " + appStepBack); initHeader(_XML_sheet.@headerfoto,_XML_sheet.@titel,_XML_sheet.@headernav,_XML_sheet.@headerkleur); if (_XML_sheet.@item.toString() == "img") { imgloader = new ImageLoader(debugging + "sheets/" + _XML_sheet.@label + ".png", {name:"sheetImage",alpha:1,container:contentWindow,onError:mQerrorHandler, onProgress:progressHandler, onComplete:sheetComplete}); imgloader.load(); } else if (_XML_sheet.@item.toString() == "menusheet" || _XML_sheet.@item.toString() == "amsheet" || _XML_sheet.@item.toString() == "swf" || _XML_sheet.@item.toString() == "vid") { switch (_XML_sheet.@item.toString()) { case "amsheet": swfloader = new SWFLoader(debugging + "swf/amSheet.swf", {name:"amSWF",alpha:1, container:contentWindow,onError:mQerrorHandler, onProgress:progressHandler, onComplete:sheetComplete}); swfloader.load(); break; case "menusheet": swfloader = new SWFLoader(debugging + "swf/" + _XML_sheet.@label + ".swf", {name:"menuSWF",alpha:1,container:contentWindow,onError:mQerrorHandler, onProgress:progressHandler, onComplete:sheetComplete}); swfloader.load(); break; case "swf": swfloader = new SWFLoader(debugging + "swf/" + _XML_sheet.@label + ".swf", {name:"sheetSWF",alpha:1, container:contentWindow,onError:mQerrorHandler, onProgress:progressHandler, onComplete:sheetComplete}); swfloader.load(); break; case "vid": swfloader = new SWFLoader(debugging + "swf/video.swf", {name:"vidSWF",alpha:1, container:contentWindow,onError:mQerrorHandler, onProgress:progressHandler, onComplete:sheetComplete}); swfloader.load(); break; default: header.titel.text = "Sheet niet gevonden"; } } } then when i have the case "vid", a loader is doing it's job fine and loads the video which nicely starts playing here's the code in the video.swf which is loaded from main class video = new VideoLoader(Main.M.debugging + videoFile, {name:"vid",prependURLs:Main.M.debugging , container:this.vidPlayer.vidMC, width:600, height:338, scaleMode:"none", bgColor:0xFFFFFF, autoPlay:true, volume:0.8, requireWithRoot:this.root, estimatedBytes:17500000}); video.load(); when i try to close the netstream on the video loader from my main class (it's a key or mouseEvent which triggers this) i get an error here's the code in the main class which i hoped would stop the netstream public function clearContentMC(mc:MovieClip):void { if (geladenSheet == "vidSWF") { trace("geladen sheet is video"); swfloader.rawContent.video.netStream.close(); } trace("in initLoader clearContent functie children = " + mc.numChildren, mc.getChildAt(0), mc.root.name ); while (mc.numChildren > 0) { mc.removeChildAt(0); } stage.focus=stage; } and here's the debuggers thoughts on it: geladen sheet is video ReferenceError: Error #1069: Property video not found on nl.agis.Video and there is no default value. at Main/clearContentMC()[/Volumes/Media/Punch Sync MacBook/110202 Agis AMZM/flash/fla/Main.as] at Main/initLoader()[/Volumes/Media/Punch Sync MacBook/110202 Agis AMZM/flash/fla/Main.as] at Main/nextStep()[/Volumes/Media/Punch Sync MacBook/110202 Agis AMZM/flash/fla/Main.as] at Main/keyPressedDown()[/Volumes/Media/Punch Sync MacBook/110202 Agis AMZM/flash/fla/Main.as] Debug session terminated. to be honest i don't know how to destroy all currently loaded content in the contentWindow mc on the main timeline and cleanup properly i discovered that things were left behind because the video keeps playing even if the contentWindow is loaded with new content and accessing the content which is put in mc contentWindow by the chosen loader on the main class seems difficult to me here's what i've tried sofar swfloader.rawContent.video.content.vidPlayer.vidMC.netStream.close(); swfloader.rawContent.video.content.netStream.close(); swfloader.rawContent.video.rawContent.netStream.close(); swfloader.content.video.rawContent.netStream.close();

i don't get it do i put this code in the loaded swf or in my main class and should it be called from the loaded swf var curParent:DisplayObjectContainer = this.parent; while (curParent) { if (curParent.hasOwnProperty("loader") && curParent.hasOwnProperty("rawContent")) { Object(curParent).loader.addEventListener("unload", dispose, false, 0, true); } curParent = curParent.parent; } function dispose(event:Event):void { //do cleanup stuff here like removing event listeners, stopping sounds, closing NetStreams, etc... } by the please tell me the way to reach a loaded video's Netstream to tell it to close been a long day and finaly hope on some input from over here video = new VideoLoader(Main.M.debugging + videoFile, {name:"vid",prependURLs:Main.M.debugging , container:this.vidMC, width:600, height:400, scaleMode:"proportionalInside", bgColor:0xFFFFFF, autoPlay:true, volume:0.8, requireWithRoot:this.root, estimatedBytes:17500000}); video.load();

problem solved mainQue = new LoaderMax({name:"mainItemsQue",onComplete:mQcompleteHandler, onError:mQerrorHandler, onChildProgress:progressHandler}); mainQue.append(new XMLLoader(debugging + "xml/main.xml", {name:"mainXML",recursivePrependURLs:debugging}) ); had the recursivePrependURLs in the LoaderMax definition in the first place.

i can't get mainQue = new LoaderMax({name:"mainItemsQue",recursivePrependURLs:debugging, onComplete:mQcompleteHandler, onError:mQerrorHandler, onChildProgress:progressHandler}); to work i want to us the string debugging, which holds "../" to test on my local machine, and make the string empty when i publish

i'm on my way of getting there even targetting the loaded SWF from Main succeeds from within the complete function i used event.target.rawContent.kop.text = "just a test"; to solve an issue on the loaded AMSheet i skipped TLFTexField and used the classic version the XML tut came in very handy thanx sofar (guess i'll be back)

as the SWFLoader loads the amSheet.swf correctly how can i access the loaded swf's TLFTextfields and mc from the main class (root) i tried contentWindow.sheetAM.kop.text as sheetAm is the name i gave the loaded SWF in the amSheetComplete function TypeError: Error #1009: Cannot access a property or method of a null object reference. at nl.agis::AmSheet/createAMSheet() at nl.agis::AmSheet() Cannot display source code at this location. by the way, replying on a saturday is really a BIG UP deadline is chasing me

Attempting to launch and connect to Player using URL /Volumes/Media/Punch Sync MacBook/110202 Agis AMZM/flash/app/swf/main.swf [sWF] Volumes:Media:Punch Sync MacBook:flash:app:swf:main.swf - 861006 bytes after decompression fontName: Agis Klavika Medium fontType: embeddedCFF fontStyle: regular fontName: Agis Klavika Medium fontType: embeddedCFF fontStyle: regular 1 steps: p91 XMLLoaderComplete: p01,p91 [sWF] Volumes:Media:Punch Sync MacBook:110202 Agis AMZM:flash:app:swf:.:amSheet.swf - 590626 bytes after decompression listSheetItems traced: Doorlopen eerste versie inleiding Fullscreen Navigatie invoer Accountmanager Voordelen Evaluatie Afsluiting sheetItems 0 data from XMLList: sheetItems Doorlopen eerste versie TypeError: Error #1009: Cannot access a property or method of a null object reference. at nl.agis::AmSheet/createAMSheet() at nl.agis::AmSheet() Cannot display source code at this location. this is the amSheet class package nl.agis { import fl.text.TLFTextField; import fl.transitions.*; import fl.transitions.easing.*; import flash.display.*; import flash.events.*; import flash.filters.*; import flash.geom.*; import flash.media.*; import flash.net.*; import flash.system.Security; import flash.text.*; import flash.text.Font; import flash.ui.Keyboard; import flash.utils.*; import flashx.textLayout.container.*; import flashx.textLayout.elements.*; import flashx.textLayout.formats.*; import com.greensock.*; import com.greensock.TweenMax; import com.greensock.easing.*; import com.greensock.events.LoaderEvent; import com.greensock.layout.*; import com.greensock.loading.*; import com.greensock.loading.display.*; import flash.display.MovieClip; import Main; public class AmSheet extends MovieClip { public var kop:TLFTextField; public var t1:TLFTextField; public var t2:TLFTextField; public var t3:TLFTextField; public var t4:TLFTextField; public var t5:TLFTextField; public var t6:TLFTextField; public var t7:TLFTextField; public var sub:TLFTextField; public var listSheetItems:XMLList; public function AmSheet() { listSheetItems = new XMLList(Main.M._XML_sheet); trace("listSheetItems traced:"); trace(listSheetItems); var foto:ImageLoader = new ImageLoader("../am-img/" + Main.M._XML_sheet.@afb + ".png", {name:"sheetafb",container:this.polaroid.foto}); createAMSheet(0); } private function createAMSheet(nr:Number):void { var sheetItems:XMLList = new XMLList(listSheetItems.children()[nr].children()); trace("sheetItems 0 data from XMLList:"); trace("sheetItems"); var teller:Number = sheetItems.length(); var yPos:Number = 240; for (var i:Number = 0; i < teller;i++) { switch (sheetItems[i].@soort.toString()) { case "kopregel": trace(sheetItems[i].text()); kop.text = sheetItems[i].text(); break; case "tekst": trace(sheetItems[i].text()); this["t"+i].text = "• " + sheetItems[i].text(); break; default: trace("niets gevonden!"); } } } } } seems like i'm doing this wrong var sheetItems:XMLList = new XMLList(listSheetItems.children()[nr].children()); i'm a bit blacked out at the moment

i'm stuck on probably something simple to an advanced user in a main class from wthin a function i call var amsheet_loader:SWFLoader = new SWFLoader("./amSheet.swf", {name:"sheetAM", container:contentWindow, onProgress:progressHandler, onComplete:amSheetComplete}); amsheet_loader.load(); this is the listener object public function amSheetComplete(event:LoaderEvent):void { trace("amSheetComplete - " + contentWindow.getChildAt(0).name); } this is wordking fine and i see the amSheet.swf is loaded in the contentWindow mc which is on the root timeline of main.swf ([sWF] Volumes:Media:Punch Sync MacBook:flash:app:swf:.:amSheet.swf - 590408 bytes after decompression) in amSheet.swf there are some TLFTextFields on the stage, which i have given an embedded font, and a mc polaroid which holds a masked mc foto where i want to load a picture in. in the amSheet class i have the folowing code which i thougt was going to fill the TLFTextFields and the fot mc in polaroid, but..... public function AmSheet() { listSheetItems = new XMLList(Main.M._XML_sheet); var foto:ImageLoader = new ImageLoader("../am-img/" + Main.M._XML_sheet.@afb + ".png", {name:"sheetafb",container:this.polaroid.foto}); createAMSheet(0); } private function createAMSheet(nr:Number):void { var sheetItems:XMLList = new XMLList(listSheetItems.children()[nr].children()); //trace("de sheetItems 0 data uit XMLList: " + sheetItems); var teller:Number = sheetItems.length(); var yPos:Number = 240; for (var i:Number = 0; i < teller;i++) { switch (sheetItems[i].@soort.toString()) { case "kopregel": kop.text = sheetItems[i].text(); trace(sheetItems[i].text()); break; case "tekst": this["t"+i].text = "• " + sheetItems[i].text(); trace(sheetItems[i].text()); break; default: trace("niets gevonden!"); } } } when debugging i get this error: TypeError: Error #1009: Cannot access a property or method of a null object reference. at nl.agis::AmSheet/createAMSheet() at nl.agis::AmSheet() Cannot display source code at this location.

problem solved, there were some things i didn't handle well... for instance i gave the library mc itself the listeners for roll_over and roll_out instead of the hoover mc hoover mc is now just an indicator of the area which to listen to i gave the tweens an overwrite:1 to be sure the menu down acted as i want it to maybe this helps some of you with the same issue initMenu(); function initMenu():void { //this.mouseChildren = true; this.addEventListener(MouseEvent.ROLL_OVER, menuUit); this.addEventListener(MouseEvent.ROLL_OUT, menuIn); nav.mouseChildren = true; afb.mouseEnabled = true; afb.mouseChildren = true; afb.buttonMode = true; for (var i:Number = 1;i<11;i++) { nav["btn_" + i].addEventListener(MouseEvent.ROLL_OVER, btnOver); nav["btn_" + i].addEventListener(MouseEvent.ROLL_OUT, btnOut); nav["btn_" + i].buttonMode = true; nav["btn_" + i].mouseEnabled = true; } } function menuUit(e:MouseEvent):void { this.parent.setChildIndex(this,this.parent.numChildren - 1); hoover.height = hoover.height + nav.bkg.height; TweenMax.to(nav, 1, {y:(yPosFotoOnder + nav.bkg.height), delay:0.3, ease:Sine.easeOut, overwrite:1}); } function menuIn(e:MouseEvent):void { this.hoover.height = yPosFotoOnder + (randHoover*2); TweenMax.to(nav, 0.5, {y:yPosFotoOnder, ease:Sine.easeIn, overwrite:1}); } function btnOver(e:MouseEvent):void { e.target.gotoAndStop(2); this.titel.text = e.target.name; } function btnOut(e:MouseEvent):void { e.target.gotoAndStop(1); }

in a menu (dropdown block) that i build using actionscript 3 and a library mc the menubuttons scroll down on mouseover of an image (afb) in the menu mc and scroll up when rolling over an invisible border (hoover in green). there are 4 different menu mc's created on the stage and when moving fast with the mouse, the leaving action of a menu mc is not detected bij the listener for the MouseEvent.ROLL_OUT in the mc. thus the menubuttons (mc) does'nt scroll up. the listeners are defined in the library mc, which is duplicated for each menu item i wonder is the tweening causes the problem initMenu(); function initMenu():void { this.nav.mouseChildren = true; this.afb.mouseEnabled = true; this.afb.mouseChildren = true; this.afb.buttonMode = true; this.afb.addEventListener(MouseEvent.ROLL_OVER, menuUit); for (var i:Number = 1;i<11;i++) { this.nav["btn_" + i].addEventListener(MouseEvent.MOUSE_OVER, btnOver); this.nav["btn_" + i].addEventListener(MouseEvent.MOUSE_OUT, btnOut); } } function menuUit(e:MouseEvent):void { this.afb.removeEventListener(MouseEvent.ROLL_OVER, menuUit); this.hoover.height = this.hoover.height + this.nav.bkg.height; TweenMax.to(this.nav, 1, {y:(yPosFotoOnder + this.nav.bkg.height), delay:0.3, ease:Sine.easeOut}); this.hoover.addEventListener(MouseEvent.ROLL_OVER, menuIn); } function menuIn(e:MouseEvent):void { this.hoover.removeEventListener(MouseEvent.ROLL_OVER, menuIn); this.hoover.height = yPosFotoOnder + (randHoover*2); TweenMax.to(this.nav, 0.5, {y:yPosFotoOnder, ease:Sine.easeIn}); this.afb.addEventListener(MouseEvent.ROLL_OVER, menuUit); } function btnOver(e:MouseEvent):void { e.target.parent.gotoAndStop(2); } function btnOut(e:MouseEvent):void { e.target.parent.gotoAndStop(1); }