You are on page 1of 3

70 Technique

Flash CS4
Slide
navigation
Want to bring iPhone-
style slide navigation into
your own online portfolio?
Stewart Hamilton-
Arrandale shows you how
Re-creating the beautifully simple drag-and-throw functionality
of the iPhone to create a simple yet visually pleasing portfolio
centrepiece for your web page is easy. What’s more, by controlling
the content through an external XML file, you’ll be able to use this
technique to add and edit your portfolio without the need of
redesigning or recoding your site. The advantages of this approach
are two-fold: you can concentrate on the visual casing of the design,
while the content can be updated and edited independently.
In this tutorial, we’ll be looking at the interactive
elements and the way your audience will interact with a drag-and-
throw portfolio. We’ve based our design on the iPhone, but have set
up the tutorial so you can mimic this action with any design you
choose. We will be using ActionScript 3.0 and utilising external XML
files for updatable content to help make this project flexible for all
your future needs.

01 Copy the relevant files from this issue’s disc to your computer. Open the
PSDs folder – the document is set up at the correct size for the content used in this
tutorial. I’ve chosen to use an iPhone image, but you can choose any background image
you like. Simply drop your image in place of the white Holder layer. This will be the
canvas for our iPhone-style interface.

Stewart Hamilton- On the disc Time needed


Arrandale The files needed to 1 hour
The award- complete this
winning freelance tutorial, plus the full
digital designer has screen-grabs for Skills
produced Flash each step of this ActionScript
solutions for the tutorial, can be animation
likes of Crown Paints found in Basic
and Original Source, DiscContents\ ActionScript 3.0
and delivered motion Resources\Flash understanding
graphics pieces for Simple image
Liverpool Capital of manipulation
Culture ‘08. To find Simple Flash
out more see www. graphics
creativewax.co.uk Basic
understanding
of XML
02 All the content elements used in this tutorial are saved out as JPEGs and
loaded individually into the Flash interface. This could be expanded easily in the future
to accommodate loading SWFs or other file formats. All the content has already been
saved out into the FINAL\imgs folder, ready to be used in the final interface.

Computer Arts August 2009 www.computerarts.co.uk

ART164.tut_flash 70 11/6/09 6:20:30 pm


71

04 Open the DragThrow.as file. We’ll run through how


this works: if we start with lines 14-69, we have our basic
03 Now open the DEV folder and take a look at FlashiPhone.fla. Looking at the variable declarations and then our two public methods – one
AS layer, you’ll notice some simple code which is used for setting up the drag-and- for setting up the events for dragging and throwing, and then a
throw technique, similar to that of the iPhone. Run the code and have a play with reset method for when we need to remove this functionality
throwing it left to right. and reset our current position back to its default position.

05 Lines 76-109 are the main methods for tracking the


position and velocity of the dragging. Firstly, in
trackContentDrag, we start to drag the content and set a loop
for checking its position and release of the mouse. We then call 06 Lines 115-152 are used for updating the position of the content. The
trackContentThrow, which checks if the velocity was over the nextSection method tries to move the content on, whereas the prevSection method
movement threshold or if the content itself was over half way tries to move back. Once the getSection method is called, this checks where the new
across the screen. After this, we move the content with either position for the content is and moves to it. Once there, it resets the velocity for the next
the nextSection, prevSection or getSection methods. interaction and also updates the counters on screen to reflect the new position.

07 Next, lines 158-209 cover the creation of the


counters on screen and add mouse events for jumping directly 08 Open FlashiPhone.fla from the FINAL folder. You’ll notice in the Properties
to this content’s position. Every time we create a new set of panel that we are using a document class to set up this file. If you click inside the
counters, we remove the last set in case the amount has iPhone holder movie on stage, you’ll see all the movies we are using already set up.
changed. This utilises the clean-up method on line 215 for Run the code and play around with it. Open content.xml and play with putting new
looping through and removing movies from a display list. content in this and re-ordering it to show how this affects the interface.

www.computerarts.co.uk Computer Arts August 2009

ART164.tut_flash 71 11/6/09 6:20:31 pm


72 Technique
Slide navigation

09 Open the FlashiPhone.as and look at lines 13-68. First we declare our
variables, then in our set-up method we create all the drag-and-throw functionality 10 Lines 73-123 cover creating the menu. Firstly keep a
(as we did in the last file). We disable mouse events for any movies sitting above the reference of the original position of the main menu, then set up
Content pane. We then start to load the content for this interface and set up some a mouse event for the home button. Next, loop through the
listeners for resizing content, then call that as default for when the movie first XML, and set up and load the images that will act as buttons in
launches. Once the XML has loaded, we call the xmlLoaded method, which sets a the menu. Once they have loaded, call the showImg method for
reference to the loaded XML. animating them in.

12 Lines 207-231 in the getSection method cover


getting a new set of content for a section we have clicked on.
11 Next look at lines 129-201. While this looks like a lot of code, it’s just doing a Firstly, destroy all the old content on screen. Next, use the
few basic animations and mouse-tracking techniques for when we roll over the menu. number reference stored in the menu item we clicked on to get
This can easily be replaced with something much simpler or more complex later on. an XMLList from the main XML content to loop through, load
Also, we have the checkMenu, showMenu and hideMenu methods, which control and create the new content items. Lastly, tell the drag-and-
showing and hiding the main menu system. throw class how many pages of content there is going to be.

15 So, where could we take this


in the future? The next step could be to
have a multi-directional drag-and-
throw system, or to implement real-time
14 On lines 283-336 are some blurring when you throw the screen.
13 On lines 237-277 we load the images from the XML utility methods for loading our XML files: Have a play around and, hopefully, this
content we selected and position them based on their number loading external content; an error will lead to some exciting times whilst
reference. We then check to see when all of the images have catching method; a resize method to building your portfolio site.
been loaded to see when we should show them. Once they have update the content position when the
all loaded, we hide the preloader and set up the drag-and- screen size changes; and a
throw class. We also have our simple show-and-hide loader destroyContent method for removing
methods for showing the loader screen. loaded content from screen/memory.

Computer Arts August 2009 www.computerarts.co.uk

ART164.tut_flash 72 11/6/09 6:20:32 pm