Home arrow Day 3
Day 3 PDF Print E-mail
During day three, you will create a fully-functional website. The site will include a photo and video gallery using Flash UI components and scrollable text boxes. You will create the main and sub-navigation systems for the site so that all pages can be navigated.

Red4.FLA

  • [Note: Link 04's name was changed in this file]
  • The remaining pages of the site are created, each on its own keyframe of the timeline.
  • A new layer is created named labels. Every keyframe (webpage) is gived a label name on the labels layer.
  • Dynamic textboxes are created and made scrollable. Each text box is given unique a Instance Name in the Property Panel.
  • A UIScrollbar is attached to each text box.
  • View the published file (since the Actionscript hasn't been created for the navigation, there is currently only one Stop(); action in the timeline for testing purposes. It is currently set on the "Resume" label. Consequently, when you view the movie, the playhead will play through the first four pages of the sight and stop on the Resume page.
  • Download the file - right-click on link and save - red4.fla

The other pages of my Flash website:

The "About" page. On the left, the bold red text (ie, Illustration Friday) will be turned into hyperlinks in a future Flash file.

The main textbox has a UIScrollbar component attached.

On the "News & Events" page, I imported images from PhotoShop. While I was laying out this page, I found that the original photos I created were too large. However, after I resized them in PhotoShop, I didn't need to RE-import them into my Flash file.

You can do an Update from the Library and the changes you made to the photos will automatially be updated in the Flash layout.

The "Gallery" actually has two pages - a photo gallery and a video gallery. The photo gallery uses the UILoader component. The video gallery uses the FLVPlayback component.

I also created a generic button using Filters in Flash. I used an new instance of this generic button for the thumbnail buttons on each of the gallery pages.

By doing this, I didn't have to create 8+ buttons. All I had to do was bring in the thumbnail images, lay the generic button on top of each, give each new instance of the button a new Instance name and Voila - with Actionscript I'll add later, I'll have a photo and video gallery that can load new content using these thumbnails.

In this version of the website, my resume is all in one scrollable textbox. In a future Flash file, I will show you how to break that content up into different "pages" to the resume so the text box doesn't have to scroll down so long.

Red5.FLA

  • [Note: In order to have a "Home" button for my navigation system, I converted the "header" to a button symbol. It now works as a button to the "home" page.]
  • At the end of this step...you will have created a fully functional Flash website. There are very few changes to the design or layout of the site in this Flash file. All the updates are created in the Actions Panel to make the site interactive and to make the navigation system actually work!
  • The Stop(); action that is on the timeline is moved to the "home" label; all Actionscript for the navigation buttons are placed on this keyframe.
  • Remember: In ACTION SCRIPT 3, you no longer place the Actionscript ON the button. You will write a function for the button and then will "call" the function using an Event listener on the button. All of this is done in one keyframe.
  • I know this seems much harder and more complicated, but in actuality, when you get used to it...Actionscript 3 is MUCH easier because all of your Actionscript is placed on the timeline instead of on your timeline AND on various buttons and movieclips. The Actionscript is much easier to locate and manage.
  • Sub-navigation buttons are created for the Gallery section and Actionscript is added.
  • Actionscript is placed on all of the thumbnails of the both pages of the gallery.
  • "Invisible" buttons are created and placed on any text being used as hyperlinks.
  • When you test the movie at this point and go to the Video Gallery, you'll notice that when you click on another button (move to another frame of the timeline) the video keeps playing. A piece of Actionscript is placed on this frame to stop the movie from playing when you move to another frame of the timeline.
  • View the published file
  • Download the file - right-click on link and save - red5.fla

 
< Prev   Next >

Login Form






Lost Password?
No account yet? Register

 

 

View Kary Boan's profile on LinkedIn