By Otobong Ini Archibong
This tutorial I will show you the steps you have to take in making a complete image viewer in this example we are going to use an Ipod frame as the interface.
Enjoy!!!
Click here to view the final work.
Step 1
Create a new flash document. And Setup the layout as follows:
Width-300
Height-400
Then rename the current layer to “frame” and insert a new layer, also rename the new layer to “interface”.
Step 2
Click on the frame layer and then double click on the rectangle tool ® type in 10 as the value of the corner radius and click ok. Now draw a wide rectangle and then select your rectangle and give it the following properties.
Width-236.6
Height-248.7
x-(-118.3)
y-(-124.3)
Background colour-#FFFFFF (white)
Stroke colour(none)
Then select it and convert to a movie clip. After converting it to a movie clip select it once. And on the property bar click filter the click the plus (+) sign and select “Drop Shadow”
Input these values
Blur X-10
Blur Y-10
Strength-100%
Quality-High
Colour-#CCCCCC
Angle-70
Distance-8
This is how our frame will look like after you might have done all these.
Now lock the frame layer.
Nice! Now we may proceed to making the contents.
Step 3
Click on the “interface layer” and take the rectangle tool again but this time select #999999 as the stroke colour, stroke height-2 and fill colour – none.
Draw a wide rectangle inside the frame like this.
Cool!!!!
Step 4
Now select the rectangle you have just drew and convert it to a movie clip. After converting it to a movie clip, double click on it and inside the movie clip. Insert 2 extra layers. Name the first one “pictures” and the second “button”.
But remember to drag layer 1 to the center i.e. inbetween the two new layers you have created. See screenshot below.
Lets start with making the buttons.
Step 5
Click on the buttons layer and then take the Rectangle tool and draw a square with this fill colour #333333, make sure you disable the stroke colour.
(remember to set the corner radius to 0)
Now draw a rectangle of this nature.
Take the rectangle tool again and draw a smaller rectangle, with this fill colour-#CCCCCC. After drawing it use the Selection Tool (v) to crop the other edges to form something like this.
You can now see that we have a play button. Now select it and convert it to a button symbol and press ok.
Drag it and place in this position.
Hope you’re having fun.!!!
Now we proceed to making the over stage of the play button. Double click on your newly created play button and select the “over” frame in the timeline and press f6.
Concert everything your have on the over frame to a movie clip then on the property bar, select colour, and select tint. Set the tint values as shown below.
Go back to your. Buttons layer by clicking on the “Symbol” in from of Scene 1 in the timeline.
Step 6
Take the oval tool (O) and draw two circles with the same properties you gave to your play button. But the play (icon) will change to this.
the square inside the circle should be white fill.
Draw another circle but change the position of the play button to this.
Now select the first circle on the left side of your play button, and convert it to a button symbol.
Repeat the same procedure you did on the over frame of your play button.
Does also the same thing with the circle at the right hand side of your play button.
After you are done with all these.
Step 6
Click on frame 10 of your buttons layer and press f6 to insert a new keyframe. Click again on 20 and insert a keyframe, repeat the same steps on 30, 40 and 50 and 59.
This is how your timeline should look like.
Repeat step 6 on layer 1 also.
Now we have this
Step 7
Click on the pictures layer, and repeat the same step.
After doing this. Click on the first frame of the pictures layer and press f9 to bring up the actions panel. Type in
Stop();
Now close the actions panel and go back to your pictures layer.
Step 8
Now we will import six different photos that are going to be used.
If you don’t have any photo on your pc. Save these photos below. (lol)
Now you have to look for a biro pen and a book so that you can write down the width and height of the images you are going to use.
Step 8
Import all these photos into your library (from file > import > import to library) browse and locate all of them and import them to the library.
Now lets name the frames so that we won’t make any mistake.
Click on frame one of the pictures layer and on the property panel type in “one” as the frame label.
Repeat the same step to Frame 10, frame 20, frame 30, frame 40 and frame 50.
Now beginning from frame 1 we have the frame labels as follows:
One, two, three, four, five, six. (see screenshot below).
We are now going to import these pictures one by one.
Click on frame 1 and drag the picture below from the library onto the stage.
Select it and convert it to a movie clip with the following properties.
Width-203.4
Height-101.3
x-(-273.8)
y-(-54.5)
Click on frame 9 on the pictures layer and press f6. Select the picture on the stage and on the property bar choose color > alpha type in 0% as the alpha value.
Repeat step 9 to layer 10, 20, 30, 40 and 50 each importing different pictures. Starting from the picture below.
and on frame 20 this
and on frame 30 this
and on frame 40 this
finally frame 50 this
Make sure you give them the same properties as the first image i.e.
Width-203.4
Height-101.3
x-(-273.8)
y-(-54.5)
Step 10
Click on the pictures layer and on the property bar Select Tween – motion.
Now lets add the navigation to the buttons.
Step 11- Final Step
Go back to frame 1 of buttons layer.
FRAME 1 - 9
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(2);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("six");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("two");
}
FRAME 10 – 19
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(11);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("one");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("three");
}
FRAME 20 – 29
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(21);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("two");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("four");
}
FRAME 30 – 39
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(31);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("three");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("five");
}
FRAME 40 –49
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(41);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("four");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("six");
}
FRAME 50 –59
Click on the play button and press f9 to bring up the actions panel.
Type in this on the action script of the play button on frame 1.
on (release)
{
gotoAndPlay(51);
}
Click on the circle on the left side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("five");
}
Click on the circle on the right hand side of the play button
And type in this on the script of the circle.
on (release)
{
gotoAndStop("one");
}
Now click on Scene 1 to go back to the main stage. And stage your movie by press Ctrl Enter.
Conclusion
I hope this tutorial would have helped you. If you still find it difficult please don’t hesitate to drop your comments. You can also download the full .fla source file below.
Posts
