Make Purple Mountain Hotel Panorama Step by Step
Introduction
This is typical sample to combine Flash, HTML code and panorama. Click the 4 toggle buttons on the left, different panoramas will show on the right.
Symbols Needed
1£® background image
2£® button images
3£® panoramic images
Process Symbols
You may create background image and button images in Photoshop or Flash. In this article, we choose Photoshop to create background image, image with mouse on and image without mouse on. Please note that when you place mouse on the image, the effect is a movie. When you click it, only the color changes and we will realize it in Flash.
These are symbols:
Figure 1£º background image
Figure 2£ºButton 1Status 1 |
Figure 3£ºButton 1 Status 2 |
|---|---|
Figure 4£ºButton 2 Status 1 |
Figure 5£ºButton 2 Status 2 |
Figure 6£ºButton 3 Status 1 |
Figure 7£ºButton 3 Status 2 |
Figure 8£ºButton 4 Status 1 |
Figure 9£ºButton 4 Status 2 |
Note: These buttons are for Purple Mountain Hotel.
Make Flash:
1: Open Flash, establish a new flash document.
2: Select file>import>import to library.
1: Choose background image and button images, click to import to library.
Figure 11£ºLibrary panel
2: From library panel (select window>library), click&drag background image to layer1, double click name of layer to rename it as
background layer as shown under here:
Figure 12£º Background layer
3: Choose image in background layer, view image size in ¡°properties¡± bar, and remember its width and height.
Figure 13£º Properties panel
4: Click document£¬in ¡°properties¡± tab, click ¡°size¡± button to set it as (974,569).
5: Select image, in ¡°properties¡± tab, set x: y: as 0 as shown in 13.
Make Buttons:
6: Click ¡°insert¡±>¡±New Symbol¡± as shown under here.
Figure 14£º New symbol
7:In the pop-up dialog, choose ¡°button¡±, enter button name¡±button 1¡± and click ¡°OK¡±.
Figure 15£º New button
8: Click ¡°OK¡±, the following dialog pops up.
Figure 16£º Button 1
9: Select ¡°up¡± frame, drag status 1 image of button 1 into document, set its x:y: as (0,0), and then right click ¡°over¡± frame,
choose to ¡°insert key blank frame¡±.
Figure 17£ºInsert Blank Keyframe
10:Insert status 2 image of button 1 into scene, set its x:y: as (0,0).
11: In Purple Mountain Hotel panorama, a pop-up movie shows texts when user places mouse on the button. So we need to establish a new
layer in button 1. Click the button rounded by red circle to establish a new layer and name it as ¡°mouse movie¡±. Then insert blank key
frame in ¡°over¡± status of this layer.
Figure 18£º Establish New Layer
12:Now we need to make a mouse movie (this movie is placed in Symbol MovieClip). Create new symbol>MovieClip, and name it as ¡°mouse
movie¡±.
Figure 19 Mouse movie symbol
13: Click ¡°OK¡± to enter edit interface. In the first frame of layer 1, draw a image as shown below and set its x: y: as (0,0).
Figure 20£º Movie Frame
14: Right click at the 12th frame (you may choose any frame, larger value means slower speed of movie) in layer 1, select ¡°insert key
frame¡± like Figure 21. Then select the first frame and click the image, set x as negative value of width. (Here I use -70)
Figure 21£ºLayer 1
Figure 22: Properties Setting
15: Select any frame before the 12th in layer 1 and right click, select ¡°create Motion Tween¡±.
Figure 23£º Create Motion Tween
16: Establish a new layer named ¡°rectangle¡±. Select the first frame and draw a rectangle. Color code is #395296. Adjust the size and
position of rectangle, and then drag rectangle to layer 1 as shown below.
Figure 24£º Rectangle Layer
17:Select the last frame of rectangle, right click to select ¡°insert new keyframe¡± as shown underhere.
Figure 25£º Insert New keyframe
18: Choose any frame in rectangle layer; right click to insert motion tween. Select both the first and the last frame, select ¡°alpha¡±
in properties and set its value as ¡°59%¡± as shown under here.
19:Select layer 1 to establish a new layer and name it as ¡°texts¡±. Select the last frame to establish a blank keyframe, use text tool
to enter ¡°lobby¡± in documents, finally adjust its position, size and color.
Figure 26£º text layer
20: Choose the last frame of text layer, select menu>motion, enter ¡°stop()¡± in the pop-up dialog.
21:Double click button 1 in library panel to enter editing status of button 1, drag mouse movie from library to the second frame of button 1. Please note the position of cross rounded by a red circle.
Figure 27£º Mouse movie
22: Select mouse movie layer, drag to the behind of layer 1.
23: Right click in layer 1 and the third frame of mouse movie, then select ¡°insert new frame¡±.
24: Select layer 1 and establish a new layer named ¡°color¡±. Insert a key frame in the third frame and draw a color block as shown below:
Figure 28£ºcolor block
25:Adjust position of the color block as shown below:
Figure 29£ºFigure Structure of button 1
26: Complete the button 1.
27: Click scene 1 (as shown in fig 29), enter editing status.
28: Drag button 1 from library panel to the proper position of scene.
Figure 30£º Button 1
29:Repeat the 8-30 steps to make the other 3 buttons. The final effect is as shown below:
30: Now we will add code for these 4 buttons. Select one button and
on (release) {
getURL("Javascript:urlinframe(\"Tourviewer_wanhuaxi.html\",\"pana\",\"\",\"\")");
}
31: Use ¡°CTRL+S¡± to save file and then use ¡°CTRL+ENTER¡± to publish as ¡°.swf¡± file.
32: Flash finishes.
Embed Flash into Webpage:
1: Embed Flash into webpage with webpage editing software.
2: Copy the following codes to the new webpage.
------------------------------------------------------------------
<script language="JavaScript">
<!--
loade=1;
function urlinframe(url,frame,layer,layermode){
//alert(url)
if (layermode!=''&layer!=''){
document.all[layer].style.visibility=layermode;
}
window.frames[frame].location.href = url;
//layermode = 'hidden' or 'visible'
}
//-->
</script>
<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
//The above codes will connect Flash and webpage
<div>
</div>
<div id="Layer1" style="position:absolute; width:1px; height:1px; z-index:2; left: 0px; top: 0px">
<div id="panalay" style="position:absolute; left:100px; top:0px; width:670px; height:440; z-index:1;">
<iframe src="Tourviewer_wanhuaxi.html" name="pana" id="pana" scrolling="no" width="670" height="440" marginwidth="0" marginheight="0" frameborder="0" align="default">
</iframe>
</div>
</div>
//These above codes contain panorama and you may edit it according to your need.
------------------------------------------------------------------
3: Adjust the position of panorama in webpage.
Now, you know the whole process to make Purple Mountain Hotel.
