Android/iOS RSS feed app

[sergiopol]

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.

[sergiopol]

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.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.

[kglad]

try:

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

[sergiopol]

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

[kglad]

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

}

[sergiopol]

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.

[kglad]

use the trace function to debug.

[sergiopol]

Will do that, thank you for the hundredth time.

[kglad]

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;

[sergiopol]

Still nothing

[kglad]

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.description;

        newItem.title_tf.text = feedItems.title;

        newItem.uiloader.source = feedItems.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

}

[sergiopol]

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.description;

        newItem.feedTitle.text = feedItems.title;

        newItem.FeedImage.source = feedItems.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.

[kglad]

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)

}

[sergiopol]

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?

[kglad]

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.

[sergiopol]

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!

[kglad]

no problem.  i have the bbc feed working without problem.

[sergiopol]

Yes it's almost working. The uiloader stuff is a minor thing. What's more troubling is the actions after the click but I'll get into it again after I solve this.

[kglad]

i have all that working using the below code in this fla (http://www.kglad.com/Files/forums/rss.fla):

import fl.containers.UILoader;

import flash.display.MovieClip;

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.description;

        newItem.title_tf.text = feedItems.title;

        newItem.uiloader.source = feedItems.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 frame:MovieClip = MovieClip(uiloader.parent).frame;

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

    if(ar>frame.width/frame.height){

        uiloader.width = frame.width;

        uiloader.height = 450 / ar;

    } else {

        uiloader.height = frame.height;

        uiloader.width = ar*uiloader.height

    }

    uiloader.x = frame.x+.5*(frame.width-uiloader.width);

    uiloader.y = frame.y+.5*(frame.height-uiloader.height);

}

[sergiopol]

Still doesn't work for me . I'll keep trying, thank you Kglad.

[kglad]

did you download the fla and try??

[sergiopol]

The link wasn't working. I tried a couple of times.

[kglad]

use: http://www.kglad.com/Files/forums/rss.fla

[sergiopol]

Ok I finally could download it and open it. I do get that kind of behavior your project shows but what I need is a little bit different. I'll attach an image to show.

Maybe this image clarifies what I'm trying to do. What I need is for the images to scale proportionally so the width matches the designated area for the feed item which is 450 px wide by 150 px tall. I don't think they're scaling at all right now. Then position themselves centered inside that rectangle that encloses them. The image will show cropped of course, that's fine, pictures here make up just for a fancy background for the feed. I don't expect my feeds to show much people in those pics since this will be a engineering materials news feed reader.

[kglad]

if you do that, your image will either 1) sometimes exceed the height of your library ItemRenderer or 2) not be the correct aspect ratio

[sergiopol]

I'm expecting for it to exceed the height of lItemRenderer. That's why I

have a mask over it to crop it. As I said earlier, I pretend the content of

the photo is not too important at this stage. It'll work as a background

for the feed button an nothing more. Maybe I can use the picture cropped

into an square in the detail of the feed.

What do you think?