IntroductionWelcome| 00:00 | Hi. I am Todd Perkins and I absolutely
love working with Flash and ActionScript.
| | 00:05 | I am the author of several lynda.com titles including
ActionScript 3.0 and Flash CS3 Beyond on the Basics and a few others.
[00:00:11.6=75]
Flash CS3 Fundamentals and ActionScript 3.0 Projects Game Development.
| | 00:16 | In addition to that I am also an Adobe Certified
Instructor in Flash. I absolutely love working in Flash.
| | 00:23 | In this title we will work with using ActionScript to grab XML data
and use that data in Flash. One of the things that we will be doing
| | 00:31 | that's really exciting is we will use PHP
to do things that ActionScript cannot do.
| | 00:36 | Like grab data from a remote location and save that data in a local
file. Let's take a look at some of the applications that we will build.
| | 00:45 | We will take a look at an application that
reads data from a blog on a remote website
| | 00:50 | and we can choose which blog posts we would like to read
| | 00:53 | and we can see images from that blog and we can see the date
of the blog and we can even view the blog online if we want to.
| | 01:02 | We will take a look at grabbing data from a podcast.
| | 01:06 | So you can choose which podcast episode you would like to view
| | 01:10 | and we will link to the podcast episodes
so you can watch that episode online.
| | 01:19 | Another thing that we will do is grab images from flickr.com and
display them in Flash. So it will load them from a remote URL
| | 01:27 | using the Flickr API. So using our Flash application, you could
type a value in the Search field and search Flickr for images.
| | 01:35 | The thumbnail images appear in Flash and you
can use them in anyway you would like in Flash.
| | 01:38 | So those are just some of the things that
we are going to be building in this title.
| | 01:41 | So again I am really excited about it and I sure hope you are too.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a premium subscriber to lynda.com or have this
title on a disk you have access to the exercise files.
| | 00:06 | The exercise files in this title are organized by chapters.
| | 00:10 | In each movie where we use exercise files, I will explain
where those exercise files are and how to access them.
| | 00:16 | Most of the exercise files
| | 00:17 | are simply numbered in order of the movies inside of each
chapter, but some exercise files are contained within subfolders.
| | 00:25 | In those cases I will make sure to mention exactly where
those exercise files are and what files you need for what exercise.
| | 00:31 | If you don't have access to the exercise files, don't worry.
As we go along I will talk about what you can do to follow along.
| | 00:37 | Sometimes you'll need to make your own ActionScript class files
and sometimes you'll need to make your own blank text documents.
| | 00:43 | And I'll show you all the code that you will need to write
to follow along with everybody else. So let's gets started.
| | Collapse this transcript |
| Prerequisites| 00:00 | Before we dive deep into XML, let's talk a little bit about
what we are going to be doing in this title or what code
| | 00:06 | we should already know coming to this title.
| | 00:09 | You should know about how to create your own class files,
about what a package is, how to setup a package folder structure
| | 00:15 | and how to import classes and how to create methods
and properties. You should know about the URLRequest,
| | 00:22 | URLLoader classes and how to load data from an external URL
| | 00:27 | and you should be familiar with the terms public and private.
| | 00:32 | You should also be familiar with creating
your own functions, loops and arrays.
| | 00:35 | Throughout this title we will be working a lot with functions and
arrays and variables and classes and everything so I am going to refer
| | 00:41 | to those objects as if you already know what they are. And
sometimes we will already have code inside of our files
| | 00:47 | and so I expect you to kind of be able to look at
a file and kind of understand how code is working.
| | 00:52 | If what we looked at so far in this movie looks pretty
familiar then you are ready to go and feel free to advance
| | 00:58 | and head through this title.
| | 00:59 | If not, you're welcome to advance anyway, however I
recommend that you view the ActionScript 3.0 in Flash CS3
| | 01:06 | Essential Training title to get yourself
familiar with the basics of ActionScript.
| | 01:10 | So there's a look at some of the requirements for this title and now
that you are ready with that, let's get started and learn some XML.
| | Collapse this transcript |
|
|
1. Understanding XML DataUnderstanding XML| 00:00 | Before we start using XML data, let's understand what XML
is and why people use it. First, what is XML used for?
| | 00:07 | It's used primarily to build data driven applications. It's
also used in RSS feeds like a news feed or a podcast feed.
| | 00:15 | It's used in audio and video playlists, closed captioning and subtitles.
| | 00:19 | In fact, AJAX is asynchronous JavaScript and XML, so XML is used
in AJAX. It's used in configuration files like your iTunes library,
| | 00:28 | bookmarks for your web browser, and it is
even used by Adobe Dreamweaver to tell
| | 00:33 | which tools display in the coding toolbar. So why do people use XML?
| | 00:38 | For one, it's extremely versatile, meaning just
about any language can interpret and use XML data.
| | 00:43 | Also you can build a simple database using XML without having
to worry about learning a database language like mySQL.
| | 00:50 | XML is not application-specific, meaning it doesn't matter
which application using and in fact you don't need to use
| | 00:56 | any application other than a plain text editor to edit an XML file.
| | 01:01 | Another benefit of using XML is that it's very
easy to learn. It's quite similar to HTML.
| | 01:07 | So with all those benefits why would you not use XML?
| | 01:10 | It is not as simple to password protect an XML file
like it is a database because it's just a text file and
| | 01:16 | also it's not ideal for large amounts of data. In those situations,
it's better to use a database. So now that you understand
| | 01:22 | some benefits of using XML data, why people use it and why you
wouldn't use it, let's start learning about what XML looks like.
| | Collapse this transcript |
| Visualizing XML| 00:00 | XML data is stored in a hierarchy.
| | 00:02 | It's called an XML tree.
| | 00:04 | Let's talk about what XML trees are and kind of what they look
like. Here's an example of an XML tree. I want you to imagine
| | 00:10 | that you're creating a slideshow and you have a whole
bunch of images in that slideshow and you want to have a
| | 00:16 | database or an area that stores all the
information about each image in the slideshow.
| | 00:20 | So each image could have an associated title,
| | 00:22 | a description, an artist and a filename linked to it.
| | 00:26 | In XML you connect all of that data to an element. So in this
example of an XML tree, the image element shown on the left side
| | 00:34 | of your screen is connected to a title, a description,
an artist and a file name. So in one XML file you may
| | 00:42 | have many different image elements, but each one of those
has associated data and so there's a look at an XML tree.
| | 00:48 | Now that you have an idea of how XML data works and what
an XML tree is, let's take a look at an actual XML file.
| | Collapse this transcript |
| Exploring an XML file| 00:00 | Now let's take a look at an actual XML file.
| | 00:02 | If you're following along and you have access to the exercise files, open
up the exercise files folder, find gallery.XML in the Chapter 1 folder.
| | 00:10 | You can open up that file in any text editor.
I'm going to open it up in Text Wrangler.
| | 00:15 | Now if you don't have access to the exercise files, don't worry. You can
just follow along and I'm going to walk through how this file is set up.
| | 00:21 | So don't worry about copying down any of this information.
| | 00:24 | So the first line of code here is what's
called a processing instruction in XML.
| | 00:29 | This is actually a special processing instruction
that contains information about this XML file,
| | 00:34 | including the XML version used and
the type of encoding attribute used.
| | 00:39 | Below that we have the body of our XML file. Now this
may look very familiar to you if you're familiar with HTML.
| | 00:45 | We have an opening tag, some gallery here. In XML you can
actually use your own names so the content has more meaning.
| | 00:53 | So I see an opening tag here and I know that inside of the gallery
tag there is going to be information about some sort of gallery.
| | 00:59 | At the bottom of the code you can see the closing gallery tag
that just looks like a closing HTML tag, which is the same thing
| | 01:04 | as the opening tag except it has
a forward slash (/) before the tag name.
| | 01:10 | In XML tags are also called elements. Inside of the gallery element we
have some processing instructions so we have an open bracket, question mark.
| | 01:21 | The processing instructions here, question mark.
| | 01:24 | And then a closing bracket.
| | 01:26 | Then we have an XML comment,
which is the same thing as an HTML comment.
| | 01:29 | Inside of the brackets we have an exclamation point (!)
| | 01:32 | Two hyphens,
| | 01:34 | the body of the comment,
| | 01:35 | two hyphens, and then a bracket to close.
| | 01:37 | And then following our hierarchy or XML tree, we have
three child elements inside of the gallery element.
| | 01:45 | So the first child I have highlighted here is an image, the second
child is another image and the third child is another image.
| | 01:53 | The first child contains an attribute.
| | 01:56 | An attribute in XML is just like an attribute in HTML.
It's information that's contained inside of the opening tag.
| | 02:02 | So we have the tag name, which is image, and space, the
attribute name, which is file, an = and then a value in quotes.
| | 02:09 | So this contains information about where the file is for this image.
| | 02:13 | Then we have information on our artist in the artist element.
| | 02:17 | Information about the title of the image contained in the title element.
| | 02:21 | Then we have the description contained in a description element.
| | 02:25 | The only thing that may look a little bit different inside of the
description element is the CDATA tag and that just tells the XML parser
| | 02:32 | to not process anything inside of this tag as XML data.
| | 02:39 | And that's so that we can use reserved XML characters,
like the < and >, inside of a body text block for example.
| | 02:48 | So if we look at our text here, it says here's a picture
of some stuff and the picture is surrounded in a b tag and
| | 02:54 | the b tag is an HTML tag that makes content bold. Now if you're
familiar with web standards you may we be wondering why I chose
| | 03:01 | not to use a strong tag instead. That's because ActionScript
supports a number of HTML tags and it's actually a very small amount
| | 03:08 | and the strong tag is not supported, but the b tag is.
So I'm using the b tag here because I want this picture
| | 03:13 | to be bold when I load this XML data
into Flash and display it in a text field.
| | 03:19 | So by putting in a CDATA tag the XML parser doesn't read that
| | 03:23 | b tag as an XML tag.
| | 03:26 | So there's look at our file. Now let's
start creating XML using ActionScript.
| | Collapse this transcript |
|
|
2. Creating XML in ActionScript 3.0Understanding E4X syntax| 00:00 | Now in this chapter we are going to be working a
lot with creating XML data using ActionScript 3.0.
| | 00:05 | If you are following along I am working
in 01_understanding_E4X.FLA
| | 00:10 | in the Chapter2 folder in the Exercisefiles folder.
| | 00:14 | If you don't have access to the Exercise
files just create a text field on the stage,
| | 00:18 | make sure it's a dynamic text field and
give it an instance name of info_txt.
| | 00:22 | Let's look at the first keyframe within the
Actions Layer and open up the Actions Panel.
| | 00:27 | In my code I am importing all the component classes
| | 00:31 | and I have created a variable called
info_txt to represent a text area component.
| | 00:38 | I did that so I don't have to type out the full path
of the component every time I want to reference it.
| | 00:42 | If you simply have a text field on the stage named
info_txt you don't need to write any of this code here.
| | 00:47 | Let's go down a few lines and talk a little bit about E4X.
| | 00:51 | E4X refers to ECMAScript for XML.
| | 00:55 | That essentially means that in ActionScript Flash uses XML
as a native data format which means we can create XML data
| | 01:04 | in ActionScript the same way that we create XML data in an XML
file and there are also a few ways you can create XML data.
| | 01:11 | It's even simpler than creating XML in an XML file.
| | 01:14 | Let's start out by creating a variable.
| | 01:16 | I am going to call this Image.
| | 01:18 | This is going to represent an image in
our gallery so I am going to type colon.
| | 01:22 | I am going to data type this to XML.
| | 01:24 | I am going to set it equal to a new
instance of the new XML class.
| | 01:28 | Inside of the parenthesis of our constructor function
we are creating a new instance of the XML class.
| | 01:32 | We are going to create an Image element.
| | 01:34 | So I am going to type an open bracket I am going to
type image a forward slash and then a close bracket.
| | 01:39 | This way of typing is the shorthand way to sort
of open and close an element at the same time.
| | 01:45 | So now we have our XML and our parent element is Image.
| | 01:50 | Just get onto the next line and we can add
elements and values to those elements in our XML
| | 01:57 | in the same way that we add a value to an object.
| | 02:00 | Let me show you how that works.
| | 02:02 | Image. and let's say I type .filename so file lowercase
f name with capital N all one word, space equals space
| | 02:14 | and then in quotes I am going to
put the path to some imaginary file.
| | 02:18 | So I am going to call this pickone.jpeg.
| | 02:21 | Let's get on to the next line.
| | 02:23 | I am going to type image.photographer space equals
space and then in quotes I am going to put the name
| | 02:30 | of photographer I am just going to
make up some name photographer1.
| | 02:37 | Now at this point let's take a look
at what our XML data looks like.
| | 02:40 | I am going to do this in a trace statement.
| | 02:41 | Go down a few lines and I am going to type trace and
then in the parenthesis we are going to pass in image.
| | 02:47 | That's going to trace our XML data.
| | 02:48 | Let's see we get an output window when we test the movie.
| | 02:51 | So we can test the movie by pressing Command Return or
Ctrl+Enter and since you are probably really familiar
| | 02:55 | with that keyboard shortcut that's the last time I am going to
say, so check in the output window and you will see our XML.
| | 03:03 | We have image, opening and closing tag and inside of that
element we have a Filename element and Photographer element.
| | 03:11 | So let's say what we want to do is take some of our
XML data and display it in the text field on the stage.
| | 03:19 | I am just going to delete this trace statement.
| | 03:21 | I am going to put the Photographer
element inside of our text field.
| | 03:26 | So I am going to set the text property
of info_txt to image.photographer.
| | 03:31 | So let's test the movie and then we see the
photographer's name in the text field on the stage.
| | 03:38 | So you can see that we can access XML data using
E4X in the same way that we access any other data
| | 03:44 | in Flash that's using .syntax and that's the beauty of E4X.
| | 03:48 | Throughout the rest of this chapter we will take a look
at some more easy ways to reference data using E4X.
| | Collapse this transcript |
| Working with XML attributes using E4X| 00:00 | Now let's talk about working with XML attributes using E4X syntax.
| | 00:04 | If you are following along, I am working in 02_creating_attributes.fla
in the Chapter 2 folder in the exercise files folder.
| | 00:12 | Let's go to the first key from the
Actions Layer and open up the Actions Panel.
| | 00:15 | Now creating attributes in XML is actually just as simple as creating
XML elements. All we have to do is put the "@" before the element name.
| | 00:25 | For example, let's say we want the file name
element to be an attribute instead of an element.
| | 00:30 | I am going to click right before file name
and right after the dot and after image,
| | 00:34 | I am going to type an "@".
| | 00:35 | Now when I test the movie, we will see that file
name is now an attribute instead of an element.
| | 00:41 | I can see that here in the first line of our XML.
| | 00:45 | So that's all you have to do to create
XML attribute. You just use the "@" sign.
| | 00:49 | Now let's say we wanted to reference that attribute later.
| | 00:53 | In a trace statement right after image,
| | 00:56 | I am just going to type ".@" for attribute and then file name,
| | 01:01 | test the movie again.
| | 01:03 | We get pic1.jpeg.
| | 01:06 | So working with attributes in E4X is as simple as typing the "@" symbol.
| | Collapse this transcript |
| Using XML methods| 00:00 | Now let's talk about working with some built-in
XML methods that allow you to work with XML data.
| | 00:04 | If you are following along you can just use the same file that
we have been working with throughout this chapter or you can open
| | 00:10 | up 03_XML_methods.FLA in the Chapter
2 folder in the exercise files folder.
| | 00:15 | Just go to the first keyframe of the
Actions Layer and open up the Actions Panel.
| | 00:19 | Right below where we created the photographer
element, let's type image.appendChild.
| | 00:26 | The appendChild method allows you to put a child element
at the very bottom of the other children elements.
| | 00:31 | So what we will do is inside the parenthesis for the appendChild
method I am going to create a new XML element called Description
| | 00:37 | and inside of that element I am going to write a description.
| | 00:40 | I am just going to type this as a description.
| | 00:49 | Make sure to close out the parenthesis and test the movie and you
want to just trace the whole XML element then look at description
| | 00:58 | as the bottom XML element inside of our image element.
| | 01:02 | Another method that's built into Flash is called PrependChild
that puts a child element before all other children.
| | 01:08 | So if I change appendChild to PrependChild and
test the movie then I see the description is
| | 01:16 | above photographer in the output window.
| | 01:21 | Below the PrependChild line of code let's use another XML method.
| | 01:26 | This one is called insertChildAfter, this
accepts two parameters child 1 and child 2.
| | 01:33 | The first parameter refers to the objects
that you want to insert a child after.
| | 01:38 | So let's say I wanted to insert something after the
description so I am going to type image.description
| | 01:43 | and then for the next parameter I am going to
create a new element, let's call this image title.
| | 01:49 | And for the element I am just going to type, This Is A Title.
| | 01:55 | I am going to close out image title.
| | 01:58 | Make sure to close out the parenthesis and then test the
movie and then I get image title right below description.
| | 02:06 | Let's say I wanted to put a child element before another element.
| | 02:10 | Instead of using insertChildAfter I can use insertChildBefore.
| | 02:15 | Test the movie and then the image
title will be before the description.
| | 02:23 | Remember that if you want to look up other XML methods
you can always look at the XML class in Flash Help.
| | 02:30 | To do that you can just highlight XML on
your code and press F1 on the keyboard
| | 02:34 | and Flash will take you in Flash Help directly to the XML class.
| | 02:38 | Then you can look up the other methods there.
| | 02:40 | So there's a look at some of the methods that you can
use that are built into Flash to work with XML data.
| | Collapse this transcript |
| Replacing and deleting elements and attributes| 00:00 | Now we will talk about replacing and deleting elements.
| | 00:03 | If you are following along, I am working in 04_Deleting_Elements.fla
in the Chapter 2 folder in the exercise files folder.
| | 00:11 | Or you can also work along with the same file
I have been working with throughout this chapter.
| | 00:14 | Let's go to the first keyframe in the Actions Layer and
open up the Actions Panel and right above our trace statement,
| | 00:20 | I am going to type a new value for image.photographer.
| | 00:26 | So image.photographer,
| | 00:31 | I will set that equal to a different name and you can type in anything
you want here for the name. I am just going to type a different name.
| | 00:39 | So test the movie,
| | 00:41 | and then we see that our photographer now has "A
different name" as its name instead of Photographer 1.
| | 00:48 | So that's a look at how to replace elements. Let's
say we want to delete image.photographer altogether.
| | 00:54 | So a few lines below image.photographer, I am going to delete that
element by typing the Delete keyword and then image.photographer.
| | 01:04 | We test the movie. We will see that
the photographer is not even there anymore.
| | 01:10 | So that is how to replace or delete elements using E4X syntax.
| | Collapse this transcript |
| Accessing elements and attributes using descendant selectors| 00:00 | Now let's talk about working with a
little bit more complex XML hierarchy.
| | 00:04 | If you are following along I am working in
05_Accessing_Descendants.fla in the Chapter 2 folder
| | 00:10 | in the exercise files folder and of course you can also use the
same file you have been working with throughout this chapter.
| | 00:15 | Let's go to the first keyframe in the Actions Layer and open
up the Actions Panel and the file looks a little bit different
| | 00:20 | than it has till this point that's because
I just clean it up just a little bit
| | 00:24 | to make it a little bit more obvious what our XML looks like.
| | 00:26 | So we have image __________ 00:28
filename, the image title, the description
| | 00:30 | and then I have kind of isolated the photographer here.
| | 00:33 | So let's say we are going to have more information
about the photographer so not just photographer's name
| | 00:39 | but maybe the photographer's location where the photographer
lives and maybe some other information about the photographer.
| | 00:45 | It makes sense then to have the photographer
have its own XML tree or XML hierarchy.
| | 00:52 | So instead of image.photographer=photographer1, I am going to
type image.photographer.name=photographer1 then I am going to go
| | 00:59 | to the next line and then I am going to
reference that photographer element and I am going
| | 01:04 | to create a new element called Location and
I am going to set that equal to Kentucky.
| | 01:12 | So let's say this photographer is from Kentucky.
| | 01:16 | So let's test the movie now and we will see
that photographer has its own hierarchy too
| | 01:22 | so photographer has two child elements name and location.
| | 01:26 | Now let's say we wanted to reference name or location.
| | 01:31 | What I am going to do is I am going to go to the trace
statement and I am going to trace image.photographer.name
| | 01:36 | and then test the movie and so we can
access the photographer's name in that way.
| | 01:43 | But one of the great things about E4X is
something called the Descendants Operator.
| | 01:48 | The Descendants Operator allows you to access any descendant
element from the parent element and what that means is
| | 01:56 | that the grandfather element or the very outmost parent element
can access children or grandchildren using the same syntax.
| | 02:03 | So what I am going to do is just write photographer here in
the trace statement so that image..name so what this is going
| | 02:10 | to do is it's going to tell Flash to look for an
element called Name as a child or a grandchild
| | 02:16 | or a great grandchild etc. of our image element.
| | 02:20 | So now when we test the movie we can refer directly
to photographer1 through this descendant selector.
| | 02:27 | I can also refer to location using the same method
so I will test the movie and there is Kentucky.
| | 02:35 | So there is look at how to access
descendants using our descendant selector.
| | 02:41 | Now what's really great about the descendant selector is that
it doesn't just work for elements it also works for attributes.
| | 02:46 | So let's say we wanted to give our
photographer an ID for example.
| | 02:52 | So right before where we set the photographer's location
I am going to type image.photographer.attributeID
| | 03:02 | and I will set a value for that something along the
lines of 001 or something and let's say I want to access
| | 03:09 | that ID, I can just trace image..attributeID.
| | 03:16 | I test the movie and I get the result in the output window.
| | 03:20 | So now you can search through all of your
XML data using a simple descendant selector.
| | Collapse this transcript |
|
|
3. Working with External XML DataLoading XML from an external file| 00:00 | In this chapter we are going to be working
with loading XML from an external data source.
| | 00:04 | If you are following along I want you to open up
gallery.xml in the Chapter 3 folder instead of a text editor.
| | 00:10 | I am using TextWrangler here but it
doesn't matter which text editor you use.
| | 00:14 | If you don't have access to the exercise
files, create a plain text document and save it
| | 00:18 | as gallery.xml, copy down all the data in this file.
| | 00:21 | This is a file that we are going to be
loading into Flash in this exercise.
| | 00:24 | Let's just quickly take a look at it.
| | 00:26 | The first line has information about the XML, then
we have the main gallery element as the root element,
| | 00:32 | some processing instructions, a comment then we have
two child elements and they are both called Image
| | 00:39 | and they each have a 3 child elements
title, description and photographer.
| | 00:42 | Photographer has an attribute of ID
and two elements' name and location.
| | 00:48 | So let's take a look at how to load this data into Flash.
| | 00:51 | You are going to tab over to Flash right now and if you have
the exercise files, just open up 01_Loading_External.fla
| | 00:58 | in the Chapter 3 folder and if you don't
you can just create a dynamic text fill
| | 01:02 | on the stage and give it an instance name of info_txt.
| | 01:06 | Let's go to the first keyframe in the
Actions Layer and open up the Actions Panel
| | 01:09 | and the code I already have here just imports all the
component classes and I created a variable called info_txt
| | 01:15 | to represent a text area that's buried within a few movie clips.
| | 01:18 | So I am going to go down a few lines, I am
going to create a variable to represent our XML.
| | 01:22 | I am going to call this gallery_xml.
| | 01:24 | I am just going to data type it to XML then I will create our XML
request and call this XML Req as a URLRequest and we are going
| | 01:37 | to set the value inside the parenthesis
here equal to gallery.xml.
| | 01:41 | On the next slide let's create our
URLLoader and we call it XML loader.
| | 01:54 | And then I am going to go down a few lines
and make the XML loader load our XML file.
| | 02:00 | Then we will add an EventListener to
listen for when the files finish loading.
| | 02:05 | That's event.complete and we will
run a function called xmlLoaded.
| | 02:12 | So let's define that function and then inside of the function
we will set the value of our gallery.xml object so Gallery_XML
| | 02:26 | so that equal to a new instance of the XML
class and then we will pass in xmlloader.dat.
| | 02:33 | That's the property that holds the data that's
loaded when the URLLoader loads external data.
| | 02:39 | Then let's put that data in our text field so go
to the next line of code and type info_txt.text
| | 02:44 | and we will set that equal to Gallery_XMl.2 XML string.
| | 02:52 | Now there are two methods of the XML class
that generate a string from XML data.
| | 02:56 | There is two XML string and a two-string.
| | 02:59 | If you want to know the difference you can just highlight two
XML string and press F1 on your keyboard to open up Flash Help
| | 03:04 | and then you can read about how there is a minor difference
and basically the XML string contains all of your XML data
| | 03:10 | and then two string eliminates parent
elements if you have simple XML content.
| | 03:15 | You can see an example if you scroll down a little bit.
| | 03:19 | So let's test movie and see what we get in our text field.
| | 03:21 | So it starts with gallery and we have
all of our image elements and everything.
| | 03:27 | You will notice that we don't see
the information about the XML file.
| | 03:30 | That actually gets removed when the XML gets parsed.
| | 03:32 | We also don't see processing instructions or XML comment.
| | 03:36 | That's because by default those elements
are removed when the XML is parsed.
| | 03:41 | You can modify a few properties to show those elements.
| | 03:43 | We will take a look at how to do that in the next movie.
| | 03:45 | So there is a look at how to load XML from an external XML file.
| | Collapse this transcript |
| Working with comments and processing instructions| 00:00 | Now there may come a time when you want to access
comment or processing instructions in your XML data.
| | 00:05 | In this movie we will talk about how to do that.
| | 00:08 | If you are following along I am working in
02_Comments_Processing.fla in the Chapter 3 folder.
| | 00:15 | You can also just use the same file from the last exercise.
| | 00:17 | Let's go to the first keyframe in the
Actions Layer and open up the Actions panel.
| | 00:21 | Now when Flash parses XML data, if you have
not already told Flash not to ignore comments
| | 00:27 | and processing instructions then comments and processing
instructions will be ignored and you can't access them later on.
| | 00:33 | What we have to do is tell Flash not to
ignore comments or processing instructions.
| | 00:37 | The properties that handle whether you ignore comments
| | 00:39 | and processing instructions are held
as static properties of the XML class.
| | 00:44 | So let's go all the way to the top of our code.
| | 00:46 | I am going to type XML.ignore comments.
| | 00:50 | This has a default value of True so if we just
set that equal to False then we get our comments.
| | 00:56 | And if we go to the next line and we type XML.ignore
processing instructions and we set that equal to False as well
| | 01:07 | and we test the movie, our XML string will display
both our processing instructions and our comments.
| | 01:15 | Now let's say we wanted to access
processing instructions or comments.
| | 01:20 | One thing we can do is we are can refer to our XML object and
we can type .Comment and comment is a method of the XML class
| | 01:31 | that returns all the comments in our XML data.
| | 01:33 | So I test the movie at this point
and then you will see our comment.
| | 01:37 | And if you want to see processing
instructions it's essentially the same process.
| | 01:41 | So test the movie and then we have
our processing instructions there.
| | 01:47 | Now if you have multiple comments or multiple processing
instructions you can access them similar to an array.
| | 01:53 | The type of data that's returned when you run
the processing instructions or comments method
| | 01:57 | from the XML class is called an XMLList
which is similar to an array of XML data.
| | 02:02 | We are going to be talking about XMLList more as we go
on throughout this chapter but there is a look at how
| | 02:06 | to access comments and processing
instructions if you ever need to.
| | Collapse this transcript |
| Working with an XMLList| 00:00 | Now we will talk about how to access our XML elements using
something called an XMLList. If you are following along,
| | 00:06 | I am working in 03_XMLList.fla in the Chapter 3 folder. You can also
use the same file you have been working with throughout this chapter.
| | 00:14 | Let's go to the first keyframe of the Actions layer and open up the
Actions Panel. So let's say we wanted to access the first image element
| | 00:21 | in our gallery. So instead of putting Gallery.XML.2xml
string in our text field, I am going to put Gallery.XML.image.
| | 00:28 | Let's test the movie and see what we get.
| | 00:31 | Notice here I am just getting the two child elements of our gallery,
| | 00:35 | they are both called Image.
| | 00:38 | These are what are called Sibling Elements and because these siblings
have the same name, there is something called Repeating Elements.
| | 00:45 | Now when you have Repeating Elements inside of an
XML object that creates something called an XMLList.
| | 00:51 | An XMLlist is similar to an array of XML data and there
is special syntax to working with elements in an XMLList.
| | 00:59 | So one thing we can do is
| | 01:01 | right after image, I can type some
brackets and put a 0 referring to index 0.
| | 01:08 | If I test the movie at this point then I will just get the first image
and now I can reference that element as if it were a single XML element.
| | 01:17 | So say I wanted to get the title of
that element, I could just type .title.
| | 01:25 | And so if I wanted to get the photographer's ID,
I could type .photographer.attribute ID,
| | 01:35 | and there is the photographer ID.
| | 01:37 | So we can access elements in an XMLList using
| | 01:41 | square brackets, just like referencing an element in an array.
In the next few movies we will dive deeper into XMLList syntax.
| | Collapse this transcript |
| Understanding XMLList syntax| 00:00 | Now we will dive a little bit deeper into XMLList syntax.
| | 00:03 | If you are following along I am working in
04_working with XMLList.fla in the Chapter 3 folder
| | 00:09 | or you can just use the same file you have been working with.
| | 00:11 | Let's select the first keyframe in the
Actions Layer and open the Actions Panel
| | 00:15 | and take a look at what we are displaying in our text field.
| | 00:18 | So in the last movie we saw that we can generate
an XMLList by referring to a repeating XML element.
| | 00:24 | The shorthand way to create an XMLList
is refer to an XML object and then .
| | 00:29 | * that gives you an XMLList of all
the children of that XML element.
| | 00:35 | Now if you test the movie then we see that we get the
same thing as we get if we type in Gallery_XML.image.
| | 00:41 | Right after the asterisk we can also type
index 0 or index 1 to get one XML element.
| | 00:48 | Another great thing about working with an XMLList is that you
can easily get the amount of XML objects inside of that list.
| | 00:54 | If you use the length method of the XML class you
always get a value of 1 but if you use the length method
| | 01:00 | of the XMLList class you can get the amount of
XML elements that are inside of the XMLList.
| | 01:10 | So using our asterisk operator and our Length method we can
easily refer to the first or last element in an XML object.
| | 01:20 | The first element we can refer to as index 0 so that gives us
the first image and let's say we add a whole bunch of images
| | 01:26 | and we wanted to have sort of a formula to refer to the last one.
| | 01:30 | I am going to just click in where it says 0,
I am going to replace that with Gallery_XML.
| | 01:36 | * to get our XMLList .length and that
gives us the length of XML elements,
| | 01:42 | then I subtract one just like referencing
the last element of an array.
| | 01:46 | Now when we test the movie we get the
last image element in our gallery.
| | 01:51 | And so there is a look at some XMLList syntax.
| | 01:55 | If you want to learn more about working with an XMLList
you can look up the XMLList class in Flash Help.
| | 02:01 | When you look at the XMLList class in Flash Help you can
take a look at the methods and properties that are available.
| | 02:12 | So you can use Flash Help to find anymore
information that you would need about the XML class.
| | Collapse this transcript |
| Working with E4X operators| 00:00 | Another great thing about E4X is that it enables you to sort
of query the data that you are working with very, very easily.
| | 00:08 | If you are following along I am in 05 E4X Operators.FLA or
you can just use the same file you have been working with.
| | 00:14 | I am going to select the first keyframe in the
Actions Layers and open up the Actions panel.
| | 00:17 | So now let's say we want to get the data
for every photographer with a certain name.
| | 00:23 | I will show you how to do it right here.
| | 00:25 | Gallary_XML.Image and then right after image,
type a .photographer and then the E4X syntax
| | 00:35 | for searching for data dot and some parenthesis.
| | 00:39 | Now from here it might look just like
a conditional statement in Flash.
| | 00:42 | So in the parenthesis let's say I want the name to be John
Photographer, I am going to type name == "John Photographer".
| | 00:56 | Notice that the syntax is almost identical to then
creating a simple conditional statement in ActionScript.
| | 01:04 | Test the movie and you see the photographer
element where the name="John Photographer".
| | 01:12 | And so if you wanted the location to be Ventura California, I
can just change that to location and then "Ventura California"
| | 01:26 | and test the movie and I get the same element.
| | 01:28 | Let's say I wanted to reference an
attribute instead of an element.
| | 01:33 | Instead of Location, I am going to type Attributes or
@ symbol and then ID and then I am going to type "002".
| | 01:44 | I will test the movie and I get the photographer
element where the ID is equal to 002.
| | 01:53 | Now let's say we wanted to take that information.
| | 01:55 | So this sort of query here where the ID is equal to 002
then we wanted to get all the image information associated
| | 02:03 | with that element, easy, right after the closed parenthesis
type a .parent and then unlike those display objects,
| | 02:11 | parent is a method in XML so test the movie and then we get the
whole image element where the ID of the photographer is 002.
| | 02:22 | So you can see how easy it is with using E4X to
perform queries and a search for data inside of XML.
| | Collapse this transcript |
| Looping through XML data| 00:00 | E4X specification also allows you to loop through XML data
using a special kind of loop called the for/each/in loop.
| | 00:07 | We will talk about how to work with
a for/each/in loop in this exercise
| | 00:11 | and display data using that loop instead of our text field.
| | 00:14 | If you are following along I am working in
06_looping_xml.fla in the Chapter3 folder
| | 00:21 | or you can just use the same file you
have been working with up to this point.
| | 00:23 | Let's go to the first keyframe in the
Actions Layer and open up the Actions Panel.
| | 00:28 | Now let's take a look at you know
the XML loaded function is setup.
| | 00:32 | We have a new variable called Query, the data type is XML.
| | 00:35 | We have a variable called Query text it to String that's
blank right now and then we have the value of Query set
| | 00:41 | to the query that we created in the last exercise.
| | 00:45 | Suppose I change the ID to 001.
| | 00:47 | So we are going to get all of the
information about the parent XML element
| | 00:51 | of the element that it has the photographer ID of 001.
| | 00:55 | So we are going to take that data, we
are going to display in the text field.
| | 00:58 | We are going to show both the names of all
elements and the values of all those elements.
| | 01:02 | At the very bottom we have the HTML text
property of info_txt set to Query text,
| | 01:08 | HTML text property is going to render a string as HTML Code.
| | 01:13 | If you look at HTML text in Flash
help you can read more information
| | 01:16 | about what HTML tags are supported and
how they are supported in ActionScript.
| | 01:20 | So I will write a Query, let's create our for/each/in Loop.
| | 01:24 | To do that I am first going to type For Each and then some
parenthesis and some and instead of the parenthesis I am going
| | 01:32 | to create a variable and I am going to call this Elements.
| | 01:36 | And the data type is going to be XML and the space
and then in and we will look for things in query.
| | 01:43 | *. So it will take everything inside of the
query as an XML list and we can search through it
| | 01:50 | and perform blocks of code on each element inside of our query.
| | 01:54 | So I am going to put my cursor inside of the curly braces then
from here let's just do a trace statement and see what we get.
| | 02:00 | So I am going to trace elements, and then test the movie.
| | 02:04 | And we will see that we get one pretty clean string, a string
with HTML text it's going to be rendered as HTML and that's fine.
| | 02:12 | And then we have this XML element.
| | 02:15 | We need someway to work with elements where
we get strings versus where we get XML blocks,
| | 02:20 | so what we are going to do is we are going to
use a conditional statement to check to see
| | 02:24 | if the length of our elements object is more than 1.
| | 02:28 | If that's the case then that means
we are working with our photographer.
| | 02:31 | So then we can do a For Each Loop to loop through our
photographer information as well, so let's close this window
| | 02:38 | and close the Flash player window and
erase the trace elements line of code.
| | 02:42 | And we will type our conditional statement out.
| | 02:44 | So I am just going to create the skeleton here and
then for the condition I am going to type Element
| | 02:51 | and remember how we get the length of an XML object
is we convert it to an XML list by using the .
| | 02:56 | * operator.
| | 02:58 | And then we use the .length method.
| | 03:01 | So we want to check to see if it is less
than or equal to 1, if it is less than
| | 03:05 | or equal to 1 then there is no XML
object and it is just one single element.
| | 03:10 | So I am going to put my cursor in the curly braces
here and we are going to add to our Query text.
| | 03:15 | So type Query text plus equals then if we want to get the
element name that we refer to the XML objects so elements.name
| | 03:28 | and name is a method of the XML class that returns the name
of an XML element, so not the value of XML only just the name.
| | 03:36 | From there we will add on colon and a space
and then we are going to put the value.
| | 03:42 | And so we are going to use elements here to put the value.
| | 03:45 | And then we will also add a new line.
| | 03:47 | So let's test the movie at this point and see what we get.
| | 03:52 | So we get our tittle and then we get
our description renders HTML text
| | 03:56 | and you can tell that's working because the word picture is bold.
| | 03:59 | And it doesn't have the B-tag surrounding it.
| | 04:02 | Alright let's close that window and then if the statement is
not true then we know that we are working with XML elements.
| | 04:11 | We will need to loop through that elements, so let's go
below the "if statement" and create and "else statement"
| | 04:15 | and inside the "else statement" we will create a For Each Loop.
| | 04:21 | We will create a variable called Info with a
data type of XML and we will search in elements.
| | 04:27 | * so this is going to be a searching
inside of photographer element.
| | 04:34 | And so add a query text here, we will add
on info.name, remember that's a method.
| | 04:43 | And then colon and space and we will just add on
Info and then we will also put a new line there.
| | 04:51 | So let's test the movie and see what we get.
| | 04:57 | So we get Title Description, Name and the Location.
| | 05:01 | Let's say we wanted to put that file name
as well or do something with the file name,
| | 05:06 | we can loop through attributes in a
For Each Loop using the "@" symbol.
| | 05:10 | So when we are looking at query.
| | 05:13 | * if you put an "@" symbol right before the asterisk then
Flash will search through all of the attributes in the query.
| | 05:21 | Now if you test the movie at this point then we are
just going to get file and the name of the picture.
| | 05:25 | And so we kind of don't want to do it in that way, but
what we want to do is access that data and the information.
| | 05:32 | We know that attribute name is File, I
just want to get the attribute value.
| | 05:35 | So what I am going to do is below the outer For Each Loop I
am going to type Query text and we are going to add on that
| | 05:44 | and what we are going to add on is file and a colon
and space and then we will add on query.attribute file.
| | 05:54 | Now it's just a movie and see if we get the
file in there because we have our location
| | 05:59 | at the bottom and then file right below that.
| | 06:02 | And so of course we can change the ID in our query to
002 and get the information about the other photographer.
| | 06:11 | So using the for/each/in loop you can loop through your
XML data and display if you want both the Element Name
| | 06:19 | or Attribute Name and the Element or Attribute Value.
| | Collapse this transcript |
|
|
4. Building a Reusable RSS Reader ClassExploring an RSS file| 00:00 | In this chapter we are going to be working with an RSS feed.
| | 00:03 | Before we start working with an RSS feed in
ActionScript let's look at how an RSS feed looks in XML.
| | 00:09 | If you are following along and have access to the exercise
files open up the exercise files folder and then open
| | 00:14 | up the Chapter 4 folder and in 04_01 Start you will find RSS.XML.
| | 00:20 | Open that file up in a text editor.
| | 00:23 | I am going to use TextWrangler and I will just expand the
view here so it's a little bit easier to see the code.
| | 00:29 | Now if you don't have access to the exercise
files you can download a similar file
| | 00:33 | if you go to www.lynda.com/go/actionscript.
| | 00:37 | From there you can just navigate to the blog link or
the photos link and you will see an RSS feed link there,
| | 00:44 | you can download the file from there or you
can just copy the data inside of this file.
| | 00:48 | Let's take a look at how this file is set up.
| | 00:50 | The first line of code includes information
about the XML in this file.
| | 00:55 | It's pretty standard in an XML document.
| | 00:58 | The next line of code may seem a little bit new.
| | 01:00 | It's an opening tag for an RSS element.
| | 01:03 | Notice this xmlns:iphoto, xmlns:iweb.
| | 01:10 | These attributes with colon and the specific names, the names
starting with xmlns refers to something called an XML namespace.
| | 01:19 | Because namespaces are not used in this particular file we are
not going to talk about them right now but rather we are going
| | 01:24 | to talk about them when we start
applying working with namespaces later on.
| | 01:28 | So for now you can just ignore them and know that we
are going to be covering them in lot of detail later on.
| | 01:33 | So and then we have the channel element.
| | 01:36 | So we have the RSS as the main root element and
the channel element sort of like a sub-root.
| | 01:41 | Inside of the channel element we have three elements that
describe the entire RSS feed title, link and description.
| | 01:50 | The names of the elements explain what they are.
| | 01:52 | The title is the title of the RSS feed, the link
takes you to the page that the RSS feed is for
| | 01:59 | and the description is a description on the RSS feed.
| | 02:01 | Below that we have a repeating element called Item.
| | 02:07 | Item is a standard RSS element.
| | 02:10 | It's used in news feeds to represent a news
headline, it's used in blogs to represent a post
| | 02:15 | and it's used in podcast to represent a podcast episode.
| | 02:18 | So Item is a generic term that separates
the different elements of the RSS feed.
| | 02:24 | So first inside of our Item element we have a title and then we
have a link and then we have something called GUID that stands
| | 02:34 | for Globally Unique Identifier and that's just
some sort of string that makes this Item unique.
| | 02:42 | Sometimes this string is a link to this item.
| | 02:46 | In those cases the attribute value is Permalink is Set To True.
| | 02:50 | When Permalink is Set to False, the
string just represent a unique ID.
| | 02:54 | So now that we have taken a look at our RSS feed
let's look at bringing this RSS feed into Flash.
| | Collapse this transcript |
| Building the RSSReader class| 00:00 | Now we are going to start building the RSSReader Class.
| | 00:03 | If you are following along, find the exercise files in Chapter
4 and then go to the 04_02 folder and find the Start Folder.
| | 00:10 | In there we are going to be working with 02_RSS.fla
| | 00:14 | and then you will find the folder structure
com, lynda, XML and then RSSReader.as.
| | 00:20 | Open that file as well.
| | 00:21 | If you don't have access to the exercise files folder make sure
to create the same folder structure com, then lynda, then XML.
| | 00:28 | Now I will go over to Flash.
| | 00:29 | Let's define our RSSReader.as file first.
| | 00:33 | If you don't have access to the exercise files,
you can just simply create your own class,
| | 00:38 | make sure it's part of the com.lynda.xml
package, import Flash.events.
| | 00:44 | *, Flash.net.
| | 00:45 | * make sure to save it as RSSReader.as and make
sure it extends the event dispatcher class.
| | 00:51 | That way we will be able to dispatch events.
| | 00:54 | If you are not familiar with dispatching events
that just means to trigger an event yourself.
| | 00:58 | Let's take a look at the properties in this class.
| | 01:03 | There is a private property called XML Loader that's a URL
loader, a public property called feed that's an XML object,
| | 01:11 | it's going to represent the entire RSS feed, public
property called Episodes that's an XMLList it's going
| | 01:17 | to represent all the episodes or
all of the items in the RSS feed.
| | 01:22 | There is one called tittle that represents
the title for the RSS feed
| | 01:27 | and a public property called Description
for the description of the RSS feed.
| | 01:31 | Inside of the constructor function let's instantiate
the XML Loader variable so type XML Loader
| | 01:37 | and let's set it equal to a new instance of the URLLoader class.
| | 01:41 | Our public function load is going to accept one parameter,
it's going to be our URLRequest for an XML file.
| | 01:50 | So inside of this function or this method we
will have our XML Loader load the XML request.
| | 01:57 | And then we will have it listen for the
complete event that's the event.complete.
| | 02:05 | We will run a function or a method called XML Loaded.
| | 02:08 | Now let's define the XML Loaded method.
| | 02:11 | Let's make sure to make this method private because
we won't need to access it outside of this class.
| | 02:27 | Now the first thing that we will do is set the value of our
feed so type feed and we will set it equal to a new instance
| | 02:34 | of the XML class and inside of the parenthesis for the
constructor function we will pass in "XML Loader.data".
| | 02:42 | Then just for testing purposes we will trace the value of feed.
| | 02:46 | Look over your code in this file, make sure
everything is written correctly and then choose File,
| | 02:53 | Save to save the file and go over to RSS.fla.
| | 02:56 | If you don't have access to the exercise files just make
a dynamic text field on the stage and name it info_txt.
| | 03:03 | Let's go to the first keyframe in the
Actions layer and open up the Actions panel.
| | 03:07 | Here in the Actions Panel we have the code imported for the
RSSReader Class, all of the component classes imported.
| | 03:15 | So I can refer to the info text field simply as info_txt
recruiting a new instance of the RSSReader Class.
| | 03:23 | I am going to create a variable called RSS Req.
| | 03:27 | This is going to be the URLRequest
that we use to request our XML file.
| | 03:34 | So we will set it equal to a new instance of the
URLRequest Class and we will just pass in RSS.XML.
| | 03:41 | At the very bottom of your code, write the RSS
reader object, load the RSS Req the RSS request.
| | 03:51 | At this point let's test the movie
and make sure that we get our RSS data
| | 03:56 | in the output window and it looks like we are in business.
| | 04:01 | So now we have set up our basic RSSReader Class, what we will
do next is give values to the properties of the RSSReader Class.
| | Collapse this transcript |
| Setting properties for the RSSReader class| 00:00 | Now we will take a look at giving values
to the properties in our RSSReader Class.
| | 00:04 | If you are following along I am going to be working in two files.
| | 00:07 | The first file is called 03_Properties.fla.
| | 00:10 | Now that file is inside the Chapter 4
folder and then in your folder called 04_03.
| | 00:17 | Inside of that folder you will find a folder called
Start and in there you will find 03_Properties.
| | 00:22 | Inside of that folder you will also see
the folder structure for com lynda XML.
| | 00:26 | Inside of the there you will find the RSSReader Class file.
| | 00:29 | You can also just use the same file as you
have been working with throughout this chapter.
| | 00:32 | So let's go to RssReader.as and take a look at our properties.
| | 00:36 | Remember we set four public properties
feed, episodes, title and description.
| | 00:41 | So to this point we have only given a value to feed.
| | 00:44 | So let's scroll down and next we will give a value to episodes.
| | 00:48 | So right below where we set the value
for feed and I am on 128 my code,
| | 00:52 | yours might be a different line and we set a value for episodes.
| | 00:55 | So episodes I will set that equal to feed
which refers to all of the XML data ..item
| | 01:03 | and that will grab all of the elements that have the name Item.
| | 01:08 | So let's trace episodes.
| | 01:10 | Let's test this out so make sure to save the
file so choose File Save and then test the movie
| | 01:17 | and we see all of the items in the output window.
| | 01:21 | Notice all the namespace information
is contained inside of each item.
| | 01:26 | And that's just what happens when you are working
with namespaces, the namespace gets transferred
| | 01:31 | when you capture a portion of the XML
document that's using the namespace.
| | 01:38 | And again we will talk more about name spaces
later on but for now we have all of our episodes.
| | 01:42 | So that's great.
| | 01:44 | Right below our episodes, let's set a value to our title.
| | 01:47 | I am going to set that equal to feed.channel.title.
| | 01:53 | Trace the value of title and notice that
I didn't choose feed..title so remember ..
| | 02:01 | is the descended selector and that's going to select any
element that is a child or grandchild etc. of the XML element.
| | 02:08 | So if there are other elements called Title which in an
RSS feed there are many elements called Title then all
| | 02:14 | of them will get selected.
| | 02:15 | I just want to select the first title
element that comes before all of the items.
| | 02:20 | So let's save the file, choose File Save
and test the movie and there is our Title.
| | 02:26 | And the last thing that we want is our description.
| | 02:31 | Let's go down to the next line and let's
type description=feed.channel.description
| | 02:39 | and then we will trace description so save
the file again and test and there you have it.
| | 02:55 | So we have our property set.
| | 02:56 | The next step is to work with dispatching events
so that we can manage this class from our FLA file.
| | Collapse this transcript |
| Dispatching events in the RSSReader class| 00:00 | Our next goal for our RSSReader Class is
to have the ability to dispatch events.
| | 00:05 | Then we can run a block of code once all the RSS data is loaded
in and all of the properties are set for our RSSReader object.
| | 00:14 | If you are following along I am working
in 04_Dispatching_Events.fla
| | 00:18 | which is essentially the same file we have been working with.
| | 00:21 | If we need to find it it's in the Chapter
4 folder and then in a folder called 04_04.
| | 00:26 | In that folder you also find the folder structure
| | 00:28 | that will contain the other file we will be
working with which is the RssReader.as file.
| | 00:32 | So let's go to that file and let's scroll down
and we are going to find the XML Loaded method.
| | 00:44 | We don't need this trace statement anymore so I am going
to delete it and then here I am going to dispatch an event.
| | 00:49 | So I am going to type Dispatch Event.
| | 00:54 | This is going to make our RSSReader send out an event.
| | 00:57 | So in parenthesis we need to pass in the event dispatch.
| | 01:01 | Now I want to dispatch the complete event so I am going to
type new Event and then I am going to type (Event.COMPLETE),
| | 01:11 | make sure we close out the parenthesis for both the
dispatch event method and the new event constructor.
| | 01:21 | From here let's choose File Save to save the file.
| | 01:25 | Now let's head over to dispatching events.fla and go to the first
keyframe of the Actions Layer and open up the Actions Panel.
| | 01:31 | Right below where we have the RSS object, load the RSS request,
| | 01:36 | let's add the EventListener to that
object to listen for Event.COMPLETE.
| | 01:44 | Remember that's the event that we are going to dispatch after
all of the RSS is loaded and the property values are set.
| | 01:51 | So we run a function called RSS Loaded.
| | 01:53 | Now let's create that function now.
| | 02:06 | Let's say we want to display the title
of our RSS feed in our info text field.
| | 02:10 | So I am going to type info_txt.text and
we will set that equal to RSS.title.
| | 02:18 | Remember that's the public property that
contains the title for our RSS feed.
| | 02:22 | So at this point you can test the movie and you should
set the title show up in the text field on the stage.
| | 02:28 | So now our RSSReader dispatches an event once it's done
and all the properties are set and we can access all
| | 02:34 | of our RSS data extremely easily through
the properties of our RSSReader object.
| | 02:39 | So let's say I wanted to get the title for episode one.
| | 02:43 | We refer to our Episodes object which is an XMLList inside of our
RSSReader class so RSS.episodes and remember that's an XMLList
| | 02:54 | so if I want to get the title for the first
episode, I can refer to index 0 and then .title
| | 03:01 | and that will give me the title for the first episode.
| | 03:03 | So at this point you can test the movie and then you will
see the title for the first episode in the text field.
| | 03:10 | So if I just change 0 to a different index I get
to the title for that item in the text field.
| | 03:17 | So now you have a reusable RSSReader Class and of course
there are other features that we can add to it that are unique
| | 03:24 | to say blogs or podcasts or news and we will be
looking at that throughout the rest of this title.
| | 03:31 | But now, you have a foundation and you can
use this RSSReader to parse any RSS feed.
| | Collapse this transcript |
|
|
5. Using PHP with XML DataUnderstanding PHP| 00:00 | In this chapter we are going to be working with PHP.
| | 00:02 | Before we start working with PHP it's really
important to talk about why we are going to use PHP
| | 00:07 | and what PHP is going to do to help us in working with XML.
| | 00:10 | If you are following along you can
open php.swf in the Chapter 5 folder.
| | 00:14 | You can use any key on your keyboard
to advance through your slides.
| | 00:17 | So let's take a look at our situation right now with XML.
| | 00:19 | A Swift file can only read data from an XML file, a
swift file cannot by itself write data to an XML file.
| | 00:28 | Further a Swift file cannot grab data from a remote server.
| | 00:32 | This is because that's blocked by security reasons
unless the remote server has a file giving the swift file
| | 00:39 | on your server permission to access data on that remote server.
| | 00:42 | If you want to find out more about that
you can look up across domain policy file.
| | 00:47 | You can either look that up in Flash Help or do web search.
| | 00:50 | So at this point if we want to grab remote XML data say for
example an RSS feed we have to go to a remote site ourselves,
| | 00:57 | we have to find the RSS feed, grab the XML data
manually by copying and pasting into our local XML file.
| | 01:04 | Now that can be very tedious if you want to
access a lot of data from remote web servers.
| | 01:08 | So we are kind of stuck and we have pretty much gone as far as we
can go with working with XML data unless we use another language
| | 01:15 | and that language we are going to use is called PHP.
| | 01:19 | PHP has the power to communicate to remote
web servers without invoking security errors.
| | 01:24 | So we can use PHP to grab XML data from remote web servers and
then also save that data in an XML file on our local web server.
| | 01:35 | Further our Swift file can be used to create XML data and
that data can be sent via PHP to our XML file and be saved.
| | 01:44 | We can also read from a PHP file and get information in that way.
| | 01:48 | We are going to be talking about how to
do all those techniques in this chapter.
| | 01:52 | So by using PHP we can communicate with remote
web servers and we can save local files.
| | 01:58 | Now that you have an idea of what PHP is and how it's
going to work for us, we are going to set up an environment
| | 02:04 | on our computers so that we can run PHP code.
| | 02:07 | In order to do that we are going to need to have
a local web server installed on our machines.
| | 02:12 | Through the next few movies we will
take a look at how to do that.
| | 02:14 | Depending on your operating system the process
is a little bit different so we have movies
| | 02:18 | for you Mac users and movies for Windows users.
| | 02:21 | So follow the movies that are appropriate for your platform
and it will take a look at writing actual PHP code.
| | Collapse this transcript |
| Installing the MAMP server (Mac)| 00:00 | Now let's setup our PHP testing server.
| | 00:02 | We are going to download a server called MAMP.
| | 00:05 | MAMP stands for Mac, Apache, MySQL and PHP.
| | 00:10 | MAMP installs Apache, MySQL and PHP with one click.
| | 00:15 | Now we could configure our machine to run PHP and Apache and
MySQL but that would take a long time and a lot of workarounds
| | 00:21 | and this way is the easiest way to
get a PHP environment up and running.
| | 00:25 | Before we download MAMP we need to go to
System Preferences and change something.
| | 00:29 | So I am going to go to System Preferences and
let's find Sharing and then go to Web Sharing.
| | 00:35 | You want to make sure that Web Sharing is turned off because
your computer already has a version of Apache running.
| | 00:42 | If you download and run MAMP you will then have two versions
of Apache running at the same time which could conflict.
| | 00:48 | So we want to make sure that Web Sharing is turned off.
| | 00:50 | Once you have Web Sharing Off, close System Preferences and
then go to the MAMP website to download the MAMP server.
| | 00:57 | The MAMP website is mamp.info.
| | 01:00 | On the MAMP website, scroll down, you should see MAMP
available for download on the right side of the screen.
| | 01:09 | Notice that there is also MAMP Pro.
| | 01:11 | For what we are doing we just need MAMP
so I am going to click the Download button
| | 01:15 | to download MAMP but I am going to click the download link.
| | 01:18 | This will download MAMP to your desktop.
| | 01:21 | Now I have already downloaded MAMP to my desktop
so I am going to go to the desktop right now.
| | 01:25 | So once you have the installer, simply
double click it to install a MAMP.
| | 01:31 | Make sure you read over the license agreement and once
you do and you agree to the terms, click the Agree button
| | 01:38 | and then to install, you simply drag the MAMP folder to
the applications folder and the program will install.
| | 01:58 | Alright to get to the MAMP just double-click your
applications folder and scroll down and you will find MAMP.
| | 02:06 | So I go to the MAMP folder and then find the application
and double-click it to launch the application.
| | 02:12 | Your web browser will open up automatically.
| | 02:16 | Look at the address in your browser window.
| | 02:19 | Notice that the address is localhost:8888 that's
the default port to install the MAMP server.
| | 02:28 | To make things easier we want to make
it so we can just take away the :8888
| | 02:33 | and just have local host be the root for our testing server.
| | 02:38 | So to do that we are going to need to change some
settings so I am going to close my browser window
| | 02:41 | and then I am going to click the Preferences button in MAMP.
| | 02:45 | To set our ports, click the ports tab and then
click Set to Default Apache and MySQL ports.
| | 02:52 | When you click that button, the ports will
reset to be the default Apache and MySQL ports.
| | 02:58 | That way we can access our web server
by just going to local host.
| | 03:04 | So let's give it a try.
| | 03:07 | Click OK, wait a few seconds for MAMP to re-launch because we are
running a server, we are being asked to authenticate so just have
| | 03:16 | to type in your password and once you see the two green lights
on the left side of the window, click the Open Start Page button
| | 03:25 | and then you should see localhost:80 in the browser window.
| | 03:31 | Now we wanted you to test this is
just erase everything but localhost.
| | 03:36 | So http://localhost.
| | 03:39 | Test that in a browser window and you should see an
index of a blank page just like I have on my screen here.
| | 03:45 | When you have that, everything is good so let's close
the browser window and we are going to do one more thing
| | 03:50 | and that is set the default root folder for our testing server.
| | 03:54 | So I click Preferences again, then click Apache
and then click Select to choose the document root.
| | 04:03 | The reason why we want to change this is because the
default testing server root is in your applications folder
| | 04:10 | and it's buried down inside of the
MAMP folder and a few folders down.
| | 04:13 | So we want to change that to a more
familiar folder and easier folder to access.
| | 04:17 | So I am going to go to My Name and Places and then I am going
to find the sites folder and then I am going to click Open.
| | 04:24 | So let's click OK now and then we will test it
out by opening the start page once MAMP restarts.
| | 04:30 | Just make sure you have got the two
green lights in the status area.
| | 04:33 | So click Open Start Page and then
you should see the default Start page
| | 04:38 | so let's just change the text in the
browser window to just local host.
| | 04:43 | Then you should see the default MAC OSX
Start page that's in your sites folder.
| | 04:48 | So I just want to do one more change now.
| | 04:50 | We want to make a specific folder
for all of our ActionScript files.
| | 04:53 | So let's close this window and then we are
going to browse to our sites folder and finder.
| | 04:58 | So let's minimize MAMP, don't close it
just yet, should be running from now on.
| | 05:04 | We will close all the other windows that are currently
open and then I am just going to go to my hard drive,
| | 05:09 | am going to click on my name, go to my sites folder
then I am going to create a new folder in there.
| | 05:16 | I am right clicking or control clicking to create the new folder.
| | 05:19 | I am going to name this new folder ActionScript.
| | 05:24 | From now on through rest of this title
we will use this ActionScript folder
| | 05:28 | as our folder for all of our testing for running PHP code.
| | 05:31 | So now if you want to browse to it using your browser you can
open up your browser and then go to http://localhost/actionscript
| | 05:46 | and there you will see the default page
that's inside of the ActionScript folder.
| | 05:53 | Now here we don't have any page there so we are seeing what shows
in your browser window when there is no file in that folder.
| | 05:58 | So now our testing server is setup but before we
start writing PHP code, we need to do one more thing
| | 06:04 | with the permissions for this ActionScript folder.
| | 06:06 | So in the next movie, we will set the
permissions for ActionScript folder
| | 06:09 | and talk a little bit about why it's necessary to do that.
| | Collapse this transcript |
| Setting file permissions (Mac)| 00:00 | Now because PHP is going to be writing to files on our
testing server we will need to setup the permissions
| | 00:06 | for our testing server folder to allow PHP to do that because
by default for security reasons not everyone is allowed to write
| | 00:14 | to files inside of folders because PHP writing to a file
is different from you writing to a file on your computer.
| | 00:22 | So we are going to need to allow access
for everyone to read and write to files.
| | 00:27 | So let's open up our hard disk and find the
Sites folder, select the ActionScript folder
| | 00:35 | and right click or Ctrl+Click and choose Get Info.
| | 00:38 | To set the permissions for this file we will have to
click the lock icon in the sharing and permission section.
| | 00:44 | You may need to expand the sharing and
permission section to see that lock.
| | 00:48 | Let's click the icon and do authenticate
so type your password in.
| | 00:52 | And then set the permission so that everyone can read and write.
| | 00:56 | This will set the permissions for the ActionScript folder.
| | 00:59 | What we want to do is apply this to all
the contents in the ActionScript folder.
| | 01:03 | So if we want to make PHP write to multiple files we won't
have to set the permissions for the individual files.
| | 01:08 | To do that click the icon at the bottom of the
info window and choose apply to enclosed items.
| | 01:15 | The window that pops up will just make sure that you really
want to apply these settings to all the contents of this folder
| | 01:21 | so I am just going to click OK and then
I am going to close the info window.
| | 01:24 | So now we have changed the setting on our testing server.
| | 01:28 | It's really important to know that this time that if
you are going to put this live on our production server,
| | 01:33 | you might want to set the permissions for each file individually.
| | 01:37 | Further the process is a little bit
different doing this on a testing server
| | 01:41 | on a computer versus doing this on a production server.
| | 01:45 | You may need to talk to your web
administrator to figure out what's different
| | 01:48 | in the process when you are using a production server.
| | 01:50 | Now that our permissions are setup, we are ready to start
writing PHP code and have PHP write the files for us.
| | Collapse this transcript |
| Installing WAMP (Windows)| 00:00 | In order to get PHP running on your local computer
you need to install something called a Testing Server.
| | 00:05 | The fastest and easiest way to get
a testing server up and running
| | 00:09 | on your machine is to use an application called WAMP Server.
| | 00:12 | If you are following along you can go to www.WAMPserver.com
and from there you will see that the site is in French
| | 00:21 | so you will need to go to the English portion
of the site so you click the English icon
| | 00:29 | and from there you can click the Downloads
link to go to download WAMP server.
| | 00:34 | Scroll down till you see download on the screen and
then click the Download link to download WAMP server.
| | 00:42 | So I will click to download that right now.
| | 00:56 | Then once you have downloaded the
application file you can go ahead and open it.
| | 01:05 | And there is double click open.
| | 01:08 | So I will open this file.
| | 01:10 | You can read the warning it just
says this file is an application file
| | 01:13 | and so we know we want to open that
so I am going to open that up.
| | 01:16 | So this message is telling me that if I have
WAMP already installed on my computer not
| | 01:20 | to upgrade it but to uninstall and then reinstall.
| | 01:23 | I don't have WAMP on my computer already so
I am just going to go ahead and click Yes.
| | 01:27 | I am clicking Next to go through the instructions,
go into the read over the license agreement.
| | 01:32 | Make sure that you read over the agreement and accept
the terms before you click I accept the agreement
| | 01:37 | and then click Next and then choose the folder to install WAMP.
| | 01:40 | I am just going to choose it in the
default folder which is right in my C Drive
| | 01:47 | and now we can create a quick launch icon or a desktop icon.
| | 01:51 | I am not going to click either one of those right now.
| | 01:53 | Just going to click Next and then I am going
to click Install to install WAMP server.
| | 01:58 | So we have a pop up window here which is asking if you want
Firefox to be the default browser for WAMP5 I am just going
| | 02:04 | to click yes and here we specify the SMTP which is for our local
host and I am just going to leave the default here at local host.
| | 02:12 | I am going to leave my email at the default
I am not going to change it right now.
| | 02:15 | I am going to click Next and then I am going to leave the box
checked to launch WAMP server now and I am going to click Finish
| | 02:22 | and from here WAMP server should be running
so you should be able to go to WAMP server.
| | 02:28 | So now to take that WAMP server is running properly
I am going to go on my browser to http://localhost.
| | 02:40 | When you go to local host you should see a
screen indicating that WAMP server is started.
| | 02:44 | Now we want to do one more thing before we move on and we
want to go to our local root folder for WAMP and we want
| | 02:50 | to create a new directory just for our ActionScript files.
| | 02:53 | That way you can keep all of your files
for this course in the same location.
| | 02:56 | So I am going to go to WAMP in a task bar.
| | 02:59 | I am single left clicking it and then I am
going to click www directory in the menu.
| | 03:05 | You will notice that you just see index and I am just
going to create a folder in there called ActionScript.
| | 03:13 | Creating a new folder, call it actionscript all
lowercase so now that we have WAMP server installed
| | 03:21 | and we have our ActionScript folder to store all the files
for this title we are ready to start writing some PHP code.
| | Collapse this transcript |
| Using PHP to access remote XML| 00:00 | Now, let's take a look at using PHP to grab data
from a remote XML file and bring it into Flash.
| | 00:05 | If you are following along, browse to your root folder
for your testing server, and mine is in my site's folder.
| | 00:13 | Then I have a folder called ActionScript.
| | 00:14 | So browse to the ActionScript folder.
| | 00:16 | In there, I've created a new directory called 05.
| | 00:18 | So go ahead and create that directory right now.
| | 00:20 | Instead of there, there is another directory called 05_05.
| | 00:25 | If you access to the exercise files, you can
find the 05_05 folder in the Chapter 05 folder.
| | 00:31 | Then you can just copy the files over to this directory.
| | 00:34 | If you don't have access to the exercise
files, then create this directory now.
| | 00:37 | Inside of that folder, there are a few files
05_remote.fla, data.xml and grabber.php.
| | 00:44 | If you don't have access to the exercise files,
create the data.xml and grabber.php files now.
| | 00:50 | Both of those files are empty text documents.
| | 00:53 | Just make sure you give them the right extensions.
| | 00:55 | You are going to need to open up 05_remote.fla in Flash.
| | 00:59 | If you don't have access to the exercise
files, again you can just create FLA file,
| | 01:03 | we will talk about how to set that up once we get into Flash.
| | 01:06 | Then we have the com folder, lynda and then PHP and XML for our
classes and then in the PHP folder, we have the Grabber class.
| | 01:15 | So if you don't have access to the exercise
files, we need to create a class called Grabber
| | 01:19 | and if you do, you just open a file up in Flash.
| | 01:22 | Now, let's go over to Flash.
| | 01:28 | In Flash, go to grabber.as.
| | 01:30 | Now, I have already set up this entire class file
so if you are following along and don't have access
| | 01:35 | to the exercise files, you need to copy the information here.
| | 01:38 | So note that it's a part of that com.lynda.php package
importing the Flash.events classes and Flash.net classes.
| | 01:47 | The class called Grabber extends EventDispatcher.
| | 01:50 | We have some public properties.
| | 01:52 | Specifically, you want to know the PHP file.
| | 01:55 | The PHP file represents the PHP file
that's going to load the external data.
| | 02:01 | The remote file represents the location of the external data.
| | 02:04 | Request is our URLRequest, it's going to load the PHP file.
| | 02:08 | VARs is our URL variables that's going
to contain the variable sent to PHP,
| | 02:15 | which is just going to include the remote
filename and loader is going to load our PHP file.
| | 02:20 | Data is a public property that's going
to represent the data in the PHP file.
| | 02:25 | If loading the data was unsuccessful, then we are going
to have PHP code for our data and if it was successful,
| | 02:31 | then we are going to have XML data or
whatever data we get from our external URL.
| | 02:35 | So I am going to scroll down.
| | 02:37 | We have our constructor function which is
blank and then we have a function called load,
| | 02:44 | which is safety parameters, PHP and remote, both strings.
| | 02:49 | And we set the values of our PHP file and remote file and
create URLRequest, and we set with the filename property
| | 02:56 | which is a dynamic property of our VARs object, which is
URL variables object, equal to the remote file _____ 3.03.
| | 03:03 | Now, this name is very significant because we are going to be
using in PHP later on, so name URL as the same thing, file name.
| | 03:09 | Then we connect our URL variables to our URLRequest, set
the request to post, load the request and event listener.
| | 03:17 | Then we have the content loaded method.
| | 03:19 | In a content loaded method, we set our data
property equal to the data inside of our PHP file.
| | 03:25 | Then we just dispatch the complete event.
| | 03:27 | Now, let's go over to our FLA file and set up some of our code.
| | 03:30 | Now, if you just create a missed file right now,
make sure you save it before you go to the FLA file.
| | 03:34 | So let me go to the FLA file.
| | 03:36 | If you don't have access to the exercise files, you can
just drop a text area component or dynamic text field
| | 03:41 | on the stage and give it an instance name info_txt.
| | 03:44 | Let's select the first key from the Actions
layer and open up the Actions panel.
| | 03:48 | So I am importing the XML and PHP classes, all the component
classes, then I am giving an instance name to my text field
| | 03:55 | on the stage, so I can refer to it shorthand.
| | 03:58 | Below that code, I am going to create a variable to
represent our grabber, so I am going to call this grabber,
| | 04:04 | it's "g" and the data type is going to be grabber with a "G".
| | 04:07 | I will set that equal to a new instance
of the Grabber class and then we just need
| | 04:13 | to run the load methods, so I am going to type grabber.load.
| | 04:17 | And then we know that our PHP file is the first parameter
we are passing in, which is called "grabber.php".
| | 04:25 | And then we are going to pass in the second parameter,
which is going to be the location of our remote URL.
| | 04:34 | Now, the URL is kind of long so I am
going to show you how to get it right now.
| | 04:38 | Open up your web browser and then
browse to www.lynda.com/go/actionscript.
| | 04:53 | You can see this page once we get there.
| | 04:55 | Then click blog and then click the
RSS button to subscribe to the blog.
| | 05:03 | Copy the link from your browser window.
| | 05:05 | You can note that your page may not look the
same if you are using a different web browser.
| | 05:12 | We are just really interested in this
link location here in our browser window.
| | 05:15 | So just copy that, so Command+C or Ctrl+C to copy, then
you can close your browser window at that point and then go
| | 05:22 | over to Flash and then paste in that URL as a string.
| | 05:26 | And then what you are going to need to do is change
the feed at the beginning of the URL to HTTP.
| | 05:32 | Make sure to close out the parentheses for the load method and
then go to the next line and event listener to our grabber.
| | 05:40 | And the event is going to be EVENT.COMPLETE and we will run
a function called datagrabbed to find that function now.
| | 06:03 | Now, once we have the data, we will just
put the data inside of the text field.
| | 06:06 | So I am going to type info_txt.text=grabber.data, okay.
| | 06:13 | Now, if we test through this point, it's not going
to work because we need to define our PHP code.
| | 06:17 | So now, let's minimize Flash and open up
that PHP file, grabber.php in a text editor.
| | 06:23 | I am going to open up that file in TextWrangler.
| | 06:26 | So we have grabber.php open up in a text
editor and now we will start writing PHP code.
| | 06:31 | Now, don't worry if you don't know any PHP, doesn't matter,
| | 06:34 | we are just going to write a few lines
and it's going to be fairly simple.
| | 06:36 | The first thing we are going to do is type an
open bracket and a question mark and then PHP.
| | 06:41 | This is an opening PHP tag and inside of
this tag, we are going to put our PHP code.
| | 06:46 | So to close this tag or down a few
lines, and then type a question mark
| | 06:51 | and a close bracket, which looks like greater than sign.
| | 06:54 | Right above the opening PHP tag, type a dollar sign, let's say
you create a variable in PHP similar to the VAR keyword in Flash
| | 07:02 | and then we will create a variable called File and we are going
to set that equal to, so I will type a space and equal sign
| | 07:07 | in the space and type another dollar
sign and underscore and then POST.
| | 07:13 | This represents the post data sent to PHP.
| | 07:16 | To reference the file that we are going to send from
Flash, we are going to put some square brackets.
| | 07:21 | Then inside of the square brackets, I am going
to type some single quotes and then inside
| | 07:25 | of the single quotes, I am going to type filename.
| | 07:28 | Remember that's the dynamic property that we
created on our URL variables in our class file.
| | 07:32 | So this value is going to be whatever we send in as a remote URL.
| | 07:37 | After the close, square bracket, type a
semicolon and go down to the next line.
| | 07:41 | And then what we are going to do
is we are going to get the contents
| | 07:44 | of our remote URL using the built-in
PHP function file_get_contents.
| | 07:53 | So file_get_contents is a built-in PHP
function that gets the contents of a file
| | 07:59 | as a string whether the contents or remote or local.
| | 08:02 | So let's type some parentheses and a
semicolon to end the statement just
| | 08:06 | like an ActionScript, and then we are going to pass in our file.
| | 08:09 | So type a dollar sign and type file.
| | 08:12 | And that's it, this will get a string
that includes the contents of the file.
| | 08:16 | Now, in order to make this data display or make this data usable
in Flash, we are going to need to put this data on the page.
| | 08:24 | In order to do that, all we have to do is click right
before file_get_contents and type echo and then a space.
| | 08:33 | You can think of the echo PHP function
kind of like putting data in a text field,
| | 08:38 | except for echo that's used just to put data on a page.
| | 08:41 | So it's going to take our string that's inside
of our remote file and then put it on the page.
| | 08:45 | That way, the data will be usable in Flash.
| | 08:47 | So let's save the file, choose File,
Save and let's go over to Flash.
| | 08:53 | Now, in Flash, we are going to test the movie, we are not
going to use the traditional Command+Return or Ctrl+Enter
| | 08:59 | to test the movie because it won't give
us the result that we are looking for.
| | 09:02 | If you test the movie at this point,
you are going to get PHP code.
| | 09:06 | The reason why we are saying PHP code is
because the PHP code is not being processed
| | 09:11 | because we shouldn't see the PHP code,
we should see what the PHP code gives us.
| | 09:16 | In order to do that, we are going
to need to test this on a browser.
| | 09:19 | So let's close the preview window and the press
Command+F12 on the Mac or F12 on the PC to test the file.
| | 09:26 | Now, in your browser, you might not see anything
in the window, and the reason for that is
| | 09:31 | because we are not yet on our testing server.
| | 09:34 | We need to go over to a different location in the browser.
| | 09:38 | Right before the forward slash before ActionScript
in your browser address, erase all the content,
| | 09:44 | replace it with http://localhost, now press Enter or
Return to accept the change, and then your data will reload
| | 09:56 | on your testing server providing that
your testing server is currently running
| | 10:00 | and then you will see the data load right into Flash.
| | 10:04 | So here's our data from our remote URL.
| | 10:08 | Now, if you were to check the PHP file at this point,
the data is actually not saved in the PHP file.
| | 10:13 | The code is kind of like ActionScript where
it runs every time you run that PHP file.
| | 10:17 | So now, we can get XML data from a remote
location if you have the RSS feed link.
| | 10:22 | So if you aren't seeing the XML data for some
reason, here are few things that you want to check.
| | 10:26 | You obviously want to check your ActionScript code, both in the
FLA file and in your AS file, you want to check all the PHP code
| | 10:33 | in grabber.php, you want to make sure that your
testing server is running and you want to make sure
| | 10:38 | that the file permissions inside of your ActionScript folder on
your testing server are set so that everybody can read and write.
| | 10:46 | So now that we have grabbed our external
data, let's look at saving that data locally.
| | Collapse this transcript |
| Saving XML data locally| 00:00 | Now, we have PHP save XML data in a local file.
| | 00:04 | After following along browse to your local root
folder, so that's My Sites folder and then go
| | 00:11 | in the ActionScript folder find 05, and then 05-06.
| | 00:16 | If you have accessed your exercise files you can find
05-06 folder in the chapter05 folder, so copy it over
| | 00:22 | and make sure it has the correct permissions and everything
and then we are going to be working with 06_saving.fla so open
| | 00:30 | that up in Flash or be prepared to open it up in Flash and
then we have kind of the same files from the last exercise.
| | 00:36 | We have also included saver.php.
| | 00:38 | Now this file already has some PHP code, but
if you don't have access to the exercise files,
| | 00:43 | you can just create a blank PHP document called saver.php
and then you can write the code once we get there.
| | 00:48 | And then in our class library here we have a new ActionScript
file called Saver.as so open that file up in ActionScript along
| | 00:58 | with 06_saving.fla and let's go over to Flash.
| | 01:03 | Let's start with our Saver.as file.
| | 01:05 | Now, if you don't have access to the exercise files, make sure
to create the Saver.as file, set up the same package structure
| | 01:11 | on your hard drive, then name this
the correct package inside of Flash,
| | 01:17 | import all the Flash.net classes and all the Flash.event classes.
| | 01:21 | We are going to extend the event dispatcher class.
| | 01:24 | Create all of these properties here and name them accordingly.
| | 01:28 | Notice, they are pretty similar to
their properties in our grabber file.
| | 01:32 | So, scroll down; notice to construct
your function or method is blank
| | 01:36 | and then we have another public method called
Save and this method accepts three parameters.
| | 01:41 | The PHP file that's going to process the
saving, the file that we want to save to
| | 01:48 | and the content that we want to save in that file.
| | 01:51 | So we set some of the properties here and this
kind of looks the same as our grabber file.
| | 01:56 | Remember we are setting a property called
content on our variables, equal to save content.
| | 02:01 | Now, that property name content is important
because we are going to be using that in PHP later.
| | 02:06 | Now, we have our file name, which is also dynamic property
on our variables and that's going to be used in PHP as well.
| | 02:13 | Then we connect our URLRequest, to our URL variables, we are
using the post method and then we are loading the request.
| | 02:21 | The function that runs once the request
is loaded is called Check Status.
| | 02:25 | Basically, what we are doing in this method is
checking to see if the data that's retrieved
| | 02:32 | from PHP using our urlLoader.load
method is the same as the data sent
| | 02:39 | in when the saved method is run, that's
held in our VARS.content property.
| | 02:45 | If so we are setting a property called success to truth.
| | 02:48 | So we have a way to test to see, if
the saving was successful or not.
| | 02:52 | From there we are just going to dispatch the complete event.
| | 02:55 | Now, let's go to our FLA file and
start writing our ActionScript code.
| | 02:58 | If you are following along, you can just use the same file
from the last exercise or you can drag a text area component
| | 03:05 | or dynamic text field on the stage
and give it an instance name info_txt.
| | 03:10 | Select the first keyframe of the Actions Layer and open
up the Actions Panel, I am going to turn word wrap on,
| | 03:15 | so it's a little bit easier to see my URL at the bottom of
the screen and then what we are going to do is we are going
| | 03:21 | to write our data, that's retrieved from our
grabber once the data has been grabbed successfully.
| | 03:26 | So in our variable section, let's
create a new variable called saver.
| | 03:31 | This is going to be a new instance of the saver class.
| | 03:37 | In our dataGrabbed function, let's modify the code we have
currently and then change grabber.data to a string that says
| | 03:46 | "saving grabbed data", just so our text field has
given us a little update as to what's happening.
| | 03:53 | On the next like, let's make our saver, save the file.
| | 03:56 | So saver.save and then in parenthesis, we
need to pass in our PHP file that's going
| | 04:02 | to process the saving so that's called saver.php.
| | 04:05 | Then we need to pass in the file that we want to save to,
which is called data.xml and then we need to pass in the data
| | 04:14 | that we want to save and that data we
want to get from our grabber object.
| | 04:18 | So we are going to be pass in grabber.data and right
above that, I am going to add an Event Listener
| | 04:24 | to the saver, to listen for the complete event.
| | 04:31 | So once that's done, we will run a function called fileSaved.
| | 04:36 | Now let's define the fileSaved function.
| | 04:47 | Once the file is saved successfully, we will
put that grabber data in our info text field,
| | 04:52 | so type info_txt.text = grabber.data, so once the file
has been saved, we will put that data in the text field.
| | 05:03 | Now we will write our PHP code.
| | 05:04 | I am going to open up the file in TextWranger.
| | 05:06 | Now, this file is pretty simple we
have an opening and closing PHP tag.
| | 05:11 | We are creating a variable called content, we are
setting equal to the post variable content that we set
| | 05:17 | up in our saver class file and then we
are setting a variable called file equal
| | 05:21 | to the post data called file name,
which we also set up in our saver file.
| | 05:26 | Now, in XML that it comes to PHP using post
variables, PHP will put backslashes in front
| | 05:33 | of all the quotes in your XML file to escape those quotes.
| | 05:37 | Now, the problem with that is that if
there are backslashes before every quote
| | 05:42 | in our XML file then ActionScript is
not going to be over the parse that XML.
| | 05:47 | So we need a way to take out all that backslashes.
| | 05:50 | Now, the easiest way to do that is using the built-in PHP
function called stripslashes, so let's go down a few lines,
| | 05:55 | then I am going to type content, so it's a variable, so make
sure you type the dollar sign equals then type stripslashes,
| | 06:02 | all lower case all one word and the pass in
content, so $content end the parenthesis.
| | 06:12 | The next thing we are going to do is open up the file that we are
going to write to, so create a new variable called Write File,
| | 06:21 | we will set that equal to fopen, fopen
is a PHP function that opens a file.
| | 06:27 | So create some parenthesis and a semicolon and inside
of the parenthesis we need to pass in two parameters.
| | 06:33 | The first parameter is the file that you want to open and the
second parameter is a mode that you want to open that file in.
| | 06:39 | For example, if you want to write to a file then you pass in the
string W, so I will type in our file first, which is called file,
| | 06:48 | so it's a variable called file, remember that's a file name
received from ActionScript then type a comma and then space,
| | 06:54 | and then we need to type the file mode, which is right, so type
two double quotes and then a lower case w inside of the quotes.
| | 07:01 | This tells PHP that we are going to write to this file.
| | 07:04 | Let's go down a few lines and now we are going to
create a conditional statement and don't worry,
| | 07:08 | conditional statement in PHP is just
like a conditional statement in Flash.
| | 07:12 | So type If some parenthesis and some curly braces just like
you do in ActionScript and then inside of the parenthesis,
| | 07:20 | we are going to check to see if the
file was able to write successful.
| | 07:24 | So, we will type fwrite, which is a PHP function
that writes to a file and then some parenthesis,
| | 07:31 | then we will need to pass in two values here.
| | 07:33 | The first value we pass into this function is the
file that we are going to write to and that's going
| | 07:38 | to be our write file variable, so type $ and then writefile
just like we typed it earlier then a comma and a space
| | 07:49 | and then we are going to type in the data
that we were going to write to the file.
| | 07:51 | For the data we are going to use the
content that came over from ActionScript.
| | 07:56 | So I am going to type $content inside of the curly braces.
| | 08:01 | If the file was written successfully then
I am just going to simply echo that value,
| | 08:06 | so I will type echo space content,
make sure to type the dollar sign.
| | 08:10 | So if the file was written successfully, then
we are going to print out all that information
| | 08:15 | on this page, we will be able to use that in Flash.
| | 08:18 | If not so we will write an Else statement just like ActionScript
then we will echo a different value, so type echo and then space
| | 08:25 | and then some quotes and then inside of the quotes, type an
error message and I am going to type error writing to file,
| | 08:34 | doesn't really matter what you write here as long as it's
different from this content and this is just going to be
| | 08:40 | for ActionScript to check whether the file was written
successful because remember in our saverclass file,
| | 08:45 | we are checking to see if the content in the PHP is the same
as the content that's sent in, when we run the save method.
| | 08:52 | So by having this conditional statement, we make sure that
the content is the same if the file is written successfully
| | 08:58 | and it's different and if the file is not written successfully
unless for some reason the only data you want to write
| | 09:04 | in a file is error writing to file, which is very unlikely,
so we didn't have to worry about that and then below all
| | 09:11 | of our code here, we are going to need to
close the file that we have written to.
| | 09:15 | So type fclose, that closes the file, they
won't pass in our file, which is writeFile.
| | 09:20 | So we will type $ and then writeFile, close
out the parenthesis and then type a semicolon.
| | 09:26 | Now, that might have seen like a VAR, but in a lot of ways, you
can probably see how PHP is not that different from ActionScript,
| | 09:33 | so let's save the file, so choose File Save,
then we need to go over to Flash and test this.
| | 09:37 | So let's go over to Flash right now.
| | 09:41 | So remember, we need to use our testing server to test
this out, so Command+Return and Ctrl+Enter won't work.
| | 09:48 | We are going to have press Command 12 on
the Mac or F12 on the PC, testing a browser.
| | 09:54 | Now, if you don't get any data, don't worry what we want
| | 09:56 | to do is just change the browser address,
so that we are running our testing server.
| | 10:01 | So right before the forward slash and
ActionScript, we will type http://localhost.
| | 10:09 | Once you have typed then press Enter to
Return on your keyboard to accept the change.
| | 10:13 | Then you should see the XML data loaded into Flash, nice.
| | 10:21 | Remember if this isn't working, you want to make sure that
your testing server is running, your PHP code is correct,
| | 10:26 | your ActionScript is correct and that
your file permissions are correct as well.
| | 10:29 | So PHP is telling us that the file was written successfully.
| | 10:34 | Now, what we want to do is open up that XML file and
see if it actually was written to you successfully,
| | 10:39 | so I am going to close my web browser and I
am going to minimize Flash and my PHP page.
| | 10:46 | I am going to find that XML file, which is data.xml.
| | 10:50 | Let's open this file up in a text editor and see what we get.
| | 10:53 | I will open up in TextWrangler and sure enough
I get the XML data from the remote location.
| | 11:00 | So now we can use our saver class and PHP
to make PHP write to an external file.
| | 11:06 | In the next movie, we will take a look at
processing this data using our RSSReader Class.
| | Collapse this transcript |
| Processing saved XML data| 00:00 | Now we will talk that remote XML that we downloaded using PHP
| | 00:04 | and save to a local file using PHP and
process it using our RSSReader Class.
| | 00:08 | If you are following along go to your local root folder.
| | 00:13 | So My Computer to My Sites folder go to the ActionScript
folder and open the 05 folder and now if you have access
| | 00:20 | to the Exercisefiles folder you can drag over
a copy of 05_07 from the Chapter5 folder.
| | 00:26 | Now you may need to set the file permissions for
this folder to make sure everything is working okay.
| | 00:30 | If you don't have access to the exercise files you can use
create a folder called 0507 and so once you have that folder,
| | 00:36 | go inside that folder and then we are
concerned with the Start folder here.
| | 00:39 | If you don't access to the exercise files
again you can just create a Start folder.
| | 00:43 | And then we have two files we are going to working with,
| | 00:46 | the first one is 07_processing.fla
so you could open that one in Flash.
| | 00:50 | Then we have our folder structure of our classes Com, lynda
and then XML RSSReader is the one that we want to open up.
| | 00:56 | So open those two files open Flash and let's start working on.
| | 01:00 | Once you are in Flash go over to rssreader.as.
| | 01:03 | In order to process the XML we are going to
need to make a slight modification to this file.
| | 01:09 | As is the RSSReader Class only processes
XML that it loads by itself so it's not set
| | 01:16 | up to processes XML that's loaded using another method, and
we don't want to make our RSSReader load the same file twice
| | 01:23 | because with using our grabber or saver classes in our PHP we
have already loaded, we already have access to all that XML data.
| | 01:30 | We could even make a slight modification to this
file in order to allow it to process XML both
| | 01:35 | on its own and process XML from another source.
| | 01:38 | So I will scroll down, we are going to
select all the code in XML loaded method
| | 01:44 | and then press Command+X on the Mac,
Ctrl+X on PC to cut the code.
| | 01:47 | Right, below the XML loaded method I am going to create a
new public method and I am going to call this process XML
| | 01:56 | and it's going to receive a parameter called
XML data and the data type is going to be XML.
| | 02:02 | Doesn't need to return a value and then inside of the body of
this method we are going to paste the code that we just cut.
| | 02:08 | Command+X on the Mac, Ctrl+X on the PC.
| | 02:10 | We will need to make a little modification to our feed
value here so instead of the feed value being instance
| | 02:16 | of the XML class the feed value would be
whatever is passed in via the XML data parameter.
| | 02:22 | Now in our xmlLoaded method we will simply run the process XML
method so I am going type process XML and then we will pass
| | 02:30 | in a new instance of the XML class
and then inside of the parentheses
| | 02:34 | for the XML constructor we will just pass in xmlLoader.data.
| | 02:39 | So now this should work just fine, just like it did before
whenever we are using the RSSReader to load our XML files.
| | 02:46 | But we can also run process XML from another location, process
XML that comes from another source so let's save this file,
| | 02:53 | choose File Save and then go over to processing.fla and if you
are just joining in I recommend watching the last two movies
| | 03:01 | to write the same code that we have or you can put a dynamic text
field on the stage or a text area component and call it info_txt.
| | 03:07 | Let's go to the first keyframe of the
Actions Layer and open up the Actions Panel.
| | 03:11 | What we are going to do here is first we go to top
of our code and right below we create our instance
| | 03:16 | of the saver class we will create a new variable called
Reader and that will be instance of the RSSReader Class.
| | 03:27 | You should make sure that you are importing all of
the XML classes that's the com.lynda.xml package
| | 03:33 | and then scroll down to the File Saved function.
| | 03:36 | In that function we are going to change
the message in the info text field.
| | 03:39 | I am going to replace grabber.data with a
simple message that says "Processing XML data."
| | 03:46 | Now well we can kind of see the process
what's happening if we test this out
| | 03:50 | and get a little feedback while we
are waiting for the XML to load.
| | 03:53 | Let's go to the next line and the next thing we are going
| | 03:56 | to do is we will type reader.add event listener
and we will listen for the complete event.
| | 04:01 | And this way we will be able to react when all the XML is
processed and we will run a functioning called RSS Processed.
| | 04:10 | Really important to note here, when you are not loading
the data using the RSSReader Class and if you are going
| | 04:17 | to use the process XML method because you already have XML data,
you need to add the event listener before you process the XML.
| | 04:24 | This is because the process XML method doesn't take
any time to run because you already have the XML data
| | 04:29 | and the code can finish running and execute the complete event
before you next line of code runs to add the event listener,
| | 04:35 | if that happens then you will miss the complete event.
| | 04:38 | Moral of the story add listener first.
| | 04:40 | Go to the next line and we will type reader.process xml and then
we are going to pass in a new instance of the XML class inside
| | 04:49 | of the constructor we will just pass in grabber.data.
| | 04:53 | Now let's define the RSS process function.
| | 05:09 | For this function it will simply set a value in our text field.
| | 05:13 | We want to do a value that is really obvious that everything
is working properly so for that value I want to do something
| | 05:19 | from our reader object so I am going to type reader.title.
| | 05:25 | So this tells us of the RSSReader process
and everything is working properly.
| | 05:29 | So let's test this out in a browser,
Command F12 on the Mac or F12 on the PC.
| | 05:35 | Remember it shouldn't work that's because we need to
make sure we are testing it using our testing server
| | 05:39 | and just a friendly reminder make sure your testing server is on.
| | 05:42 | Now we will change our browser address to put local host right
before our forward slash in ActionScript and test that out
| | 05:52 | by pressing Return and there we go, Mini's Blog
is the title of our external RSS feed, nice.
| | 06:00 | Close this window, so now we are doing a complete round trip.
| | 06:04 | We can download data from an external source, save it in the
local file then process that XML data using our RSSReader Class.
| | Collapse this transcript |
|
|
6. Working with BlogsDisplaying blog posts| 00:00 | In this chapter we will look at bringing
data from a blog into Flash.
| | 00:03 | We will start by processing the different episodes
and displaying the data from each of those episodes.
| | 00:08 | If you are following along go to your
local route folder on your hard drive.
| | 00:14 | Mine is in my Sites folders and I am
going to go to the ActionScript folder.
| | 00:17 | Then I have a folder called 06.
| | 00:19 | Now you may need to create that folder right now.
| | 00:21 | Instead of that folder, I have an
FLA file a file called grabber.php
| | 00:25 | which is the same file we were using in the last chapter.
| | 00:28 | And then we have our classes that we
use to grab and parse our XML data.
| | 00:34 | Those classes include our RSSReader Class,
our Grabber Class and our Savor Class.
| | 00:39 | So you should have all those files in there.
| | 00:41 | If you have give access to the exercise files you can just
copy those files from the Chapter 6 folder into this folder
| | 00:46 | and if you don't have access to the exercise files
you can just copy the files you have been working
| | 00:50 | with up to this point into this folder.
| | 00:53 | So let's open up 01_episodes.fla in Flash.
| | 00:57 | In this file I have added a few things.
| | 00:58 | You will notice that there is a combo box, I named that combo box
Episode_cb, there is a dynamic text field which I named date_txt
| | 01:08 | and there is a button that says View
online and I named that view_btn.
| | 01:12 | So let's go to the first keyframe of the
Actions Layer and open up the Action panel.
| | 01:17 | Let's take a look at the code that's already written here.
| | 01:20 | We are importing all of the XML and PHP classes, I am importing
all the component classes and then all of the data classes.
| | 01:29 | I am importing the data classes so that we can give a
data provider to our combo-box so make sure to do that.
| | 01:35 | The four variables I have here so I can refer to my text areas
and combo box and my button shorthand for creating new instance
| | 01:43 | of the Grabber and RSSReader classes, using our Grabber
| | 01:49 | to grab an external URL that's coming from
the blog which I have highlighted here.
| | 01:56 | Now you may want to copy that down if you don't have
access to the exercise files but I want you to know here
| | 02:01 | that it's the same file that we were
working with in the last chapter.
| | 02:04 | So you can just load that file in if
you are working with the same file.
| | 02:07 | So once the data is grabbed then we process the XML, you know
RSSReader and we are running a function called RSS Processed.
| | 02:16 | So let's define that function right now.
| | 02:19 | The first thing I am going to do is
create a variable called episodedp,
| | 02:22 | this is going to be the Data Provider for our combo box.
| | 02:26 | So the data type is going to be Data Provider.
| | 02:28 | I am going to set that equal to a new
instance of the Data Provider class.
| | 02:36 | If you haven't used the Data Provider class
before it's actually pretty straightforward.
| | 02:41 | We need to give our data provider information
about the labels that should be in our combo box
| | 02:45 | and we can easily do that by running a For Each Loop.
| | 02:48 | So I am going type For Each, I am going to create a variable
called Item with the data type of XML where it will be for Item
| | 02:57 | in reader.episodes, create some brackets here.
| | 03:04 | So for each item or for each episode in our blog we are
going to add the episodes title as a label for our combo box.
| | 03:11 | So I am going to type EpisodeDP.additem
and I am going to pass in the title.
| | 03:20 | Now it's very important here that you pass it in as an
object so I am going to draw some curly braces inside of here
| | 03:26 | and then inside the curly braces I am
going to make a property called Label.
| | 03:29 | And then for the value of the label I am
going to pass in item.title below our loop,
| | 03:37 | we will connect our combo box to our data provider.
| | 03:40 | So type Episode_cb.dataprovider=episodesDP.
| | 03:51 | Then we will add an EventListener to our combo box for when
the combo box changes so add that right here episodeCB,
| | 03:58 | add EventListener and the event's going to be
event.change and we run a function called Change Selection.
| | 04:11 | Before we define the Change Selection
function let's do one thing for our combo box
| | 04:16 | and what we will do is we will set its initial selected index.
| | 04:19 | So episode_cb.selected index and we will set that equal to 0.
| | 04:24 | If you are not familiar with working with components, Selected
Index is pretty much the standard for working with a list box
| | 04:30 | or a combo box and it just says what item or what
index is selected in a combo box or a list box.
| | 04:38 | So 0 is the first item, it kind of works just like an array.
| | 04:40 | So, that property is readable and writeable.
| | 04:43 | So let's define the Change Selection function.
| | 04:55 | All we are going to do is run a function called Update Text.
| | 04:59 | Now before we define the Update Text function we want to make
sure that it runs automatically as soon as our data is loaded.
| | 05:09 | So we are not guaranteed that setting the
selected index on line 30 in my code here is going
| | 05:16 | to trigger the Change Event for the combo box.
| | 05:18 | We are going to update the text manually here
so right below that one code, run update text
| | 05:24 | and now we will create the update text function.
| | 05:28 | We will do that right below the Change Selection function.
| | 05:34 | For the Update Text function, we are just
going to update the text fields on the stage.
| | 05:38 | The first thing I am going to do is set the text
for our info text field so type info_txt.html text.
| | 05:46 | When you are working with a blog it's a good idea
to use HTML text instead of just text because a lot
| | 05:51 | of times the blog content has HTML code in it.
| | 05:55 | Our blog here has image links inside of it so we want to show
those images and make them links and all we have to do to do
| | 06:03 | that is use the HTML text property instead of the text property.
| | 06:06 | So I am going to set that equal to reader.episodes and the index
is going to be episode_cb.selected index and then the content
| | 06:17 | that we wanted to display is the
description so type .description.
| | 06:23 | Then we want to do one more thing and that's display the date.
| | 06:27 | So I am going to type date_txt.text, we don't need to use HTML
text here because it's just very simple date and we are going
| | 06:35 | to use the same formula that we used before
reader.episodes and everything but we already wrote
| | 06:39 | that so I am just going to copy that from the previous line.
| | 06:41 | So I am going to select the code I wrote in last line, Command C
to copy, Ctrl C on the PC, paste the code using Command or Ctrl V
| | 06:48 | and instead of showing the description
I want to show the date and with a blog
| | 06:53 | and with other RSS feeds it's called
Pub Date referring to the publish date.
| | 06:59 | So at this point just want to look over your
code, make sure all your code's written correctly
| | 07:03 | and make sure your testing server is running
and let's test this on our testing server.
| | 07:07 | Command F12 on the Mac, F12 on the PC and so
we need to browse to our local host in order
| | 07:13 | to view this using our PHP code and there we have it.
| | 07:20 | So we see the title for the blog episode or the blog
post in our combo box, we see the date displayed,
| | 07:29 | we see the image in our text field and by the way text fields can
load external images using HTML though you can't load an external
| | 07:37 | image using the loader class in ActionScript code.
| | 07:41 | So that kind of gives us a workaround there.
| | 07:42 | So we have our blog content here and
also notice if you click on the image
| | 07:47 | in the text field it will take you
to the full size image that's online.
| | 07:52 | So I am going to go back in my browser.
| | 07:55 | So that's working great.
| | 07:56 | We have an added interactivity for the View
Online button yet we will do that later.
| | 08:00 | And so let's just change the episode and see if that works okay.
| | 08:02 | So I am clicking the combo box and I can see the other episodes.
| | 08:05 | Let's go to San Antonio and there is a nice picture
of the Alamo with a description and the date.
| | 08:12 | So everything is looking good.
| | 08:14 | One thing I want to change though is the display of the date.
| | 08:17 | I kind of just want it to stop right after January 2008.
| | 08:21 | In the next movie, we will take a look at cutting up
the date string so it just displays what we want to see.
| | Collapse this transcript |
| Formatting dates| 00:00 | Now we will take a look at modifying the
publish date for the each of blog episodes.
| | 00:04 | If you are following along go to your local root folder
and mine is in My Sites folder so I am going to there
| | 00:11 | in the ActionScript folder and then in 06 folder.
| | 00:15 | I am going to open up 02_date.fla.
| | 00:18 | Now you can always just grab this from the
Exercisefiles folder in the Chapter6 folder
| | 00:22 | or you can just use the same file from the last exercise.
| | 00:25 | So I am going to open up that file here and let's
go to the first keyframe of the Actions Layer
| | 00:31 | and open up the Actions Panel and
scroll down to the Update Text function.
| | 00:35 | At the very top of the Update Text function we are going
| | 00:38 | to create a variable called Date and
this is going to represent just a date.
| | 00:42 | It's going to be a string and I am going to get the
value from the previous value that was in our text field.
| | 00:48 | I am going to select that entire value from reader.episodes
all the way to pub date and I am going to press Command
| | 00:53 | or Ctrl+X to cut the value and then for our date
I will paste the value using Command or Ctrl+V
| | 00:58 | and then on the next line I am going to change the value of date
so I am going to type date = date.substring sub str all lowercase
| | 01:10 | and then I am going to pass in 0 for the first value.
| | 01:13 | I am going to cut it off right after 2008.
| | 01:15 | And the way that I get that value is first I get the
initial value of 2008, so I am going to type date.index of
| | 01:21 | and then in quotes I am going to pass in
2008 so all of these blog posts are in 2008.
| | 01:27 | And then after the parenthesis I am going to add on 4.
| | 01:31 | If we just add index of 2008 it would
cut off the string right before 2008.
| | 01:36 | So we are adding 4 for each of those digits so after
the 4 we close up the parenthesis and type semicolon
| | 01:42 | and then for our value and our date text
field we are just going to have it be date.
| | 01:47 | Now let's test the movie in our browser and that's
Command F12 on the Mac or F12 on the PC and we are going
| | 01:54 | to make sure we are testing this on our testing server.
| | 01:56 | Again you want to make sure that your testing server is in
fact running and we will browse to our local host address.
| | 02:03 | Now we are going to see the full date so I can go
to different episodes and it's ending with 2008.
| | 02:13 | So now our date is looking great and the last thing we want to do
is make this View Online button work and then we can take a look
| | 02:19 | at what a web page looks like on an actual blog.
| | Collapse this transcript |
| Linking to an online blog| 00:00 | Now we will take a look at creating a link to our online blog.
| | 00:03 | If you are following along open up your hard
drive and then go to your local root folder.
| | 00:09 | Find the ActionScript folder then browse
to the 06folder then open up 03_viewonline.
| | 00:16 | Now if you are following along you can just
use the same file from the last exercise
| | 00:20 | or you can get this file in the Exercisefiles folder in Chapter6.
| | 00:23 | So let's go to the first keyframe of the Actions Layer and
open up the Actions Panel and find the RSS processed function.
| | 00:33 | At the very bottom of this function we are
going to add an event listener to our button.
| | 00:37 | Now I call the button view_btn so I am going to type view_btn.
| | 00:41 | I am going to add an event listener and we are going to listen
for a mouse click and we will run a function called viewonline.
| | 00:50 | Now let's define a viewonline function.
| | 00:56 | All we are going to do here is just
use navigate to URL to display URL.
| | 01:08 | And instead of navigate to URL I am just
going to create a new URLRequest right there.
| | 01:16 | And the string is going to come from the current
selected index so it's going to be reader.episodes
| | 01:24 | and the index is just going to be
whatever is selected in the combo box.
| | 01:28 | The index is going to be episode_cb.selectedindex and then the
XML element that holds the link to the online page is link.
| | 01:41 | Just make sure to close the parenthesis for both navigate
to URL and the URLRequest and let's test it in the browser.
| | 01:50 | Make sure that your server is running and browse to local host
| | 01:58 | and click the view online button then
you can see that blog post online.
| | 02:03 | So I will close this window and pick a different episode, click
the viewonline button and there is another post of the blog.
| | 02:14 | So using the same technique you can not only grab data from
this blog but you can also grab data from other blogs as well.
| | 02:21 | So I encourage you to just try this,
experiment with other blogs and see what you get
| | 02:25 | when you try an RSS feed for a different blog.
| | 02:27 | Just note that in order for this to work properly the blog has to
have a standard RSS feed meaning that there is going to be item
| | 02:35 | and title description and link but those
are pretty standard and it should be in just
| | 02:39 | about every blog which you can find out there so have fun.
| | Collapse this transcript |
|
|
7. Working with the Flickr APIViewing the Flickr API| 00:00 | In this chapter we are going to be using Flash to grab data
| | 00:03 | from Flickr.com generate XML data and
display images from Flickr.com in Flash.
| | 00:10 | We are actually not going to use any PHP this time.
| | 00:13 | The reason we don't have to use PHP is because
Flickr.com has something called a cross-domain policy file
| | 00:19 | that enables any other domain to access data from Flickr.com.
| | 00:24 | So we don't need to use PHP to grab the
XML because Flickr is allowing everybody
| | 00:29 | to grab its data with this cross-domain policy file.
| | 00:32 | Now if you want to know more information about cross-domain
policy files you can search cross-domain policy file
| | 00:37 | in Flash help or you can simply do a web search.
| | 00:40 | So before we start using the Flickr API I want to talk about how
it works and what you can do if you want to do a little bit more
| | 00:47 | than what we are going to do in this chapter.
| | 00:48 | The way that the Flickr API works is we essentially
send a request to Flickr and Flickr takes that request
| | 00:54 | and generates XML data which we can use in Flash, it's simply
an RSS feed and process it just like any other RSS feed
| | 01:01 | and use the links in that file to load
external images from Flickr.com into Flash.
| | 01:07 | Let's take a look at what Flickr.com has to say on the subject.
| | 01:09 | If you browse to Flickr.com/services/API you
can find a little bit more about what features
| | 01:20 | that you can grab from Flickr and bring into Flash.
| | 01:23 | When you go to that site you can click on that Feeds link to
see what available feeds there are and the available feeds refer
| | 01:30 | to an RSS feed that you can search for images so
we can search public photos, friends photos etc.
| | 01:36 | and we can choose what format we want to feed in
whether we want it in RSS or an Atom feed or whatever.
| | 01:42 | We can even choose which language we want the request to be in.
| | 01:45 | So let's say we wanted to get public photos, I am going
to click public photos right here in available feeds.
| | 01:52 | Then you get a URL and this is the base URLRequest that we
are going to use in Flash and then we add on extra parameters.
| | 01:59 | One parameter's format that's what we tell Flickr that
we want RSS as our format and we can add in a bunch
| | 02:04 | of optional parameters here like ID IDs and the one we are
going to use is tags we can search certain values separated
| | 02:12 | by commas to get different data back from Flickr.
| | 02:15 | So there is a look at the Flickr API what we are going to be
doing in the Flash is simply sending a request to Flickr adding
| | 02:21 | on some variables like tags and the formats so we can get RSS
then we are going to take that RSS data load it into Flash
| | 02:28 | and use the links in the RSS feed to
load images from Flickr.com into Flash.
| | 02:33 | So let's gets started.
| | Collapse this transcript |
| Viewing the search class| 00:00 | Now we will take a look at some of the ActionScript we
are going to use to bring the Flickr images into Flash.
| | 00:05 | If you are following along and have access to the Exercise
file open up the Exercisefiles folder go to Chapter7
| | 00:10 | and then you are going to need open up Flickr_Search.fla and then
in the Com_lynda_Flickr package you are going to need to open
| | 00:20 | up search.as and you are going to
also need your XML RSSReader class.
| | 00:24 | You are not going to open that up but we need that, that's
the file that we have been working with up to this point.
| | 00:30 | We are going to induce that to process our Flickr data.
| | 00:33 | If you don't have that file I recommend
watching some of the movies earlier
| | 00:36 | in this title where you build the RSSReader class.
| | 00:39 | And if you don't have the Flickr_Search.As class
you will need to create an asterisk class file now
| | 00:44 | with the same packet structure called Search.As, so
it's open those two files up and go over to Flash.
| | 00:49 | Once you are in Flash go over to Search.As and
let's just walk through this file real quick.
| | 00:55 | It's going to be pretty straightforward and you will
see that it's a lot like grabbing data from a PHP file.
| | 01:00 | So we have our package declaration, we are
importing the Flash.net and Flash.events classes.
| | 01:06 | We are setting the event dispatcher class with our URL
request, URL variables, URLLoader and XML object is going
| | 01:13 | to represent the XML that comes out once our data is processed.
| | 01:18 | And then we have one big method that's pretty
much doing all the work here so it's called search
| | 01:23 | and it receives one parameter called search string.
| | 01:26 | And data type is a string and that's just going to
be whatever data we want to search for in Flickr.
| | 01:31 | Now inside of this method we are given a value to our URLRequest
| | 01:35 | and the value is the value I just
copied and pasted from www.Flickr.com.
| | 01:40 | Remember in the last movie we looked at if you
wanted to grab a feed from public images I clicked
| | 01:45 | on the public images link I grabbed the feed
that they gave me and I pasted it right in here.
| | 01:49 | So we are giving a new value to our URL variables and
then we are setting two very important properties here
| | 01:55 | on our URL variables object, that's Format and Tags.
| | 01:59 | For Format I got this value from the Flickr website it's
RSS_200 that's going to tell Flickr to return an RSS Feed.
| | 02:08 | Then the tags value is whatever value that gets passed in via
the search string so we can search for any data we want on Flickr
| | 02:16 | and then we will get that XML data from
Flickr based on whatever we search for.
| | 02:20 | Then we connect our URL variables to
our URLRequest, load the URLRequest
| | 02:24 | and add the EventListener to listen for the complete event.
| | 02:27 | So you maybe noticing that this looks an awful
lot like what we have been doing with PHP.
| | 02:32 | We created URLRequest to a file before we did a
PHP file now we are doing a file on the Flickr site.
| | 02:38 | We send in some parameters.
| | 02:39 | The data gets processed and then kicks back some XML data.
| | 02:43 | So we are doing essentially the same thing here
but remember this data on Flickr is only accessible
| | 02:49 | because Flickr has a cross domain policy file that
says that anyone from any domain can access this data.
| | 02:56 | Again you are going to need to look up cross domain policy file
if you need to grab data from another domain using Flash only
| | 03:03 | and no PHP and you will have to create one of those files and
it's actually a pretty straightforward, pretty simple XML file
| | 03:09 | but you will even have to search cross domain policy
file in Flash or in your web browser or on the web
| | 03:14 | to find out more about cross domain policy files.
| | 03:17 | Let's take a look at the other method and just when the
data is loaded we are instantiating our feed variables
| | 03:22 | so it's a new instance of the XML class
and we are dispatching the complete event.
| | 03:25 | So this class is pretty straightforward.
| | 03:27 | Let's go over to Flickr_Search.fla
and take a look at how this is set up.
| | 03:31 | On the stage we have two elements that we are going to
use text input field which is a text input component
| | 03:38 | but you could also use just a dynamic text field to just name
it Search_Txt and then we have a button that we are going to use
| | 03:45 | to search Flickr and I give that an instance name of Search_BTM.
| | 03:49 | Let's go to the first keyframe of the
Actions Layer and open up the Actions Panel
| | 03:53 | and in the Actions Panel to review some of the code here.
| | 03:55 | We are importing our XML classes, the Flickr classes which
currently there is only one class in each of those packages.
| | 04:01 | I am importing the component classes so I that
I can use shorthand notation to refer to them.
| | 04:07 | Creating a new instance of the search class and a new instance of
the RSSReader class so let's scroll down and I have the skeleton
| | 04:15 | of the RSS process function right now already
and a function called SearchFlickr which is going
| | 04:20 | to run whenever you click this Search button.
| | 04:22 | Alright, let's define the SearchFlickr function.
| | 04:25 | When you click inside of there and I am going to
type search that's the name of our search object
| | 04:30 | that search system method that's going to search Flickr and I am
just going to pass in whatever string is inside of the text field
| | 04:36 | so Search_txt.txt then we will add
the EventListener on the next line
| | 04:43 | so Search.Add EventListener to listen for the complete event.
| | 04:48 | Now here it doesn't matter whether you add the EventListener
before or after the search line of code because it's going
| | 04:55 | to take a little bit to download the
data anyway so before or after is fine.
| | 04:59 | And I will run a function called DataReady
and we will define that right now.
| | 05:03 | I will do that right under the RSS process function.
| | 05:08 | I am just going to scroll down a little bit and inside of this
function we are going to add an EventListener to our reader
| | 05:23 | and this I want you to do first so Reader.Add EventListener
because we already have XML to process so we want to make sure
| | 05:31 | that we add the EventListener first
that's because we don't want the event
| | 05:34 | to get triggered before we start listening for the event.
| | 05:37 | So it's going to be Event.Complete and we will run RSS
processed and now we will make our reader process the XML data.
| | 05:48 | Remember ProcessXML is a method that we added to your RSS
Reader class to process XML data that we already have,
| | 05:57 | so I am going to pass in some XML data here and that data
is coming from our search objects, it's called search.feed.
| | 06:06 | Feed is a property of our search class that
indicates the RSS Feed returned from Flickr.
| | 06:11 | So now once the RSS is processed let's just trace the RSS data,
| | 06:16 | so I am just going to type trace
and it's going to be reader.feed.
| | 06:21 | And if we get XML in the output window when we test the movie we
are in business so let's test the movie and look for some XML.
| | 06:28 | And before you get to XML you obviously have to click the Search
Flickr button so I will click that button and wait a second
| | 06:35 | or two and you should see some message in the output window
with a whole bunch of XML data and it looks like RSS.
| | 06:43 | If you examine the RSS a little bit you will see channel and
title and item as all these tags are the RSS standard tags
| | 06:51 | and so we can process data from Flickr just
like we can process any other RSS data.
| | 06:55 | You will notice here there is going to be a few things that we
won't be able to access at first and we are going to have to talk
| | 07:01 | about something called namespaces, so I am going to
close this window and close the Flash Player window
| | 07:07 | and so now we can access this RSS data so we are
successfully loading it in from Flickr now it's time
| | 07:13 | to process the data and do something with it.
| | Collapse this transcript |
| Understanding XML namespaces| 00:00 | In this video, we are going to be talking a little bit
about Namespaces and what they look like in XML code.
| | 00:04 | Now, when you get into complex XML documents, you
could create say a blog or a podcast what have you,
| | 00:11 | and you want to create content that's compatible
with somebody's RSSReader, compatible with iTunes
| | 00:18 | or maybe with the Yahoo interface or something like
that, and so these elements or these different domains
| | 00:25 | or different places have different standards and they could
use the same elements, let's say one chooses the name content
| | 00:32 | and how do you distinguish Yahoo content
from iTunes content, for example.
| | 00:36 | That's why something called Namespaces exists.
| | 00:39 | Namespaces allow XML element to be connected
to a certain syntax or a certain standard.
| | 00:45 | So what we are going to do in this movie
is we are going to talk about namespaces
| | 00:49 | and how to access namespace qualified
data using ActionScript 3.0.
| | 00:53 | Now, if you are following along, you can open up
03_namespaces right inside the Chapter 7 folder
| | 00:59 | or you can use the same file you are
working with in the last exercise.
| | 01:02 | So let's go to the first keyframe of the Actions layer and
open up the Actions panel and find the RSS processed function.
| | 01:08 | In this function, instead of tracing reader.feed, let's
trace reader.episodes index 0 and see what we get.
| | 01:16 | So test the movie and in order for us to get the same results,
| | 01:22 | I want you to click inside the text
field and type the same text that I do.
| | 01:25 | Type paradise ridge sculptures.
| | 01:31 | It's actually a collection of images by
another lynda.com author named Dori Smith.
| | 01:38 | She is the author AJAX Essential Training and JavaScript
Essential Training, both are great titles so if you want
| | 01:44 | to learn JavaScript, I highly recommend them.
| | 01:46 | So thank you, Dori, for letting us use your images here.
| | 01:49 | So I am going to click the Search Flickr button and
I am going to get some XML data in the output window.
| | 01:56 | Let's take a look at the data that we are getting.
| | 01:59 | In the item tag at the very top, notice there is some extra
information that doesn't just say item, it says xmlns:media=
| | 02:09 | and then there is this Yahoo address and
then there is xmlns:dc= this Perl address,
| | 02:17 | so what are these things and why do we need them?
| | 02:20 | These are the namespaces.
| | 02:23 | So this first XML namespace is called
media and media is the set of standards
| | 02:29 | by the site I have selected for their custom XML elements.
| | 02:33 | Let's say our media namespace has an element called Title.
| | 02:37 | The media namespace title can be differentiated from the
regular title in an RSS feed because of its namespace.
| | 02:44 | So a namespace is simply a set of elements and/or
attributes that are connected to some site or some standard.
| | 02:53 | And in order to access that data, we are
going to have to change our code in Flash.
| | 02:57 | So let's look at our end goal first.
| | 02:58 | Let's scroll down at the very bottom of this item, you
are going to find an element called media:thumbnail.
| | 03:05 | So we want to get the URL attribute
inside of our thumbnail object.
| | 03:10 | This is going to have our thumbnail image, and you
can see here the height is 75 and the width is 75.
| | 03:17 | And we want to take this data, we want to download this
external image from a remote URL and load it into Flash.
| | 03:23 | But we have to have some way to access the data.
| | 03:27 | So at this point, we don't.
| | 03:28 | So at the current time with our current code,
if we wanted to communicate to this element,
| | 03:32 | we couldn't type media:thumbnail,
that would not reference this element.
| | 03:37 | If we type just media, that would not reference the element
either nor we reference the element if we just type thumbnail.
| | 03:42 | So we are going to need a special syntax in order
to communicate to namespace qualified elements.
| | 03:47 | We will talk about how to do that in the next movie.
| | Collapse this transcript |
| Accessing namespace qualified data| 00:00 | Now let's take a look at accessing name space qualified data.
| | 00:03 | If you are following along I am working in
04_accessing_data.fla in the Chapter7 folder.
| | 00:09 | You can also use the same files from the last exercise.
| | 00:12 | Let's go to their first keyframe of the Actions Layer and
open up the Actions Panel and go to the RSS process function.
| | 00:17 | So now we discussed in the last movie that our goal is
to access the thumbnail image and bring them into Flash.
| | 00:23 | I mentioned before that we can't access that
data unless we go through the name space.
| | 00:28 | Let's talk about how to get to the name space.
| | 00:31 | Now there are a few different ways and we will discuss them here.
| | 00:33 | Above our trace statement I am going
to create a variable called Media.
| | 00:36 | And this is going to represent our media name space so the
data type is going to be name space you can either set it equal
| | 00:42 | to a new incident of the name space class
and then pass in the URL for the name space
| | 00:48 | and remember that's the same URL that's inside of
the XML file that we looked at in the last exercise
| | 00:54 | where you can get the name space from the XML
object, let's do it in the name space method way.
| | 00:59 | So what I am going to do is type reader.feed
so that's our feed there .namespace
| | 01:04 | and then in the parenthesis I am going to pass in a string Media.
| | 01:09 | Remember we talked about the media name space
that's what's holding that thumbnail image from us,
| | 01:14 | so we are going to have a reference to our media name
space here and that's going to return a name space.
| | 01:19 | Now if the other option like I mentioned earlier
is to create a new instance of the name space class
| | 01:23 | and then pass in the full URL of the name space.
| | 01:27 | And I find this way a little bit easier because I
don't have to copy and paste the actual name space URL.
| | 01:32 | If you want to learn more information on name spaces you
can look at the name space method and the name space class.
| | 01:37 | For right now let's talk about how to access that data so
right after episode's index 0 I am going to type .media
| | 01:44 | so first we refer to the name space and then through the
name space we refer to the element name using two colons.
| | 01:52 | We will type colon, colon and then the element name which is
thumbnail and that has an attribute of URL so type .attributeurl
| | 02:02 | and that's it so let's test the movie then we just want to
see the thumbnail URL in the output window so I am going
| | 02:08 | to do our same search for paradise ridge sculptures and we
are going to click search flickr and in the output window
| | 02:21 | that I see the URL for our thumbnail image, nice.
| | 02:25 | So you can access name space qualified elements by
first declaring the name space and then we instead
| | 02:32 | of referencing the element we reference the
name space, two colons, the element name
| | 02:39 | and then through there we can continue on as normal.
| | 02:42 | Don't say that URL attribute was also name space qualified.
| | 02:46 | If it were name space qualified the way that you access it
is you type the name space name right after the "@" symbol
| | 02:53 | and then two colons and then we can access the attribute.
| | 02:57 | But since it's not name space qualified we
can just access it as a normal attribute.
| | 03:01 | Now understand that this syntax is kind of tedious writing with
these two colons and writing this full path media thumbnail.
| | 03:09 | It's a little bit burdensome.
| | 03:11 | In the next movie we will take a look at
a short hand way to write the same thing.
| | Collapse this transcript |
| Setting a default namespace| 00:00 | A really easy way to cut down on a namespace
syntax is to declare a default namespace.
| | 00:06 | Using a default namespace you can
reference namespace qualified elements
| | 00:11 | and attributes the same way you would
reference other elements and attributes.
| | 00:15 | If you are following along I am working in
05_default_namespace.fla in the Chapter 7 folder.
| | 00:21 | You could also just use the same file you
have been using throughout this chapter.
| | 00:24 | Let's go to the first keyframe of the Actions Layer and open up
the Actions Panel and there are a few things that we are going
| | 00:30 | to need to change in our code to shorten the code.
| | 00:33 | I am going to select the line of code where we created our media
variable and I am going to use Command X or Ctrl X on the PC
| | 00:39 | to cut the code and I am going to
paste it in our variables section.
| | 00:42 | So I am going to make it a global variable now
instead of a local variable for that function.
| | 00:46 | And also because our reader.feed.namespace
doesn't exist until the data is loaded,
| | 00:52 | I am going to just declare the hard
coded value for our namespace.
| | 00:56 | So I am going to create a new instance of the namespace
class and then I am going to pass in the URI has a String
| | 01:04 | to this namespace, the URI is http://search.yahoo.com/mrss/.
| | 01:16 | On the next line of code before we load any of our
XML data I am going to declare the default namespace.
| | 01:23 | The syntax is default XML namespace
and then we set that equal to Media.
| | 01:34 | So now we can reference namespace qualified
elements by just their element name.
| | 01:40 | So we cut us down on some time and some code writing.
| | 01:42 | So if we scroll down in our RSS process function I am just going
to erase the two colons in media and get the value of thumbnail
| | 01:50 | as if it were a normal element and
not a namespace qualified element.
| | 01:54 | So let's test the movie and we are going to need to do our search
for Paradise Ridge Sculpture so we all get the same results.
| | 02:03 | Paradise Ridge Sculptures then click Search Flickr
and then you should get the URL right there.
| | 02:11 | So now we have a shorthand way to
access our namespace qualified elements.
| | Collapse this transcript |
| Creating namespace qualified data| 00:00 | You know, while we are on the topic of namespace, let's talk
about how to create namespace qualified elements and attributes
| | 00:06 | when you are creating XML using E4X and ActionScript.
| | 00:09 | If you are not interested in this topic,
you can just skip ahead into the next movie.
| | 00:13 | I just felt that it is important to keep
this in here in case anybody wanted to know.
| | 00:17 | If you are following along, we are working
in 06_creating.fla in the Chapter 7 folder.
| | 00:21 | So let's go the first keyframe in the
Actions layer and open up the Actions panel.
| | 00:26 | And our only code is our namespace that we created
in the last movie, that's our Media namespace.
| | 00:31 | If we wanted to specifically give this namespace a name
and say put it in a new XML element that we create,
| | 00:37 | we can add that name in our new namespace declaration.
| | 00:42 | So I am going to add an extra string right before our URI.
| | 00:47 | I am going to make it the first parameter of our new
namespace constructor, and it's going to be Media.
| | 00:54 | I am just going to turn word wrap on so
my codes are a little bit easier to read.
| | 01:02 | So we have our namespace declared.
| | 01:05 | So now, let's say I want to create some XML data.
| | 01:07 | So I am going to create a variable called XML data and I
will just set that equal to a new instance so the XML class.
| | 01:13 | And we are going to call this NS test, and
that's the name of my outer XML element.
| | 01:21 | Let me close it in shorthand way.
| | 01:24 | And so, I have my XML data and I need to attach the
namespace or Media namespace to my XML data object.
| | 01:34 | To do that, we use the addNamespace
method, so XML data.addnamespace.
| | 01:39 | We pass in Media and then on the next
line, I am going to trace our XML data.
| | 01:46 | And make sure you would get an XML string from it.
| | 01:48 | So XMLdata.2XMLstring, that way we can see our namespace.
| | 01:53 | So you test the movie and you see our XML namespace
Media is declared and we have the URI there.
| | 02:00 | So let's say I wanted to create the thumbnail
element inside of our namespace test.
| | 02:08 | So right below my addNamespace declaration, I am going
to type XMLdata.media::thumbnail = then I am going
| | 02:20 | to type just some string in here so that we can see this value.
| | 02:27 | So let's test the movie now and look at our Media element.
| | 02:31 | So notice that our thumbnail element is namespace qualified.
| | 02:40 | So let's say we wanted to make a namespace qualified attribute.
| | 02:44 | Type XML data.att.media:: and I am just going to
create a test attribute so let me call this test att =
| | 02:59 | and I will just pass in a value of test attribute.
| | 03:07 | So I will test the movie.
| | 03:09 | And so we get that element called Att and we have a namespace
qualified attribute called TestAdd and there is the value.
| | 03:17 | And there is looking how to create namespace qualified XML data,
| | 03:23 | how to attach that namespace qualified
data to XML elements and XML attributes.
| | Collapse this transcript |
| Loading images from flickr.com| 00:00 | Now, we will take a look at using all of the
thumbnail URLs we get from flickr and bringing them
| | 00:04 | into Flash and loading them using the Loader class.
| | 00:07 | If you are following along, I am working in
07_loading_images.fla in the chapter 7 folder.
| | 00:14 | You can also use the same file we have
been working with throughout this chapter.
| | 00:16 | So let's go to the first keyframe of the
Actions layer and open up the Actions panel.
| | 00:21 | So let's scroll down to our RSS processed function.
| | 00:25 | And now, we have our path to our thumbnail URL so I am just
going to come out of that trace statement and if you ever need
| | 00:31 | to refer this path again, you can just
copy and paste the trace statement.
| | 00:35 | Here I am going to create a variable called IMG Loader
and it's going to be an instance of the Loader class.
| | 00:42 | So the data type is going to be loaded.
| | 00:44 | We are not going to instantiate it
just yet, just declare the data type.
| | 00:47 | And we are going to create some variables that
represent the X and Y position of our thumbnails.
| | 00:52 | So I am going to create a variable called thumb
X and the data type is going to be a number.
| | 00:57 | I am going to set it equal to search_txt.x. So the first
thumbnail will be aligned with the X position of our text field.
| | 01:09 | So let's create a variable called thumb Why, and that's
also going to be a number, and that's going to be 65.
| | 01:15 | Now, this is an actual number that I measured out by just putting
my cursor in the right place and just kind of trying on there
| | 01:21 | to see where the thumbnail should
load as far as starting Y position.
| | 01:25 | So now, we are going to create a regular loop, so For,
we will use I as our iterator, and set it equal to 0.
| | 01:36 | We'll run it for the length of reader.episodes so reader.episodes
and then use the length method and where it's a method
| | 01:47 | with XML list unlike an array, and then we will just
add one to it each time to I++ and then For loop,
| | 01:54 | we will create a new instance of the Loader class.
| | 01:56 | So Image Loader was new loader and then
we will make our loader load the content.
| | 02:05 | So, use the load method, we will create a
new URLRequest right here and it's going
| | 02:14 | to be our same path that we had in our trace statement.
| | 02:16 | If you want, you can copy and paste it
right now but I am just going to write it
| | 02:19 | out (reader.episodes indexi.thumbnail.attribute.url) with the
URLRequest and for the load method, and we go to the next line
| | 02:39 | and we will just put it on the stage, so add child Image Loader
and then we are going to go down a few lines and we are going
| | 02:48 | to work with some numbers to mess with
the X and Y values of the thumbnails.
| | 02:52 | So as they load in, we don't necessarily always
know how many thumbnails we are going to load in.
| | 02:56 | So, the first thing I am going to do is check to see if I
modular 5 that refers to the remainder after I is divided by 5,
| | 03:08 | and so if that equals 0 and if I is not equal to
0 because in ActionScript, 0 divided by 5 is 0.
| | 03:19 | So, make sure that I is not equal to 0 and some curly braces.
| | 03:27 | Basically, this one is if I is a multiple of 5.
| | 03:30 | So we are going to add the thumb Y by 80 pixels.
| | 03:38 | Now, if you remember when we looked at our initial data
from flickr, the thumbnail width and height was both 75,
| | 03:48 | and so by adding 80, we push the thumbnails down, height
of the thumbnail plus 5 pixels for a little padding.
| | 03:56 | And then we will set our thumb X, this is just to basically
create a new column so we move all the thumbs down
| | 04:03 | and then we reset the thumb X to search_txt.x. Below the If
statement, I am going to type image loader.x and we will set
| | 04:18 | that equal to thumb X. We will set its Y position equal to thumb
Y and then we will add to thumb X. And we will add 80 pixels
| | 04:31 | for our spacing and with some padding,
and if you test the movie at this point,
| | 04:37 | you will see that there might be too many images at some point.
| | 04:41 | So let's take a look at how it looks.
| | 04:42 | Test the movie and we will just type in our search string here
which is paradise ridge sculptures and then include search flickr
| | 04:56 | and watch the images magically appear on the stage.
| | 05:00 | And remember that these are loading in from flickr only
| | 05:03 | because flickr has crossed the main policy file
saying that anybody can load images from flickr.
| | 05:09 | So this may not work with any website you try.
| | 05:13 | It could work but just know that it might not.
| | 05:15 | So at the bottom, you can see that there are three images
kind of extra that aren't fitting in our visual area here.
| | 05:22 | So what I am going to do is I am going to say once
the loop gets to 15 images, then just stop running.
| | 05:27 | So I am going to close this window and right below thumb X+=80, I
am going to create an additional statement to see if I is greater
| | 05:35 | than or equal to 14, that means that 15
images have been placed on the stage.
| | 05:42 | Then I am just going to type break and break is
just going to make Flash stop running a loop.
| | 05:47 | So test the movie again and then we will do
our same search paradise ridge sculptures,
| | 05:57 | and then click search flickr and there are just our 15 images.
| | 06:04 | So if you want to, you can search
any tags you want in this text field.
| | 06:09 | I am not going to do that now because we don't know what the
results are going to be, but you can search anything you want
| | 06:14 | and click search flickr and see what comes up on your screen.
| | 06:17 | Now, we can grab external images from the flickr and bring them
into Flash so you can add interactivity to them to make them link
| | 06:24 | to other images based on data from our RSS feed
and what we talked about earlier with RSS feeds.
| | 06:29 | You can even add special custom animations to the thumbnail
images or make the large images show or whatever you want,
| | 06:36 | you can use your imagination and use your
ActionScript skills to use this data.
| | 06:41 | So have fun.
| | Collapse this transcript |
|
|
8. Working with PodcastsWorking with the iTunes Namespace| 00:00 | In this chapter we are going to be working with a podcast and
we are going to bring the podcast data from an external URL
| | 00:07 | into Flash, process the data and display
the data linked to podcast episodes
| | 00:13 | and work with the iTunes Namespace all in one movie.
| | 00:17 | Now it may sound like we are going to be doing a lot
but actually it's not going to be that much work.
| | 00:22 | A podcast is setup in RSS pretty much the same way as a blog
is and I am going to show you how that works in just a second.
| | 00:28 | Before I do if you are following along I want you to make
sure your testing server is on and you got PHP running
| | 00:34 | and everything is good in that regard and then I want you to
go to your local root folder so mine is in my sites folder
| | 00:40 | and then in ActionScript folder then there is the 08 folder.
| | 00:44 | Now you can get the files in this folder from
the Chapter 8 folder in exercise files folder.
| | 00:51 | If you don't have exercise files folder or if you don't feel like
copying them you can use the same files that we use when we work
| | 00:57 | with the blog because it's essentially
going to be the same thing.
| | 01:00 | So we are going to open up 01_iTunes_Namespace.fla in Flash.
| | 01:06 | So let's open up that file and this file is
pretty much the same thing as the blog file.
| | 01:11 | The only thing I added is I changed the name at the top to
podcast and at the bottom I added the explicit text field.
| | 01:18 | And don't worry there is not going to be any explicit content
in our podcast, we just want to tap into the iTunes data.
| | 01:24 | So let's go to the first keyframe of the
Actions Layer and open the Actions Panel.
| | 01:30 | Before we test the movie, I just want to show you a
few things that I added since we worked with the blog
| | 01:34 | and I created a variable called explicit_txt
that represents the explicit text field
| | 01:39 | on the stage well the text field that
says explicit on its stage rather.
| | 01:43 | At the bottom of the code I changed the URL essentially
from site/blog/RSS.XML to site/podcast/RSS.XML.
| | 01:54 | You can get this full URL if you go to
www.lynda.com/go/actionscript and then you click on the podcast.
| | 02:04 | From there you can get the podcast
RSS feed and paste that link in here
| | 02:07 | and make sure you have http at the beginning instead of feed.
| | 02:10 | And that's really all I did up to this
point and I want to test the movie
| | 02:14 | and to show you how great our system is for processing RSS data.
| | 02:19 | So Command F12 on the Mac, F12 on the PC to test in a browser
and remember we are going to have to test this on a server
| | 02:25 | because we are using PHP to pull the external RSS data.
| | 02:28 | So we have to add in local host to your URL and you will see that
the podcast data loads in and we can look at our podcast episodes
| | 02:36 | through our combo box, we have the date and you can
even click View Online to go to the podcast online.
| | 02:47 | And think about that.
| | 02:48 | If we had a blog before all we had to do to make our
reader read a podcast is change the URL so you can tell
| | 02:56 | that all the content is the same so we have channel and item
| | 02:58 | and our XML structure is pretty much this
exact same for a podcast as it is for a blog.
| | 03:03 | So that's easy.
| | 03:05 | So now let's say what if we wanted to
grab where the content is explicit.
| | 03:08 | Now the explicit tag is part of the iTunes
Namespace so it's a namespace qualified tag.
| | 03:14 | So I am going to close this Window and
return to Flash and let's access that tag.
| | 03:20 | I am going to select the update text function and then comment
it using the Comment button to apply a blog comment to all
| | 03:27 | of the code inside of the update text function and
then I am going to set the text to My Text Field
| | 03:31 | so info_txt.text=episodesindex0 and right
before episodes, I am going to add on reader
| | 03:41 | so reader.episodesindex0 so that's
going to be our first episodes.
| | 03:45 | We can look at our raw XML data.
| | 03:47 | So let's test this in the browser and then again we
are going to need to test this on our testing server
| | 03:52 | so let's type in your local host info right here.
| | 03:58 | If you scroll down, you will see the iTunes
qualified tags so there is iTunes explicit.
| | 04:06 | So that's what we are looking to get to.
| | 04:07 | So let's go back to Flash and I am going to delete
that line of code and I am going to uncomment the code
| | 04:16 | that I commented using the Remove Comment button
and then at the bottom of the update text function,
| | 04:21 | going to type explicit_txt.text equals and I am
going to type explicit: space and then I am going
| | 04:37 | to concatenate the explicit value from the current episode.
| | 04:43 | So I am going to type reader.episodes and the
index is going to be episode_cb.selectedindex.
| | 04:55 | The element is called explicit.
| | 05:02 | So now if you remember we can't access
this element unless we specify a namespace.
| | 05:08 | So inside of the update text function at the very top
of the code I am going to specify a namespace here.
| | 05:14 | So I am going to type iTunes and the data
type is going to be a namespace and I am going
| | 05:21 | to set it equal to reader.feed.namespaceiTunes.
| | 05:27 | Now to reference the namespace qualified explicit element,
| | 05:37 | all I have to do is click right before explicit
then write _________ 05:42 itunes::explicit
| | 05:44 | and from there we can get the value of that element
and so it will say explicit and either no or yes.
| | 05:54 | So let's just test this on a browser and then test it on our
testing server and then we get the value in our explicit field.
| | 06:11 | So now you can work with a podcast using ActionScript pretty much
in the exact same way that we work with the blog and if you need
| | 06:16 | to reference the iTunes elements then you can use your
namespace skills to access that namespace qualified data.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | Well that's it. I sure hope you had a lot of fun.
| | 00:04 | In this title, we got to learn a lot about XML data. Started
off with the basics of E4X and working with RSS and then we
| | 00:11 | took it up a level and worked with PHP to grab data
from remote URLs and save the data locally. Things that
| | 00:17 | you just can't do with ActionScript. We looked at working with a blog,
with a podcast and we even grabbed data from Flickr and loaded images
| | 00:25 | from remote URLs right into Flash.
| | 00:28 | So I really hope you had a good time and that
you learned a lot too. See you next time.
| | Collapse this transcript |
|
|
