Publishing and sharing PDF portfolios online using Fireworks CS4 and Acrobat.com

Additional Requirements

Import Files in Multiple Pages extension (by Sarthak Singhal)

• Get info

Acrobat.com

• Get info
• Launch

Acrobat Reader 9

• Download

Digital images (optional)

A folder of images on your hard drive to use for the slideshow—either your own or the images provided in the sample files

In the United States, current educational reform legislation emphasizes the importance of leveraging the power of technology in all areas of K–12 education—from reading to science to special education. To achieve information literacy, students must learn to access, evaluate, and synthesize information and then have the capability to use that information productively. The Internet offers a powerful worldwide set of digital technologies, making it an ideal environment to ensure that every child reaches this goal. (For more information, see The National Education Technology Plan.)

Sadly, effective use of technology to enhance teaching and learning lags far behind the effort to equip American schools with the latest hardware and software. Today many schools across the globe (and almost every K–12 public school in the United States) have broadband access. However, having an Internet connection in a classroom or school computer lab does not automatically result in an improved learning environment. Fortunately, some promising school projects are using the Internet to share ideas and connect with each other.

Here are some examples:

• International collaboration projects enable students to communicate directly with other students in classes all over the world. This cross-cultural interaction with new learning opportunities offers amazing opportunities for improving student performance and technology skills. This type of program is very popular with both students and teachers because it encourages participation. One of the key tools available to educators who would like to internationalize their classrooms is the US Department of Education's Teachers' Guide to International Collaboration on the Internet.
• WebQuests are inquiry-based lessons posted online that are particularly suited for teaching science and social studies. Most of the information comes from the Internet, and links are provided in order to minimize the time spent by students searching for the information that they need to complete the project. For an overview of WebQuests visit WebQuest.org.

Technology-based programs are frequently adopted with a promise of simplifying teachers' work. However, in practice many of these proposed "solutions" often complicate the process and overwhelm everyone involved. In this article, we outline the solution we've implemented using Fireworks CS4 and Acrobat.com to share student portfolios with other students globally, leveraging the functionality available in PDF documents.

Case study: Jackson-Via School Portal

As a volunteer tutor at Jackson-Via Elementary School in Charlottesville, Virginia, in the United States, Ruth Kastenmayer has a background in web development and instructional technology. She is always investigating new ways to implement web-based instruction and online training.

John Champion, CEO of CommToolz, recently provided a generous gift to deploy the Adobe ColdFusion powered Jackson-Via School Portal very quickly and easily. The creation of the school portal (named "Jump!") made a huge difference in adopting web technologies because the site interface greatly simplifies the process for teachers and students to create web pages with links and image files. The students now have an intuitive way to post their drawings, writings, or photos online, and every piece of content is stored in a central database (see Figure 1).

The collaboration was so successful that Ruth and John will continue their endeavors to bring technology to the students. In the coming school year, focus will continue on International projects through the International Education and Resource Network (iEARN). Students will begin developing WebQuests that are specific to the regional area Charlottesville, Virginia, where the students reside. One of the top priorities of the technological curriculum will include creating and analyzing WebQuests, which use Google Earth to bring the rest of the globe into focus.

One of the many iEARN projects of interest is Eye to Eye, which encourages the creation of postcard-sized images that become part of a coordinated exhibition hosted around the world. Using drawings and photos as a means of communication is very appropriate for students 5–10 years old. A picture is truly worth a thousand words, and needs no translation!

In order to participate in the Eye to Eye project, teachers must be able to instruct students on the process of creating postcard images from photos or drawings and then uploading them for others to view. One of the best ways to optimize student drawings is to scan them directly into Fireworks, crop and resize them, and then perform any necessary color correction. A student in Kristofer Bowmaster's second-grade class created an Earth Day drawing on construction paper for the project (see Figure 2).

It may seem like a daunting task to generate a portfolio of drawings and export a PDF file to be shared on the web. In reality it is extremely easy. The students can digitize and distribute their images online using the new features included with Fireworks CS4. In the next section of this article, we'll show you how to do it.

Using Fireworks to produce a PDF portfolio

In this section we provide the instructions for producing a portfolio of photos to be archived or shared on the Internet.

If you haven't already, be sure to download the sample files provided on the first page of this article. After downloading the sample files, unzip the archive and place the sample images folder in the desired location on your computer.

Create an empty folder named slideshow to contain the finished sideshow. (The Slideshow command will create an index.html file in the slideshow folder. Be careful not to use a folder that already contains a file named index.html or else you'll override your original HTML file.)

The downloadable sample files include a collection of photos taken in Charlottesville, Virginia, USA, a popular destination for photographers. The sample images include several good candidates for color correction and image optimization using the tools available in Fireworks CS4.

Alternately, you may choose to use your own photos as you follow these steps. The sample file photos are generic, taken straight from the digital camera in JPEG format.

Step 1. Creating a slideshow in Fireworks CS4

The Create Slideshow command in Fireworks is an easy way to produce slideshows, but it is also a very helpful utility for creating folders of images and thumbnails that are resized and optimized. Follow these steps to create a slideshow:

1. Launch Fireworks CS4.
2. Select Commands > Create Slideshow to access the Create Slideshow dialog box.
3. Enter the Title and Description information under the AlbumBook header. For the purposes of this article, enter the title: Cities. Enter the description: City Scenes. Use the default values for Album Properties, Captions, Filters, and Slideshow Properties (see Figure 3).

4. Click the plus "+" icon to add an album, then navigate to the folder that contains the slideshow images. Select all of the image files in the folder. Enter a title and folder name. For this slideshow, enter Charlottesville in both fields.
5. Click the Export Options in the AlbumBook Properties dialog box to choose the destination folder to save the completed slideshow. Use the default settings. To populate the Export path, navigate to a folder where you wish to create the slideshow. Click Create.
6. Minimize Fireworks. Browse to the folder that contains the exported slideshow. Open the folder to see that a new folder named Charlottesville has been created. This folder contains the resized and optimized slideshow images, along with a folder of thumbnails.

Note: If you would like to add more albums to this AlbumBook, do not move the slideshow.xml file. If you move or delete the XML file, you won't be able to edit the slideshow later using the Slideshow Creator.

At this point you've created a Fireworks slideshow, which will run in your default browser on your local computer and can be uploaded to the Internet. If you look in the slideshow folder, you'll see you've also generated a very useful folder containing images and thumbnails that are perfect for uploading to a content management system (see Figure 4).

To learn more about using the Create Slideshow command, see Ruth's article, Creating a professional-looking slideshow.

Step 2. Using the Image Editing panel to update the image files

Fireworks CS4 makes it easy to prepare and optimize image files before uploading them to the Internet. In this section we describe how you can quickly update your image files:

1. Launch Fireworks CS4.
2. Open the optimized images in the slideshow folder named Charlottesville. As you review the photos, you'll notice that some of the images in the folder would benefit from color correction and adjusting the brightness/contrast. The Image Editing panel offers the ability to make these changes, and more (see Figure 5).

3. To access the Image Editing panel, select Windows > Others > Image Editing.
4. You can choose from the list of image editing options. You can even boost the brightness of a picture taken at dusk. We purposely included some images with dark exposures in the sample files folder. For example, take a look at the image named 100_0356.jpg. While that image is selected in Fireworks, choose the Adjust Colors category and then choose Brightness/Contrast from the list displayed in the Image Editing panel.
5. The Brightness/Contrast dialog box appears. Move the Brightness slider to the right until it displays a value of 39. Then move the contrast slider to the right, setting the contrast value at 28.
6. Check the Preview check box so that you can review the changes to the image as you make the new settings.
7. After adjusting the Brightness/Contrast, compare the results in the before and after images (see Figure 6).

For more information about using the Image Editing panel, read Ruth's article, Using the new image editing panel in Fireworks.

In addition to making color corrections, you can choose to add some text to the pictures. Press the T key on your keyboard to access the Text tool. Place the cursor where you wish to add text on your image and begin typing. It's that simple. Once you've entered the text you wish to add, select the text and choose the font, font size, color and other settings using the Property inspector.

Tip: If the Property inspector is not currently open, you can access it by selecting Window > Properties.

In Figure 7, we added text to one of the slideshow images. Don't forget about all of the filters and effects that are available in Fireworks CS4. You are limited only by your imagination.

Step 3. Using the Import Files in Multiple Pages extension to create a multipage document

First go to the Fireworks Exchange and download the Import Files in Multiple Pages extension by Sarthak Singhal:

• Download the extension

1. Quit Fireworks CS4 and then double-click the file you downloaded (Import Multiple Files.mxp) to install this extension in Fireworks. Click to agree to the End Users License Agreement for the extension, and then relaunch Fireworks.
2. After you install the extension, select Commands from the menu bar. You'll see the Import Multiple Files option in the Commands menu in Fireworks (see Figure 8).

3. Select Commands > Import Multiple Files > In a single document. The Files to Process dialog box appears. Choose Custom and navigate to the folder containing your slideshow images and select all of the images. Click Open and then OK. You've just created a multipage Fireworks document.
4. To view the layers in your document, click the Pages icon to open the Pages panel (see Figure 9).

Step 4. Exporting a multipage Fireworks file as a PDF portfolio

Select File > Export and then choose the Adobe PDF from the Export drop-down menu to export a multipage Fireworks document as PDF. The newly generated PDF portfolio opens in Adobe Reader 9 or later (see Figure 10).

If you click and drag on the scroll bar, you'll see a succession of thumbnails displayed as a sideshow. If desired, you can also add comments and attachments to the PDF file. We can't imagine a better or easier way to save photos, student artwork and writing samples!

Step 5. Uploading PDF portfolios to Acrobat.com

To share your new PDF portfolio, simply create an account on Acrobat.com and upload your PDF file using the MyFiles interface. You can choose to keep your files restricted (private) or make them available to anyone who has the URL. If you choose to keep the file available, you can link to the PDF document from a website or include the link in an e-mail message to distribute it.

As the Jackson-Via "Jump!" project progresses, we'll be scanning student drawings into Fireworks to optimize them before posting the files online. We also plan to train the students how to use Fireworks CS4 as a vector drawing tool. After they've finished their projects, we'll create PDF portfolios of their work and show them how to upload their portfolios to Acrobat.com.

Sharing files and enhancing collaboration and communication

The Jackson-Via school portal provides teachers with an easy way to communicate with one another, as well as share lesson plans and WebQuests. The portal also facilitates the upload process to publish classroom journals and electronic portfolios.

Fortunately, Acrobat.com offers a free, complementary set of online services to create and share documents, communicate in real time, and simplify working with others in remote locations. With a free membership on Acrobat.com, you can do the following:

• Store up to five gigabytes of files in your online organizer, accessible to anyone with an Internet connection and a web browser, if you wish.
• Share large files with others without sending large email file attachments. You can limit access to only a specified list of guests, or choose to make your documents available to everyone by embedding a link on a web page or blog.
• Convert up to five documents to PDF.
• Create electronic documents with Adobe Buzzword, an online word processor.
• Conduct web meetings with Adobe ConnectNow web conferencing software.

Acrobat.com offers all of these services with an intuitive user interface (see Figure 11).

ConnectNow

Acrobat.com was instrumental as we set up the Jackson-Via school portal. We used ConnectNow to demonstrate the CommToolz user interface, facilitate feedback sessions, outline the project goals, and answer teachers' questions about the portal site. Because it is very flexible and completely customizable, CommToolz was a perfect fit to develop the project and meet all of the requirements.

The ConnectNow feature available on Acrobat.com enabled all of the development team to meet with the stakeholders for the project and discuss the details online, in real time (see Figure 12).

One of the most important highlights of our school portal project is the creation and publication of year-end classroom ePortfolios showcasing student's work. Thanks to Acrobat.com, it was extremely easy to link from our Jackson-Via Jump! ePortfolios to the PDF portfolios we created using Fireworks CS4. We used the same process described in this article to share the PDF files on Acrobat.com. The 5 GB storage space allowance makes it possible to add very large files, such as digital video, to each class's annual ePortfolio (see Figure 13).

Buzzword

We used Buzzword to collaborate as we developed the template for our WebQuests and a WebQuest QuickStart guide (see Figure 14).

My Files and Share

John shared the CommToolz documentation with the rest of the development team by uploading it to MyFiles on Acrobat.com and using the Share feature (see Figure 15).

We continue to share the CommToolz documentation as well as the WebQuest template and QuickStart Guide with Jackson-Via teachers and staff so that they have the files available for reference at school or home—wherever they might have a few minutes to devote to this project. Teachers are delighted that they can upload large files to the MyFiles area of Acrobat.com and link to them as student projects in a classroom portfolio (see Figure 16).

Where to go from here

Fireworks CS4 and Acrobat.com provide a wonderful set of tools for educators who wish to share their educational environment with the world—or indeed for anyone who works in a collaborative environment and needs to share digital documents electronically. Acrobat makes it easy to create a simple PDF portfolio of images quickly and share them with the global community. Acrobat.com (used in conjunction with the free Acrobat Reader 9) ensures that all members of a school community, students, teachers, staff, and parents have the ability to collaborate on projects and share files.

Adobe Acrobat 9 Pro Extended includes all the features and functionality of Acrobat 9 Pro, plus the ability to integrate a wider range of content in a PDF portfolio, create interactive presentations with Adobe Presenter software, convert and share video in PDF format, create PDF maps, convert virtually any 2D and 3D designs to a PDF document, and enjoy expanded 3D capabilities with the new Adobe 3D Reviewer.

We wrote this entire article in Buzzword, shared documents on Acrobat.com, and used screen-sharing and instant messaging in ConnectNow. Alan Musselman, Adobe's premier Fireworks guru, served as our reviewer. This article serves as an example of how a group of remote team members leveraged the Acrobat.com technology to facilitate publication of an online project.

Don't take just our word for it. Download the software and try it out for yourself. We think you'll be pleasantly surprised.