Zync

Ah nice one. That's a great workflow for what I need. Cheers. And yeah I do like the option to write javascript direction in the actions window too. But I guess int he end just the familar layout design and tools will make it worthwhile.

Hey mate, Attached is a sample. Not quite sure why you need 2 classes but heres a sample using a document class. Basically break down all the major functionality into little pieces and then go from there. Hopefully it does what I think you want it to do. Toggling a larger map and a mini map based on clicks. package { import com.greensock.*; import com.greensock.easing.*; import com.greensock.TweenMax; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; public class Main extends MovieClip { public var miniMap:Sprite; public var bigMap:Sprite; public function Main() { addEventListener(Event.ADDED_TO_STAGE, onAdd); } private function onAdd(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, onAdd); // miniMap.addEventListener(MouseEvent.CLICK, miniMapCLick); bigMap.addEventListener(MouseEvent.CLICK, bigMapClick); // //Initalize but use 0 time to set it immediately hideBigMap(0); showMiniMap(0); } private function miniMapCLick(e:MouseEvent):void { //When the minimap is clicked hideMiniMap() showBigMap(); } private function bigMapClick(e:MouseEvent):void { //When the big map is clicked showMiniMap(); hideBigMap(); } //Break it down into small function that you can call upon logically and easily private function hideBigMap(time:Number = 0.5) { TweenMax.to(bigMap, time, { y: -100, alpha:0 } ); } private function showBigMap(time:Number = 0.5) { TweenMax.to(bigMap, time, { y: 50, alpha:1 } ); } private function hideMiniMap(time:Number = 0.5) { TweenMax.to(miniMap, time, { y: -100, alpha:0 } ); } private function showMiniMap(time:Number = 0.5) { TweenMax.to(miniMap, time, { y: -10, alpha:1 } ); } } } mapProb.zip

Hey ya Carl, Ah cheers for that video mate, hadn't seen that one yet. Well I got it to work but it seems a little hacky. Would prefer to import the full TweenMax Library from the CDN but I just copied and pasted the full JS code for TweenMax in frame one and then Animated like just you usually would. Works perfectly! One little cavet is that oyu have to target objects on the stage explictly starting with this however. I don't think this is a Greensock issue though I think its just a scoping thing with JS. TweenMax.to(this.circ,1,{x:400, yoyo:true, repeat:-1});

G'day all, Now this is not really a Greensock question specifically but it does relate. If anyone has fired up Flash CC in the last day or so you would have seen a new option to create a HTML5 Canvas option. As far as I have tested this is really awesome and the action panel changes over to a javscript editor and you'll free to timeline animate just as you normally would too for complex animations. However I'm trying to in use the TweenMax CDN library in there somewhere but I'm not too sure where to put in and in what syntax. Any JS pro shed a little light on importing external library's with the lastest Flash CC HTML5 Canvas update? Cheers, -Z

G'day mate, You can add and access custom user properties using the following method: public function Main() { var il:ImageLoader = new ImageLoader("myImage.png",new ImageLoaderVars() .name("myImage") .container(stage) .onComplete(loadedImage) .prop("lalala", "myValue")); //Use the prop method of imageloader vars to add a property. name , value il.load() } private function loadedImage(e:LoaderEvent):void { var vars:Object = ImageLoader(e.currentTarget).vars; //access your custom variable name now trace(vars.lalala); } Or if you prefer a more inline approach instead of the ImageLoaderVars: public function Main() { //Or if you prefer inline var il:ImageLoader = new ImageLoader("myImage.png", { name:"myImage", container:stage, onComplete:loadedImage, lalala: "myValue2"} ); il.load() } private function loadedImage(e:LoaderEvent):void { var vars:Object = ImageLoader(e.currentTarget).vars; //access your custom variable name now trace(vars.lalala); //traces myValue2 }

Hey guys. Sorry files are here. Dunno where they went on server move. Hope that helps. http://zyncinteractive.com.au/tutorials/LoaderMaxGalleryTutAssets.zip And the final Sources files for the completed project: http://zyncinteractive.com.au/tutorials/LoaderMaxGalleryFINALSource.zip

What does File.userDirectory trace out? And does it have a .url property too? What does that send out.

G'day mate, When your working with AIR I think you have to resolve the path in order to get the location as iOS and Android both store they files in differection locations. Hence its a function and not a static variable. Here's a snippit from something I'm working on, maybe it will help you: //thumbImage = APP_SETTINGS.OVERLAY_THUMB_PATH + APP_GLOBALS.OUTDOOR_SELECTED_FOLDER + "/" + filename; CONFIG::AIR { var imageAIR:File = File.applicationDirectory.resolvePath(thumbImage); thumbImage = imageAIR.url; //MonsterDebugger.trace(this, thumbImage, "", "From AIR"); } var ilThumbOverlay:ImageLoader = new ImageLoader(thumbImage, new ImageLoaderVars() //.name(name + count) .container(vmItem.itemHolder) .width(60) .height(45) .crop(true) .scaleMode("proportionalOutside") )

Hey ya mate, Assuming this for test XML data: <data> <testdata> <testcdata><![CDATA["Here's some CDATA"]]></testcdata> </testdata> </data> You can do the following: var xl:XMLLoader = new XMLLoader("test.xml", new XMLLoaderVars() .onComplete(xmlLoaded) ); xl.load(); private function xmlLoaded(e:LoaderEvent):void { trace(e.target.content.testdata.testcdata); //Will echo "Here's some CDATA" }

Cheers mate and yeah that was the desired effect but I probably didn't explain it that well. It's for a missile command type-of game tutorial where the player clicks on a point on the stage, the turret rotates into position and when the tween completes it fires a missile. But I will check out that dynamic props cos I do need another missile battery to always track the mouse. Thanks! Although would there be any harm in setting a 0 second tween in say a mousemove handler to always track a target exactly? Like: stage.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove); private function handleMouseMove(e:MouseEvent):void { TweenMax.to(this, 0, { rotateToObject:new Point(stage.mouseX, stage.mouseY) } ); }

Actually nvm. Did a little bit of digging around in the files and think I got it: package com.greensock.plugins { import com.greensock.TweenLite; /** * ... * @author Zync */ public class RotateToObject extends TweenPlugin { /** @private **/ public static const API:Number = 2; //If the API/Framework for plugins changes in the future, this number helps determine compatibility public function RotateToObject() { super("rotateToObject,rotation"); } override public function _onInitTween(target:Object, value:*, tween:TweenLite):Boolean { var dy:Number = target.y - value.y var dx:Number = target.x - value.x var angle:Number = Math.atan2(dy, dx) * 180 / Math.PI; _addTween(target, "rotation", target.rotation, angle-90); return true; } } } RotateToObject.zip

G'day Jack, Just a quickie Q about TweenMax and the plugin system. Do you know if it's possible to make an addon to TweenMax which would allow an object to have it rotation tweened to look at or rotate to another object? I know Math scares off a lot of people when it comes to getting a game up and running that's why I really want to make this tutorial set super simple. If you could point me in the right direction to making a plugin that would be great. So instead of: var dy:Number = gunTurret.y - stage.mouseY; var dx:Number = gunTurret.x - stage.mouseX; var angle:Number = Math.atan2(dy, dx) * 180 / Math.PI; mcTurret.rotation = angle; I could just use. //ie: TweenMax.to(gunTurret, 0.5, {lookAt:new Point(mouseX, mouseY)}); //. Cheers -Z

ZOMG thanks for the clarification on the 3D property. Yeah I am calling the following functions to hide and show the itemHolder mc. Had no idea the matrix had that kind of glitch in it (promise no black cat jokes): public static function hidePanel(mc:MovieClip, nDelay:Number = 0) { TweenMax.to(mc, 0.5, { rotationY:-120, autoAlpha:0, delay:0 } ); } public static function showPanel(mc:MovieClip, nDelay:Number = 0):void { TweenMax.fromTo(mc, 0.5, {rotationY:90, autoAlpha:0 }, {rotationY:0, autoAlpha:1, delay:0 } ); } Got rid of the rotation Y's and now all is well with the blitmask and the click through's are working ace thanks to tosun as well. Cheers guys you rock!!

I get a really weird error when i try to enable bitmap mode now as well: TypeError: Error #1009: Cannot access a property or method of a null object reference. at com.greensock::BlitMask/update()[F:\AS3Classes\com\greensock\BlitMask.as:265] at com.greensock::BlitMask/set bitmapMode()[F:\AS3Classes\com\greensock\BlitMask.as:524] at src.panels::vm_BasePanel/blitMouseDownHandler()[F:\wamp\www\vicmix2012\src\panels\vm_BasePanel.as:147] at flash.events::EventDispatcher/dispatchEventFunction() at flash.events::EventDispatcher/dispatchEvent() at com.greensock::BlitMask/_mouseEventPassthrough()[F:\AS3Classes\com\greensock\BlitMask.as:443] line 147 in my panelClass is just : blitMask.bitmapMode = true; blitmask is definitely tracing out fine and it's there so no idea why it thinks its a null object.

Hi Carl, Yup that makes perfect sense. I'm basically just rotating all the items in as a startup animation and after that point it's just a plain old movieclip with items and click listeners attached to them. Do I need to recapture the bitmap for blitmask everytime I start scrolling my itemHolder? TweenMax.allFrom(aItems, 0.7, new TweenMaxVars( { rotationX:90, autoAlpha:0 } ) .onStart(blitMask.disableBitmapMode ) .onComplete(function() { blitMask.update() } ) , 0.1) I'll upload a sample in a sec. Update. So here it is with bitmapMode turned off. http://www.zyncinter....au/dev/vicmix/ Here's one without childAnimation for the transition in: http://www.zyncinter...ev/vicmixNoAni/ When i turn bitmapmode mode on at anytime. The ImageLoaders in each item clip go blank. It's like it doesnt support bitmap mode for a nested clip either that or I havn't updated the bitmap properly. But you can still see how the masking from the blitmask doesnt work either. This only happens when i animate in the child clips of my itemHolder.

G'day mate, You can minimize a lot of your code by taking out LoaderMax which is not really needed if you just loading in 1 asset. Directly creating a LoaderMax object I think is more for loading in multiple objects. Also by default the top left corner of any image or swf will be at x 0, y 0 on the stage. Try just this and we'll see if we can troubleshoot the problem in the browser: Both swf's are in the same folder right? var introLoader:SWFLoader = new SWFLoader("IntroAnim.swf", new SWFLoaderVars() .name("IntroClip") .estimatedBytes(8000000) .container(this) ); introLoader.load();

yeah double checked that too Carl. Also blitMask = new BlitMask(itemHolder, itemHolder.x, itemHolder.y, bounds.width, bounds.height, true, true); If I setup the constructor like that it should autoUpdate as thats what the 2nd true is for right? But I'm not sure if that makes any difference though as I've set: blitMask.bitmapMode = false; Because if its set to true nothing renders at all in the blipmask as the itemHolder animates in.

I've noticed something weird with blitMask though and not sure if its a bug or its intended behavior but when I tween my individual clips inside of my holder clip the blitMask stops masking the spillover clips that would be outside the masks area and it reveals them. I can still click and drag on the blitmask but the area outside of the blitMask's rect is now visible revealing everything that should be hidden. Weird ya? Only happens when tweening the child clips in the target of the blitmask.

That's a really nice solution. I was trying it with TweenMax.isTweening(itemHolder) on the button click handler but sadly no dice as it said the itemHolder was always tweening. Dunno why. But yeah this is common problem when building for AIR on touch devices. Thought there would be a really sweet elegant solution for this by now but spent almost all of today searching and there's mostly just a few hacks. If I get a day free soon going to deifnintely develop something bulletproof but cheers so far mhmttosun

Yeah sorry about that, sober now. So the BlitMask is working great as well as the throwProps plugin. But at the moment when I goto scroll it's clicking the button in my itemHolder when I release the mouse button. I have about 17 items with click event handlers on them inside my itemHolder and Blitmask is blitting the itemHolder and looking for mousemoves to track velocity for the throwprops. But yeah long story short., Is there a way to stop the click event from travelling through to the buttons in the itemHolder when releasing the mouse as part of a drag? Something about propagation or cancelling it? public function setupBlitMask():void { //Setup mask blitMask = new BlitMask(itemHolder, itemHolder.x, itemHolder.y, bounds.width, bounds.height, false, true); blitMask.x = itemHolder.x; blitMask.y = itemHolder.y; blitMask.bitmapMode = false; blitMask.addEventListener(MouseEvent.MOUSE_DOWN, blitMouseDownHandler); blitMask.addEventListener(MouseEvent.MOUSE_WHEEL, blitMouseWheelHandler); } private function blitMouseWheelHandler(e:MouseEvent):void { ThrowPropsPlugin.to(itemHolder, { throwProps: { y: { velocity: e.delta*50, max: bounds.top, min: bounds.top - yOverlap, resistance: 300 }}, onComplete:bScrolling = false, ease: Strong.easeOut }, 5, 0.2, 0.05); } private function blitMouseDownHandler(e:MouseEvent):void { e.stopImmediatePropagation(); TweenMax.killTweensOf(itemHolder); y1 = y2 = itemHolder.y; yOffset = this.mouseY - itemHolder.y; yOverlap = Math.max(0, itemHolder.height - bounds.height); t1 = t2 = getTimer(); itemHolder.stage.addEventListener(MouseEvent.MOUSE_MOVE, blitMouseMoveHandler); itemHolder.stage.addEventListener(MouseEvent.MOUSE_UP, blitMouseUpHandler); } private function blitMouseUpHandler(e:MouseEvent):void { itemHolder.stage.removeEventListener(MouseEvent.MOUSE_UP, blitMouseUpHandler); itemHolder.stage.removeEventListener(MouseEvent.MOUSE_MOVE, blitMouseMoveHandler); var time:Number = (getTimer() - t2) / 1000; var yVelocity:Number = (itemHolder.y - y2) / time; ThrowPropsPlugin.to(itemHolder, { throwProps: { y: { velocity: yVelocity, max: bounds.top, min: bounds.top - yOverlap, resistance: 300 }}, onComplete:bScrolling = false, ease: Strong.easeOut }, 5, 0.2, 0.05); } private function blitMouseMoveHandler(e:MouseEvent):void { var y:Number = this.mouseY - yOffset; //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior) //trace(bounds.top, itemHolder.y); if (y > bounds.top) { itemHolder.y = (y + bounds.top) * 0.5; } else if (y < bounds.top - yOverlap) { itemHolder.y = (y + bounds.top - yOverlap) * 0.5; } else { itemHolder.y = y; } //blitMask.update(); var t:uint = getTimer(); //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second if (t - t2 > 50) { y2 = y1; t2 = t1; y1 = itemHolder.y; t1 = t; } e.updateAfterEvent(); }

Ah cheers for that. Knew it had to be something simple. Small problem now is that on the mouse release it clicks through to the button underneath now instead of just scrolling. Guess it's working a bit too well. Tried testing the see if my moveClip isTweening and if it is don't proceed with the click actions but that doesnt quite work either. Is there a simple or more elegant solution for clicking on a movieclip while having a blitmask that allows for scrolling the clips? Off topic, these new forums are awesome. Way more shiny than the old ones.

Hey ya mate, You need to find your app's home directory first. Also are you packaging the files with your air app? I mostly work with AIR on Android but it should be similar on iOS http://livedocs.adob...esystem_01.html http://www.flashandmath.com/mobile/swfscroller/

Hey all, It might just be really late but I'm stumped at the moment on a small blitMask problem. I've got a blitMask which masks out a lot of movieclips with click events on them. I've got the scrolling working great with the buttons in the blitMask but I can't click on any of them. I think the blitMask is intercepting the clicks and not letting them go through to the buttons but I'm not quite sure what I'm doing here. No more Tequila and coding I think. Cheers -Z