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

03 Now open the DEV folder and take a look at FlashiPhone.fla. Looking at the
AS layer, you’ll notice some simple code which is used for setting up the drag-and-
throw technique, similar to that of the iPhone. Run the code and have a play with
throwing it left to right.
this works: if we start with lines 14-69, we have our basic
variable declarations and then our two public methods – one
for setting up the events for dragging and throwing, and then a
reset method for when we need to remove this functionality
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
trackContentThrow, which checks if the velocity was over the
movement threshold or if the content itself was over half way
across the screen. After this, we move the content with either
the nextSection, prevSection or getSection methods.
06 Lines 115-152 are used for updating the position of the content. The
nextSection method tries to move the content on, whereas the prevSection method
tries to move back. Once the getSection method is called, this checks where the new
position for the content is and moves to it. Once there, it resets the velocity for the next
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
to this content’s position. Every time we create a new set of
counters, we remove the last set in case the amount has
changed. This utilises the clean-up method on line 215 for
looping through and removing movies from a display list.
08 Open FlashiPhone.fla from the FINAL folder. You’ll notice in the Properties
panel that we are using a document class to set up this file. If you click inside the
iPhone holder movie on stage, you’ll see all the movies we are using already set up.
Run the code and play around with it. Open content.xml and play with putting new
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
(as we did in the last file). We disable mouse events for any movies sitting above the
Content pane. We then start to load the content for this interface and set up some
listeners for resizing content, then call that as default for when the movie first
launches. Once the XML has loaded, we call the xmlLoaded method, which sets a
reference to the loaded XML.
10 Lines 73-123 cover creating the menu. Firstly keep a
reference of the original position of the main menu, then set up
a mouse event for the home button. Next, loop through the
XML, and set up and load the images that will act as buttons in
the menu. Once they have loaded, call the showImg method for
animating them in.

12 Lines 207-231 in the getSection method cover

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

15 So, where could we take this

14 On lines 283-336 are some
13 On lines 237-277 we load the images from the XML utility methods for loading our XML files:
content we selected and position them based on their number loading external content; an error
reference. We then check to see when all of the images have catching method; a resize method to
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.
in the future? The next step could be to
have a multi-directional drag-and-
throw system, or to implement real-time
blurring when you throw the screen.
Have a play around and, hopefully, this
will lead to some exciting times whilst
building your portfolio site.

Computer Arts August 2009 www.computerarts.co.uk

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