punchcreative
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by punchcreative
-
-
Hi,
I tried to recreate my question in codepen (first try in a while) but the svg (json file) is not showing.
See the Pen NWBdPGO by pnchcrtv (@pnchcrtv) on CodePen
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
-
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); }
Snap a row where a svg is animated with scrolltrigger
in GSAP
Posted
I fixed the server issue, and the pin for the contaiener does the job.
This is not scroll hijacking I hope?
THANKS!