mspanish

Ok so that is working awesome. But... What is going to be confusing to kids is how to scale versus how to rotate. It seems it would be better if certain handles ONLY rotated, and the other ones ONLY scaled - is that possible? If not - has anybody else done something to make it clearer to the user when they can rotate and when they can scale? When you are using fingers instead of a mouse, this gets pretty blurry right now. Fantastic plugin!!

Alright its not too elegant, but I hacked up the TransformManager.as and added to this function: private static function _createScaleCursor at the end, before the return s; - I did this: s.scaleX = 3; s.scaleY = 3; return s; That will scale the cursor bigger, then I can use that other code to adjust the position further away from the mc

So I've found this code here in the source... TransformManager.customizeScaleCursor(null, false, 16, 26, false); I'll try that first! Since this is an app for kids I want to make the scale and rotating really obvious

Hello this works brilliant on Android - the only thing is that since things are scaled way down, I'd really like the arrows to be bigger - on a phone they are super small. I can make the handles huge but any way to increase these arrows' size? If anybody else has implemented pinch and zoom I'd love to see that too - but the handles look like they'll work fine, and that way I don't have to add mobile specific gestures. thanks! Stacey

I can't show my Spanish teaching IOS and Android app which has been made way better by Greensock's loaderMax and tweening - but here is an AS3 Greensock powered slideshow about the Android app: http://www.instaspanish.com/nook-app/290-instaspanish-kids-app-for-nook-slideshow And the demo of my Flex app, where you can see even more Greensock at work. In particular the Slideshow and Phonics uses Greensock for everything from the xml loading to the tweens, audio loading and playing, and more. In particular I find the delayedCall to be a lifesaver - no more timers for me The Wordgame and Hangman also use Greensock for the audio as well as some delayed calls. http://www.instaspanish.com/dev/demo/#/childrens Thanks Greensock - Muchas Gracias!

Hey Carl thanks very much - that is a great idea, and one I hadn't thought of. Yes I've been trying hard to whip these modules into shape for IOS, which is a challenge, as I'm using all vector graphics - which is awesome for web delivery as my file sizes are tiny, but not so great for IOS. I'll post some more stuff soon as I've done some different variations. Hey that tweening a variable tut is sweet - I am going to use that for my bonus PESOS tween in my app. Gracias!

Please note if you want to run that code you'll have to comment out the global variable stuff related to the $. variables you see in places

I used Jack's example of a panel scroller using throwProps - which was delightfully easy to customize into what I wanted to achieve. For a regular SWF viewed on my desktop, the scrolling motion is great. But on my iPad this does not look so smooth - it's way slower. Does anybody have any advice on the best velocity settings for mobile devices like iPad? Here is my code so far: /** * Very simple demo of panel flick-scrolling. It loads in an XML file * containing the file names for 5 panel jpg files and then arranges them * side-by-side in a Sprite (_container) and makes it scrollable horizontally. * Feel free to add more panels in the XML, change the _panelBounds position/size, * add a preloader, error handling, etc. the goal was to keep this simple. * * Get more code at http://www.greensock.com **/ package { import com.greensock.events.LoaderEvent; import com.greensock.loading.*; import flash.display.Sprite; import flash.events.MouseEvent; import flash.utils.getTimer; import flash.events.Event; import flash.geom.Rectangle; import com.greensock.TweenLite; import com.greensock.easing.Strong; import flash.text.*; import flash.text.TextField; import flash.text.TextFormat; import flash.text.AntiAliasType; import flash.filters.*; import flash.media.Sound; import flash.media.SoundMixer; import flash.utils.*; import com.inruntime.utils.*; import flash.display.MovieClip; public class QuickReview extends Sprite { private var _panelBounds:Rectangle = new Rectangle(0, 0, 640, 480); private var _container:Sprite; private var _currentPanelIndex:int = 0; private var _panelCount:int; private var _x1:Number; private var _x2:Number; private var _t1:uint; private var _t2:uint; private var stringsArray:Array = []; private var stringTxtArray:Array = []; private var stringTxt2Array:Array = []; private var format2:TextFormat = new TextFormat(); private var format3:TextFormat = new TextFormat(); private var filter2:GlowFilter=new GlowFilter(0x000000,1.0,2.0,2.0,10); private var sounds_url:String // = "sound/"; private var images_url:String // = "sound/"; var $:Global = Global.getInstance(); private var xmlPath:String = $.xmlQuickReview; private var background:MovieClip; private var Alpha:Number; public function init():void { if ($.activity == "cucaracha") { Alpha = .4 } if ($.activity == "body") { Alpha = .4 } if ($.activity == "telling_time") { Alpha = .7 } if ($.activity == "weather") { Alpha = .6 } if ($.activity == "colors") { Alpha = .1 } if ($.activity == "family") { Alpha = .4 } if ($.activity == "animals") { Alpha = .4 } } public function QuickReview() { init(); trace ('here it the activity :' + $.activity); trace ('here is the Alpha :' + Alpha); // xmlPath = "xml/quickreview.xml var xmlLoader:XMLLoader = new XMLLoader(xmlPath, {name:"slides", onComplete:_xmlCompleteHandler}); background = new MovieClip(); addChild(background) background.graphics.beginFill(0xFFFFFF); background.graphics.drawRect(-20, -20, 680, 540); background.graphics.endFill(); //this is perfectly acceptable: var loader:SWFLoader = new SWFLoader("assets/" + $.activity + "/images/bg.swf", {width:700, height:600, x:-25, y:-25, alpha:Alpha}); background.addChild(loader.content); //add the ContentDisplay to the display list even before raw content is loaded. loader.load(); xmlLoader.load(); } private function _xmlCompleteHandler(event:LoaderEvent):void { // background.addChild( LoaderMax.getContent('bgImage')); _container = new Sprite(); _container.x = _panelBounds.x; _container.y = _panelBounds.y; background.addChild(_container); //background.addChildAt(_container, 0); _container.addEventListener(MouseEvent.MOUSE_DOWN, _mouseDownHandler, false, 0, true); format2.font="Arial Rounded MT Bold"; format2.size=85; format2.color = 0xffffff; format2.align = TextFormatAlign.CENTER; format2.letterSpacing=1; format3.font="Arial Rounded MT Bold"; format3.size=95; format3.color = 0xffff00; format3.align = TextFormatAlign.CENTER; format3.letterSpacing=1; filter2.quality=BitmapFilterQuality.MEDIUM; var panels:XMLList = event.target.content.panel; _panelCount = panels.length(); var queue:LoaderMax = new LoaderMax(); var panelConfig:XML = LoaderMax.getLoader("slides").content as XML; sounds_url = panelConfig.@soundsurl; images_url = panelConfig.@imagesurl; for (var i:int = 0; i < _panelCount; i++) { queue.append( new SWFLoader(images_url + panels[i].@file, {x:i * _panelBounds.width, y:35, width:_panelBounds.width, height:_panelBounds.height - 300, container:_container, scaleMode:"proportionalInside"}) ); var string_txt = new TextField(); string_txt.x = i * _panelBounds.width + 5; string_txt.y=50 + _panelBounds.height-300; string_txt.width=620; string_txt.wordWrap = false; string_txt.defaultTextFormat = format3; string_txt.filters = [filter2]; string_txt.text = panels[i].@spanish; string_txt.embedFonts = true; string_txt.autoSize="center"; string_txt.selectable = false ; var string_txt2 = new TextField(); string_txt2.x = i * _panelBounds.width + 5; string_txt2.y=50 +_panelBounds.height-180; string_txt2.width=620; string_txt2.wordWrap = true; string_txt2.defaultTextFormat = format2; string_txt2.filters = [filter2]; string_txt2.text = panels[i].@english; string_txt2.embedFonts = true; string_txt2.autoSize="center"; string_txt2.selectable = false ; stringsArray.push(panels[i].@spanish); stringTxtArray.push(string_txt); stringTxt2Array.push(string_txt2); _container.addChild(stringTxtArray[i]); _container.addChild(stringTxt2Array[i]); stringTxtArray[i].visible = true; stringTxt2Array[i].visible = true; } //stringTxtArray[0].visible = true; //feel free to add a PROGRESS event listener to the LoaderMax instance to show a loading progress bar. queue.load(); TweenLite.delayedCall(.5, playSpanish); } private function _mouseDownHandler(event:MouseEvent):void { TweenLite.killTweensOf(_container); _x1 = _x2 = this.mouseX; _t1 = _t2 = getTimer(); _container.startDrag(false, new Rectangle(_panelBounds.x - 9999, _panelBounds.y, 9999999, 0)); this.stage.addEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler, false, 0, true); this.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true); } private function _enterFrameHandler(event:Event):void { _x2 = _x1; _t2 = _t1; _x1 = this.mouseX; _t1 = getTimer(); } private function playSpanish():void { var e:int = _currentPanelIndex; trace('here is my current string: ' + stringsArray[e]); var spanishsound:String = stringsArray[e]; spanishsound = spanishsound.replace(/ /g, "-"); spanishsound = spanishsound.replace(/á/g, "a"); spanishsound = spanishsound.replace(/é/g, "e"); spanishsound = spanishsound.replace(/í/g, "i"); spanishsound = spanishsound.replace(/ó/g, "o"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ñ/g, "n"); spanishsound = spanishsound.replace(/¡/g, ""); spanishsound = spanishsound.replace(/!/g, ""); spanishsound = spanishsound.toLowerCase(); SoundMixer.stopAll(); var sound:MP3Loader = new MP3Loader(sounds_url + spanishsound + ".mp3", {name:"audio", autoPlay:true, skipFailed:true}); sound.load(); } private function _mouseUpHandler(event:MouseEvent):void { _container.stopDrag(); this.removeEventListener(Event.ENTER_FRAME, _enterFrameHandler); this.stage.removeEventListener(MouseEvent.MOUSE_UP, _mouseUpHandler); var elapsedTime:Number = (getTimer() - _t2) / 1000; var xVelocity:Number = (this.mouseX - _x2) / elapsedTime; //we make sure that the velocity is at least 20 pixels per second in either direction in order to advance. Otherwise, look at the position of the _container and if it's more than halfway into the next/previous panel, tween there. if (_currentPanelIndex > 0 && (xVelocity > 20 || _container.x > (_currentPanelIndex - 0.5) * -_panelBounds.width + _panelBounds.x)) { _currentPanelIndex--; } else if (_currentPanelIndex < _panelCount - 1 && (xVelocity < -20 || _container.x < (_currentPanelIndex + 0.5) * -_panelBounds.width + _panelBounds.x)) { _currentPanelIndex++; } TweenLite.to(_container, 0.7, {x:_currentPanelIndex * -_panelBounds.width + _panelBounds.x, ease:Strong.easeOut}); SoundMixer.stopAll(); TweenLite.delayedCall(.3, playSpanish); } } } thanks in advance Stacey in Alaska

Hey Carl - I could not resist when I saw the Throw Props panel examples, and tried putting a mini slideshow into that format. Looks pretty cool! I'll probably make a new activity in my IOS app for quick vocab review using this. I thought you might enjoy it - so here is a CS5 version for you. warm wishes Stacey

thanks a lot - I am relieved this conversion wasn't as hard as I thought it would be. Still took 2-3 days time, but at least now I have an XML based slideshow that I can use over and over again. Looking forward to more of your tuts! Stacey

Hi Carl sorry I didn't notice that you only have CS5 installed (must not be doing mobile dev yet eh? - you should try your hand at an iPad app!) Here is a CS5 for you, so you can see all my funky code

ah just fyi - the hiding of text on any page where the "scramble" variable is set to YES is intentional - that is because I load a sub app which uses the string in a scramble game on this pages. Thanks again for the encouragement - perhaps my files will help somebody else totally new to XML loading and getting those values into Arrays that you can really work with.

Hello Carl - I'm done! Very exciting - this will make my IOS app "compile-able" versus just choking on like 1MB of unnecessary AS3. Here is the new FLA - in case it helps you for any future tutorials. I copped out on TimelineMax - just found it simpler to hide the pages. Here is the updated file set. thanks for the encouragement - I really appreciate it. warm wishes Stacey

For anybody who doesn't want to look at all that code but might be able to help with the navigation question - my timeline code that is giving me grief is here: function createTimeline():void { for(var i:int=0;itrace ('im trying to create a timeline'); trace('here is the pageArray ' + pageArray[i]); //trace('here is the page num ' + i); timeline.addLabel("page" + i, timeline.duration) timeline.append(TweenMax.from(pageArray[i], 1, {delay:2, autoAlpha:.5, onComplete:pauseMe} ) ) } } and here is my experimentation with changing pages... (not working at all - I think the autoAlpha settings are messed up as well, as I need to set the page.alpha to 1 again and autoAlpha back to 0...) function goForward(event:MouseEvent):void { trace('trying to go forward'); //timeline.gotoAndStop("page1"); timeline.killTweensOf("page1") timeline.tweenTo("page2") //TweenLite.to(timeline, 0.5, {time:3}); }

For anybody who doesn't want to look at all that code but might be able to help with the navigation question - my timeline code that is giving me grief is here: function createTimeline():void { for(var i:int=0;itrace ('im trying to create a timeline'); trace('here is the pageArray ' + pageArray[i]); //trace('here is the page num ' + i); timeline.addLabel("page" + i, timeline.duration) timeline.append(TweenMax.from(pageArray[i], 1, {delay:2, autoAlpha:.5, onComplete:pauseMe} ) ) } } and here is my experimentation with changing pages... (not working at all - I think the autoAlpha settings are messed up as well, as I need to set the page.alpha to 1 again and autoAlpha back to 0...) function goForward(event:MouseEvent):void { trace('trying to go forward'); //timeline.gotoAndStop("page1"); timeline.killTweensOf("page1") timeline.tweenTo("page2") //TweenLite.to(timeline, 0.5, {time:3}); }

Hello Carl- thanks buddy - I've posted on your site a few times, and follow your comments on Twitter when I have time to login there, which isn't too much I'm actually on one of your tuts right now, lol Here is my revised code - this thing is darn near working! It's the timelineMax that's giving me grief now, mainly trying to navigate to and from the pages. After that I can add back in the other stuff like sound, etc. Here is my new code - I'll post the FLA and stuff too in case it's helpful. Thanks again for looking Carl, you are really the Greensock guru after Jack import flash.media.Sound; import flash.media.SoundChannel; import flash.media.SoundMixer; import flash.media.SoundTransform; import com.greensock.events.LoaderEvent; import com.greensock.loading.LoaderMax; import com.greensock.loading.SWFLoader; import com.greensock.loading.XMLLoader; import com.greensock.loading.MP3Loader; import com.greensock.*; import com.greensock.easing.*; import com.greensock.loading.*; import com.greensock.easing.Elastic; import com.greensock.TweenMax; import com.greensock.TweenLite; import com.greensock.TimelineMax; import com.greensock.events.TweenEvent; import com.greensock.plugins.*; import flash.display.*; import flash.geom.*; import flash.filters.*; import flash.text.*; import com.greensock.loading.display.ContentDisplay; LoaderMax.activate([sWFLoader, MP3Loader, XMLLoader]); var slideCount:Number = 100; var slide:Number = 1; // set slide number var translationVisible:Boolean = false; var slideNumber_txt:TextField = new TextField; var slide_txt:String = String(slide); var nextSlideBtn:Sprite; var prevSlideBtn:Sprite; var audioBtn:Sprite; var hearBtn:Sprite; var translationBtn:Sprite; var replayBtn:Sprite; var page:MovieClip; var audio_toggle_txt:TextField; var audio_translation_txt:TextField; var filter2:GlowFilter=new GlowFilter(0x000000,1.0,2.0,2.0,10); filter2.quality=BitmapFilterQuality.MEDIUM; var format6:TextFormat = new TextFormat(); var format2:TextFormat = new TextFormat(); var translationFormat:TextFormat = new TextFormat(); translationFormat.font="Verdana"; translationFormat.size=70; translationFormat.bold = true; translationFormat.color = 0xffffff; translationFormat.align = TextFormatAlign.CENTER; translationFormat.letterSpacing=3; // blue default regular format2.font="Verdana"; format2.size=80; format2.color = 0x3399ff; format2.align = TextFormatAlign.CENTER; format2.letterSpacing=1; // blue default regular format6.font="Articulate"; format6.size=11; format6.bold = false; format6.color = 0x000000; format6.align = TextFormatAlign.CENTER; format6.letterSpacing=2; var the_activity:String = "cucaracha"; var _imagesLoader:LoaderMax; var slideNumberArray:Array = []; var stringArray:Array = []; var translationArray:Array = []; var scrambleArray:Array = []; var englishAudioArray:Array = []; var imageSizeArray:Array = []; var thumbnailBigArray:Array = []; var thumbnailSmallArray:Array = []; var spanishSoundArray:Array = []; var englishSoundArray:Array = []; var pageArray:Array = []; var count:Number = 0; var string:String; var translation:String; var scramble:String; var englishAudio:String; var imageSize:String; var thumbnailBig:String; var thumbnailSmall:String; var spanishsound:String; var englishsound:String; var timeline:TimelineMax = new TimelineMax({paused:false, overwrite:false}); var _xmlLoader = new XMLLoader("xml/cucaracha_slideshow.xml", {name:"slides", onComplete:completeHandler, onError:_errorHandler}); init(); function init():void { trace('init starting...'); _xmlLoader.load(); _imagesLoader = LoaderMax.getLoader("imagesLoader") as LoaderMax; _imagesLoader.load(); } /*function translationReset(event:MouseEvent):void { translationBtn.alpha = 1; audio_translation_txt.text = 'show' + '\n' + 'ENGLISH'; clickTranslationOnce=0; translationVisible=false; hearBtn.alpha = 1; } */ function addButtons():void { audio_toggle_txt = new TextField; addChild(audio_toggle_txt); audio_toggle_txt.x=565; audio_toggle_txt.y=47; audio_toggle_txt.embedFonts = true; audio_toggle_txt.wordWrap = true; audio_toggle_txt.autoSize="left"; audio_toggle_txt.defaultTextFormat = format6; audio_toggle_txt.antiAliasType = AntiAliasType.ADVANCED; audio_toggle_txt.text = 'sound' + '\n' + 'control' ; audio_translation_txt = new TextField; addChild(audio_translation_txt); audio_translation_txt.x=563; audio_translation_txt.y=133; audio_translation_txt.embedFonts = true; audio_translation_txt.wordWrap = true; audio_translation_txt.autoSize="left"; audio_translation_txt.defaultTextFormat = format6; audio_translation_txt.antiAliasType = AntiAliasType.ADVANCED; audio_translation_txt.text = 'see' + '\n' + 'ENGLISH' ; addChild(slideNumber_txt); slideNumber_txt.width=150; slideNumber_txt.x=5; slideNumber_txt.y=505-25; slideNumber_txt.embedFonts = true; slideNumber_txt.wordWrap = true; slideNumber_txt.autoSize="left"; slideNumber_txt.defaultTextFormat = format6; slideNumber_txt.antiAliasType = AntiAliasType.ADVANCED; slideNumber_txt.text = 'page ' + slide_txt + ' of ' + slideCount ; audioBtn = new AudioBtn(); audioBtn.width = 45; audioBtn.height = 45; audioBtn.x = 590; audioBtn.y = 0; addChild(audioBtn) translationBtn = new TranslationBtn(); translationBtn.width = 63; translationBtn.height = 45; translationBtn.x = 590; translationBtn.y = 85; addChild(translationBtn) hearBtn = new HearBtn(); hearBtn.width = 63; hearBtn.height = 45; hearBtn.x = 515; hearBtn.y = 0; addChild(hearBtn) // buttons for navigation nextSlideBtn = new GoBtn(); nextSlideBtn.width = 50 nextSlideBtn.height = 50 nextSlideBtn.x = 595; nextSlideBtn.y = 448; addChild(nextSlideBtn) replayBtn = new ReplayBtn(); replayBtn.width = 75; replayBtn.height = 35; replayBtn.x = 575; replayBtn.y = 453; addChild(replayBtn) replayBtn.visible = false prevSlideBtn = new BackBtn(); prevSlideBtn.width = 50; prevSlideBtn.height = 50; prevSlideBtn.x = 535; prevSlideBtn.y = 448; addChild(prevSlideBtn) var myTween1:TweenMax; var myTween2:TweenMax; } function _errorHandler(event:LoaderEvent):void { trace('xml failed to load!'); } function completeHandler(event:LoaderEvent):void { trace("XML loaded!"); //var slideConfig:XML = LoaderMax.getLoader("slides").content as XML; var slides:XMLList = (_xmlLoader.content as XML).slide; slideCount = slides.length() trace('here is the slides xml list :' + slides); trace('here is the slide count ' + slideCount); var background = new MovieClip(); addChild(background) background.graphics.beginFill(0xFFFFFF); background.graphics.drawRect(-20, -20, 680, 540); background.graphics.endFill(); background.alpha = .4; background.addChild( LoaderMax.getContent('bgImage')); addButtons(); hearBtn.addEventListener(MouseEvent.CLICK, playSpanishSound); nextSlideBtn.addEventListener(MouseEvent.CLICK, goForward); for each (var xml:XML in slides) { count ++; string = xml.@spanish; translation = xml.@english; scramble = xml.@scramble; englishAudio = xml.@englishAudio; imageSize = xml.@imageSize; thumbnailBig = string + "SWFBIG"; thumbnailSmall = string + "SWFSMALL"; spanishsound = string + ".mp3"; englishsound = translation + ".mp3"; spanishsound = spanishsound.replace(/ /g, "-"); spanishsound = spanishsound.replace(/á/g, "a"); spanishsound = spanishsound.replace(/é/g, "e"); spanishsound = spanishsound.replace(/í/g, "i"); spanishsound = spanishsound.replace(/ó/g, "o"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ñ/g, "n"); englishsound = englishsound.replace(/ /g, "-"); trace('here is thumbnail Big :' + thumbnailBig) trace('here is thumbnail Small:' + thumbnailSmall) trace('here is englishsound :' + englishsound) slideNumberArray.push(count); stringArray.push(string); translationArray.push(translation); scrambleArray.push(scramble); englishAudioArray.push(englishAudio); imageSizeArray.push(imageSize); thumbnailBigArray.push(thumbnailBig); thumbnailSmallArray.push(thumbnailSmall); spanishSoundArray.push(spanishsound); englishSoundArray.push(englishsound); } createSlides(); } function createSlides():void { for(var i:int=0;i page = new MovieClip; addChild(page) page.graphics.drawRect(0, 0, 640, 480); page.graphics.endFill(); page.alpha = 0; var string_txt = new TextField(); page.addChild(string_txt); string_txt.x=0; string_txt.y=350; string_txt.width=640; string_txt.wordWrap = true; string_txt.autoSize="center"; string_txt.embedFonts = true; string_txt.autoSize="center"; string_txt.defaultTextFormat = translationFormat; string_txt.filters = [filter2]; string_txt.selectable = false ; var translation_txt = new TextField(); page.addChild(translation_txt); translation_txt.x=string_txt.y +15; translation_txt.y=-841; translation_txt.width=640; string_txt.wordWrap = true; string_txt.autoSize="center"; string_txt.embedFonts = true; string_txt.autoSize="center"; string_txt.defaultTextFormat = format2; string_txt.filters = [filter2]; string_txt.text = stringArray[0]; trace('the spanish string is ' + stringArray[0]); translation_txt.text = translationArray[0]; if (imageSizeArray[i] =='big') { page.addChild( LoaderMax.getContent(thumbnailBigArray[i])); trace('adding a Big thumb'); } else if (imageSizeArray[i] == 'small') { page.addChild( LoaderMax.getContent(thumbnailSmallArray[i])); trace('adding a Small thumb'); } if (scrambleArray[i] =='no') { trace('scramble is a no'); } else if (scrambleArray[i] == 'yes') { trace('scramble is a yes'); } spanishsound = spanishSoundArray[i]; englishsound = englishSoundArray[i]; pageArray.push(page); trace('slide number is ' + slideNumberArray[i]); trace('here is the pageArray ' + pageArray[i]); //end for loop } createTimeline(); //end createPage function } function createTimeline():void { for(var i:int=0;itrace ('im trying to create a timeline'); trace('here is the pageArray ' + pageArray[i]); //trace('here is the page num ' + i); timeline.addLabel("page" + i, timeline.duration) timeline.append(TweenMax.from(pageArray[i], 1, {delay:2, autoAlpha:.5, onComplete:pauseMe} ) ) } } function pauseMe():void { timeline.pause(); } function playSpanishSound(event:MouseEvent):void { var sound:MP3Loader = new MP3Loader("assets/" + the_activity + "/sound/" + spanishsound, {name:"audio", autoPlay:true}); SoundMixer.stopAll(); sound.load(); } function playEnglishSound(event:MouseEvent):void { var sound:MP3Loader = new MP3Loader("assets/" + the_activity + "/sound/" + englishsound, {name:"audio", autoPlay:true}); SoundMixer.stopAll(); sound.load(); } function goForward(event:MouseEvent):void { trace('trying to go forward'); //timeline.gotoAndStop("page1"); timeline.killTweensOf("page1") timeline.tweenTo("page2") //TweenLite.to(timeline, 0.5, {time:3}); } Beware my timeline is a mess right now!

In case anybody wants to jump in...I'm now trying to put the values for the first slide into some kind of MC that will load into my timelineMax timeline, so that when you click forward you go to the next slide, changing to the next set in the XML loop.

Getting closer! I can load the first page for my show. Have not integrated the timeline part yet - but this is a good start. I'll chronicle this here in case it helps anybody else struggling with all of this! I took the mp3s out of the loader - as it's redundant anyway, since the .mp3 files are just variations of the text strings. So here is my updated code: import com.greensock.events.LoaderEvent; import com.greensock.loading.LoaderMax; import com.greensock.loading.SWFLoader; import com.greensock.loading.XMLLoader; import com.greensock.loading.MP3Loader; import com.greensock.*; import com.greensock.easing.*; import com.greensock.loading.*; import flash.display.*; import flash.geom.*; import com.greensock.loading.display.ContentDisplay; LoaderMax.activate([sWFLoader, MP3Loader, XMLLoader]); var the_activity:String = "cucaracha"; var _imagesLoader:LoaderMax; var _pages:Array; var page:Object; var _items:Array; _imagesLoader = LoaderMax.getLoader("imagesLoader") as LoaderMax; var _xmlLoader = new XMLLoader("xml/cucaracha_slideshow.xml", {name:"slides", estimatedBytes:276700, onComplete:completeHandler, onError:_errorHandler}); init(); function init():void { trace('init starting...'); _xmlLoader.load(); _imagesLoader.load(); } function _errorHandler(event:LoaderEvent):void { trace('xml failed to load!'); } function completeHandler(event:LoaderEvent):void { trace("XML loaded!"); //var item:LoaderMaxItem, thumbnail:DisplayObject, spanishsound:LoaderItem, englishsound:LoaderItem; //create XMLList from site nodes //could also do LoaderMax.getContent("sites").site var slides:XMLList = (_xmlLoader.content as XML).slide; var slideCount = slides.length() trace('here is the slides xml list :' + slides); trace('here is the slide count ' + slideCount); var string_txt = new TextField(); addChild(string_txt); string_txt.x=0; string_txt.y=350; string_txt.width=640; string_txt.wordWrap = true; string_txt.autoSize="center"; string_txt.selectable = false ; var translation_txt = new TextField(); addChild(translation_txt); translation_txt.x=0; translation_txt.y=150; translation_txt.width=640; translation_txt.wordWrap = true; translation_txt.autoSize="center"; translation_txt.selectable = false ; for each (var xml:XML in slides) { var string = xml.@spanish; var translation = xml.@english; var scramble = xml.@scramble; var englishAudio = xml.@englishAudio; var imageSize = xml.@imageSize; var thumbnail = string + "SWF"; var spanishsound = string + ".mp3"; spanishsound = spanishsound.replace(/ /g, "-"); spanishsound = spanishsound.replace(/á/g, "a"); spanishsound = spanishsound.replace(/é/g, "e"); spanishsound = spanishsound.replace(/í/g, "i"); spanishsound = spanishsound.replace(/ó/g, "o"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ú/g, "u"); spanishsound = spanishsound.replace(/ñ/g, "n"); var englishsound = translation + ".mp3"; englishsound = englishsound.replace(/ /g, "-"); trace('here is thumbnail :' + thumbnail) trace('here is englishsound :' + englishsound) string_txt.text = string; translation_txt.text = translation; trace('here is string! ' + string); addChild( LoaderMax.getContent(thumbnail)); function playSpanishSound():void { var sound:MP3Loader = new MP3Loader("assets/" + the_activity + "/sound/" + spanishsound, {name:"audio", autoPlay:true}); sound.load(); } function playEnglishSound():void { var sound:MP3Loader = new MP3Loader("assets/" + the_activity + "/sound/" + englishsound, {name:"audio", autoPlay:true}); sound.load(); } } }

Hmm... I found one of Jack's posts to a guy trying to build an image slideshow, and perhaps this will work better as a base to start from... I can see pretty clearly how I could add my page mc here and switch that out instead of the loader in the timeline. var timeline:TimelineMax = new TimelineMax({repeat:2, paused:true}); function XMLLoaded(event:Event):void{ xml = new XML(event.target.data); var addedListener:Boolean = false; for each(var slide in xml.slides){ var url:String = slide.@url; var id:Number = slide.@id; //maybe need Int here, always forget the diff! var spanish:String = slide.@spanish; var english:String = slide.@english; var scramble:String = slide.@scramble; var spanishmp3:String = slide.@spanishMp3; var englishmp3:String = slide.@englishMp3; var englishAudio:String = slide.@englishAudio; var request:URLRequest = new URLRequest(url); var loader:Loader = new Loader(); loader.x = 250; loader.y = 125; // loader.alpha = 0; loader.load(request); addChild(loader); timeline.append(TweenMax.to(loader, 0.5, {alpha:1})); timeline.append(TweenMax.to(loader, 0.5, {alpha:0}), 2); if (!addedListener) { loader.addEventListener(Event.COMPLETE, onFirstSlideLoad); addedListener = true; } } } function onFirstSlideLoad(event:Event):void { timeline.play(); } //*****====================================================***** var xml:XML; var loader:URLLoader = new URLLoader(); var request:URLRequest = new URLRequest("xml/cucaracha_slideshow.xml"); loader.addEventListener("complete", XMLLoaded); loader.load(request);

Hi I've already downloaded plenty of the slideshow type demos, I appreciate all the great code - but I'm still having some trouble. Mine is not a pure image slideshow - it's an audio visual e-learning slideshow where the user has to click to advance to the next slide. I've got the thing working great without using XML, but that is super code intensive and the IOS compiler chokes on all this code. So I need to skinny this thing way down, and surely LoaderMax is the way to do it (live sample is here - click on the Phonics Slideshow link) http://www.instaspanish.com/dev/demo/#/childrens/up_downvideo So each page or slide has: 1- a Spanish phrase 2- an English phrase 3- the Spanish mp3 (named the same as the phrase but with dashes for spaces) 4- the English mp3 (same as above) 5- the image file (names the same as the mp3, but using .swf as the ext). I've got lots of other stuff in there, but since I'm trying to recreate it from scratch, I need to start with the basics. I've never built an XML load using anything other than the cut and past approach, so please excuse my ignorance about how that really works! For my XML, I fashioned something like this: <?xml version="1.0" encoding="iso-8859-1"?> So far for my loaderMax slideshow, I have this - not including any imports - I'm not really sure how the page Object works, or how to use it once I populate it with values from the XML - sorry I found that in one of the tutorial examples, and thought it looked close to what I want to do - although I've not figured out how yet... var _pages:Array; var page:Page; LoaderMax.activate([xmlLoader]); var loader:XMLLoader = new XMLLoader("xml/cucaracha_slideshow.xml", {name:"slides", onComplete:onReady}); loader.load(); } function onReady(e:LoaderEvent) : void { var xml:XML = LoaderMax.getLoader("slides")slide.content as XML; var slideList:XMLList = xml.slide var string_txt = new TextField(); addChild(string_txt); string_txt.x=0; string_txt.y=350; string_txt.width=640; string_txt.embedFonts = true; string_txt.wordWrap = true; string_txt.autoSize="center"; string_txt.defaultTextFormat = format2; string_txt.filters = [filter2]; string_txt.selectable = false ; var translation_txt = new TextField(); addChild(translation_txt); translation_txt.x=0; translation_txt.y=350; translation_txt.width=640; translation_txt.embedFonts = true; translation_txt.wordWrap = true; translation_txt.autoSize="center"; translation_txt.defaultTextFormat = format2; translation_txt.filters = [filter2]; translation_txt.selectable = false ; for each (var slide:XML in slideList) { _pages.push( new Page( string_txt.text = xml.@spanish, translation_txt.text = xml.@english, scramble = xml.@scramble, englishAudio = xml.@englishAudio, imageSize = xml.@imageSize)) } } function createPage():void { addChild(_page[0]) // I know this line doesn't work but I'm trying to figure out how to add the first page with all its XML values to the stage, then pass those string values down to the loadImage() and playSpanish() functions loadImage(); playSpanish(); } function loadImage():void { var imagesLoader:LoaderMax = LoaderMax.getLoader("imagesLoader"); //imagesLoader.addEventListener(LoaderEvent.COMPLETE, imagesLoaderCompleteHandler); imagesLoader.load(); addChild(LoaderMax.getContent(string_txt + 'SWF') ); } function playSpanish():void { var soundLoader:LoaderMax = LoaderMax.getLoader("soundLoader"); //soundLoader.addEventListener(LoaderEvent.COMPLETE, soundLoaderCompleteHandler); soundLoader.load(); LoaderMax.getLoader(string_txt + 'MP3').playSound() } function playEnglish():void { var soundLoader:LoaderMax = LoaderMax.getLoader("soundLoader"); //soundLoader.addEventListener(LoaderEvent.COMPLETE, soundLoaderCompleteHandler); soundLoader.load(); LoaderMax.getLoader(translation_txt + 'MP3').playSound() } My existing show uses TimelineMax, like this, with all of the %%A values hard coded into a very bloated .as file generated by DOS! var timeline:TimelineMax = new TimelineMax({paused:false, overwrite:false}); timeline.append(TweenMax.delayedCall(0, initSlide%%A)); timeline.addLabel("page%%A", timeline.duration) timeline.append(TweenMax.from(page%%A, !slideTime%%A!, {autoAlpha:0, onStart:playSoundNow%%A, onComplete:pauseMe} ) ); I don't know if this is enough info to get a little help on the XML issue - I do know how to set up a loop and put the string and image values in a page based on an Array, but loading these from XML is a bit confusing right now. Any help would be really appreciated! warm wishes Stacey

Hello again - my timeline works great, and the forward navigation works great. But for going back through my 5 slides, I'm having a terrible time with the text refusing to disappear. My previous button's handler look's like this: function prevHandler(event:MouseEvent):void { switch(timeline.currentLabel) { case "page2": removeChild(string2_txt) timeline.gotoAndStop("page1") initSlide1(); timeline.restart(); break; case "page3": removeChild(string3_txt) timeline.gotoAndStop("page2") initSlide2(); break; case "page4": removeChild(string4_txt) timeline.gotoAndPlay("page3") initSlide3(); break; case "page5": removeChild(string5_txt) timeline.gotoAndPlay("page4") initSlide4(); break; } } And my timeline looks like this: timeline.addLabel("page1", timeline.duration) timeline.append(TweenMax.from(page1, 4, {autoAlpha:0, onInit:initSlide1, pause:true} ) ); timeline.append(TweenMax.delayedCall(2, initSlide2)); timeline.addLabel("page2", timeline.duration) timeline.append(TweenMax.from(page2, 4, {x:0, y:0, autoAlpha:0, pause:true})); timeline.append(TweenMax.delayedCall(2, initSlide3)); timeline.addLabel("page3", timeline.duration) timeline.append(TweenMax.from(page3, 4, {x:0, y:0, autoAlpha:0, pause:true})); timeline.append(TweenMax.delayedCall(2, initSlide4)); timeline.addLabel("page4", timeline.duration) timeline.append(TweenMax.from(page4, 4, {x:0, y:0, autoAlpha:0, pause:true})); timeline.append(TweenMax.delayedCall(2, initSlide5)); timeline.addLabel("page5", timeline.duration) timeline.append(TweenMax.from(page5, 4, {x:0, y:0, autoAlpha:0, onComplete:timeStop})); Has anybody conquered a similar problem? thanks in advance! Stacey

Ah for now it's word by word, not letter by letter.

Yet another newbie inquiry! My timeline, which works awesome - looks like this: var timeline:TimelineMax = new TimelineMax({paused:false, overwrite:false}); var tween:TweenMax = null; timeline.append(TweenMax.from(page1, 5, {autoAlpha:0, onInit:initSlide1} ) ); timeline.addLabel("page1", timeline.duration) timeline.append(TweenMax.from(page2, 4, {x:0, y:0, autoAlpha:0, onInit:initSlide2})); timeline.addLabel("page2", timeline.duration) timeline.append(TweenMax.from(page3, 10, {x:0, y:0, autoAlpha:0, onInit:initSlide3})); timeline.addLabel("page3", timeline.duration) timeline.append(TweenMax.from(page4, 5, {x:0, y:0, autoAlpha:0, onInit:initSlide4})); timeline.addLabel("page4", timeline.duration) timeline.append(TweenMax.from(page5, 10, {x:0, y:0, autoAlpha:0, onInit:initSlide5, onComplete:timeStop})); timeline.addLabel("page5", timeline.duration) I'm trying to add a letter by letter animation for each field, beginning with the first entry, page1. I tried adding this instead of the first 2 entries in the timeline: var page1string:SplitTextField = new SplitTextField(string1_txt, SplitTextField.TYPE_WORDS); timeline.append(TweenMax.from(page1, 5, {autoAlpha:0, onInit:initSlide1} ) ); timeline.addLabel("page1", timeline.duration) timeline.insertMultiple(TweenMax.allFrom(page1string.textFields, .8, {alpha:0, delay:1.2, onComplete:page1string.deactivate }, 0.1)); Seems this should work! Anybody dealt with this before? Thanks so much in advance...

Ah geez what a ridiculous mistake! That's the problem with having done too much in the Flash IDE... My movieclips had a fill color, which was why only the last movieclip was visible. Not the lovely greensock framework's fault! Thing of beauty this framework is...

sorry to be such a moron here - but I tried using the code from the greensock example SWF, and tried this: timeline.insertMultiple( TweenMax.allFrom([page1, page2, page3, page4, page5], 3, {autoAlpha:0, alpha:1, onInit:initSlides }, 0.25), 0.6); now each page fades in and then disappears - where I'd like them to STAY just like in the example, where each element fades in and stays present. Caramba any idea what I'm doing wrong?