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.

[kglad]

then change this:

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

        uiloader.width = frame.width;

        uiloader.height = 450 / ar;

    } else {

        uiloader.height = frame.height;

        uiloader.width = ar*uiloader.height

    }

to

        uiloader.width = 450;

        uiloader.height = 450 / ar;

[sergiopol]

Did it but the same thing keeps happening, no matter what the contents of the function completeF nothing happens to the scaling of the pictures. Right now the code inside that function looks like this:

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;

    //uiloader.width = 450;

     //uiloader.height = 450 / ar;

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

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

}

And still nothing changes in the aspect (look) of the pictures.

[kglad]

you have everything commented out so nothing is going to happen in completeF.

do you see the image scaling when you use the fla i uploaded?

[sergiopol]

Yes I commented all those lines of code to illustrate how it is not doing anything. There's no difference between having them active or commented. I left only one line of code active so it won't give an error for function completeF not having anything. In respect to your flash project I saw images shown complete but I need them cropped. I get the same result leaving the images as is and checking "scale content" in the uiloader's properties. Seems weird, maybe the code is not reaching the uiloader correctly?

[kglad]

do you have a movieclip named frame in your ItemRenderer?

[sergiopol]

No I don't

[kglad]

that's why it's not working in your fla.

you can 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 = 450 / ar;

    uiloader.x = .5*(450-uiloader.width);

    uiloader.y = .5*(ItemRenderer_height_replace_this-uiloader.height);

}

[sergiopol]

I'll try that. But in the meantime can you help me with another issue I'm facing? In an earlier draft of the app I used a code that worked but I lost it and now I can't replicate it. It's the itemF function. As far as I remember it was:

function itemF(e: MouseEvent): void {

     gotoAndStop('Detail');

     while (numChildren > 0) removeChildAt(0);//this removed all instances of newItem so they don't show at "Detail"

     this.detailRenderer.description.text = e.currentTarget.textS//Not sure if this is working since the feed buttons obscure the view

     trace(e.currentTarget.textS);//This is not needed now since currentTarget.textS is succesfully retrieving the corresponding text

}

What this is doing now is removing EVERYTHING from the stage. Can you help me?

[kglad]

this is the problem:

while (numChildren > 0) removeChildAt(0);//this removed all instances of newItem so they don't

you need to remove that line of code.

i would use something like

var itemP:MovieClip=new MovieClip();  // item parent

addChild(itemP);

and then in handleComplete, use:

itemP.addChild(newItem);

then when you want to remove all the items, use:

removeChild(itemP);

and when you want to re-add them all, use:

addChild(itemP);

[sergiopol]

So

var itemP:movieClip = new MovieClip();

Would be replacing:

var newItem = new FeedRenderer();

right?

I'd still need to make itemP an instance of FeedRenderer, wouldn't I?

is itemP:movieClip = new FeedRenderer(); possible?

If so: addChild(itemP); would go at the end of the for loop that create instances for all feed items. Am I correct?

In regard to the image scaling thing.. I have a problem figuring out what to put in the line:

uiloader.y = .5*(ItemRenderer_height_replace_this-uiloader.height);

the bold text being the issue obviously.

Thank you for your patience Kglad.

[kglad]

no.

itemP is defined outside all functions before any of your other code executes and is a movieclip, just like i showed.

ItemRenderer is 450 wide.  what's its height?

[sergiopol]

ItemRenderer is now FeedRenderer as per your comment on ItemRenderer possibly been reserved by AS in the future. FeedRenderer is 150 px tall. So what you mean is to have FeedRenderer as child of itemP? Can you show how the complete code would look like with this itemP addition?

[kglad]

import fl.containers.UILoader;

import flash.display.MovieClip;

var itemP:MovieClip=new MovieClip();

addChild(itemP);

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;

    //trace(feedItems);

    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;

        trace(0,newItem.height);

        newItem.x = 15;

        newItem.y = posY;

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

    uiloader.x = .5*(450-uiloader.width);

    uiloader.y = .5*(150-uiloader.height);

}

[sergiopol]

Thank you Kglad! So what this does is create an instance of ItemRenderer inside itemP, right? So when I need to unload the buttons I just remove itemP from stage?

[kglad]

it just makes it easy to add, remove and re-add all the itemrenderer objects instead of having to loop through each one.

[sergiopol]

Cool! I'll try that and see how it goes.

[sergiopol]

Hi Kglad, how are you? I'm writing just to let you know the app is looking great thanks to all your help. That last draft of code worked perfectly. One maybe minor thing I need to work on right now is in the detail of the article. I want to make the pubDate field to adjust to whatever height the title is. You see the text looks good when the title is two-lined but when it's one-lined only the pubDate keeps its original position so there's an unpleasant gap between the title and the date. I tried giving each field a variable name and then having pubDate.y = (title.y+title.height); but it never worked. Was it a good approach? Or there's a better way to do it?

This is how the whole function looks right now:

function itemF(e: MouseEvent): void {

     gotoAndStop("Detail");

     removeChild(itemP);

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

     this.detailRenderer.title.text = e.currentTarget.textTitle;

     this.detailRenderer.pubDate.text = e.currentTarget.textPD;

     var textFormat:TextFormat = new TextFormat();

     textFormat.url = e.currentTarget.textLink;

     textFormat.target = "_blank";

     this.detailRenderer.url.setTextFormat(textFormat);

     var detailImage = (e.currentTarget.FeedImage.source);

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

     detailImage.width = 450;

     detailImage.height = 230/ar;

     this.detailRenderer.detailImage.source = detailImage;

}

There's a thing with the parsing of the XML data too but I'm not sure it's an actionscript subject. Using the XML from BBC the app performs awesome, grabbing every element perfectly including the images. But not all RSS feeds are built the same so in one RSS XML I found for example the images were not put in a "media:thumbnail" tag but in a "enclosure url" tag instead. As this app relies so heavily on grabbing the images correctly this part is crucial.

What do you think is more logical, building the RSS XML file to match BBC's structure or have new lines of code inside the app to parse many different structures types of XMLs?

I hope I'm not bugging you too much with this, thanks a lot.

[kglad]

enable the autoSize property of title textfield and then use the textfield's height property to position whatever's below it:

this.detailRenderer.title.autoSize='left';

and you have to use different parsing for different rss feeds.

[sergiopol]

Thank you! I Will do that.

[kglad]

you're welcome.

[sergiopol]

Hello Kglad, how are you? The app is looking more and more finished. However I hit another halt point when integrating drag scrolling into it. I hope you can help me figure it out. I managed to restrict the movement of the drag on the Y axis only. However I'm facing a couple problems but let me first tell you how I set the scrolling up.

As you would remember we created itemP dynamically on stage to hold every instance of itemRenderer so when the user clicks on one feed the timeline moves to where the feed detail is shown and itemP is removed so it won't obscure the view.

Since the drag event needs a visible movie clip to drag (or at least that's what I figured out) I had to create an empty movie clip (contentMC) on stage to hold itemP and be able to move it on stage. The thing is that as soon as a touch is recorded contentMC moves up and shows the first item cropped below the header of the app and it won't show it complete no matter what movement the user does, I'll add a screenshot to better explain it. I need it to let me drag down until the first item is fully shown. I also need to add easing to the scrolling if it's not too hard to do. Right now the scrolling follows literally the movement of the drag which is awfully unpleasant to say the least.

Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;

contentMC.addEventListener(TouchEvent.TOUCH_BEGIN, drag);

contentMC.addEventListener(TouchEvent.TOUCH_END, end);

var dragBounds:Rectangle = new Rectangle(0, -3000, 0, 3000);

function drag(event:TouchEvent):void

{

event.currentTarget.startTouchDrag(event.touchPointID, false, dragBounds);

}

function end(event:TouchEvent):void

{

event.currentTarget.stopTouchDrag(event.touchPointID);

}

Thanks in advance for any guidance you can provide here!

[kglad]

i don't see how to help you with that via the forum (and that's the only free help i offer).

it looks like someone would need to download your fla and check it.  i would only do that if hired.

[sergiopol]

Oh god. Sorry to hear that. My budget here is non existent. But how much would it cost?

[kglad]

send an email via http://www.kglad.com > contact

[sergiopol]

Hi, I tried a couple of times to send you the message but there seems to be a problem.