1 2 Previous Next 75 Replies Latest reply on Nov 17, 2017 7:15 AM by kglad

    Android/iOS RSS feed app

    sergiopol Level 1

      Hello guys, I have to build an RSS feed app and thought I had hit jackpot with this cool tutorial to do it from inside Animate. But then the tutorial works in an HTML 5 canvas. From the little I've got to know so far about app creation in Animate is that it's way simpler to compile from an AIR project than it is from HTML 5 canvas. I need to load the articles and let the user read them entirely inside the app but if that's not possible a "read more" button that jumps to the complete article in the browser would still be acceptable. I pretend to make the app grab the pic published with the article, bring it in and make it the button to that article inside the app.

      Is it possible to compile it from HTML 5 canvas and nest it inside an AIR project afterwards or are there any other tutorials focused on creating such app from AIR that you know? Maybe a better method that would allow me to compile such app to both platforms from same matrix?

      Thank you for your help on this.

        • 1. Re: Android/iOS RSS feed app
          kglad Adobe Community Professional & MVP

          there's not much to loading rss using actionscript.  use a urlloader and load the feed.

           

          here's an example of an app i made for gowdy state park that allows park visitors to see the park weather.  the harder part will be parsing the feed.  how you do that depends on the feed.

           

          urlLoader_current.load(new URLRequest('http://api.openweathermap.org/data/2.5/weather?APPID='+GOWDY_KEY+'&lat=41.2&lon=-105.25&mo de=xml&units=imperial&nocache='+Math.random()));

           

          you'll need to add app permissions for android (internent)

          • 2. Re: Android/iOS RSS feed app
            sergiopol Level 1

            Hello Kglad, just to check if I'm following you correctly. What you mean is not to build the app in an AIR project? I couldn't open the link you sent me. It gave me an error supposedly for not having an account on the site. I created one then tried again and still the same 401 error. Maybe it refers to the app permissions you said but I'm trying to open it from my desktop PC. Thank you for your answer.

            • 3. Re: Android/iOS RSS feed app
              kglad Adobe Community Professional & MVP

              1. you can use an air (for desktop, ios and/or android) project.

              2. that link isn't for you to click on.  that an rss weather feed i used in the app.

               

              is the rss feed you're trying to use require a login or "key"?  eg, what happens if you enter the feed url into your browser.

              • 4. Re: Android/iOS RSS feed app
                sergiopol Level 1

                Oh I see . I'm still in the research phase of the project so I'm not dealing with my feeds yet. Can you suggest a tutorial to follow on creating such app in an AIR project? Thank you very much kglad!

                • 5. Re: Android/iOS RSS feed app
                  kglad Adobe Community Professional & MVP

                  this shows some of the info needed to parse a loaded rss feed, Adobe ActionScript 3.0 * Example: Loading RSS data from the Internet

                   

                  the part about actually loading the feed isn't mentioned there, but is in my above messages.

                  • 6. Re: Android/iOS RSS feed app
                    sergiopol Level 1

                    Thanks a lot kglad I also found this one

                    https://www.raymondcamden.com/2010/12/08/Simple-RSS-Reader-built-in-AIR-for-Mobile/

                     

                    in case this helps others in the future. I'll keep you posted. Thanks again!!

                    • 7. Re: Android/iOS RSS feed app
                      sergiopol Level 1

                      Hello kglad, I've been working on this project for a while but haven't had much success, I've come to a point where I think I can't advance anymore on my own. Would you please help me get back on track?

                      I've managed my app to generate dynamically a container with the title of one feed from the XML but so far I haven't been able to create one for every item.

                       

                       

                      my code at this point is:

                       

                       

                      var loader:URLLoader = new URLLoader();

                      loader.load( new URLRequest( "bbc-rss.xml" ) );

                      loader.addEventListener(Event.COMPLETE, handleComplete);

                       

                       

                       

                       

                      function handleComplete( event:Event ):void{

                           var rawXML:XML = new XML ( loader.data );

                           var feedItems:XMLList = rawXML.channel.item;

                           var newItem = new ItemRenderer();

                           newItem.feedTitle.text = feedItems[0].title;

                           newItem.x= 15;

                           newItem.y= 130;

                           addChild(newItem);

                      }

                       

                       

                      However when I try this to generate one itemRenderer per item in the XML I get a blank stage, no error message, nothing.

                       

                       

                      function handleComplete( event:Event ):void{

                           var rawXML:XML = new XML ( loader.data );

                           var feedItems:XMLList = rawXML.channel.item;

                           var posY= 130;

                           for(var i=0; i < feedItems.lenght; i++){

                           var newItem = new ItemRenderer();

                           newItem.title.text = feedItems[i].title;

                           newItem.title.mouseEnabled = false;

                           newItem.id = i;

                           newItem.x = 15;

                           newItem.y = posY;

                           addChild(newItem);

                           posY += newItem.getBounds().height + 6;

                           }

                      }

                       

                       

                      Looks like I can't make feedItems available inside the for loop so it can proceed. It seems from what I've read here and there I may need to put that code inside a package so it is accessible from everywhere. Am I right?

                      Thank you!

                      • 8. Re: Android/iOS RSS feed app
                        kglad Adobe Community Professional & MVP

                        no, you don't need to use a package/classes.  for large projects, that's a good idea but even then is not necessary.

                         

                        first, use trace(feedItems) to make sure that's not a problem

                         

                        once your confirm that's correct, this looks problematic:

                         

                        var newItem = new ItemRenderer();

                         

                        if you have a movieclip in your library with class name ItemRenderer, you should change that class name.  if you're trying to use a spark class/component, don't.  use a movieclip with a title textfield and whatever graphics to display those titles.  i assume you'll also need to add listeners to those movieclips to get more info about that item when clicked:

                         

                        var newItem= new Item_mc();

                        etc.

                         

                        newItem.addEventListener(MouseEvent.CLICK,itemF);

                         

                        and then create (outside the handleComplete funciont) an itemF() that uses the targets id to display more info:

                         

                        function itemF(e:Event):void{

                        do whatever with e.currentTarget.id

                        }

                        • 9. Re: Android/iOS RSS feed app
                          sergiopol Level 1

                          Thanks a lot for those suggestions Kglad. First off, I've traced (feedItems) both inside the handleComplete function and outside. When placed outside the function I can trace it and get the list of items in the output. Placed inside the function however, the result is a blank output. That's why I thought that I had to use it inside a package, maybe that way I could reach it from inside the function. There's no doubt you know your way better around this than me but in my opinion (feedItems) is the most troublesome part, what do you think?

                           

                          Edit: Thinking about the ItemRenderer subject I'm having a hard time believing it's that problematic since in the first try (where there is no for loop) the code works perfectly. Do you think the for loop has a problem dealing with the movie clip linkage name? The movie clip by the way consists of a dynamic text field and a button underneath. In the final version I intend to place a picture relative to the feed (when available) as the background of the movie clip.

                           

                          Thank you for all your help..

                          • 10. Re: Android/iOS RSS feed app
                            kglad Adobe Community Professional & MVP

                            ItemRenderer is ok.  i just tested it.  (but i still would change the name because it could become a reserved animate name in the future.)

                             

                            you have a typo and error in your handleComplete function:

                             

                            feedItems.lenght

                             

                            should be

                             

                            feedItems.length()

                            1 person found this helpful
                            • 11. Re: Android/iOS RSS feed app
                              sergiopol Level 1

                              I corrected the typo and it seems to be somewhat working. It renders an instance of the ItemRenderer movie clip. However this error show up:

                              Error #1063: Argument count mismatch on flash.display::DisplayObject/getBounds(). Expected 1, got 0.

                              My guess what's happening is it can't locate newItem so it won't place the new MC 130 pixels down as wished. When I remove the getBounds thing the title displayed inside the MC changes. Maybe it is rendering all of the instances of the MC only on top of each other instead of on a vertical grid. What do you think?

                              • 12. Re: Android/iOS RSS feed app
                                kglad Adobe Community Professional & MVP

                                that line should be:

                                 

                                posY += newItem.height + 6;

                                1 person found this helpful
                                • 13. Re: Android/iOS RSS feed app
                                  sergiopol Level 1

                                  This worked Kglad. Awesome, thanks!!

                                  • 14. Re: Android/iOS RSS feed app
                                    kglad Adobe Community Professional & MVP

                                    you're welcome.

                                    • 15. Re: Android/iOS RSS feed app
                                      sergiopol Level 1

                                      Hello again, Kglad. Things are looking really good. Besides rendering an instance for each feed item and arranging it correctly the app now shows a related background image for each feed. However I haven't been able to scale it to fill the width while keeping the height proportional. Right now it fills the height but if  "maintain Aspect Ratio" is checked the image won't fill the width. If I uncheck it the image will fill the width and height but not keeping the image's proportions. Is there a way to do it with simple as3 or should I load external code like LoaderMax | GreenSock ?

                                       

                                      Thank you!

                                      • 16. Re: Android/iOS RSS feed app
                                        kglad Adobe Community Professional & MVP

                                        what are you scaling?

                                         

                                        your entire app?  each rss item?

                                        • 17. Re: Android/iOS RSS feed app
                                          sergiopol Level 1

                                          Oh sorry. I mean the picture that serves as background for each feed.

                                          • 18. Re: Android/iOS RSS feed app
                                            kglad Adobe Community Professional & MVP

                                            i don't see that in your code anywhere and i'm still not sure what background, but that should be clear from the code you're trying to use.

                                            • 19. Re: Android/iOS RSS feed app
                                              sergiopol Level 1

                                              Sorry, I didn't copy the code I'm using right now. Here it goes:

                                               

                                              function handleComplete(event: Event): void {

                                                   var rawXML: XML = new XML(loader.data);

                                                   var feedItems: XMLList = rawXML.channel.item;

                                                   var posY = 130;

                                                   var mediaNS: Namespace = rawXML.namespace("media");

                                                   for (var i = 0; i < feedItems.length(); i++) {

                                                   var newItem = new FeedRenderer();

                                                   newItem.feedTitle.text = feedItems[i].title;

                                                   newItem.FeedImage.source = feedItems[i].mediaNS::thumbnail.@url;

                                                   newItem.id = i;

                                                   newItem.x = 15;

                                                   newItem.y = posY;

                                                   addChild(newItem);

                                                   posY += newItem.height + 6;

                                                   }

                                              }

                                               

                                              I put an UILoader inside my movie clip (FeedRenderer) which dimensions are width:450 and height: 150. I need to scale the image to fill the width of the movie clip while maintaining its proportions. I wonder if it's doable with actionscript or should I go for Greensock imageLoader that looks like has the ability to do it. Thanks once more.

                                              • 20. Re: Android/iOS RSS feed app
                                                kglad Adobe Community Professional & MVP

                                                use:

                                                 

                                                function handleComplete(event: Event): void {

                                                     var rawXML: XML = new XML(loader.data);

                                                     var feedItems: XMLList = rawXML.channel.item;

                                                     var posY = 130;

                                                     var mediaNS: Namespace = rawXML.namespace("media");

                                                     for (var i = 0; i < feedItems.length(); i++) {

                                                     var newItem = new FeedRenderer();

                                                     newItem.feedTitle.text = feedItems[i].title;

                                                     newItem.FeedImage.source = feedItems[i].mediaNS::thumbnail.@url;

                                                newItem.FeedImage.addEventListener(Event.COMPLETE,completeF);

                                                     newItem.id = i;

                                                     newItem.x = 15;

                                                     newItem.y = posY;

                                                     addChild(newItem);

                                                     posY += newItem.height + 6;

                                                     }

                                                }

                                                 

                                                function completeF(e:Event):void{

                                                var uiloader:UILoader=UILoader(e.currentTarget.FeedImage);

                                                var ar:Number=uiloader.width/uiloader.height;

                                                uiloader.width=450;

                                                uiloader.height=450/ar;

                                                // you might want to vertically center uiloader here

                                                }

                                                1 person found this helpful
                                                • 21. Re: Android/iOS RSS feed app
                                                  sergiopol Level 1

                                                  Thank you Kglad, I will try that and let you know how it went. For the next

                                                  part of the project I"ll need that once the button inside the Feeditem

                                                  movie clip is clicked the main timeline jumps to another frame where the

                                                  details of the feed are arranged.

                                                   

                                                  I'm thinking of using the method you said earlier of adding a listener to

                                                  that event but I wonder how to make the app fill the description with the

                                                  appropriate text from the feed clicked.

                                                   

                                                  Obviously the Id given to newitem would be useful there but how do I access

                                                  it from outside that function. Or should I generate that functionality from

                                                  the same function where the Id is given?

                                                   

                                                  Thanks for all the help.

                                                  • 22. Re: Android/iOS RSS feed app
                                                    kglad Adobe Community Professional & MVP

                                                    i'd probably just add that text to variable and use that variable in the listener function instead of parsing the feed using that id:

                                                     

                                                    function handleComplete(event: Event): void {

                                                         var rawXML: XML = new XML(loader.data);

                                                         var feedItems: XMLList = rawXML.channel.item;

                                                         var posY = 130;

                                                         var mediaNS: Namespace = rawXML.namespace("media");

                                                         for (var i = 0; i < feedItems.length(); i++) {

                                                         var newItem = new FeedRenderer();

                                                    newItem.addEventListener(MouseEvent.CLICK,itemF);

                                                    newItem.textS = feedItems[i].whatever.whatever

                                                         newItem.feedTitle.text = feedItems[i].title;

                                                         newItem.FeedImage.source = feedItems[i].mediaNS::thumbnail.@url;

                                                    newItem.FeedImage.addEventListener(Event.COMPLETE,completeF);

                                                         newItem.id = i;

                                                         newItem.x = 15;

                                                         newItem.y = posY;

                                                         addChild(newItem);

                                                         posY += newItem.height + 6;

                                                         }

                                                    }

                                                     

                                                    function itemF(e:MouseEvent):void{

                                                    gotoAndStop('whereever');

                                                    whatever_tf.text = e.currentTarget.textS

                                                    }

                                                    1 person found this helpful
                                                    • 23. Re: Android/iOS RSS feed app
                                                      sergiopol Level 1

                                                      Excellent! I'll try that and see how it goes. Thank you friend.

                                                      • 24. Re: Android/iOS RSS feed app
                                                        kglad Adobe Community Professional & MVP

                                                        you're welcome.

                                                        • 25. Re: Android/iOS RSS feed app
                                                          sergiopol Level 1

                                                          Hello again Kglad, I'm having a problem with this piece of code inside the function completeF:

                                                          var uiloader:UILoader=UILoader(e.currentTarget.FeedImage);

                                                          Basically what happens is that I wouldn't know how to access all the newItem references created in the handleComplete function so this function can manipulate each background image.

                                                          I tried:

                                                          var uiloader:UILoader=this.newItem.id[i].UILoader(e.currentTarget.FeedImage);

                                                          in a sad attempt to access them but sensing it wouldn't work since it referred to variables created outside this function. So I'm stuck with this.

                                                          The question is, how do I access all instances of newItem created in the handleComplete function?

                                                           

                                                          Edit:

                                                          I tried isolating just one instance of newItem to see if it worked.

                                                          var uiloader:UILoader=this.newItem.UILoader(e.currentTarget.FeedImage);

                                                          I don't get any compiler errors but Error #1069 Property FeedImage not found on fl.containers.UILoader and there is no default in the AIR console.

                                                           

                                                           

                                                          • 26. Re: Android/iOS RSS feed app
                                                            kglad Adobe Community Professional & MVP

                                                            try:

                                                             

                                                            var uiloader:UILoader=this.newItem.id[i].UILoader(MovieClip(e.currentTarget).FeedImage);

                                                            • 27. Re: Android/iOS RSS feed app
                                                              sergiopol Level 1

                                                              Hello again, I tried it but it gave me error 1120: access of undefined property i. Thanks Kglad.

                                                              • 28. Re: Android/iOS RSS feed app
                                                                kglad Adobe Community Professional & MVP

                                                                wait a minute.  you posted erroneous code and i edited that.

                                                                 

                                                                go back to code i posted about your uiloader which is message 20:

                                                                 

                                                                function completeF(e:Event):void{

                                                                var uiloader:UILoader=UILoader(MovieClip(e.currentTarget).FeedImage);

                                                                var ar:Number=uiloader.width/uiloader.height;

                                                                uiloader.width=450;

                                                                uiloader.height=450/ar;

                                                                // you might want to vertically center uiloader here

                                                                }

                                                                • 29. Re: Android/iOS RSS feed app
                                                                  sergiopol Level 1

                                                                  Yes I know, it was giving me an error before. Tried it again and this time it's not giving any errors but it's not working.

                                                                  • 30. Re: Android/iOS RSS feed app
                                                                    kglad Adobe Community Professional & MVP

                                                                    use the trace function to debug.

                                                                    • 31. Re: Android/iOS RSS feed app
                                                                      sergiopol Level 1

                                                                      Will do that, thank you for the hundredth time.

                                                                      • 32. Re: Android/iOS RSS feed app
                                                                        kglad Adobe Community Professional & MVP

                                                                        wait a minute.  this is my error:

                                                                         

                                                                        var uiloader: UILoader = UILoader(MovieClip(e.currentTarget).uiloader);

                                                                        var ar:Number = uiloader.width/uiloader.height

                                                                         

                                                                        should be:

                                                                         

                                                                        var uiloader: UILoader = UILoader(e.currentTarget);

                                                                        var ar: Number = uiloader.content.width / uiloader.content.height;

                                                                        • 33. Re: Android/iOS RSS feed app
                                                                          sergiopol Level 1

                                                                          Still nothing

                                                                          • 34. Re: Android/iOS RSS feed app
                                                                            kglad Adobe Community Professional & MVP

                                                                            copy and paste this code and test:

                                                                             

                                                                            import fl.containers.UILoader;

                                                                            var loader: URLLoader = new URLLoader();

                                                                            loader.load(new URLRequest('http://feeds.bbci.co.uk/news/world/rss.xml'));

                                                                            loader.addEventListener(Event.COMPLETE, handleComplete);

                                                                             

                                                                            function handleComplete(event: Event): void {

                                                                                var rawXML: XML = new XML(loader.data);

                                                                                var feedItems: XMLList = rawXML.channel.item;

                                                                             

                                                                                var posY = 0;

                                                                                var mediaNS: Namespace = rawXML.namespace("media");

                                                                             

                                                                                for (var i = 0; i < feedItems.length(); i++) {

                                                                                    var newItem = new ItemRenderer();

                                                                                    newItem.addEventListener(MouseEvent.CLICK, itemF);

                                                                                    newItem.textS = feedItems[i].description;

                                                                                    newItem.title_tf.text = feedItems[i].title;

                                                                                    newItem.uiloader.source = feedItems[i].mediaNS::thumbnail.@url;

                                                                                    newItem.uiloader.addEventListener(Event.COMPLETE, completeF);

                                                                                    newItem.id = i;

                                                                                    newItem.x = 15;

                                                                                    newItem.y = posY;

                                                                                    addChild(newItem);

                                                                                    posY += newItem.height + 6;

                                                                                }

                                                                             

                                                                            }

                                                                             

                                                                            function itemF(e: MouseEvent): void {

                                                                                trace(e.currentTarget.textS);

                                                                            }

                                                                             

                                                                            function completeF(e: Event): void {

                                                                                var uiloader: UILoader = UILoader(e.currentTarget);

                                                                                var ar: Number = uiloader.content.width / uiloader.content.height;

                                                                                uiloader.width = 450;

                                                                                uiloader.height = 450 / ar;

                                                                                // you might want to vertically center uiloader here

                                                                            }

                                                                            • 35. Re: Android/iOS RSS feed app
                                                                              sergiopol Level 1

                                                                              Excellent! after some editing to match variables to my project it's running and working. What I haven't been able to achieve is to have the uiloader.source show centered in Y. Also I have worked on the function that triggers after the button is clicked. So far the function manages to unload all instances of the movieclips created dynamically since they got in the way after the mouse click. However it fails to populate the description text field in the detail section of the timeline (the state where the app goes to show the detailed information of the feed). Here's the code in case you can take a look at it.

                                                                               

                                                                              import fl.containers.UILoader;

                                                                              var loader: URLLoader = new URLLoader();

                                                                              loader.load(new URLRequest('http://feeds.bbci.co.uk/news/world/rss.xml'));

                                                                              loader.addEventListener(Event.COMPLETE, handleComplete);

                                                                               

                                                                              function handleComplete(event: Event): void {

                                                                                  var rawXML: XML = new XML(loader.data);

                                                                                  var feedItems: XMLList = rawXML.channel.item;

                                                                               

                                                                                  var posY = 130;

                                                                                  var mediaNS: Namespace = rawXML.namespace("media");

                                                                               

                                                                                  for (var i = 0; i < feedItems.length(); i++) {

                                                                                      var newItem = new FeedRenderer();

                                                                                      newItem.addEventListener(MouseEvent.CLICK, itemF);

                                                                                      newItem.textS = feedItems[i].description;

                                                                                      newItem.feedTitle.text = feedItems[i].title;

                                                                                      newItem.FeedImage.source = feedItems[i].mediaNS::thumbnail.@url;

                                                                                      newItem.FeedImage.addEventListener(Event.COMPLETE, completeF);

                                                                                      newItem.id = i;

                                                                                      newItem.x = 15;

                                                                                      newItem.y = posY;

                                                                                      addChild(newItem);

                                                                                      posY += newItem.height + 6;

                                                                                  }

                                                                               

                                                                              }

                                                                               

                                                                              function completeF(e: Event): void {

                                                                                  var uiloader: UILoader = UILoader(e.currentTarget);

                                                                                  var ar: Number = uiloader.content.width / uiloader.content.height;

                                                                                  uiloader.width = 450;

                                                                                   uiloader.height = 150 / ar;

                                                                                   uiloader.source.y = 75; //I have tried many variations either to uiloader.height and to uiloader.source.y variables but nothing changes in the test movie.

                                                                              }

                                                                               

                                                                              function itemF(e:MouseEvent):void{

                                                                              trace(e.currentTarget.textS);

                                                                              while (numChildren > 0) removeChildAt(0);

                                                                              gotoAndStop('Detail');

                                                                              this.detailRenderer.description.text = e.currentTarget.textS

                                                                              }

                                                                               

                                                                              stop();

                                                                               

                                                                              Sorry to keep bothering you with this. I'm trying to solve things on my own too.

                                                                              • 36. Re: Android/iOS RSS feed app
                                                                                kglad Adobe Community Professional & MVP

                                                                                i don't know how you want to center it, but if you wanted center the uiloader on its parent, use:

                                                                                 

                                                                                function completeF(e: Event): void {

                                                                                    var uiloader: UILoader = UILoader(e.currentTarget);

                                                                                    var ar: Number = uiloader.content.width / uiloader.content.height;

                                                                                    uiloader.width = 450;

                                                                                     uiloader.height = 150 / ar;

                                                                                     uiloader.y=.5*(new item height before the image is loaded -uiloader.height)

                                                                                }

                                                                                • 37. Re: Android/iOS RSS feed app
                                                                                  sergiopol Level 1

                                                                                  Does it mean that as3 will always interpret children in relation to its parents attributes in the main stage? Can't I just tell the child to position itself inside its parent?

                                                                                  If that's true then:

                                                                                  uiloader.content.y = .5(newItem.height-uiloader.height);

                                                                                  right?

                                                                                  • 38. Re: Android/iOS RSS feed app
                                                                                    kglad Adobe Community Professional & MVP

                                                                                    as3 interprets what you code.  if you want to position an object relative to its parent, you can.  if you want to position it relative to the stage, you can.  but you have to use the correct code.

                                                                                     

                                                                                    you might find it easier to add a display frame (which can be transparent) for your newItem movieclip and and center the uiloader on the display frame.

                                                                                    • 39. Re: Android/iOS RSS feed app
                                                                                      sergiopol Level 1

                                                                                      Thanks Kglad, I'm sure the solution to this is not too hard to reach. You've been great. I hope I didn't get too much into your nerves. I'll try to not to pest you much but I think I'll have to come back some time to ask silly stuff and hopefully count on your invaluable help. Cheers!

                                                                                      1 2 Previous Next